[FFmpeg-devel] [PATCH v2 0/2] rework mobile navigation

[FFmpeg-devel] [PATCH v2 0/2] rework mobile navigation

[Rito Rhymes via ffmpeg-devel]

The mobile sidebar pushes page content right, causing page-wide 
horizontal scroll overflow. Users also cannot close it without 
scrolling back to the top to reach the hamburger icon.

v1 attempted to fix this by making the sidebar into a fixed
overlay but was rejected for not allowing the user to effectively
read or scroll page content while opened; it covered part of the
content width, cutting off lines of text mid-sentence.

v2 takes a different approach, replacing the sidebar with a
bottom drawer, allowing users to read and scroll page content 
while the menu is visible.

Patch 1 replaces the sidebar with a bottom drawer on mobile.
Patch 2 (optional) makes the content header sticky so the
humburger icon / drawer toggle is always reachable.


Rito Rhymes (2):
  web: replace mobile sidebar with bottom drawer
  web: make content header sticky on mobile

 htdocs/css/simple-sidebar.css | 105 +++++++++++++++++++++++++++++++---
 src/template_footer2          |  29 +++++++++-
 src/template_head2            |   7 +++
 3 files changed, 130 insertions(+), 11 deletions(-)

-- 
2.51.0

_______________________________________________
ffmpeg-devel mailing list -- ffmpeg-devel@ffmpeg.org
To unsubscribe send an email to ffmpeg-devel-leave@ffmpeg.org

[FFmpeg-devel] [PATCH v2 1/2] web: replace mobile sidebar with bottom drawer

[Rito Rhymes via ffmpeg-devel]

On mobile (<768px), the sidebar now opens as a bottom drawer (33vh) instead of pushing page content right and causing horizontal scroll overflow.

Closes via X button, hamburger toggle, Escape key, or clicking outside on page.

Users can now close the sidebar without scrolling to the top of the page to reach the hamburger icon.

Includes branded header with centered logo and accessible close button.

Desktop sidebar unchanged.
---
 htdocs/css/simple-sidebar.css | 98 ++++++++++++++++++++++++++++++++---
 src/template_footer2          | 29 +++++++++--
 src/template_head2            |  7 +++
 3 files changed, 123 insertions(+), 11 deletions(-)

diff --git a/htdocs/css/simple-sidebar.css b/htdocs/css/simple-sidebar.css
index 71a8a39..a19c2f1 100644
--- a/htdocs/css/simple-sidebar.css
+++ b/htdocs/css/simple-sidebar.css
@@ -89,6 +89,10 @@
   padding: 20px;
 }
 
+.drawer-header {
+  display: none;
+}
+
 @media (max-width:767px) {
 
 #wrapper {
@@ -97,23 +101,101 @@
 
 #sidebar-wrapper {
   left: 0;
-}
-
-#wrapper.active {
-  position: relative;
-  left: 200px;
+  right: 0;
+  bottom: 0;
+  top: auto;
+  width: 100%;
+  height: 33.33vh;
+  margin-left: 0;
+  text-align: center;
+  transform: translateY(100%);
+  transition: transform 0.4s ease;
 }
 
 #wrapper.active #sidebar-wrapper {
-  left: 200px;
-  width: 200px;
-  transition: all 0.4s ease 0s;
+  transform: translateY(0);
 }
 
 #menu-toggle {
   display: inline-block;
 }
 
+.drawer-header {
+  display: block;
+  position: sticky;
+  top: 0;
+  z-index: 1001;
+  height: 44px;
+  background-color: inherit;
+}
+
+.drawer-brand {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: #999;
+  text-decoration: none;
+  font-size: 18px;
+  white-space: nowrap;
+}
+
+.drawer-brand img {
+  vertical-align: text-top;
+  opacity: 0.6;
+  margin-right: 8px;
+}
+
+.drawer-brand:hover {
+  color: #fff;
+  text-decoration: none;
+}
+
+.drawer-brand:hover img {
+  opacity: 1;
+}
+
+#drawer-close-btn {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+  font-size: 20px;
+  text-decoration: none;
+  padding: 4px 8px;
+  line-height: 1;
+}
+
+#drawer-close-btn:hover,
+#drawer-close-btn:focus {
+  color: #fff;
+}
+
+.sidebar-nav {
+  position: static;
+  width: auto;
+  display: inline-block;
+  text-align: left;
+  padding-bottom: 40px;
+}
+
+.sidebar-nav li {
+  text-indent: 0;
+}
+
+.sidebar-nav li a span {
+  margin-left: 10px !important;
+}
+
+.sidebar-nav li ul li {
+  padding-left: 20px;
+}
+
+.sidebar-nav > .sidebar-brand {
+  display: none;
+}
+
 .inset {
   padding: 15px;
 }
diff --git a/src/template_footer2 b/src/template_footer2
index 735d540..c074b81 100644
--- a/src/template_footer2
+++ b/src/template_footer2
@@ -1,9 +1,32 @@
     <!-- Custom JavaScript for the Menu Toggle -->
     <script>
-      $("#menu-toggle").click(function(e) {
+      (function($) {
+        var $wrapper = $("#wrapper");
+
+        $("#menu-toggle").click(function(e) {
+          e.preventDefault();
+          $wrapper.toggleClass("active");
+        });
+
+        $("#drawer-close-btn").click(function(e) {
           e.preventDefault();
-          $("#wrapper").toggleClass("active");
-      });
+          $wrapper.removeClass("active");
+        });
+
+        $(document).keyup(function(e) {
+          if (e.keyCode === 27) {
+            $wrapper.removeClass("active");
+          }
+        });
+
+        $(document).click(function(e) {
+          if (!$wrapper.hasClass("active")) return;
+          var $target = $(e.target);
+          if ($target.closest("#sidebar-wrapper").length) return;
+          if ($target.closest("#menu-toggle").length) return;
+          $wrapper.removeClass("active");
+        });
+      })(jQuery);
     </script>
 
   </body>
diff --git a/src/template_head2 b/src/template_head2
index 4f61b62..48e205a 100644
--- a/src/template_head2
+++ b/src/template_head2
@@ -12,6 +12,13 @@
     <div id="wrapper">
 
       <nav id="sidebar-wrapper">
+        <div class="drawer-header">
+          <a class="drawer-brand" href=".">
+            <img src="img/ffmpeg3d_white_20.png" alt="" />
+            FFmpeg
+          </a>
+          <a href="#" id="drawer-close-btn" role="button" aria-label="Close navigation menu">&times;</a>
+        </div>
         <ul class="sidebar-nav">
           <li class="sidebar-brand"><a href=".">
               <img src="img/ffmpeg3d_white_20.png" alt="FFmpeg" />
-- 
2.51.0

_______________________________________________
ffmpeg-devel mailing list -- ffmpeg-devel@ffmpeg.org
To unsubscribe send an email to ffmpeg-devel-leave@ffmpeg.org

[FFmpeg-devel] [PATCH v2 2/2] web: make content header sticky on mobile

[Rito Rhymes via ffmpeg-devel]

Allows for drawer nav menu to always be accessible.
---
 htdocs/css/simple-sidebar.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/htdocs/css/simple-sidebar.css b/htdocs/css/simple-sidebar.css
index a19c2f1..18b0c18 100644
--- a/htdocs/css/simple-sidebar.css
+++ b/htdocs/css/simple-sidebar.css
@@ -120,6 +120,13 @@
   display: inline-block;
 }
 
+.content-header {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  background-color: inherit;
+}
+
 .drawer-header {
   display: block;
   position: sticky;
-- 
2.51.0

_______________________________________________
ffmpeg-devel mailing list -- ffmpeg-devel@ffmpeg.org
To unsubscribe send an email to ffmpeg-devel-leave@ffmpeg.org