Adjusting menu resposive

Zambom
1 parent 9ea7091a
Showing 4 changed files with 64 additions and 18 deletions Show diff stats
amadeus/static/css/base/amadeus.css
amadeus/static/css/base/amadeus_responsive.css
amadeus/static/js/main.js
amadeus/templates/base.html
@@ -248,11 +248,10 @@
     color: white;
 }
-.navbar-nav li > a.profile {
-    padding-top: 0px !important;
-    padding-bottom:15px;
-    padding-right:0px;
-    padding-left: 0px;
+
+
+.navbar-nav li.open {
+    background: #00695C;
 }
 .navbar-nav li > a {
@@ -269,6 +268,10 @@
     background: #00695C    
 }
+.submenu {
+    -webkit-padding-start: 0px;
+}
+
 .top-search {
     color: #F5F5F5;
 }
@@ -330,15 +333,25 @@
 #system_accordion > .panel > .panel-heading > a:focus {
     text-decoration: none;
 }
+#system_accordion .panel-body {
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-bottom: 0px;
+}
 #system_menu {
     background: #F5F5F5;
 }
-#system_menu > .panel-body > a {
+.submenu a {
     font-family: Roboto;
     font-weight: normal;
     font-size: 16px;
+    display: block;
+    max-height: 50px;
+}
+.submenu a:hover {
+    text-decoration: none;
 }
 /* End Dropdown menu Topbar */
@@ -10,6 +10,10 @@
 		height: 30px;
 	}
+	.navbar-nav {
+		margin: 0px -15px;
+	}
+
 	.navbar-form {
 		margin-left: -30px;
 		margin-right: -30px;
@@ -18,6 +22,22 @@
 	.navbar .navbar-form {
 		margin-top: 0px !important;
 	}
+
+	.navbar-form .input-group-btn > button > i {
+		margin-top: -5px;
+	}
+
+	.navbar .navbar-nav .dropdown .dropdown-menu {
+		margin-left: 0px;
+		padding: 0px;
+	}
+
+	.navbar .navbar-nav .dropdown .dropdown-menu li > a {
+		color: #333333 !important;
+	}
+	.navbar .navbar-nav .dropdown .dropdown-menu li > a:hover {
+	    color: #009688 !important;
+	}
 }
 @media(min-width: 768px) {
@@ -45,4 +65,11 @@
 	.navbar-form .input-group-btn {
 		width: 50px !important;
 	}
+
+	.navbar-nav li > a.profile {
+	    padding-top: 0px !important;
+	    padding-bottom:15px;
+	    padding-right:0px;
+	    padding-left: 0px;
+	}
 }
 \ No newline at end of file
