fix navbar & ranking

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;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: auto 1fr 0fr;
-  /* justify-content: space-between; */
   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: grid;
-    display: flex;
+    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%;
+  /* needs rework!!!! */
-    justify-content: space-evenly;
+  .pagination a:nth-last-child(2), .pagination a:nth-last-child(3),
-  }
+  .pagination a:nth-child(2), .pagination a:nth-child(3) {
-  .pagination > a, .pagination > span {
+    display: none;
-    font-size: 10px !important;
-    margin-right: 0px;
-    padding: 5px !important;
-    line-height: 1;
-    margin: 0;
   }
+  /* 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 */

views/item.html

@@ -67,7 +67,7 @@
       @if(typeof item.tags !== "undefined")
         @each(item.tags as tag)
         <span @if(session)tooltip="{{ tag.user }}"@endif class="badge {{ tag.badge }} mr-2">
-          <a href="/tag/{{ tag.tag }}">{!! tag.tag !!}</a>@if(session)&nbsp;<a href="#">&#215;</a>@endif
+          <a href="/tag/{{ tag.tag }}">{!! tag.tag !!}</a>@if(session)&nbsp;<a class="removetag" href="#">&#215;</a>@endif
         </span>
         @endeach
       @endif

views/ranking.html

@@ -1,39 +1,40 @@
 @include(snippets/header)
-<h1>Ranking lol</h1>
+<div class="topf0ckers">
-<h3>tags by user</h3>
+  <h3>Top f0ckers of all time <br>- Ranking -</h3>
-<table class="table">
+</div>
-  <thead>
+<div class="ranking">
-    <tr>
+  <div class="by-user">
-      <th>rank</th>
+    <h3>Biggest taggers</h3>
-      <th>username</th>
+    <table class="table">
-      <th># tags placed</th>
+      <tbody>
-    </tr>
+      @for(let i = 0; i < list.length; i++)
-  </thead>
+        <tr>
-  <tbody>
+          <td>{{ i + 1 }}</td>
-  @for(let i = 0; i < list.length; i++)
+          <td><img class="avatar" src="/t/{{ list[i].avatar }}.webp" /></td>
-    <tr>
+          <td>{!! list[i].user !!}</td>
-      <td>{{ i + 1 }}</td>
+          <td>{{ list[i].count }}</td>
-      <td>{!! list[i].user !!}</td>
+        </tr>
-      <td>{{ list[i].count }}</td>
+      @endfor
-    </tr>
+      </tbody>
-  @endfor
+    </table>
-  </tbody>
+  </div>
-</table>
+  <div class="by-hoster">
-<h3>tag stats</h3>
+    <h3>Top {{ hoster.length }} hoster</h3>
-<table class="table">
+    <table class="table">
-  <tr><td>total</td><td>{{ stats.total }}</td></tr>
+      @each(hoster as host)
-  <tr><td>tagged</td><td>{{ stats.tagged }}</td></tr>
+      <tr><td>{{ host.part.length ? host.part : "Telegram" }}</td><td>{{ host.c }}</td></tr>
-  <tr><td>untagged</td><td>{{ stats.untagged }}</td></tr>
+      @endeach
-  <tr><td>SFW</td><td>{{ stats.sfw }}</td></tr>
+    </table>
-  <tr><td>NSFW</td><td>{{ stats.nsfw }}</td></tr>
+  </div>
-</table>
+  <div class="by-stats">
-<h3>top {{ hoster.length }} hoster</h3>
+    <h3>Tag stats</h3>
-<table class="table">
+    <table class="table">
-  @each(hoster as host)
+      <tr><td>total</td><td>{{ stats.total }}</td></tr>
-  <tr>
+      <tr><td>tagged</td><td>{{ stats.tagged }}</td></tr>
-    <td>{{ host.part.length ? host.part : "Telegram" }}</td>
+      <tr><td>untagged</td><td>{{ stats.untagged }}</td></tr>
-    <td>{{ host.c }}</td>
+      <tr><td>SFW</td><td>{{ stats.sfw }}</td></tr>
-  </tr>
+      <tr><td>NSFW</td><td>{{ stats.nsfw }}</td></tr>
-  @endeach
+    </table>
-</table>
+  </div>
+</div>
 @include(snippets/footer)