VnPower/PixivFE
1
0
Fork 0
mirror of https://codeberg.org/VnPower/PixivFE synced 2024-12-06 19:16:23 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add loading bar (ugly)

Browse Source
This commit is contained in:
iacore
2024-02-12 19:54:03 +00:00
parent b462a8aad9
commit 4d455f395c
4 changed files with 68 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/css/style.css
+27 -8
View File
@@ -1,7 +1,3 @@
:root {
--small-breakpoint: 440px;
}
html {
font-size: 62.5%;
}
@@ -15,8 +11,9 @@ body {
font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP";
margin-bottom: 10px;
}
@media (min-width: var(--small-breakpoint)) {
body {
@media (min-width: 440px) {
main {
margin-inline: 5px;
}
}
@@ -204,6 +201,27 @@ input[type=submit][hidden] {
filter: brightness(1);
}
#loading-indicator {
z-index: 2;
isolation: isolate;
position: sticky;
top: 0;
height: 4px;
margin-bottom: -4px;
}
#loading-indicator.htmx-request {
background-image: repeating-linear-gradient(90deg, #118bee, #fff, #118bee, #fff, #118bee);
animation: rolling-something 3s linear infinite;
}
@keyframes rolling-something {
0% {
background-position-x: -33vw;
}
100% {
background-position-x: 100vw;
}
}
nav {
margin-top: 15px;
margin-bottom: 15px;
@@ -243,6 +261,8 @@ nav .navigation-wrapper .sidebar-label {
cursor: pointer;
}
nav .navigation-wrapper .sidebar {
z-index: 1;
isolation: isolate;
background-color: #131516;
position: absolute;
padding-top: 6px;
@@ -250,7 +270,6 @@ nav .navigation-wrapper .sidebar {
width: 220px;
transform: translateX(-220px);
transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
z-index: 999;
}
nav .navigation-wrapper .sidebar br {
align-self: stretch;
@@ -300,7 +319,7 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img {
margin-inline: auto;
padding-inline: 4px;
}
@media (min-width: var(--small-breakpoint)) {
@media (min-width: 440px) {
.container {
padding-inline: 10px;
}
views/css/style.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAgBA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA,kBA5BG;EA6BH,OA3BG;EA6BH;EACA,aApBY;EAsBZ;;AACA;EAXF;IAYI;;;;AAIJ;EACE,OArCK;EAsCL;;;AAGF;AACA;EACI;;;AAKJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBA1DG;EA2DH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAvGc;EAwGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBApHa;EAqHb,OAnHa;;;AAsHf;AAAA;EAEE,kBA1Ha;;;AA6Hf;EACE;EACA;;;AAGF;EACE;EACA,eA/Hc;EAgId;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eApJc;EAqJd;EACA;EACA;EACA,aAvJY;EAwJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aA3JY;;;AA8Jd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBA3LK;EA4LL;EACA,OA/LG;;;AAkML;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBAjOW;EAkOX;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OAvPH;;AA4PC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE,kBAxRD;EAyRC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OA9SL;EA+SK;EACA;EACA;;AAEA;EACE,kBArTG;;AAwTL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OAvYC;;AA2YD;AAAA;EACE,OAhYgB;EAiYhB,QAjYgB;;AAoYlB;AAAA;EACE,WArYgB;;AAwYlB;AAAA;EACE,WAzYgB;;AA0YhB;AAAA;EACE,WA5Yc;;AAkZlB;AAAA;EACE,OAnZgB;EAoZhB,QApZgB;;AAuZlB;AAAA;EACE,WAxZgB;;AA2ZlB;AAAA;EACE,WA5ZgB;;AA8ZhB;AAAA;EACE,WA/Zc;;AAoapB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBA/cI;EAgdJ,OAndH;;AAsdC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OA9dH;EA+dG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eA3eU;;AA8eZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBAjiBa;EAkiBb,eA7hBc;EA8hBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OAtkBK;;AA4kBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OAlmBI;;AAqmBN;EACE,OAvmBD;EAwmBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OAnpBD;;AAqpBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;;;AAKN;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBAjwBa;EAkwBb;;AAEA;EACE;EACA,OArwBC;EAswBD,kBAvwBW;EAwwBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBAlzBa;EAmzBb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"}
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAiBA;EACE;;;AAGF;EACE;EACA;EAEA,kBAzBG;EA0BH,OAxBG;EA0BH;EACA,aAjBY;EAmBZ;;;AAIA;EADF;IAEI;;;;AAIJ;EACE,OArCK;EAsCL;;;AAGF;AACA;EACI;;;AAKJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBA1DG;EA2DH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAvGc;EAwGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBApHa;EAqHb,OAnHa;;;AAsHf;AAAA;EAEE,kBA1Ha;;;AA6Hf;EACE;EACA;;;AAGF;EACE;EACA,eA/Hc;EAgId;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eApJc;EAqJd;EACA;EACA;EACA,aAvJY;EAwJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aA3JY;;;AA8Jd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBA3LK;EA4LL;EACA,OA/LG;;;AAkML;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBAjOW;EAkOX;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EAGE;EACA;;;AAGJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OA9QH;;AAmRC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA,kBAjTD;EAkTC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OAtUL;EAuUK;EACA;EACA;;AAEA;EACE,kBA7UG;;AAgVL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OA/ZC;;AAmaD;AAAA;EACE,OAxZgB;EAyZhB,QAzZgB;;AA4ZlB;AAAA;EACE,WA7ZgB;;AAgalB;AAAA;EACE,WAjagB;;AAkahB;AAAA;EACE,WApac;;AA0alB;AAAA;EACE,OA3agB;EA4ahB,QA5agB;;AA+alB;AAAA;EACE,WAhbgB;;AAmblB;AAAA;EACE,WApbgB;;AAsbhB;AAAA;EACE,WAvbc;;AA4bpB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAveI;EAweJ,OA3eH;;AA8eC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAtfH;EAufG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eAngBU;;AAsgBZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBAzjBa;EA0jBb,eArjBc;EAsjBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OA9lBK;;AAomBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OA1nBI;;AA6nBN;EACE,OA/nBD;EAgoBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OA3qBD;;AA6qBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;;;AAKN;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBAzxBa;EA0xBb;;AAEA;EACE;EACA,OA7xBC;EA8xBD,kBA/xBW;EAgyBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBA10Ba;EA20Bb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"}
views/css/style.scss
+31 -7
View File
@@ -13,10 +13,7 @@ $color-shadow: #bbbbbb20;
$font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP";
$small-artwork-width: 184px;
$large-artwork-width: 288px;
:root {
--small-breakpoint: 440px;
}
$small-breakpoint: 440px;
html {
font-size: 62.5%;
@@ -33,7 +30,10 @@ body {
font-family: $font-family;
margin-bottom: 10px;
@media(min-width: var(--small-breakpoint)) {
}
main {
@media (min-width: $small-breakpoint) {
margin-inline: 5px;
}
}
@@ -229,6 +229,29 @@ input[type="submit"][hidden] {
}
}
#loading-indicator {
z-index: 2;
isolation: isolate;
position: sticky;
top: 0;
height: 4px;
margin-bottom: -4px;
&.htmx-request {
// background: $link;
// https://stackoverflow.com/questions/63787241/css-how-to-create-an-infinitely-moving-repeating-linear-gradient/63787567#63787567
background-image: repeating-linear-gradient(90deg, $link, $fg, $link, $fg, $link);
animation: rolling-something 3s linear infinite;
}
}
@keyframes rolling-something {
0% {
background-position-x: -33vw
}
100% {
background-position-x: 100vw
}
}
nav {
margin-top: 15px;
margin-bottom: 15px;
@@ -278,6 +301,8 @@ nav {
}
.sidebar {
z-index: 1;
isolation: isolate;
background-color: $bg;
position: absolute;
padding-top: 6px;
@@ -285,7 +310,6 @@ nav {
width: 220px;
transform: translateX(-220px);
transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
z-index: 999;
br {
align-self: stretch;
@@ -358,7 +382,7 @@ nav {
max-width: 1200px;
margin-inline: auto;
padding-inline: 4px;
@media(min-width: var(--small-breakpoint)) {
@media (min-width: $small-breakpoint) {
padding-inline: 10px;
}
}
views/layout.jet.html
+9 -2
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8" />
<meta name="description" content="View this page on PixivFE." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'" />
<meta name="referrer" content="no-referrer, same-origin" />
<link href="/css/style.css" rel="stylesheet" />
<script src="/js/htmx@1.9.10.min.js" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"></script>
@@ -32,7 +32,14 @@
{{ end }}
</head>
<body hx-boost="true" hx-target="main" hx-select="main">
<body hx-boost="true" hx-target="main" hx-select="main" hx-indicator="#loading-indicator">
<script>
document.body.addEventListener('htmx:beforeOnLoad', function (evt) {
evt.detail.shouldSwap = true;
evt.detail.isError = false;
});
</script>
<div id="loading-indicator"></div>
<nav>
<div class="navigation-wrapper">
<span>