Shorten reputation tab names on lower resolutions

pradoslaw · Oct 16, 2024 · 8b51fa0 · 8b51fa0
1 parent 042a580
commit 8b51fa0
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss
@@ -1,5 +1,22 @@
 @charset "UTF-8";
 
+@import "bootstrap/scss/mixins/breakpoints";
+
+@mixin size($size) {
+  @if ($size == 'intermediate') {
+    @include media-breakpoint-only(sm) {
+      @content;
+    }
+    @include media-breakpoint-up(xxl) {
+      @content;
+    }
+  } @else {
+    @include media-breakpoint-up($size) {
+      @content;
+    }
+  }
+}
+
 .card-reputation {
   img, svg {
     width: 40px;
@@ -30,6 +47,20 @@
       border-bottom: none;
     }
   }
+
+  .long-name {
+    display: none;
+    @include size(intermediate) {
+      display: initial;
+    }
+  }
+
+  .short-name {
+    display: initial;
+    @include size(intermediate) {
+      display: none;
+    }
+  }
 }
 
 #box-forum {

diff --git a/resources/views/home.twig b/resources/views/home.twig
@@ -176,13 +176,16 @@
             <div class="pt-3 px-3">
               <div id="reputation-tabs" class="nav nav-pills">
                 <a data-bs-toggle="tab" href="#week" class="nav-link {{ settings.reputationMode == 'week' ? 'active' }}">
-                  <span>W tym tygodniu</span>
+                  <span class="long-name">W tym tygodniu</span>
+                  <span class="short-name">Tyg.</span>
                 </a>
                 <a data-bs-toggle="tab" href="#month" class="nav-link {{ settings.reputationMode == 'month' ? 'active' }}">
-                  <span>W tym miesiącu</span>
+                  <span class="long-name">W tym miesiącu</span>
+                  <span class="short-name">Mies.</span>
                 </a>
                 <a data-bs-toggle="tab" href="#quarter" class="nav-link {{ settings.reputationMode == 'quarter' ? 'active' }}">
-                  <span>W tym kwartale</span>
+                  <span class="long-name">W tym kwartale</span>
+                  <span class="short-name">Kwar.</span>
                 </a>
               </div>
             </div>