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

styling

Browse Source
This commit is contained in:
metacryst
2025-10-13 00:08:05 -05:00
parent ac93ac5c4e
commit a2f4206cf9
4 changed files with 86 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
ui/site/index.html
View File

@@ -22,7 +22,18 @@
}
#menu-bar {
color: var(--tan)
color: var(--tan);
transform: translateX(-50%);
transition: transform .3s;
}
#menu-bar.minimized {
color: var(--accent);
transform: translate(-50%, 55%);
border: 1px solid var(--accent);
padding-left: 2em; padding-right: 2em;
}
#divider.minimized {
display: none;
}
.app {
@@ -36,12 +47,21 @@
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/util.js"></script>
<script type="module">
import "./components/ProfileButton.js"
import "./components/InputBox.js"
import "./components/Sidebar.js"
import "./components/AppWindow.js"
import ConnectionHandler from "./ws/ConnectionHandler.js"
window.ConnectionHandler = new ConnectionHandler()
@@ -64,16 +84,48 @@
<body>
<div id="loading-wrapper" style="display: none;">
<div id="painting"></div>
<app-window></app-window>
<profile-button style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw"></profile-button>
<img src="_/icons/logo.svg" style="width: 3.5em; position: fixed; left: 3em; top: 2em;"/>
<img src="_/images/divider.svg" style="width: 40vw; position: fixed; bottom: 2em; left: 50vw; transform: translateX(-50%)"/>
<div id="menu-bar" style="display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em; transform: translateX(-50%)">
<div id="menu-bar" style="display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em;">
<p class="app">Forum</p>
<p class="app">Messages</p>
<p class="app">Market</p>
<p class="app">Security</p>
<p class="app">Jobs</p>
</div>
<img id="divider" src="_/images/divider.svg" style="width: 40vw; position: fixed; bottom: 2em; left: 50vw; transform: translateX(-50%)"/>
<script>
Array.from(document.querySelectorAll(".app")).forEach((el) => {
el.addEventListener("mousedown", (e) => {
el.classList.add("touched")
})
})
window.addEventListener("mouseup", (e) => {
let target = e.target
if(!target.matches("p.app")) {
return
}
$("p.app").forEach((el) => {
if(el.innerText !== target.innerText) {
el.classList.remove("selected")
}
})
target.classList.remove("touched")
if(target.classList.contains("selected")) {
target.classList.remove("selected")
$("#menu-bar").classList.remove("minimized")
$("#divider").classList.remove("minimized")
$("app-window").close()
} else {
target.classList.add("selected")
$("#menu-bar").classList.add("minimized")
$("#divider").classList.add("minimized")
$("app-window").open(target.innerText)
}
})
</script>
</div>
</body>
</html>