added support for multiple size screens for language selector

felipebormann
1 parent da1d41b2
Showing 3 changed files with 48 additions and 13 deletions Show diff stats
amadeus/static/css/base/amadeus.css
amadeus/static/css/base/amadeus_responsive.css
amadeus/templates/base.html
@@ -24,19 +24,6 @@ a:focus {
 .language-selector > ul img{
     width: 15%;
 }
-.language-selector-on-header{
-    float: left;
-    width: 5%;
-}
-
-.language-selector-on-header img{
-    margin-top: 15%;
-    width: 40%;
-}
-.language-selector-on-header > ul img{
-    width: 30%;
-    margin-top: 0%;
-}
 .navbar-header{
     width: 20%;
@@ -33,6 +33,23 @@
 }
 @media(max-width: 768px) {
+	.language-selector-on-header img{
+		display: none;
+	}
+	.language-selector-on-header > ul img{
+	    display:none;
+	}
+
+	.language-selector-on-header h4{
+		color:white;
+	}
+
+	.language-selector-on-header .dropdown-menu{
+		width: 100%;
+		position: relative;
+	}
+
+
 	#btn-search {
 		margin-top: -5px;
 		height: 30px;
@@ -85,6 +102,26 @@
 }
 @media(min-width: 768px) {
+
+	.language-selector-on-header{
+	    float: left;
+	    width: 5%;
+	}
+
+	.language-selector-on-header img{
+	    margin-top: 15%;
+	    width: 30px;
+	}
+	.language-selector-on-header > ul img{
+	    width: 30%;
+	    margin-top: 0%;
+	}
+
+
+	.language-selector-on-header .title{
+		display:none;
+	}
+	    
 	.navbar {
 		height: 50px;
 	}
@@ -97,6 +97,10 @@
                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-close-others="true">
                             <img src="{% static "img/brazilicon.png" %}" />
                         </a>
+
+                        <a href="#" class="dropdown-toggle title" data-toggle="dropdown" data-close-others="true">
+                            <h4 >{% trans "Language Selector" %}</h4>
+                        </a>
                         <ul class="dropdown-menu">
                             <li class="active">
                               <a href="#">
@@ -107,6 +111,13 @@
                             <li >
                               <a href="#">
                                 <img src="{% static "img/euaicon.png" %}" />
+                                <span>{% trans "EN-US" %}</span>
+                              </a>
+                            </li>
+
+                            <li >
+                              <a href="#">
+                                <img src="{% static "img/euaicon.png" %}" />
                                 <span>{% trans "EN" %}</span>
                               </a>
                             </li>
	@@ -24,19 +24,6 @@ a:focus {		@@ -24,19 +24,6 @@ a:focus {
24	.language-selector > ul img{	24	.language-selector > ul img{
25	width: 15%;	25	width: 15%;
26	}	26	}
27	-.language-selector-on-header{
28	- float: left;
29	- width: 5%;
30	-}
31	-
32	-.language-selector-on-header img{
33	- margin-top: 15%;
34	- width: 40%;
35	-}
36	-.language-selector-on-header > ul img{
37	- width: 30%;
38	- margin-top: 0%;
39	-}
40		27
41	.navbar-header{	28	.navbar-header{
42	width: 20%;	29	width: 20%;
	@@ -33,6 +33,23 @@		@@ -33,6 +33,23 @@
33	}	33	}
34		34
35	@media(max-width: 768px) {	35	@media(max-width: 768px) {
		36	+ .language-selector-on-header img{
		37	+ display: none;
		38	+ }
		39	+ .language-selector-on-header > ul img{
		40	+ display:none;
		41	+ }
		42	+
		43	+ .language-selector-on-header h4{
		44	+ color:white;
		45	+ }
		46	+
		47	+ .language-selector-on-header .dropdown-menu{
		48	+ width: 100%;
		49	+ position: relative;
		50	+ }
		51	+
		52	+
36	#btn-search {	53	#btn-search {
37	margin-top: -5px;	54	margin-top: -5px;
38	height: 30px;	55	height: 30px;
	@@ -85,6 +102,26 @@		@@ -85,6 +102,26 @@
85	}	102	}
86		103
87	@media(min-width: 768px) {	104	@media(min-width: 768px) {
		105	+
		106	+ .language-selector-on-header{
		107	+ float: left;
		108	+ width: 5%;
		109	+ }
		110	+
		111	+ .language-selector-on-header img{
		112	+ margin-top: 15%;
		113	+ width: 30px;
		114	+ }
		115	+ .language-selector-on-header > ul img{
		116	+ width: 30%;
		117	+ margin-top: 0%;
		118	+ }
		119	+
		120	+
		121	+ .language-selector-on-header .title{
		122	+ display:none;
		123	+ }
		124	+
88	.navbar {	125	.navbar {
89	height: 50px;	126	height: 50px;
90	}	127	}
	@@ -97,6 +97,10 @@		@@ -97,6 +97,10 @@
97	<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-close-others="true">	97	<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-close-others="true">
98	<img src="{% static "img/brazilicon.png" %}" />	98	<img src="{% static "img/brazilicon.png" %}" />
99	</a>	99	</a>
		100	+
		101	+ <a href="#" class="dropdown-toggle title" data-toggle="dropdown" data-close-others="true">
		102	+ <h4 >{% trans "Language Selector" %}</h4>
		103	+ </a>
100	<ul class="dropdown-menu">	104	<ul class="dropdown-menu">
101	<li class="active">	105	<li class="active">
102	<a href="#">	106	<a href="#">
	@@ -107,6 +111,13 @@		@@ -107,6 +111,13 @@
107	<li >	111	<li >
108	<a href="#">	112	<a href="#">
109	<img src="{% static "img/euaicon.png" %}" />	113	<img src="{% static "img/euaicon.png" %}" />
		114	+ <span>{% trans "EN-US" %}</span>
		115	+ </a>
		116	+ </li>
		117	+
		118	+ <li >
		119	+ <a href="#">
		120	+ <img src="{% static "img/euaicon.png" %}" />
110	<span>{% trans "EN" %}</span>	121	<span>{% trans "EN" %}</span>
111	</a>	122	</a>
112	</li>	123	</li>