mirror of
https://github.com/ordinary-dev/phoenix
synced 2024-09-19 19:30:28 +05:00
feat: tile mode (#39)
Experimental mode for displaying links as tiles. For consistency, I made the globe the default icon.
This commit is contained in:
parent
101202b128
commit
9a9a1af63e
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
12
assets/css/index-list.css
Normal file
12
assets/css/index-list.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
37
assets/css/index-tiles.css
Normal file
37
assets/css/index-tiles.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -2,33 +2,55 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<link rel="stylesheet" href="assets/css/index.css" />
|
||||
<link rel="stylesheet" href="/assets/css/index-common.css" />
|
||||
<link rel="stylesheet" href="/assets/css/index-{{ .style }}.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<h1>{{ .title }}</h1>
|
||||
|
||||
<div class="controls">
|
||||
{{if not .groups}}
|
||||
<p>
|
||||
You don't have any links.
|
||||
Go to <a href="/settings" style="text-decoration: underline">settings</a> and create one.
|
||||
</p>
|
||||
{{else}}
|
||||
<a href="/settings">Settings</a>
|
||||
<a href="/settings">
|
||||
<img src="/assets/icons/solid/gear.svg" width="20" height="20" /> Settings
|
||||
</a>
|
||||
{{end}}
|
||||
|
||||
{{ if ne .style "list" }}
|
||||
<a href="/?style=list">
|
||||
<img src="/assets/icons/solid/list.svg" width="20" height="20" /> List
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if ne .style "tiles" }}
|
||||
<a href="/?style=tiles">
|
||||
<img src="/assets/icons/solid/table-cells-large.svg" width="20" height="20" /> Tiles
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{{range .groups}}
|
||||
<div class="group">
|
||||
<h2>{{.Name}}</h2>
|
||||
<div class="links">
|
||||
{{range .Links}}
|
||||
<a href="{{.Href}}" target="_blank" rel="noreferrer">
|
||||
{{ if .Icon }}
|
||||
<img src="/assets/icons/{{.Icon}}.svg" width="20" height="20" />
|
||||
{{ else }}
|
||||
<img src="/assets/icons/solid/globe.svg" width="20" height="20" />
|
||||
{{ end }}
|
||||
{{.Name}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue