From ae27683e9e658d285d9ed5b1bf10e073251a7301 Mon Sep 17 00:00:00 2001
From: kalvn <kalvn@pm.me>
Date: Thu, 24 Sep 2020 21:30:13 +0200
Subject: [PATCH] Improves slightly the filter popup.

---
 material/page.header.html         | 9 +++++----
 src/scss/components/_helpers.scss | 6 +++++-
 src/scss/components/_popup.scss   | 8 +++++++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/material/page.header.html b/material/page.header.html
index e625854..604b273 100644
--- 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
index 9f028a6..4925993 100644
--- 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;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/components/_popup.scss b/src/scss/components/_popup.scss
index dde9e40..a307d52 100644
--- 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;
-}
\ No newline at end of file
+}