~migadu/alps-devel

[PATCH 3/3] * Alps Theme Mobile: Make sidebar toggle more clickable

Zach DeCook
Details
Message ID
<20200728130212.16898-3-zdecook@ccel.org>
DKIM signature
missing
Download raw message
Patch: +7 -3
---
At some point, this should probably also be added to the email view page,
as well as to Calendar and Contacts (but not the Settings page).

It may be good to do that with some refactoring.
 themes/alps/assets/style.css | 7 +++++--
 themes/alps/mailbox.html     | 3 ++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index d431f06..a524759 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -132,11 +132,14 @@ aside {
  transition: max-width .2s ease-in-out;
}
input.menuToggler { display: none; }
label[for=asideToggle] { width: 0; transition: width .2s linear; }
@media only screen and (max-width: 767px) {
  /* TODO: Make this accessible */
  input.menuToggler:not(:checked) ~ aside.autohide { max-width: 0; }
  input.menuToggler { display: block; }
  label[for=asideToggle]:after { content: "\2192"; }
  input.menuToggler:checked ~ aside.autohide ~ label:after { content: "\2190"; }
  label[for=asideToggle]{ width: 130px; background-color: #f6f6f6; }
}

aside a { width: 100%; display: block; padding: 0.4rem 0 0.4rem 0.5rem; }
aside a.active { font-weight: bold; color: black; text-decoration: none; }
aside img { display: block; }
diff --git a/themes/alps/mailbox.html b/themes/alps/mailbox.html
index b52a635..0d9e8ab 100644
--- a/themes/alps/mailbox.html
+++ b/themes/alps/mailbox.html
@@ -2,7 +2,7 @@
{{template "nav.html" .}}

<div class="page-wrap">
  <input type="checkbox" class="menuToggler">
  <input type="checkbox" class="menuToggler" id="asideToggle">
  <aside class='autohide'>
    <!-- the logo image, dimensions 200x32 may be present or not -->
    <a href="/compose" class="new">Compose&nbsp;Mail</a>
@@ -25,6 +25,7 @@
      </a>
    {{end}}
  </aside>
  <label for="asideToggle"></label>

  <div class="container">
    <form id="messages-form" method="post"></form>
-- 
2.27.0
Reply to thread Export thread (mbox)