Improves slightly the filter popup.

kalvn · Sep 24, 2020 · ae27683 · ae27683
1 parent 51203f7
commit ae27683
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/material/page.header.html b/material/page.header.html
@@ -112,12 +112,13 @@
                             <div class="popup-body">
                                 <h2>{'Links per page'|t}</h2>
                                 <ul class="filters-links-per-page">
-                                    <li><a href="{$base_path}/links-per-page?nb=20" class="ripple">20 links</a></li>
-                                    <li><a href="{$base_path}/links-per-page?nb=50" class="ripple">50 links</a></li>
-                                    <li><a href="{$base_path}/links-per-page?nb=100" class="ripple">100 links</a></li>
+                                    <li><a href="{$base_path}/links-per-page?nb=20" class="ripple {if="$links_per_page == 20"}is-bold{/if}">20 links</a></li>
+                                    <li><a href="{$base_path}/links-per-page?nb=50" class="ripple {if="$links_per_page == 50"}is-bold{/if}">50 links</a></li>
+                                    <li><a href="{$base_path}/links-per-page?nb=100" class="ripple {if="$links_per_page == 100"}is-bold{/if}">100 links</a></li>
                                 </ul>
                                 <form method="get" action="{$base_path}/links-per-page" class="popup-content-area">
-                                    <input type="text" name="nb" placeholder="Custom value..."/>
+                                    <label for="filter-nb">Custom value</label>
+                                    <input type="text" id="filter-nb" name="nb" placeholder="Type a number..." value="{$links_per_page}"/>
                                 </form>
 
                                 <h2>{'Filters'|t}</h2>

diff --git a/src/scss/components/_helpers.scss b/src/scss/components/_helpers.scss
@@ -16,6 +16,10 @@ hr.margin{
     margin-right: $space-xl;
 }
 
+.is-bold {
+    font-weight: bold;
+}
+
 .mts{
     margin-top: 5px;
 }
@@ -143,4 +147,4 @@ ul.is-bordered{
             border-bottom: 1px solid $color-gray-light;
         }
     }
-}
+}
diff --git a/src/scss/components/_popup.scss b/src/scss/components/_popup.scss
@@ -19,6 +19,12 @@
         color: $color-subtitle;
     }
 
+    label {
+        margin-bottom: 0;
+        font-size: 12px;
+        color: $color-subtitle;
+    }
+
     @media (max-width: 600px){
         position: fixed;
         overflow-x: auto;
@@ -79,4 +85,4 @@
 }
 .popup .popup-content-area{
     padding: 10px;
-}
+}