luci-theme-bootstrap: allow tabmenus to wrap (#2333)

Allow the tab menu line to wrap around on narrow screens to fix the issue
reported in PR #2333.

Also add the .nowrap utility class to the Bootstrap theme while we're
touching it.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index 394361ecdebe84710116bea520ca8942d973f31f..98f6022ca0b8aeb65e906177026f4d6138617690 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -174,6 +174,10 @@ a:hover {
        float: left;
 }
 
+.nowrap {
+       white-space: nowrap;
+}
+
 /* Typography.less
  * Headings, body text, lists, code, and more for a versatile and durable typography system
  * ---------------------------------------------------------------------------------------- */
@@ -1020,8 +1024,9 @@ header .dropdown-menu a.hover,
        padding: 0 2px;
        list-style: none;
        display: flex;
-       background: linear-gradient(#ddd 0%, #ddd 100%) repeat-x;
-       background-size: 1px 1px;
+       flex-wrap: wrap;
+       background: linear-gradient(#fff 28px, #ddd 28px);
+       background-size: 1px 29px;
        background-position: left bottom;
 }
 

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
index 2e1ffb035bf6df5fd1a50cdfaff25c84425fe390..062d274b7504e436a7970d0e47211ad0f6cdd488 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
@@ -11,7 +11,6 @@ header h3 a, header .brand {
                background: linear-gradient(#fff 20%, #ddd 100%);
                background-size: 1px 34px;
                margin-bottom: 10px;
-               flex-wrap: wrap;
        }
 
        .tabs > li, .cbi-tabmenu > li {