From d1190c4e88965b59ddfa0fa49e6f39a04b1a3f4c Mon Sep 17 00:00:00 2001
From: DutchEllie <personal@quenten.nl>
Date: Wed, 22 Jun 2022 13:45:43 +0200
Subject: [PATCH] MOBILE
---
src/menu.go | 64 +++++++++++++++++++++++++++++++++-----------
ui/menu.go | 2 ++
web/static/style.css | 52 ++++++++++++++++++++++++++++-------
3 files changed, 94 insertions(+), 24 deletions(-)
diff --git a/src/menu.go b/src/menu.go
index dc10c37..a712312 100644
--- a/src/menu.go
+++ b/src/menu.go
@@ -39,22 +39,23 @@ func (m *menu) Render() app.UI {
Class("navbar").
Body(
app.Ul().Body(
- app.Li().Body(
- app.A().Href("/").Text("Home"),
- ),
- app.Li().Body(
- app.A().Href("/about").Text("About"),
- ),
- app.Li().Body(
- app.A().Href("/galaxies").Text("Galaxies"),
- ),
- app.Li().Body(
- app.A().Href("/music").Text("Music"),
- ),
+ newMenuLink().
+ Link("/").
+ Text("Home"),
+ newMenuLink().
+ Link("/about").
+ Text("About"),
+ newMenuLink().
+ Link("/galaxies").
+ Text("Galaxies"),
+ newMenuLink().
+ Link("/music").
+ Text("Music"),
// Disabled for now since there are none anyway
- app.Li().Body(
- app.A().Href("/blog").Text("Blog"),
- ).Style("display", "none"),
+ app.Li().
+ Body(
+ app.A().Href("/blog").Text("Blog"),
+ ).Style("display", "none"),
),
app.If(m.updateAvailable,
app.Div().Body(
@@ -74,3 +75,36 @@ func (m *menu) Render() app.UI {
func (m *menu) onUpdateClick(ctx app.Context, e app.Event) {
ctx.Reload()
}
+
+type menuLink struct {
+ app.Compo
+
+ IText string
+ ILink string
+}
+
+func newMenuLink() *menuLink {
+ return &menuLink{}
+}
+
+func (m *menuLink) Text(v string) *menuLink {
+ m.IText = v
+ return m
+}
+
+func (m *menuLink) Link(v string) *menuLink {
+ m.ILink = v
+ return m
+}
+
+func (m *menuLink) Render() app.UI {
+ return app.A().
+ Class("menuitem-link").
+ Href(m.ILink).
+ Body(app.Div().
+ Class("menuitem").
+ Body(app.Span().
+ Class("menuitem-text").
+ Text(m.IText)),
+ )
+}
diff --git a/ui/menu.go b/ui/menu.go
index 40c369e..496f550 100644
--- a/ui/menu.go
+++ b/ui/menu.go
@@ -98,9 +98,11 @@ func (m *menu) Render() app.UI {
return app.Div().
ID(m.Iid).
Class(m.Iclass).
+ Style("height", "100%").
Body(
app.Div().
//Style("display", "flex").
+ Style("display", visible(!m.hideMenu)).
Style("width", "100%").
Style("height", "100%").
Style("overflow", "hidden").
diff --git a/web/static/style.css b/web/static/style.css
index 66f02e7..87d64b8 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -1,18 +1,12 @@
html {
/* overflow-y: scroll; */
margin: 0;
- height: 100%;
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
-}
-
-html::-webkit-scrollbar {
- display: none;
+ height: 99%;
}
body {
margin: 0;
- height: 100%;
+ height: 99%;
background-image: url(images/background_star.gif);
}
@@ -64,6 +58,7 @@ body {
}
.main {
+ display: flex;
margin-top: 5px;
width: 900px;
position: relative;
@@ -82,7 +77,7 @@ body {
.navbar a, a:link, a:visited{
text-decoration: none;
- color:rgb(252, 230, 255)
+ color:#fce6ff
}
.left {
@@ -366,8 +361,12 @@ div.comment-message p{
.header {
font-size: 10vw;
height: fit-content;
+ flex: 0 1 auto;
}
+
.main {
+ display: flex;
+ flex-flow: column;
padding-left: 5px;
padding-right: 5px;
width: 100%;
@@ -392,5 +391,40 @@ div.comment-message p{
z-index: 1;
max-width: unset;
width: 100%;
+ flex: 1 1 auto;
+ }
+
+ .navbar {
+ height: 100%;
+ display: flexbox;
+ flex-direction: column;
+ }
+
+ .navbar ul {
+ padding-inline-end: 40px;
+ }
+
+ .menuitem {
+ padding: 3.5mm 10px;
+ margin-bottom: 10px;
+ min-width: 65px;
+ flex: 1 1 auto;
+ border: 0px none;
+ border-radius: 6px;
+ background-color: #4974a5;
+ text-align: center;
+ vertical-align: middle;
+ }
+
+ .menuitem-text {
+
+ }
+
+ .menuitem-link {
+ list-style-type: none;
+ }
+
+ .menuitem-link a {
+ text-align: center;
}
}