gochan/gochan
1
0
Fork 0
mirror of https://github.com/Eggbertx/gochan.git synced 2025-09-03 21:46:22 -07:00
Code Releases Activity

Add hide block open/close animations

Browse source
This commit is contained in:
Eggbertx 2025-02-07 22:36:24 -08:00
parent 83c82cba41
commit eb59ef1f1e
5 changed files with 100 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/sass/global.scss
View file

@ -5,6 +5,7 @@
@import 'global/qr';
@import "global/watcher";
@import 'global/bans';
@import 'global/animations';
.increase-line-height {
line-height: 1.5;

21
frontend/sass/global/_animations.scss Normal file
View file

@ -0,0 +1,21 @@
@keyframes slideopen {
from {
transform: scale(1, 0);
transform-origin: top center;
}
to {
transform: scale(1, 1);
transform-origin: top center;
}
}
@keyframes slideclose {
from {
transform: scale(1, 1);
transform-origin: top center;
}
to {
transform: scale(1, 0);
transform-origin: top center;
}
}

15
frontend/sass/global/_img.scss
View file

@ -1,3 +1,5 @@
@import 'animations';
#boardmenu-bottom {
margin-top: 16px;
}
@ -221,11 +223,22 @@ div.inlinepostprev {
}
.hideblock {
border: 2px solid black;
border: 1px solid black;
background: rgba(0, 0, 0, 0.1);
}
.hideblock.open {
animation: slideopen 0.25s;
}
.hideblock.close {
animation: slideclose 0.25s;
}
.hideblock.hidden {
display: none;
}
.hideblock-button {
display: block;
}

17
frontend/ts/postutil.ts
View file

@ -232,11 +232,22 @@ export function prepareHideBlocks() {
const $el = $(el);
const $button = $("<button />").prop({
class: "hideblock-button",
}).text($el.hasClass("hidden") ? "Show" : "Hide").on("click", e => {
}).text($el.hasClass("open") ? "Hide" : "Show").on("click", e => {
e.preventDefault();
$el.toggleClass("hidden");
$button.text($el.hasClass("hidden") ? "Show" : "Hide");
const hidden = $el.hasClass("hidden");
$el.removeClass("close");
$button.text(hidden ? "Hide" : "Show");
if(hidden) {
$el.removeClass("hidden").addClass("open");
} else {
$el.addClass("close").removeClass("open");
}
}).insertBefore($el);
$el.on("animationend", () => {
if($el.hasClass("close")) {
$el.addClass("hidden").removeClass("close");
}
});
});
}

51
html/css/global.css
View file

@ -1,3 +1,23 @@
@keyframes slideopen {
from {
transform: scale(1, 0);
transform-origin: top center;
}
to {
transform: scale(1, 1);
transform-origin: top center;
}
}
@keyframes slideclose {
from {
transform: scale(1, 1);
transform-origin: top center;
}
to {
transform: scale(1, 0);
transform-origin: top center;
}
}
#boardmenu-bottom {
margin-top: 16px;
}
@ -221,7 +241,16 @@ div.inlinepostprev {
}
.hideblock {
border: 2px solid black;
border: 1px solid black;
background: rgba(0, 0, 0, 0.1);
}
.hideblock.open {
animation: slideopen 0.25s;
}
.hideblock.close {
animation: slideclose 0.25s;
}
.hideblock.hidden {
@ -609,6 +638,26 @@ img#banpage-image {
margin: 4px 8px 8px 4px;
}
@keyframes slideopen {
from {
transform: scale(1, 0);
transform-origin: top center;
}
to {
transform: scale(1, 1);
transform-origin: top center;
}
}
@keyframes slideclose {
from {
transform: scale(1, 1);
transform-origin: top center;
}
to {
transform: scale(1, 0);
transform-origin: top center;
}
}
.increase-line-height {
line-height: 1.5;
}