#1640 Implement new mobile navbar design

GetLuna · Nov 27, 2016 · cfcdb92 · cfcdb92
1 parent c851a12
commit cfcdb92
Show file tree

Hide file tree

Showing 34 changed files with 84 additions and 186 deletions.
diff --git a/backstage/css/accents/1.css b/backstage/css/accents/1.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #0b95ed;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #0589de;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #0589de;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #14a3ff;

diff --git a/backstage/css/accents/10.css b/backstage/css/accents/10.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #e63838;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #d42f2f;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #d42f2f;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #ff4444;

diff --git a/backstage/css/accents/11.css b/backstage/css/accents/11.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #b41515;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #9b0505;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #9b0505;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #c71f1f;

diff --git a/backstage/css/accents/12.css b/backstage/css/accents/12.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #bf815a;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #b57349;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #b57349;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #c78d68;

diff --git a/backstage/css/accents/13.css b/backstage/css/accents/13.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #ddd;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #ccc;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #ccc;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #eee;

diff --git a/backstage/css/accents/14.css b/backstage/css/accents/14.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #9e9e9e;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #8e8e8e;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #8e8e8e;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #afafaf;

diff --git a/backstage/css/accents/15.css b/backstage/css/accents/15.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #555;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #444;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #444;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #666;

diff --git a/backstage/css/accents/2.css b/backstage/css/accents/2.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #1a79bc;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #136cab;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #136cab;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #2788cb;

diff --git a/backstage/css/accents/3.css b/backstage/css/accents/3.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #0d4382;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #0b3c75;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #0b3c75;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #145198;

diff --git a/backstage/css/accents/4.css b/backstage/css/accents/4.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #a268bf;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #8b54a7;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #8b54a7;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #b679d4;

diff --git a/backstage/css/accents/5.css b/backstage/css/accents/5.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #e35da5;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #d15196;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #d15196;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #ea69ae;

diff --git a/backstage/css/accents/6.css b/backstage/css/accents/6.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #7ea703;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #779e01;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #779e01;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #8bb805;

diff --git a/backstage/css/accents/7.css b/backstage/css/accents/7.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #047a36;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #016a2d;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #016a2d;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #08893e;

diff --git a/backstage/css/accents/8.css b/backstage/css/accents/8.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #ffb61a;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #ffa11a;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #ffa11a;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #ffcb1a;

diff --git a/backstage/css/accents/9.css b/backstage/css/accents/9.css
@@ -16,6 +16,7 @@ footer,
 	background-color: #ff5a21;
 }
 
+.navbar-nav .open .dropdown-menu,
 .title-primary,
 .title-sm.title-primary .input-group-addon,
 .panel-primary > .panel-heading,
@@ -35,12 +36,6 @@ footer,
 	background-color: #ff4021;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #ff4021;
-	}
-}
-
 .panel-default,
 .panel-default .panel-heading {
 	border-color: #ff7521;

diff --git a/backstage/css/style.css b/backstage/css/style.css
@@ -359,13 +359,39 @@ blockquote footer {
 .navbar-default .navbar-toggle,
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
-	border-color: transparent;
+	border: none;
+    box-shadow: none;
 }
 
 .navbar-default .navbar-toggle .icon-bar {
 	background-color: #fff;
 }
 
+@media all and (max-width:767px) {
+    .navbar-toggle {
+        margin: 0;
+        padding: 18px 16px;
+        border: 0;
+        background-color: rgba(0, 0, 0, 0.1) !important;
+    }
+
+    .navbar-nav {
+        margin: 0 -15px;
+    }
+
+    .navbar-nav > li > a {
+        padding: 13px 15px;
+    }
+
+    .navbar-default .navbar-nav:not(.navbar-right) {
+        background-color: rgba(0,0,0,.1);
+    }
+
+    .navbar-nav .open .dropdown-menu {
+        padding: 0;
+    }
+}
+
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus,

diff --git a/backstage/header.php b/backstage/header.php
@@ -154,10 +154,8 @@
                                 <li><a href="../profile.php?id=<?php echo $luna_user['id'] ?>"><i class="fa fa-fw fa-user"></i> <?php _e('Profile', 'luna') ?></a></li>
                                 <li><a href="../inbox.php"><i class="fa fa-fw fa-paper-plane-o"></i> <?php _e('Inbox', 'luna') ?></a></li>
                                 <li><a href="../settings.php?id=<?php echo $luna_user['id'] ?>"><i class="fa fa-fw fa-cogs"></i> <?php _e('Settings', 'luna') ?></a></li>
-                                <li class="divider"></li>
                                 <li><a href="../help.php"><i class="fa fa-fw fa-info-circle"></i> <?php _e('Help', 'luna') ?></a></li>
                                 <li><a href="http://getluna.org"><i class="fa fa-fw fa-support"></i> <?php _e('Support', 'luna') ?></a></li>
-                                <li class="divider"></li>
                                 <li><a href="<?php echo $logout_url; ?>"><i class="fa fa-fw fa-sign-out"></i> <?php _e('Logout', 'luna') ?></a></li>
                             </ul>
                         </li>

diff --git a/header.php b/header.php
@@ -165,9 +165,7 @@
 					<ul class="dropdown-menu">
 						<li><a href="profile.php?id='.$luna_user['id'].'"><i class="fa fa-fw fa-user"></i> '.__( 'Profile', 'luna' ).'</a></li>
 						<li><a href="settings.php"><i class="fa fa-fw fa-cogs"></i> '.__( 'Settings', 'luna' ).'</a></li>
-						<li class="divider"></li>
 						<li><a href="help.php"><i class="fa fa-fw fa-info-circle"></i> '.__( 'Help', 'luna' ).'</a></li>
-						<li class="divider"></li>
 						<li><a href="login.php?action=out&amp;id='.$luna_user['id'].'&amp;csrf_token='.luna_csrf_token().'"><i class="fa fa-fw fa-sign-out"></i> '.__( 'Logout', 'luna' ).'</a></li>
 					</ul>
 				</li>

diff --git a/themes/Fifteen/css/accents/1.css b/themes/Fifteen/css/accents/1.css
@@ -36,6 +36,7 @@
 	background-color: #0b95ed;
 }
 
+.navbar-nav .open .dropdown-menu,
 .nav-tabs > li.active > a,
 .nav-tabs > li > a:hover,
 .nav-tabs > li.active > a:hover,
@@ -61,12 +62,6 @@ a.list-group-item.active:focus,
 	background-color: #0589de;
 }
 
-@media all and (min-width:768px) {
-	.dropdown-menu {
-		background-color: #0589de;
-	}
-}
-
 blockquote,
 .list-group.list-group-thread .list-group-item.new-item,
 .list-group-forum a.list-group-item:hover,