This commit is contained in:
parent
cf450d063f
commit
c99ac8acd2
|
@ -21,12 +21,52 @@ body {
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.burgerDropdown {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 2;
|
||||||
|
left: 7px;
|
||||||
|
top: 30px;
|
||||||
|
width: 160px;
|
||||||
|
height: 90px;
|
||||||
|
|
||||||
|
background-color: rgba(233, 233, 233, 0.5);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
|
||||||
|
border: solid;
|
||||||
|
border-color: #dadada;
|
||||||
|
border-width: 1px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.burgerDropdown a {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 14px - 4px - 7px);
|
||||||
|
color: black;
|
||||||
|
background-color: #ffffff;
|
||||||
|
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
margin: 7px;
|
||||||
|
padding-left: 7px;
|
||||||
|
|
||||||
|
border: solid;
|
||||||
|
border-color: #dadada;
|
||||||
|
border-width: 1px;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.topBar p {
|
.topBar p {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topBar .logo {
|
.topBar .logo {
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topBar .usernameBox {
|
.topBar .usernameBox {
|
||||||
|
|
|
@ -27,6 +27,8 @@ let notesDiv = document.getElementById("notesDiv")
|
||||||
let newNote = document.getElementById("newNote")
|
let newNote = document.getElementById("newNote")
|
||||||
let noteBox = document.getElementById("noteBox")
|
let noteBox = document.getElementById("noteBox")
|
||||||
let loadingStuff = document.getElementById("loadingStuff")
|
let loadingStuff = document.getElementById("loadingStuff")
|
||||||
|
let burgerDropdown = document.getElementById("burgerDropdown")
|
||||||
|
let burgerButton = document.getElementById("burgerButton")
|
||||||
|
|
||||||
for (let i = 0; i < 40; i++) {
|
for (let i = 0; i < 40; i++) {
|
||||||
notesDiv.appendChild(loadingStuff.cloneNode())
|
notesDiv.appendChild(loadingStuff.cloneNode())
|
||||||
|
@ -290,3 +292,17 @@ newNote.addEventListener("click", (event) => {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
document.body.addEventListener("click", (event) => {
|
||||||
|
if (event.clientX > 100) {
|
||||||
|
burgerDropdown.classList.add("hidden")
|
||||||
|
}
|
||||||
|
if (event.clientY > 50) {
|
||||||
|
burgerDropdown.classList.add("hidden")
|
||||||
|
}
|
||||||
|
});
|
||||||
|
burgerButton.addEventListener("click", (event) => {
|
||||||
|
burgerDropdown.classList.remove("hidden")
|
||||||
|
|
||||||
|
burgerDropdown.style.left = String(event.clientX) + "px"
|
||||||
|
burgerDropdown.style.top = String(event.clientY) + "px"
|
||||||
|
});
|
|
@ -14,7 +14,7 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="topBar">
|
<div class="topBar">
|
||||||
<p class="logo">burgernotes</p>
|
<p class="logo" id="burgerButton">burgernotes</p>
|
||||||
<p id="usernameBox" class="usernameBox"></p>
|
<p id="usernameBox" class="usernameBox"></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -25,6 +25,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="burgerDropdown hidden" id="burgerDropdown">
|
||||||
|
<a href="/">burgernotes</a><br><br>
|
||||||
|
<a href="/" class="hidden">:3</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="optionsCoverDiv" class="optionsCoverDiv hidden">
|
<div id="optionsCoverDiv" class="optionsCoverDiv hidden">
|
||||||
<div class="optionsDiv">
|
<div class="optionsDiv">
|
||||||
<button class="exit" id="exitThing">X</button>
|
<button class="exit" id="exitThing">X</button>
|
||||||
|
|
Loading…
Reference in New Issue