Responsivity adjustments on bottom menu

Filipe Medeiros
1 parent 34f3c2c1
Showing 3 changed files with 80 additions and 36 deletions Show diff stats
amadeus/static/css/base/amadeus.css
amadeus/static/css/base/amadeus_responsive.css
amadeus/templates/base.html
@@ -37,14 +37,6 @@ a:focus {
     width: 20%;
 }
-.bottom-menu {
-    position: fixed;
-    bottom: 0px;
-    width: 100%;
-    padding: 0px 30px;
-    z-index: 999;
-    height: 50px;
-}
 /* Initial page starts */
 .users-cloud {
@@ -635,28 +627,6 @@ a:focus {
 }
 /* End Profile */
-/* Bottom Menu */
-.clearfix {
-    height: 60px;
-}
-
-
-.mobile-menu {
-    -webkit-padding-start: 0px;
-}
-
-.mobile-menu, .mobile-menu li {
-    display: inline-block;
-}
-
-.mobile-menu .item {
-    padding-top: 3px;
-    text-align: center;
-    height: 50px;
-    width: 55px;
-    font-size: 35px;
-}
-/* End Bottom Menu */
 /* subjects app starts*/
 .access-subject {
@@ -45,9 +45,9 @@
 	}
   	.logo-login{
-	    margin-top: 250px;
+	    margin-top: 150px;
 	    margin-bottom: 30px;
-	    width: 20%;
+	    width: 40%;
 	}
 	h2{
@@ -55,11 +55,11 @@
 	}
 	p{
-		font-size: 32pt;
+		font-size: 24pt;
 	}
 	a{
-		font-size: 32pt;
+		font-size: 24pt;
 	}
 	input[type="text"] {
@@ -77,11 +77,11 @@
 	}
 	.btn {
-    	font-size: 32pt;
+    	font-size: 24pt;
 	}
 	span{
-		font-size: 32pt;
+		font-size: 24pt;
 	}
 	.contrast-login{
@@ -89,7 +89,42 @@
 		margin-top: 100px;
 	}
+	/* Bottom Menu */
+	.clearfix {
+	    height: 60px;
+	}
+
+	.bottom-menu {
+		position: fixed;	    
+	    bottom: 0px;
+	    width: 100%;
+	    padding: 0px 30px;
+	    z-index: 999;
+	    height: 60px;
+	}
+
+	.mobile-menu {
+	    -webkit-padding-start: 0px;
+	    width: 100%;
+	}
+
+	.mobile-menu, .mobile-menu li {
+	    display: inline-block;
+	    float: left;
+	}
+	.mobile-menu .item {
+	    padding-top: 3px;
+	    text-align: center;
+	    height: 100px;
+	    width: 20%;
+	    font-size: 35px;
+	}
+
+	.mobile-menu a {
+	    font-size: 32pt;
+	}
+	/* End Bottom Menu */
 }
 @media(max-width: 768px) {
@@ -278,6 +278,44 @@
         <div class="bottom-menu visible-xs visible-sm">
             <div class="row">
                 <div class="col-sm-12 col-xs-12 text-center">
+
+                    <ul class="mobile-menu">
+                        <li class="item {{ subjects_menu_active }}" data-toggle="tooltip" data-placement="top" title="{% trans "Subjects" %}">
+                            <a href="{% url 'subjects:index' %}">
+                                <i class="fa fa-graduation-cap"></i>
+                            </a>
+                        </li>
+
+                        <li class="item {{ mural_menu_active }} action_icon" data-toggle="tooltip" data-placement="top" title="{% trans "Mural" %}">
+                            <a href="{% url 'mural:manage_general' %}">
+                                <i class="fa fa-list" aria-hidden="true" ></i>
+                                <span class="badge notify_badge mural_badge" {% if mural_notifications_count == 0 %} style="display:none" {% endif %}>{% if mural_notifications_count > 99 %} +99 {% else %} {{ mural_notifications_count }} {% endif %}</span>
+                            </a>
+                        </li>
+
+                        <li class="item {{ chat_menu_active }} action_icon" data-toggle="tooltip" data-placement="top" title="{% trans "Messages" %}">
+                            <a href="{% url 'chat:manage_general' %}">
+                                <i class="fa fa-envelope-o" aria-hidden="true"></i>
+                                <span class="badge notify_badge chat_badge" {% if chat_notifications_count == 0 %} style="display:none" {% endif %}>{% if chat_notifications_count > 99 %} +99 {% else %} {{ chat_notifications_count }} {% endif %}</span>
+                            </a>
+                        </li>
+
+
+                        <li class="item {{ pendencies_menu_active }} action_icon" data-toggle="tooltip" data-placement="top" title="{% trans "Pendencies" %}">
+                            <a href="{% url 'notifications:manage' %}">
+                                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                                {% if notifications_count > 0 %}
+                                    <span class="badge notify_badge">{% if notifications_count > 99 %} +99 {% else %} {{ notifications_count }} {% endif %}</span>
+                                {% endif %}
+                            </a>
+                        </li>
+
+                        <li class="item" data-toggle="tooltip" data-placement="top" title="{% trans "Analytics" %}">
+                            <a href="{% url 'dashboards:view_general' %}"><i class="fa fa-bar-chart" aria-hid{% get_current_language as LANGUAGE_CODE %}den="true"></i></a>
+                        </li>
+                    </ul>
+                    <!--
+
                     <ul class="mobile-menu">
                         <li class="item {{ subjects_menu_active }}" data-toggle="tooltip" data-placement="top" title="{% trans "Subjects" %}">
                             <a href="{% url 'subjects:index' %}">
@@ -308,6 +346,7 @@
                             <a href="{% url 'dashboards:view_general' %}"><i class="fa fa-bar-chart" aria-hid{% get_current_language as LANGUAGE_CODE %}den="true"></i></a>
                         </li>
                     </ul>
+                -->
                 </div>
             </div>
         </div>
	@@ -37,14 +37,6 @@ a:focus {		@@ -37,14 +37,6 @@ a:focus {
37	width: 20%;	37	width: 20%;
38	}	38	}
39		39
40	-.bottom-menu {
41	- position: fixed;
42	- bottom: 0px;
43	- width: 100%;
44	- padding: 0px 30px;
45	- z-index: 999;
46	- height: 50px;
47	-}
48		40
49	/* Initial page starts */	41	/* Initial page starts */
50	.users-cloud {	42	.users-cloud {
	@@ -635,28 +627,6 @@ a:focus {		@@ -635,28 +627,6 @@ a:focus {
635	}	627	}
636	/* End Profile */	628	/* End Profile */
637		629
638	-/* Bottom Menu */
639	-.clearfix {
640	- height: 60px;
641	-}
642	-
643	-
644	-.mobile-menu {
645	- -webkit-padding-start: 0px;
646	-}
647	-
648	-.mobile-menu, .mobile-menu li {
649	- display: inline-block;
650	-}
651	-
652	-.mobile-menu .item {
653	- padding-top: 3px;
654	- text-align: center;
655	- height: 50px;
656	- width: 55px;
657	- font-size: 35px;
658	-}
659	-/* End Bottom Menu */
660		630
661	/* subjects app starts*/	631	/* subjects app starts*/
662	.access-subject {	632	.access-subject {
	@@ -45,9 +45,9 @@		@@ -45,9 +45,9 @@
45	}	45	}
46		46
47	.logo-login{	47	.logo-login{
48	- margin-top: 250px;	48	+ margin-top: 150px;
49	margin-bottom: 30px;	49	margin-bottom: 30px;
50	- width: 20%;	50	+ width: 40%;
51	}	51	}
52		52
53	h2{	53	h2{
	@@ -55,11 +55,11 @@		@@ -55,11 +55,11 @@
55	}	55	}
56		56
57	p{	57	p{
58	- font-size: 32pt;	58	+ font-size: 24pt;
59	}	59	}
60		60
61	a{	61	a{
62	- font-size: 32pt;	62	+ font-size: 24pt;
63	}	63	}
64		64
65	input[type="text"] {	65	input[type="text"] {
	@@ -77,11 +77,11 @@		@@ -77,11 +77,11 @@
77	}	77	}
78		78
79	.btn {	79	.btn {
80	- font-size: 32pt;	80	+ font-size: 24pt;
81	}	81	}
82		82
83	span{	83	span{
84	- font-size: 32pt;	84	+ font-size: 24pt;
85	}	85	}
86		86
87	.contrast-login{	87	.contrast-login{
	@@ -89,7 +89,42 @@		@@ -89,7 +89,42 @@
89	margin-top: 100px;	89	margin-top: 100px;
90	}	90	}
91		91
		92	+ /* Bottom Menu */
		93	+ .clearfix {
		94	+ height: 60px;
		95	+ }
		96	+
		97	+ .bottom-menu {
		98	+ position: fixed;
		99	+ bottom: 0px;
		100	+ width: 100%;
		101	+ padding: 0px 30px;
		102	+ z-index: 999;
		103	+ height: 60px;
		104	+ }
		105	+
		106	+ .mobile-menu {
		107	+ -webkit-padding-start: 0px;
		108	+ width: 100%;
		109	+ }
		110	+
		111	+ .mobile-menu, .mobile-menu li {
		112	+ display: inline-block;
		113	+ float: left;
		114	+ }
92		115
		116	+ .mobile-menu .item {
		117	+ padding-top: 3px;
		118	+ text-align: center;
		119	+ height: 100px;
		120	+ width: 20%;
		121	+ font-size: 35px;
		122	+ }
		123	+
		124	+ .mobile-menu a {
		125	+ font-size: 32pt;
		126	+ }
		127	+ /* End Bottom Menu */
93	}	128	}
94		129
95	@media(max-width: 768px) {	130	@media(max-width: 768px) {
	@@ -278,6 +278,44 @@		@@ -278,6 +278,44 @@
278	<div class="bottom-menu visible-xs visible-sm">	278	<div class="bottom-menu visible-xs visible-sm">
279	<div class="row">	279	<div class="row">
280	<div class="col-sm-12 col-xs-12 text-center">	280	<div class="col-sm-12 col-xs-12 text-center">
		281	+
		282	+ <ul class="mobile-menu">
		283	+ <li class="item {{ subjects_menu_active }}" data-toggle="tooltip" data-placement="top" title="{% trans "Subjects" %}">
		284	+ <a href="{% url 'subjects:index' %}">
		285	+ <i class="fa fa-graduation-cap"></i>
		286	+ </a>
		287	+ </li>
		288	+
		289	+ <li class="item {{ mural_menu_active }} action_icon" data-toggle="tooltip" data-placement="top" title="{% trans "Mural" %}">
		290	+ <a href="{% url 'mural:manage_general' %}">
		291	+ <i class="fa fa-list" aria-hidden="true" ></i>
		292	+ <span class="badge notify_badge mural_badge" {% if mural_notifications_count == 0 %} style="display:none" {% endif %}>{% if mural_notifications_count > 99 %} +99 {% else %} {{ mural_notifications_count }} {% endif %}</span>
		293	+ </a>
		294	+ </li>
		295	+
		296	+ <li class="item {{ chat_menu_active }} action_icon" data-toggle="tooltip" data-placement="top" title="{% trans "Messages" %}">
		297	+ <a href="{% url 'chat:manage_general' %}">
		298	+ <i class="fa fa-envelope-o" aria-hidden="true"></i>
		299	+ <span class="badge notify_badge chat_badge" {% if chat_notifications_count == 0 %} style="display:none" {% endif %}>{% if chat_notifications_count > 99 %} +99 {% else %} {{ chat_notifications_count }} {% endif %}</span>
		300	+ </a>
		301	+ </li>
		302	+
		303	+
		304	+ <li class="item {{ pendencies_menu_active }} action_icon" data-toggle="tooltip" data-placement="top" title="{% trans "Pendencies" %}">
		305	+ <a href="{% url 'notifications:manage' %}">
		306	+ <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
		307	+ {% if notifications_count > 0 %}
		308	+ <span class="badge notify_badge">{% if notifications_count > 99 %} +99 {% else %} {{ notifications_count }} {% endif %}</span>
		309	+ {% endif %}
		310	+ </a>
		311	+ </li>
		312	+
		313	+ <li class="item" data-toggle="tooltip" data-placement="top" title="{% trans "Analytics" %}">
		314	+ <a href="{% url 'dashboards:view_general' %}"><i class="fa fa-bar-chart" aria-hid{% get_current_language as LANGUAGE_CODE %}den="true"></i></a>
		315	+ </li>
		316	+ </ul>
		317	+ <!--
		318	+
281	<ul class="mobile-menu">	319	<ul class="mobile-menu">
282	<li class="item {{ subjects_menu_active }}" data-toggle="tooltip" data-placement="top" title="{% trans "Subjects" %}">	320	<li class="item {{ subjects_menu_active }}" data-toggle="tooltip" data-placement="top" title="{% trans "Subjects" %}">
283	<a href="{% url 'subjects:index' %}">	321	<a href="{% url 'subjects:index' %}">
	@@ -308,6 +346,7 @@		@@ -308,6 +346,7 @@
308	<a href="{% url 'dashboards:view_general' %}"><i class="fa fa-bar-chart" aria-hid{% get_current_language as LANGUAGE_CODE %}den="true"></i></a>	346	<a href="{% url 'dashboards:view_general' %}"><i class="fa fa-bar-chart" aria-hid{% get_current_language as LANGUAGE_CODE %}den="true"></i></a>
309	</li>	347	</li>
310	</ul>	348	</ul>
		349	+ -->
311	</div>	350	</div>
312	</div>	351	</div>
313	</div>	352	</div>