LP1813078 Menus are sometimes grayed out based on browser size
authorGarry Collum <gcollum@gmail.com>
Mon, 20 May 2019 18:41:32 +0000 (14:41 -0400)
committerJane Sandberg <sandbej@linnbenton.edu>
Thu, 1 Aug 2019 20:14:36 +0000 (13:14 -0700)
This patch changes a media definition in css from 800px to 768px, the md column
size for bootstrap.css.  Items in the menus font color changed when the browser
was sized between 768px and 800px.

To test.
1. Expand the Circulation menu, and change the browser to a width between
768px and 800px.  Notice that the menu items change to a gray color.
2. Apply the patch, and then change the width of the browser.  Notice that
the menu items do not change color before the menu is collapsed.

Signed-off-by: Garry Collum <gcollum@gmail.com>
Signed-off-by: Kyle Huckins <khuckins@catalyte.io>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>

Open-ILS/src/templates/staff/css/style.css.tt2

index d1b4499..d06bf48 100644 (file)
@@ -515,8 +515,8 @@ table.list tr.selected td { /* deprecated? */
   flex: 4;
 }
 
-/* TODO: match media size to Bootstrap "md" col resizing */
-@media all and (max-width: 800px) {
+/* 768px equals Bootstrap "md" col resizing */
+@media all and (max-width: 768px) {
   .flex-row {
     flex-direction: column;
   }
@@ -538,7 +538,7 @@ table.list tr.selected td { /* deprecated? */
   }
 }
 
-@media all and (min-width: 800px) {
+@media all and (min-width: 768px) {
     /* scrollable menus for full-size screens */
     .scrollable-menu {
         height: auto;