From 9a9a1af63e405f52769ad92db11ee002cc1ef76b Mon Sep 17 00:00:00 2001 From: Ivan Reshetnikov Date: Mon, 1 Apr 2024 22:38:23 +0500 Subject: [PATCH] feat: tile mode (#39) Experimental mode for displaying links as tiles. For consistency, I made the globe the default icon. --- assets/css/{index.css => index-common.css} | 44 ++++++++++++---------- assets/css/index-list.css | 12 ++++++ assets/css/index-tiles.css | 37 ++++++++++++++++++ templates/index.html.tmpl | 40 +++++++++++++++----- views/pages/index.go | 27 ++++++++++++- 5 files changed, 130 insertions(+), 30 deletions(-) rename assets/css/{index.css => index-common.css} (68%) create mode 100644 assets/css/index-list.css create mode 100644 assets/css/index-tiles.css diff --git a/assets/css/index.css b/assets/css/index-common.css similarity index 68% rename from assets/css/index.css rename to assets/css/index-common.css index ac84f39..e1283d9 100644 --- a/assets/css/index.css +++ b/assets/css/index-common.css @@ -9,8 +9,29 @@ margin-top: 3em; } -.group { - width: 100%; +@media screen and (min-width: 600px) { + .page { + padding: 2em 10em + } + .row { + gap: 4em; + } +} + +.controls { + display: flex; + flex-wrap: wrap; + gap: 1em; +} + +.controls a { + display: flex; + gap: 8px; + align-items: center; +} + +.controls a img { + filter: invert(100%); } h2 { @@ -18,23 +39,6 @@ h2 { margin-bottom: 6px; } -div > a { - display: flex; - padding-top: 6px; - padding-bottom: 6px; - align-items: center; - gap: 8px; -} - -div > a > img { +img { filter: invert(100%); } - -@media screen and (min-width: 600px) { - .page { - padding: 2em 10em - } - .group { - max-width: 230px; - } -} diff --git a/assets/css/index-list.css b/assets/css/index-list.css new file mode 100644 index 0000000..92da401 --- /dev/null +++ b/assets/css/index-list.css @@ -0,0 +1,12 @@ +.group { + width: 100%; + max-width: max-content; +} + +.links > a { + display: flex; + padding-top: 6px; + padding-bottom: 6px; + align-items: center; + gap: 8px; +} diff --git a/assets/css/index-tiles.css b/assets/css/index-tiles.css new file mode 100644 index 0000000..9a88226 --- /dev/null +++ b/assets/css/index-tiles.css @@ -0,0 +1,37 @@ +.group { + width: 100%; + max-width: max-content; +} + +.links { + width: 100%; + display: flex; + flex-wrap: wrap; + gap: 5px; +} + +.links > a { + display: flex; + flex-direction: column; + justify-content: center; + width: 130px; + height: 130px; + padding-top: 6px; + padding-bottom: 6px; + align-items: center; + gap: 8px; + border: 2px solid #444; + border-radius: 5px; + text-align: center; +} + +.links > a:hover { + border-color: #812abd; + text-decoration: none; +} + +.links img { + flex-grow: 1; + width: 30px; + height: 30px; +} diff --git a/templates/index.html.tmpl b/templates/index.html.tmpl index f3bf377..403d109 100644 --- a/templates/index.html.tmpl +++ b/templates/index.html.tmpl @@ -2,32 +2,54 @@ {{template "head" .}} - + +

{{ .title }}

- {{if not .groups}} -

- You don't have any links. - Go to settings and create one. -

- {{else}} - Settings - {{end}} + +
+ {{if not .groups}} +

+ You don't have any links. + Go to settings and create one. +

+ {{else}} + + Settings + + {{end}} + + {{ if ne .style "list" }} + + List + + {{ end }} + + {{ if ne .style "tiles" }} + + Tiles + + {{ end }} +
{{range .groups}}

{{.Name}}

+
{{range .Links}} {{ if .Icon }} + {{ else }} + {{ end }} {{.Name}} {{end}} +
{{end}}
diff --git a/views/pages/index.go b/views/pages/index.go index 29ff2f0..25320eb 100644 --- a/views/pages/index.go +++ b/views/pages/index.go @@ -2,21 +2,46 @@ package pages import ( "net/http" + "time" "github.com/ordinary-dev/phoenix/database" log "github.com/sirupsen/logrus" ) -func ShowMainPage(w http.ResponseWriter, _ *http.Request) { +func ShowMainPage(w http.ResponseWriter, r *http.Request) { groups, err := database.GetGroupsWithLinks() if err != nil { ShowError(w, http.StatusInternalServerError, err) return } + // Get desired style. + style := r.FormValue("style") + + if style == "tiles" || style == "list" { + // If a valid style is specified in the url - + // save the value in a cookie. + http.SetCookie(w, &http.Cookie{ + Name: "phoenix-style", + Value: style, + Expires: time.Now().Add(time.Hour * 24 * 30 * 12 * 10), + }) + } else { + // The style is not specified or has an incorrect type, check the cookies. + styleCookie, err := r.Cookie("phoenix-style") + if err == nil { + style = styleCookie.Value + } + } + + if style != "tiles" && style != "list" { + style = "list" + } + err = Render("index.html.tmpl", w, map[string]any{ "description": "Self-hosted start page.", "groups": groups, + "style": style, }) if err != nil { log.Error(err)