MOBILE
continuous-integration/drone/push Build is passing Details

This commit is contained in:
DutchEllie 2022-06-22 13:45:43 +02:00
parent d66bb5afeb
commit d1190c4e88
Signed by: DutchEllie
SSH Key Fingerprint: SHA256:dKq6ZSgN5E3Viqrw/+xAdf2VdR6hdRGNyrYqXXwfjTY
3 changed files with 94 additions and 24 deletions

View File

@ -39,20 +39,21 @@ 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.Li().
Body(
app.A().Href("/blog").Text("Blog"),
).Style("display", "none"),
),
@ -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)),
)
}

View File

@ -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").

View File

@ -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;
}
}