From 6c152a320456162a3a7e7698345acb40b17d1dee Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Sun, 9 Feb 2020 01:37:20 -0500
Subject: [PATCH 1/2] [frio] Remove unwanted navbar-nav behavior for top nav
 bar on mobile

- Rename overly generic notification menu button id
---
 view/theme/frio/css/style.css     | 9 +++++----
 view/theme/frio/templates/nav.tpl | 8 +++-----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 12a961108..5bbc21709 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -417,7 +417,11 @@ header #banner #logo-img,
 }
 }
 @media (max-width: 991px) {
-    .topbar ul.nav>li>a { padding-left: 10px; padding-right: 10px; };
+    .topbar ul.nav > li > a,
+    .topbar ul.nav > li > button
+	{
+		padding: 15px 10px;
+	}
 }
 .topbar .dropdown-footer {
     margin: 10px
@@ -862,9 +866,6 @@ nav.navbar a, nav.navbar .btn-link {
 }
 
 /* Dropdown Menus */
-#dropdownMenu1 {
-    padding: 15px 15px;
-}
 .nav > li > .btn-link {
     position: relative;
     display: block;
diff --git a/view/theme/frio/templates/nav.tpl b/view/theme/frio/templates/nav.tpl
index cc661b3d5..ad9f93066 100644
--- a/view/theme/frio/templates/nav.tpl
+++ b/view/theme/frio/templates/nav.tpl
@@ -37,7 +37,7 @@
 				</button>
 
 				{{* Left section of the NavBar with navigation shortcuts/icons *}}
-				<ul class="nav navbar-nav navbar-left" role="menubar">
+				<ul class="nav navbar-left" role="menubar">
 					{{if $nav.network}}
 					<li class="nav-segment">
 						<a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}" data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i class="fa fa-lg fa-th" aria-hidden="true"></i><span id="net-update" class="nav-network-badge badge nav-notification"></span></a>
@@ -76,14 +76,12 @@
 					{{* The notifications dropdown *}}
 					{{if $nav.notifications}}
 						<li id="nav-notification" class="nav-segment dropdown" role="presentation">
-							<button id="dropdownMenu1" class="btn-link dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu">
+							<button id="nav-notifications-menu-btn" class="btn-link dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu">
 								<span id="notification-update" class="nav-notification-badge badge nav-notification dropdown" data-toggle="dropdown"></span>
 								<i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i>
 							</button>
 							{{* The notifications dropdown menu. There are two parts of menu. The second is at the bottom of this file. It is loaded via js. Look at nav-notifications-template *}}
-							<ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1">
-<!--							<ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1" style="display: none;">
--->
+							<ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="nav-notifications-menu-btn">
 								{{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}}
 								<li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
 									<div class="arrow"></div>

From 59840d2c11a92819638b6097a71407ee8761d372 Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Sun, 9 Feb 2020 01:39:51 -0500
Subject: [PATCH 2/2] [frio] Improve contrast of open notification dropdown
 button

---
 view/theme/frio/css/style.css | 59 +++++++++++++++++------------------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 5bbc21709..1595403b5 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -410,11 +410,13 @@ header #banner #logo-img,
     float: left
 }
 @media (min-width: 992px) {
-.topbar ul.nav>li>a {
-    padding-top: 15px;
-    padding-bottom: 15px;
-    line-height: 20px
-}
+	.topbar ul.nav > li > a,
+	.topbar ul.nav > li > button
+	{
+		padding-top: 15px;
+		padding-bottom: 15px;
+		line-height: 20px
+	}
 }
 @media (max-width: 991px) {
     .topbar ul.nav > li > a,
@@ -455,13 +457,24 @@ nav.navbar {
     z-index: 1030;
     color: $nav_icon_color;
 }
-#topbar-first .nav>li>a:hover,
-#topbar-first .nav>li>a:focus,
-#topbar-first .nav>.open>a,
-#dropdownMenu1:hover,
-#dropdownMenu1:focus,
-nav.navbar .nav>li>a:hover,
-nav.navbar .nav>li>a:focus{
+#topbar-first .nav > li > a,
+#topbar-first .nav > li > button,
+nav.navbar .nav > li > a,
+nav.navbar .nav > li > button
+{
+	color: $nav_icon_color;
+}
+#topbar-first .nav > li > a:hover,
+#topbar-first .nav > li > a:focus,
+#topbar-first .nav > li > button:hover,
+#topbar-first .nav > li > button:focus,
+#topbar-first .nav > .open > a,
+#topbar-first .nav > .open > button,
+nav.navbar .nav > li > a:hover,
+nav.navbar .nav > li > a:focus
+nav.navbar .nav > li > button:hover,
+nav.navbar .nav > li > button:focus
+{
     background-color: $nav_icon_hover_color;
 }
 #topbar-first .nav>.account {
@@ -491,7 +504,6 @@ nav.navbar .nav>li>a:focus{
     z-index: 3
 }
 #topbar-first .topbar-nav {
-    /*position: absolute;*/
     left: 0;
     right: 0;
     text-align: center;
@@ -501,13 +513,11 @@ nav.navbar .nav>li>a:focus{
     position: relative;
     text-align: left
 }
-#topbar-first .topbar-nav .nav-segment>a {
-/*    padding: 5px 10px;
-    margin: 10px 2px;*/
+#topbar-first .topbar-nav .nav-segment > a
+{
     display: inline-block;
-/*    border-radius: 2px;*/
     text-decoration: none;
-    text-align: left
+    text-align: left;
 }
 #topbar-first .topbar-nav .nav-segment .nav-notification {
     position: absolute;
@@ -594,10 +604,6 @@ nav.navbar .nav>li>a:focus{
 #topbar-first .dropdown-footer {
     margin: 10px 10px 5px
 }
-#topbar-first a, #topbar-first .btn-link,
-nav.navbar a, nav.navbar .btn-link {
-    color: $nav_icon_color;
-}
 #topbar-first .caret {
     border-top-color: #bebebe
 }
@@ -871,14 +877,7 @@ nav.navbar a, nav.navbar .btn-link {
     display: block;
     padding: 10px 15px;
 }
-.nav > li > .btn-link:focus,
-.nav > li > .btn-link:hover {
-    text-decoration: none;
-    background-color: #eee;
-}
-.nav .open > .btn-link,
-.nav .open > .btn-link:focus,
-.nav .open > .btn-link:hover {
+.nav .open > .btn-link {
     background-color: #eee;
     border-color: #337ab7;
 }