lucidergs/dragon_fire
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

style: ✨ add HTMX

Browse source
This commit is contained in:
David Bailey 2024-02-12 23:07:58 +01:00
parent a2c6842b71
commit b8e449006b
16 changed files with 299 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

4
www/static/.htaccess
View file

@ -3,9 +3,9 @@ Allow from all
Options +Indexes
<filesMatch ".(flv|gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp)$">
Header set Cache-Control "max-age=315360, public"
Header set Cache-Control "max-age=60, public"
</filesMatch>
<filesMatch ".(js)$">
Header set Cache-Control "max-age=315360, public"
Header set Cache-Control "max-age=60, public"
</filesMatch>

22
www/static/banner.js
View file

@ -61,6 +61,8 @@ class BannerHandler {
}
updateTranslation() {
this.bannerContainerDOM = document.getElementById("main_header")
const bannerTranslateMax = -this.bannerDOM.clientHeight + this.bannerContainerDOM.clientHeight
const bannerPercentageFrom = this.currentBannerData.from || 0;
@ -120,7 +122,7 @@ class BannerHandler {
}
updateTick() {
console.log("tick")
const nextPhase = this.getPhase() % 1;
@ -150,11 +152,17 @@ class BannerHandler {
}
}
var bannerHandler = new BannerHandler(
document.getElementById("main_header"),
document.getElementById("main_banner_img"),
document.getElementById("main_banner_img_link"))
let bannerHandler = null;
bannerHandler.start()
function startBanner() {
if(bannerHandler !== null) {
return;
}
// addEventListener("resize", () => update_banner(banner, banner_container));
bannerHandler = new BannerHandler(
document.getElementById("main_header"),
document.getElementById("main_banner_img"),
document.getElementById("main_banner_img_link"))
bannerHandler.start()
}

130
www/static/dergstyle.css
View file

@ -6,9 +6,11 @@
padding: 0;
}
svg {
.fa-icn {
fill: var(--text_1);
padding-top: 0.1rem;
height: 1em;
vertical-align: -0.125em;
}
body {
@ -175,6 +177,35 @@ a:hover {
background: var(--bg_2);
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: url('/static/three-dots.svg');
background-repeat: no-repeat;
background-position: center;
opacity: 0;
z-index: 10;
pointer-events: none;
transition: opacity 0.2s;
}
body.htmx-request::before {
opacity: 1;
transition-delay: 0.5s;
}
#post_file_bar {
position: sticky;
@ -196,35 +227,14 @@ a:hover {
padding: 0px;
}
#post_file_titles li {
#post_file_titles > li {
padding: 0.2rem 0.8rem;
font-style: bold;
font-size: 1.3rem;
font-size: 1.5rem;
background: var(--highlight_1);
}
#post_file_titles li:hover {
background: var(--highlight_0) !important;
}
#post_file_bar_dirbtn {
margin-left: 0.15rem;
background: var(--bg_2) !important;
}
#post_file_bar #dir_collapse {
display: none;
}
#post_file_bar #dir_collapse:checked + #post_file_bar_dirbtn {
background: var(--highlight_1) !important;
}
.directory {
display: none;
}
#dir_collapse:checked ~ .directory {
display: block;
}
#post_file_path {
width: 100%;
@ -232,6 +242,8 @@ a:hover {
padding-left: 0.5rem;
background: var(--highlight_1);
font-size: 1.1rem;
display: flex;
flex-direction: row;
@ -247,6 +259,76 @@ a:hover {
padding-right: 0.2rem;
}
.navbar-expand {
background-color: var(--bg_3);
border: 0.15rem solid var(--highlight_1);
border-top: none;
border-radius: 0 0 0.2rem 0.2rem;
overflow: clip;
padding-bottom: 0.2rem;
padding-left: 0.3rem;
max-height: 80vh;
overflow-y: scroll;
}
.navbar-full-path {
width: 100%;
font-style: italic;
padding-left: 0.2rem;
display: flex;
flex-direction: row;
list-style-type: none;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.navbar-full-path li {
margin-left: 0.3rem;
}
.navbar-folder-list span, .navbar-folder-list label {
width: 1rem;
display: inline-block;
cursor: pointer;
}
.navbar-folder-list ul, .navbar-folder-list {
list-style: none;
padding-left: 0.4rem;
margin-left: 0.4rem;
border-left: 1px solid var(--text_border);
}
.navbar-folder-list a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.folder-listing input {
display: none;
}
.folder-listing input + ul {
display: none;
}
.folder-listing input:checked + ul {
display: block;
}
#navbar-expand-label {
cursor: pointer;
}
#navbar-expander, .navbar-expand {
display: none;
}
#navbar-expander:checked + .navbar-expand {
display: block;
}
article {
background: var(--bg_3);

1
www/static/htmx.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

15
www/static/three-dots.svg Normal file
View file

@ -0,0 +1,15 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#fff">
<circle cx="15" cy="15" r="15">
<animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"/>
<animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="60" cy="15" r="9" fill-opacity="0.3">
<animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"/>
<animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="105" cy="15" r="15">
<animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"/>
<animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB