From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from ffbox0-bg.ffmpeg.org (ffbox0-bg.ffmpeg.org [79.124.17.100]) by master.gitmailbox.com (Postfix) with ESMTPS id AE7024E9A3 for ; Mon, 9 Feb 2026 20:06:08 +0000 (UTC) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=ffmpeg.org; i=@ffmpeg.org; q=dns/txt; s=mail; t=1770667545; h=to : date : message-id : in-reply-to : references : mime-version : reply-to : subject : list-id : list-archive : list-archive : list-help : list-owner : list-post : list-subscribe : list-unsubscribe : from : cc : content-type : content-transfer-encoding : from; bh=cARIbQe5923I/GhWINCbq8PI6Jg5kEla42eqqHRIoLI=; b=AjSdI+XR7qF3w5c0VE+qWXy68jq/np4Jfa2Wa+DxcXLKVSTJn9ETdvmgFsbaQDm00Bj6z jdhpUNSTa4W6YPsTavhoPa+iP+z7LDAyPETWovrLpbV+sgitkQd1g3+KqdFN95Q6OOMoLLu zn+i2EmenyyNwmdNuX/qL6X4LArbSqPF4UrOEAAyezZ34B/Wi0iXd2A9aE+FHimBJjVW1Sy R+C9iBRfLEUyINfuj/zsJJ4ueDoN9VXOatVrgIqlvDpmI0GYJxX6wxohwuytoNHTiGQe7j6 KmSiv61vVZi7IG3pN7DqwcuDnilBvCu0bYcb3dFxnXA8M17MQPD+9H74HBhg== Received: from [172.20.0.4] (unknown [172.20.0.4]) by ffbox0-bg.ffmpeg.org (Postfix) with ESMTP id CF9DF691194; Mon, 9 Feb 2026 22:05:45 +0200 (EET) ARC-Seal: i=2; cv=pass; a=rsa-sha256; d=ffmpeg.org; s=arc; t=1770667524; b=Z//2tZjkpO4RlsiWIKZ+jjztJ2tHka2MkeS/xCYUnZL06OYPjq3L8/0RRcbzoJiKnyZx3 KdN6KbtRZ6vqjMPdRV78mp+xLfrjjyBbJjyZreaeljgobwRe43LfRszbkOiug5fandCiTfk klKKwHR4/zG9n1Xi0NnRw7Cyn2iezyKCC0/ASgmBD0+jxL06ZOmbuzi2e4CAF192F25m0A6 ttAOhKa7DCZxcMo1VOjrqvSYc7hq/803obqn75ag83V8TDEhq8RveU+ug8HB7E2xLyvOkn9 9aUBOoPqn1TIUpJrnBmcIY5haiZzqN1TpvcunuxSwjmO3KWHIvDblo+2hcwg== ARC-Message-Signature: i=2; a=rsa-sha256; c=relaxed/relaxed; d=ffmpeg.org; s=arc; t=1770667524; h=from : sender : reply-to : subject : date : message-id : to : cc : mime-version : content-type : content-transfer-encoding : content-id : content-description : resent-date : resent-from : resent-sender : resent-to : resent-cc : resent-message-id : in-reply-to : references : list-id : list-help : list-unsubscribe : list-subscribe : list-post : list-owner : list-archive; bh=jfBdV7I43BHtA9Zp/m4JNwcmcmOdqyzNhl9dNirb1j8=; b=EoiHpGEU7g9KyfGLfgfXGjVGyTACL0pYMQ65QSkBGYWh2Qw/3Cq0DgRlJn6YxYro5HP8H GpXOV5KVJqk/sHZbzPdvmlx727xQYQFCTjQsLUqU+SO8ONvK9MfxJP8qhz9hJdxNnmrDuaU OnO0/YQZm64+3rEulMeDeT5AtxXwC1Enkyek8bEmduJGvip6KeQtsryI9bbHQFOc25uyrRN yH+NNT0NvWACIThvryNcYQDJ3dskyY6EkYGR0ze01uER2SiiQEK4XlKQWdy/Ng6Yv/8nSd+ BdQ2k7PdqjG/Eq0fIMBukd7cfv9Gq4kVa2/tuR9uMl9IkJajN3Y6CMQv2zNQ== ARC-Authentication-Results: i=2; ffmpeg.org; dkim=fail; arc=pass; dmarc=fail header.from=ritovision.com policy.dmarc=reject Authentication-Results: ffmpeg.org; dkim=fail; arc=pass; dmarc=fail (Used From Domain Record) header.from=ritovision.com policy.dmarc=reject Received: from sender4-of-o54.zoho.com (sender4-of-o54.zoho.com [136.143.188.54]) by ffbox0-bg.ffmpeg.org (Postfix) with ESMTPS id 0C37B690F11 for ; Mon, 9 Feb 2026 22:05:01 +0200 (EET) ARC-Seal: i=1; a=rsa-sha256; t=1770667497; cv=none; d=zohomail.com; s=zohoarc; b=YsEA2G24gSr74TDcGzfoE7A6zFspfzo35o/FFI7JhI6eSFa3vyGzGDTm8UUIzFkRZG2x1sxHiEgt48lT2pvXd4vZCTzDczccEHiRU3g2edGAo7iRhn5vcZ2xmr9ilPN/zh/XSqdhKXl/kr31tOgnBNl8LdCv+itb8RwwZEl4HoM= ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=zohomail.com; s=zohoarc; t=1770667497; h=Content-Transfer-Encoding:Cc:Cc:Date:Date:From:From:In-Reply-To:MIME-Version:Message-ID:References:Subject:Subject:To:To:Message-Id:Reply-To; bh=RI7QNXF1mld3wqZuQSSCrIzUV+uVHFopxfhBTom3GTQ=; b=Naa7TPayujrAPaG3l2Wub9HEm9ebKQuP8WhmEHTZ082H586BKL0kuty/u2SNhXJ2dQgQ9jDgycrR1BD1Qi8bXqytSU4LYAeDar7DdKUXxZf/U4Rf+gLhCfzYaZZkJOOqABCUhAZrJNECo8GdF1Ar9NV2mI2FOPg51hdU14JJRTk= ARC-Authentication-Results: i=1; mx.zohomail.com; spf=pass smtp.mailfrom=rito@ritovision.com; dmarc=pass header.from= Received: by mx.zohomail.com with SMTPS id 1770667494989954.6743254089938; Mon, 9 Feb 2026 12:04:54 -0800 (PST) To: ffmpeg-devel@ffmpeg.org Date: Mon, 9 Feb 2026 15:04:06 -0500 Message-ID: <20260209200407.13956-2-rito@ritovision.com> X-Mailer: git-send-email 2.51.0 In-Reply-To: <20260209200407.13956-1-rito@ritovision.com> References: <20260209200407.13956-1-rito@ritovision.com> MIME-Version: 1.0 X-ZohoMailClient: External Message-ID-Hash: NLDKYG5K3MG2XC2ZI5ASF2H4ZJO76XHH X-Message-ID-Hash: NLDKYG5K3MG2XC2ZI5ASF2H4ZJO76XHH X-MailFrom: SRS0=gRmR=AN=ritovision.com=rito@ffmpeg.org X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; header-match-ffmpeg-devel.ffmpeg.org-0; header-match-ffmpeg-devel.ffmpeg.org-1; header-match-ffmpeg-devel.ffmpeg.org-2; header-match-ffmpeg-devel.ffmpeg.org-3; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list Reply-To: FFmpeg development discussions and patches Subject: [FFmpeg-devel] [PATCH v2 1/2] web: replace mobile sidebar with bottom drawer List-Id: FFmpeg development discussions and patches Archived-At: Archived-At: List-Archive: List-Archive: List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: From: Rito Rhymes via ffmpeg-devel Cc: Rito Rhymes Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Archived-At: List-Archive: List-Post: 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 @@ 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 @@