sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing app menu styling and functionality

Browse Source
This commit is contained in:
metacryst
2025-10-18 23:02:30 -05:00
parent 80015f2435
commit 5949c006f5
2 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
ui/site/components/AppMenu.js
View File

@@ -3,16 +3,40 @@ css(`
color: var(--tan);
transform: translateX(-50%);
transition: transform .3s;
display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em;
display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 3em;
}
app-menu.minimized {
color: var(--accent);
transform: translate(-50%, 65%);
border: 1px solid var(--accent);
padding-left: 2em; padding-right: 2em;
padding-top: 0.5em;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 4em;
bottom: 1em;
border-radius: 12px;
}
app-menu p {
cursor: default;
transition: transform .3s, text-decoration .3s;
padding: 0.5em;
border-radius: 5px;
text-underline-offset: 5px;
}
app-menu p:hover {
text-decoration: underline;
transform: translateY(-5%)
}
app-menu p.touched {
text-decoration: underline;
transform: translateY(0%)
}
app-menu p.selected {
text-decoration: underline;
transform: translateY(-10%)
}
`)
registerShadow(
@@ -20,6 +44,7 @@ registerShadow(
class AppMenu extends Shadow {
render() {
p("Forum")
p("Messages")
p("Market")
p("Security")
@@ -46,12 +71,12 @@ class AppMenu extends Shadow {
target.classList.remove("touched")
if(target.classList.contains("selected")) {
target.classList.remove("selected")
$("app-manu").classList.remove("minimized")
$("app-menu").classList.remove("minimized")
$("#divider").classList.remove("minimized")
$("app-window").close()
} else {
target.classList.add("selected")
$("app-manu").classList.add("minimized")
$("app-menu").classList.add("minimized")
$("#divider").classList.add("minimized")
$("app-window").open(target.innerText)
}

20
ui/site/index.html
View File

@@ -24,26 +24,6 @@
#divider.minimized {
display: none;
}
.app {
cursor: default;
transition: transform .3s, text-decoration .3s;
padding: 0.5em;
border-radius: 5px;
text-underline-offset: 5px;
}
.app:hover {
text-decoration: underline;
transform: translateY(-5%)
}
.app.touched {
text-decoration: underline;
transform: translateY(0%)
}
.app.selected {
text-decoration: underline;
transform: translateY(-10%)
}
</style>
<script src="_/code/quill.js"></script>
<script type="module">