From c7c5b983c68f531a4b6b83214f769981478c0143 Mon Sep 17 00:00:00 2001 From: Flummi Date: Tue, 29 Mar 2022 14:33:01 +0200 Subject: [PATCH] fix navbar & ranking --- public/s/css/f0ck.css | 162 +++++++++++++++++++++++++++++++++--------- views/item.html | 2 +- views/ranking.html | 75 +++++++++---------- 3 files changed, 169 insertions(+), 70 deletions(-) diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css index 879cbdc..273dc1d 100644 --- a/public/s/css/f0ck.css +++ b/public/s/css/f0ck.css @@ -177,7 +177,7 @@ html[theme="paper"] { --posts-meta-bg: #000000db; --badge-sfw: #68a728; --badge-nsfw: #a72828; - --badge-tag: #9f9a9a; + --badge-tag: #000000; --scrollbar-color: #6c6c6c; --scroller-bg: #424242; } @@ -235,11 +235,15 @@ html[theme="paper"] .metadata { color: var(--black); } -html[theme="paper"] .navbar-brand:hover { +html[theme="paper"] .navbar-brand { background: var(--black); color: var(--white) !important; } +html[theme="paper"] a.removetag { + color: var(--white) !important; +} + html[theme="paper"] .navbar { border-bottom: 1px solid var(--black); } @@ -409,11 +413,6 @@ html[theme="iced"] .navbar-brand:hover { /* https://www.dafont.com/vcr-osd-mono.font */ } -html { - height: 100%; - overflow: overlay; -} - html, body { background-color: var(--bg); color: var(--white); @@ -423,6 +422,7 @@ html, body { scrollbar-color: var(--scrollbar-color) transparent; scrollbar-width: thin; overscroll-behavior-y: contain; + overflow: overlay; } .noscript-badge { @@ -525,9 +525,8 @@ div#posts > a:hover::after { z-index: 3; font-family: var(--font); text-transform: uppercase; - display: flex; - flex-wrap: wrap; - /* justify-content: space-between; */ + display: grid; + grid-template-columns: auto 1fr 0fr; justify-content: start; border-bottom: 1px solid var(--nav-border-color); } @@ -630,10 +629,47 @@ span.f0ck { content: "\00a0\25bc"; } +.mandy { + visibility: hidden; +} + +@media (max-width: 444px) { + .metadata { + margin-bottom: 45px; + } + + .embed-responsive-16by9::before { + padding-top: 75% !important; + } +} + @media (max-width: 768px) { .nav-link[data-toggle="dropdown"]::after { content: "" !important; } + + .navbar { + display: grid !important; + grid-template-columns: 1fr !important; + grid-template-rows: auto !important; + grid-template-areas: unset !important; + } + + .navbar-brand { + grid-area: unset!important; + } + + .navigation-links { + grid-row: 2; + } + + .navbar-expand-lg .navbar-nav { + justify-content: center; + } + + #navbarSupportedContent { + grid-row: 3; + } } span.placeholder { @@ -698,34 +734,59 @@ span.placeholder { width: 100%; display: inline-block; } -/* Navbar media queries */ -/* @media(max-width: 360px) { - .navbar { - justify-content: space-between; - } -} */ + @media (max-width: 1056px) { + /* navbar-fix mobile */ .navbar { - width: 100%; - display: flex; + display: grid; + grid-template-rows: 1fr 1fr; + grid-template-areas: 'f0ck f0ck f0ck'; + } + + .navbar-brand { + grid-area: f0ck; + } + + .pagination-container-fluid { justify-content: center; } - .pagination-wrapper { - width: 100%; - justify-content: space-evenly; - } - .pagination > a, .pagination > span { - font-size: 10px !important; - margin-right: 0px; - padding: 5px !important; - line-height: 1; - margin: 0; + + /* needs rework!!!! */ + .pagination a:nth-last-child(2), .pagination a:nth-last-child(3), + .pagination a:nth-child(2), .pagination a:nth-child(3) { + display: none; } + /* pls */ + html, body { text-align: center; } } +@media (max-width: 1325px) { + .ranking { + grid-template-columns: 1fr 1fr !important; + } + + .by-user, .by-stats, .by-hoster { + grid-column: unset !important; + grid-row: unset !important; + } +} + +@media (max-width: 905px) { + .ranking { + display: flex !important; + flex-flow: column; + justify-content: center !important; + } + + .ranking div { + display: flex; + flex-flow: column; + } +} + .media-object { text-align: center; align-self: center; @@ -742,6 +803,7 @@ span.placeholder { display: flex; background: var(--pagination-background); border: 1px solid var(--pagination-border-color); + width: 100%; } .pagination-container-fluid { @@ -761,7 +823,7 @@ span.placeholder { .pagination > a, .pagination > span { float: left; - padding: 0 10px; + padding: 0 5px; min-width: 17px; font-size: 12px; font-weight: 500; @@ -825,6 +887,8 @@ span.placeholder { width: 100%; margin-right: auto; margin-left: auto; + z-index: 1; + position: relative; } .index-container { @@ -1266,12 +1330,20 @@ canvas { } /* tags */ -span#tags { +/*span#tags { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; line-height: 1.4; +}*/ +span#tags { + display: flex; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + line-height: 1.4; + padding: 5px; } span#tags > span { @@ -1374,7 +1446,7 @@ div.logwrap > p { table.table { border-collapse: collapse; margin: 25px 0; - min-width: 400px; + min-width: max-content; } table.table thead tr { text-align: left; @@ -1390,6 +1462,32 @@ table.table th, table.table td { table.table tbody tr:nth-of-type(odd) { background-color: var(--badge-tag); } +.topf0ckers { + text-align: center; + padding: 15px; + margin: 5px; +} +.ranking { + display: grid; + grid-template-columns: auto; + justify-content: center; +} +.ranking div { + padding: 15px; + margin: 5px; + background: var(--nav-bg); + border: 1px solid black; + border-radius: 3px; +} +.by-user { + grid-column: 1; +} +.by-stats { + grid-column: 3; +} +.by-hoster { + grid-column: 2; +} /* tags */ #tags .badge > a:first-child { @@ -1512,7 +1610,7 @@ table.table tbody tr:nth-of-type(odd) { } .timeago:hover { - cursor: pointer; /* absoluter shit */ + cursor: pointer; } /* buttons */ diff --git a/views/item.html b/views/item.html index bbd32cc..0174bd4 100644 --- a/views/item.html +++ b/views/item.html @@ -67,7 +67,7 @@ @if(typeof item.tags !== "undefined") @each(item.tags as tag) - {!! tag.tag !!}@if(session) ×@endif + {!! tag.tag !!}@if(session) ×@endif @endeach @endif diff --git a/views/ranking.html b/views/ranking.html index 8b69fab..d400dd7 100644 --- a/views/ranking.html +++ b/views/ranking.html @@ -1,39 +1,40 @@ @include(snippets/header) -

Ranking lol

-

tags by user

- - - - - - - - - - @for(let i = 0; i < list.length; i++) - - - - - - @endfor - -
rankusername# tags placed
{{ i + 1 }}{!! list[i].user !!}{{ list[i].count }}
-

tag stats

- - - - - - -
total{{ stats.total }}
tagged{{ stats.tagged }}
untagged{{ stats.untagged }}
SFW{{ stats.sfw }}
NSFW{{ stats.nsfw }}
-

top {{ hoster.length }} hoster

- - @each(hoster as host) - - - - - @endeach -
{{ host.part.length ? host.part : "Telegram" }}{{ host.c }}
+
+

Top f0ckers of all time
- Ranking -

+
+
+
+

Biggest taggers

+ + + @for(let i = 0; i < list.length; i++) + + + + + + + @endfor + +
{{ i + 1 }}{!! list[i].user !!}{{ list[i].count }}
+
+
+

Top {{ hoster.length }} hoster

+ + @each(hoster as host) + + @endeach +
{{ host.part.length ? host.part : "Telegram" }}{{ host.c }}
+
+
+

Tag stats

+ + + + + + +
total{{ stats.total }}
tagged{{ stats.tagged }}
untagged{{ stats.untagged }}
SFW{{ stats.sfw }}
NSFW{{ stats.nsfw }}
+
+
@include(snippets/footer)