Mobile menu style updated

Simounet · Oct 24, 2020 · 02476ea · 02476ea
1 parent b09f872
commit 02476ea
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 19 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/index.html b/index.html
@@ -76,7 +76,7 @@ <h3>{function="_t('YOU_MUST_BE_LOGGED')"}</h3>
                         <use xlink:href="#svg-favorite" />
                     </svg>
                 </a>
-                <button class="mobile-only settings-item feeds-list-toggle js-feeds-list-toggle js-toggle-target" data-target="#feeds-list"><span class="feeds-list-toggle__label">
+                <button class="mobile-only settings-item feeds-list-toggle js-feeds-list-toggle js-toggle-target" data-target="#feeds-list" data-toggle-overflow="true"><span class="feeds-list-toggle__label">
                     <svg
                         width="15"
                         height="15"

diff --git a/js/script.js b/js/script.js
@@ -30,24 +30,23 @@ $(function () {
     $('.js-toggle-target').click(function () {
         const button = $(this);
         const targetElement = $(button.data('target'));
+        const bodyOverflowNeeded = button.data('toggle-overflow') || false;
         const isExpanded = targetElement.data('is-opened');
 
         if (isExpanded) {
+            if (bodyOverflowNeeded !== false) {
+                $('body').css('overflow', '');
+            }
             targetElement
-                .slideUp(function () {
-                    $(this)
-                        .attr('data-is-opened', false)
-                        .data('is-opened', false)
-                        .css('display', '');
-                });
+                .attr('data-is-opened', false)
+                .data('is-opened', false);
         } else {
             targetElement
-                .css('display', 'none')
                 .attr('data-is-opened', true)
-                .data('is-opened', true)
-                .slideDown(function () {
-                    $(this).css('display', '');
-                });
+                .data('is-opened', true);
+            if (bodyOverflowNeeded !== false) {
+                $('body').css('overflow', 'hidden');
+            }
         }
     });
 

diff --git a/sass/style.scss b/sass/style.scss
@@ -19,6 +19,10 @@ $opacity-low: 0.3;
 $position-top-on-break: 30px;
 $action-icon-width: 30px;
 
+$settings-horizontal-padding: 13px;
+$settings-min-height: 34px;
+$settings-height: $settings-horizontal-padding * 2 + $settings-min-height;
+
 @import "normalize";
 
 /* MIXINS */
@@ -93,6 +97,7 @@ button {
         // the content is read and infinite-scroll-end
         // shows up
         margin-bottom: 0px;
+        padding-bottom: 60px;
     }
 }
 .selected a {
@@ -225,6 +230,7 @@ $border-color-active: white;
 
 .feed-add {
     text-align: center;
+    z-index: 100;
 }
 
 [data-is-opened="false"] {
@@ -312,15 +318,32 @@ $feeds-list-toggle-transition: transform 0.3s;
     }
 }
 
+.feeds-list,
+.feed-add {
+    @media($breakpoint-max) {
+        background-color: $sidebar-color-bg;
+        transition: all 130ms ease-in;;
+        will-change: transform;
+        overflow: auto;
+    }
+}
+
 .feeds-list {
     margin-top: 0;
     padding: 0;
 
+    @media($breakpoint-max) {
+        position: fixed;
+        width: 100%;
+        max-height: calc(100vh - #{$settings-height});
+        z-index: 1000;
+    }
+
     &[data-is-opened="false"] {
         display: block;
 
         @media($breakpoint-max) {
-            display: none;
+            transform: translate3d(0, -100%, 0);
         }
     }
 
@@ -647,8 +670,19 @@ html:not(.no-js) .feed--closed {
 }
 
 .settings {
-    padding: 1em;
+    position: relative;
+    padding: $settings-horizontal-padding 10px;
+    min-height: $settings-min-height;
     background-color: $sidebar-color-bg-darken;
+    z-index: 1000;
+
+    @media($breakpoint-max) {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        box-sizing: border-box;
+        z-index: 1000;
+    }
 }
 
 .user-login {
@@ -658,7 +692,7 @@ html:not(.no-js) .feed--closed {
 .settings-item {
     padding: $settings-padding;
     min-width: 15px;
-    min-height: 15px;
+    min-height: 18px;
     border-bottom: $border-base;
     box-sizing: content-box;
     transition: border 0.2s ease-in-out 0s;