all messages for Guix-related lists mirrored at yhetil.org
 help / color / mirror / code / Atom feed
* [bug#47607] [PATCH] website: header: Make dropdowns width vary according to their content
@ 2021-04-05 22:31 Luis Felipe via Guix-patches via
  2021-04-06  7:10 ` bug#47607: " Mathieu Othacehe
  0 siblings, 1 reply; 2+ messages in thread
From: Luis Felipe via Guix-patches via @ 2021-04-05 22:31 UTC (permalink / raw)
  To: 47607

[-- Attachment #1: Type: text/plain, Size: 473 bytes --]

Hi,

Currently, a menu item that is longer than its container box is broken into lines and looks as separate items. For example:

https://luis-felipe.gitlab.io/media/2021/04/gnu-guix-website-dropdown-menu-odd-wrapping-2021-04-05.png

This change makes submenus as wide as their widest item:

https://luis-felipe.gitlab.io/media/2021/04/gnu-guix-website-dropdown-menu-fixed-wrapping-2021-04-05.png


---
Luis Felipe López Acevedo
https://luis-felipe.gitlab.io/

[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-website-header-Make-dropdowns-width-vary-according-t.patch --]
[-- Type: text/x-patch; name=0001-website-header-Make-dropdowns-width-vary-according-t.patch, Size: 1979 bytes --]

From 6195940fcf3cc532ab1d03f42b77a3b4c995f6b8 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.felipe.la@protonmail.com>
Date: Mon, 5 Apr 2021 16:29:39 -0500
Subject: [PATCH] website: header: Make dropdowns width vary according to their
 content.

This change avoids breaking menu items in separate lines when they are
longer than their container box. When they are wrapped, they become
hard to read because they look like two separate items.

The "Medios" menu in the Spanish version of the website, equivalent to
the "Media" menu in the English version, illustrates this odd behavior.
It looks as if there were four menu items, when there's actually two.

* website/static/base/css/navbar.css (.dropdown:hover .submenu)
  (.submenu:focus-within): Make submenus adapt to their widest item.
  (.hline): Limit its width so that submenus are not as wide as the
  original separator image.
---
 website/static/base/css/navbar.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/website/static/base/css/navbar.css b/website/static/base/css/navbar.css
index 2274aa1..974516a 100644
--- a/website/static/base/css/navbar.css
+++ b/website/static/base/css/navbar.css
@@ -163,8 +163,7 @@ label.menu-item {
 
     .dropdown:hover .submenu {
         min-width: 150px;
-        /* reset to initial values: */
-        width: auto;
+        width: max-content;
         height: auto;
         overflow: visible;
     }
@@ -174,8 +173,7 @@ label.menu-item {
        the browser does not support :focus-within. */
     .submenu:focus-within {
         min-width: 150px;
-        /* reset to initial values: */
-        width: auto;
+        width: max-content;
         height: auto;
         overflow: visible;
     }
@@ -205,7 +203,8 @@ label.menu-item {
 
     .hline {
         display: block;
-        width: 100%;
+        margin: auto;
+        width: 150px;
         height: 1px;
     }
 

base-commit: 1f7cd6c323c928d6e852acf5d8c746fa0fba010a
-- 
2.31.0


^ permalink raw reply related	[flat|nested] 2+ messages in thread

* bug#47607: [PATCH] website: header: Make dropdowns width vary according to their content
  2021-04-05 22:31 [bug#47607] [PATCH] website: header: Make dropdowns width vary according to their content Luis Felipe via Guix-patches via
@ 2021-04-06  7:10 ` Mathieu Othacehe
  0 siblings, 0 replies; 2+ messages in thread
From: Mathieu Othacehe @ 2021-04-06  7:10 UTC (permalink / raw)
  To: Luis Felipe; +Cc: 47607-done


Hello Luis,

> Currently, a menu item that is longer than its container box is broken into lines and looks as separate items. For example:

I noticed it several times, without doing anything. Pushed as
306049a93c3ede1808d02144977b932d34c59b75.

Thanks for fixing it,

Mathieu




^ permalink raw reply	[flat|nested] 2+ messages in thread

end of thread, other threads:[~2021-04-06  7:12 UTC | newest]

Thread overview: 2+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2021-04-05 22:31 [bug#47607] [PATCH] website: header: Make dropdowns width vary according to their content Luis Felipe via Guix-patches via
2021-04-06  7:10 ` bug#47607: " Mathieu Othacehe

Code repositories for project(s) associated with this external index

	https://git.savannah.gnu.org/cgit/guix.git

This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.