Commit f749ac4fcb2e0aace723581b186332c9fa728605
1 parent
9ea7091a
Exists in
master
and in
3 other branches
Adjusting menu resposive
Showing
4 changed files
with
64 additions
and
18 deletions
Show diff stats
amadeus/static/css/base/amadeus.css
... | ... | @@ -248,11 +248,10 @@ |
248 | 248 | color: white; |
249 | 249 | } |
250 | 250 | |
251 | -.navbar-nav li > a.profile { | |
252 | - padding-top: 0px !important; | |
253 | - padding-bottom:15px; | |
254 | - padding-right:0px; | |
255 | - padding-left: 0px; | |
251 | + | |
252 | + | |
253 | +.navbar-nav li.open { | |
254 | + background: #00695C; | |
256 | 255 | } |
257 | 256 | |
258 | 257 | .navbar-nav li > a { |
... | ... | @@ -269,6 +268,10 @@ |
269 | 268 | background: #00695C |
270 | 269 | } |
271 | 270 | |
271 | +.submenu { | |
272 | + -webkit-padding-start: 0px; | |
273 | +} | |
274 | + | |
272 | 275 | .top-search { |
273 | 276 | color: #F5F5F5; |
274 | 277 | } |
... | ... | @@ -330,15 +333,25 @@ |
330 | 333 | #system_accordion > .panel > .panel-heading > a:focus { |
331 | 334 | text-decoration: none; |
332 | 335 | } |
336 | +#system_accordion .panel-body { | |
337 | + padding-left: 0px; | |
338 | + padding-right: 0px; | |
339 | + padding-bottom: 0px; | |
340 | +} | |
333 | 341 | |
334 | 342 | #system_menu { |
335 | 343 | background: #F5F5F5; |
336 | 344 | } |
337 | 345 | |
338 | -#system_menu > .panel-body > a { | |
346 | +.submenu a { | |
339 | 347 | font-family: Roboto; |
340 | 348 | font-weight: normal; |
341 | 349 | font-size: 16px; |
350 | + display: block; | |
351 | + max-height: 50px; | |
352 | +} | |
353 | +.submenu a:hover { | |
354 | + text-decoration: none; | |
342 | 355 | } |
343 | 356 | /* End Dropdown menu Topbar */ |
344 | 357 | ... | ... |
amadeus/static/css/base/amadeus_responsive.css
... | ... | @@ -10,6 +10,10 @@ |
10 | 10 | height: 30px; |
11 | 11 | } |
12 | 12 | |
13 | + .navbar-nav { | |
14 | + margin: 0px -15px; | |
15 | + } | |
16 | + | |
13 | 17 | .navbar-form { |
14 | 18 | margin-left: -30px; |
15 | 19 | margin-right: -30px; |
... | ... | @@ -18,6 +22,22 @@ |
18 | 22 | .navbar .navbar-form { |
19 | 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 | 43 | @media(min-width: 768px) { |
... | ... | @@ -45,4 +65,11 @@ |
45 | 65 | .navbar-form .input-group-btn { |
46 | 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 | 76 | \ No newline at end of file | ... | ... |
amadeus/static/js/main.js
... | ... | @@ -6,7 +6,7 @@ $('.date-picker').datepicker({ |
6 | 6 | |
7 | 7 | $(function () { |
8 | 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 | 10 | event.preventDefault(); |
11 | 11 | event.stopPropagation(); |
12 | 12 | $($(this).data('parent')).find('.panel-collapse.in').collapse('hide'); | ... | ... |
amadeus/templates/base.html
... | ... | @@ -93,12 +93,15 @@ |
93 | 93 | </div> |
94 | 94 | <ul class="nav navbar-nav navbar-right notifications"> |
95 | 95 | {% if user.is_staff %} |
96 | - <li class="dropdown-accordion dropdown {{ settings_menu_active }}" data-accordion="#system_accordion" title data-original-title="{% trans 'settings' %}"> | |
97 | - <a href="#" data-toggle="dropdown"><i class="fa fa-cog" aria-hidden="true"></i></a> | |
98 | - <ul class="dropdown-menu pull-right" role="menu"> | |
96 | + <li class="dropdown {{ settings_menu_active }}" title data-original-title="{% trans 'settings' %}"> | |
97 | + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
98 | + <i class="fa fa-cog hidden-xs" aria-hidden="true"></i> | |
99 | + <span class="visible-xs-inline">{% trans 'Settings' %}</span> | |
100 | + </a> | |
101 | + <ul class="dropdown-menu" role="menu"> | |
99 | 102 | <li><a href="{% url 'users:manage' %}">{% trans 'Manage Users' %}</a></li> |
100 | 103 | <li><a href="{% url 'categories:index' %}">{% trans 'Manage Categories' %}</a></li> |
101 | - <li> | |
104 | + <li class="dropdown-accordion" data-accordion="#system_accordion"> | |
102 | 105 | <div class="panel-group" id="system_accordion"> |
103 | 106 | <div class="panel panel-default"> |
104 | 107 | <div class="panel-heading"> |
... | ... | @@ -110,9 +113,11 @@ |
110 | 113 | </div> |
111 | 114 | <div class="panel-collapse collapse" id="system_menu"> |
112 | 115 | <div class="panel-body"> |
113 | - <a href="{% url 'categories:index' %}">{% trans 'Mail Sender' %}</a><br /> | |
114 | - <a href="{% url 'categories:index' %}">{% trans 'Security' %}</a><br /> | |
115 | - <a href="{% url 'categories:index' %}">{% trans 'Theme' %}</a> | |
116 | + <ul class="submenu"> | |
117 | + <li><a href="{% url 'categories:index' %}">{% trans 'Mail Sender' %}</a></li> | |
118 | + <li><a href="{% url 'categories:index' %}">{% trans 'Security' %}</a></li> | |
119 | + <li><a href="{% url 'categories:index' %}">{% trans 'Theme' %}</a></li> | |
120 | + </ul> | |
116 | 121 | </div> |
117 | 122 | </div> |
118 | 123 | </div> |
... | ... | @@ -122,11 +127,12 @@ |
122 | 127 | </li> |
123 | 128 | {% endif %} |
124 | 129 | |
125 | - <li data-toggle="tooltip" data-placement="bottom" title data-original-title="{{ user }}"> | |
126 | - <a href="" data-toggle="dropdown" class="profile"> | |
127 | - <img src="{{ user.image_url }}" style="width:50px;height:50px" /> | |
130 | + <li class="dropdown" data-toggle="tooltip" data-placement="bottom" title data-original-title="{{ user }}"> | |
131 | + <a href="" data-toggle="dropdown" class="dropdown-toggle profile"> | |
132 | + <img src="{{ user.image_url }}" class="hidden-xs" style="width:50px;height:50px" /> | |
133 | + <span class="visible-xs-inline">{{ user }}</span> | |
128 | 134 | </a> |
129 | - <ul class="dropdown-menu pull-right"> | |
135 | + <ul class="dropdown-menu" role="menu"> | |
130 | 136 | <li><a href="{% url 'users:profile' %}">{% trans 'Profile' %}</a></li> |
131 | 137 | <li><a href="{% url 'users:edit_profile' %}">{% trans 'Edit Profile' %}</a></li> |
132 | 138 | <li><a href="{% url 'users:change_pass' %}">{% trans 'Change Password' %}</a></li> | ... | ... |