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	24	.language-selector > ul img{
25	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	28	.navbar-header{
42	29	width: 20%;
...	...
...	...	@@ -33,6 +33,23 @@
33	33	}
34	34
35	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	53	#btn-search {
37	54	margin-top: -5px;
38	55	height: 30px;
...	...	@@ -85,6 +102,26 @@
85	102	}
86	103
87	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	125	.navbar {
89	126	height: 50px;
90	127	}
...	...
...	...	@@ -97,6 +97,10 @@
97	97	<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-close-others="true">
98	98	<img src="{% static "img/brazilicon.png" %}" />
99	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	104	<ul class="dropdown-menu">
101	105	<li class="active">
102	106	<a href="#">
...	...	@@ -107,6 +111,13 @@
107	111	<li >
108	112	<a href="#">
109	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	121	<span>{% trans "EN" %}</span>
111	122	</a>
112	123	</li>
...	...