@@ -6,7 +6,7 @@ $(&#39;.date-picker&#39;).datepicker({
 $(function () {
 	//Dropdown menu collapse
-	$('a[data-toggle="collapse"]').on('click', function (event) {
+	$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) {
         event.preventDefault();
         event.stopPropagation();
         $($(this).data('parent')).find('.panel-collapse.in').collapse('hide');
@@ -93,12 +93,15 @@
                 </div>
                 <ul class="nav navbar-nav navbar-right notifications">
                     {% if user.is_staff %}
-                        <li class="dropdown-accordion dropdown {{ settings_menu_active }}" data-accordion="#system_accordion" title data-original-title="{% trans 'settings' %}">
-                            <a href="#" data-toggle="dropdown"><i class="fa fa-cog" aria-hidden="true"></i></a> 
-                            <ul class="dropdown-menu pull-right" role="menu">
+                        <li class="dropdown {{ settings_menu_active }}" title data-original-title="{% trans 'settings' %}">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                                <i class="fa fa-cog hidden-xs" aria-hidden="true"></i>
+                                <span class="visible-xs-inline">{% trans 'Settings' %}</span>
+                            </a> 
+                            <ul class="dropdown-menu" role="menu">
                                 <li><a href="{% url 'users:manage' %}">{% trans 'Manage Users' %}</a></li>
                                 <li><a href="{% url 'categories:index' %}">{% trans 'Manage Categories' %}</a></li>
-                                <li>
+                                <li class="dropdown-accordion" data-accordion="#system_accordion">
                                     <div class="panel-group" id="system_accordion">
                                         <div class="panel panel-default">
                                             <div class="panel-heading">
@@ -110,9 +113,11 @@
                                             </div>
                                             <div class="panel-collapse collapse" id="system_menu">
                                                 <div class="panel-body">
-                                                    <a href="{% url 'categories:index' %}">{% trans 'Mail Sender' %}</a><br />
-                                                    <a href="{% url 'categories:index' %}">{% trans 'Security' %}</a><br />
-                                                    <a href="{% url 'categories:index' %}">{% trans 'Theme' %}</a>
+                                                    <ul class="submenu">
+                                                        <li><a href="{% url 'categories:index' %}">{% trans 'Mail Sender' %}</a></li>
+                                                        <li><a href="{% url 'categories:index' %}">{% trans 'Security' %}</a></li>
+                                                        <li><a href="{% url 'categories:index' %}">{% trans 'Theme' %}</a></li>
+                                                    </ul>
                                                 </div>
                                             </div>
                                         </div>
@@ -122,11 +127,12 @@
                         </li>
                     {% endif %}
-                    <li data-toggle="tooltip" data-placement="bottom" title data-original-title="{{ user }}">
-                        <a href="" data-toggle="dropdown" class="profile">
-                            <img src="{{ user.image_url }}" style="width:50px;height:50px" />
+                    <li class="dropdown" data-toggle="tooltip" data-placement="bottom" title data-original-title="{{ user }}">
+                        <a href="" data-toggle="dropdown" class="dropdown-toggle profile">
+                            <img src="{{ user.image_url }}" class="hidden-xs" style="width:50px;height:50px" />
+                            <span class="visible-xs-inline">{{ user }}</span>
                         </a>
-                        <ul class="dropdown-menu pull-right">
+                        <ul class="dropdown-menu" role="menu">
                             <li><a href="{% url 'users:profile' %}">{% trans 'Profile' %}</a></li>
                             <li><a href="{% url 'users:edit_profile' %}">{% trans 'Edit Profile' %}</a></li>
                             <li><a href="{% url 'users:change_pass' %}">{% trans 'Change Password' %}</a></li>
	@@ -10,6 +10,10 @@		@@ -10,6 +10,10 @@
10	height: 30px;	10	height: 30px;
11	}	11	}
12		12
		13	+ .navbar-nav {
		14	+ margin: 0px -15px;
		15	+ }
		16	+
13	.navbar-form {	17	.navbar-form {
14	margin-left: -30px;	18	margin-left: -30px;
15	margin-right: -30px;	19	margin-right: -30px;
	@@ -18,6 +22,22 @@		@@ -18,6 +22,22 @@
18	.navbar .navbar-form {	22	.navbar .navbar-form {
19	margin-top: 0px !important;	23	margin-top: 0px !important;
20	}	24	}
		25	+
		26	+ .navbar-form .input-group-btn > button > i {
		27	+ margin-top: -5px;
		28	+ }
		29	+
		30	+ .navbar .navbar-nav .dropdown .dropdown-menu {
		31	+ margin-left: 0px;
		32	+ padding: 0px;
		33	+ }
		34	+
		35	+ .navbar .navbar-nav .dropdown .dropdown-menu li > a {
		36	+ color: #333333 !important;
		37	+ }
		38	+ .navbar .navbar-nav .dropdown .dropdown-menu li > a:hover {
		39	+ color: #009688 !important;
		40	+ }
21	}	41	}
22		42
23	@media(min-width: 768px) {	43	@media(min-width: 768px) {
	@@ -45,4 +65,11 @@		@@ -45,4 +65,11 @@
45	.navbar-form .input-group-btn {	65	.navbar-form .input-group-btn {
46	width: 50px !important;	66	width: 50px !important;
47	}	67	}
		68	+
		69	+ .navbar-nav li > a.profile {
		70	+ padding-top: 0px !important;
		71	+ padding-bottom:15px;
		72	+ padding-right:0px;
		73	+ padding-left: 0px;
		74	+ }
48	}	75	}
49	\ No newline at end of file	76	\ No newline at end of file
	@@ -6,7 +6,7 @@ $('.date-picker').datepicker({		@@ -6,7 +6,7 @@ $('.date-picker').datepicker({
6		6
7	$(function () {	7	$(function () {
8	//Dropdown menu collapse	8	//Dropdown menu collapse
9	- $('a[data-toggle="collapse"]').on('click', function (event) {	9	+ $('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) {
10	event.preventDefault();	10	event.preventDefault();
11	event.stopPropagation();	11	event.stopPropagation();
12	$($(this).data('parent')).find('.panel-collapse.in').collapse('hide');	12	$($(this).data('parent')).find('.panel-collapse.in').collapse('hide');