MeowcaTheoRange/Clock
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changed poplight behavior when hitting edge.

Browse source
This commit is contained in:
MeowcaTheoRange 2022-09-10 00:01:49 -05:00
parent f782236bf8
commit 0a29d7ad8c
2 changed files with 28 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
index.html
View file

@ -45,7 +45,7 @@
</div>
</div>
<div class="poplight">
<button class="hide material-symbols-outlined" data-title="Toggle Poplight Size" onclick="this.parentElement.classList.toggle('hidden')">unfold_less</button>
<button class="hide material-symbols-outlined" data-title="Toggle Poplight Size" onclick="checkHeight(this.parentElement)">unfold_less</button>
<div class="drag material-symbols-outlined" data-title="Drag Poplight">open_with</div>
<button class="press material-symbols-outlined popped" onclick="this.classList.toggle('popped')"></button>
</div>
@ -198,9 +198,26 @@
<script>
$(".poplight").draggable({
containment: $("#backconstrain"),
handle: "div.drag"
handle: "div.drag",
drag: (e, u) => {
var bottom = ($(window).height() - u.position.top);
if ((bottom < 210 && bottom >= 78) && !u.helper[0].classList.contains("hidden")) {
u.position.top = ($(window).height() - 210);
} else if (bottom < 78) {
u.helper[0].classList.add("hidden");
}
}
});
function checkHeight(el) {
var bottom = ($(window).height() - el.getBoundingClientRect().top);
if (bottom < 210) {
el.classList.add('hidden');
} else {
el.classList.toggle('hidden');
}
}
var elem = document.documentElement;
function openFullscreen() {

14
styles/style.css
View file

@ -20,7 +20,7 @@ body {
#backconstrain {
position: fixed;
height: calc(100vh - 80px);
height: calc(100vh + 128px);
width: calc(100vw - 36px);
left: 20px;
top: 64px;
@ -242,22 +242,26 @@ sep {
overflow: hidden;
}
.poplight button.hide:hover::after {
.poplight button.hide:not(:disabled):hover::after {
background-color: #202020;
color: #FFFFFF;
width: initial;
padding: 8px;
}
.poplight button.hide:focus {
.poplight button.hide:not(:disabled):focus {
background-color: #FFFFFF20;
}
.poplight button.hide:hover {
.poplight button.hide:disabled {
color: #808080;
}
.poplight button.hide:not(:disabled):hover {
background-color: #FFFFFF40;
}
.poplight button.hide:active {
.poplight button.hide:not(:disabled):active {
background-color: #FFFFFF80;
}