aatish/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

language options using bootstrap dropdown

Browse source
This commit is contained in:
ARvind Tiwari 2017-07-24 22:16:37 +05:30
parent 652054d334
commit 7319cc4e1d
2 changed files with 49 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
datacenterlight/static/datacenterlight/css/landing-page.css
View file

@ -161,37 +161,59 @@ h6 {
} }
.nav-language .drop-language{ .nav-language .drop-language{
position: absolute; /*position: absolute;*/
top: 45px; top: 45px;
left: -8px; left: auto !important;
background: #fff; /* background: #fff; */
width: 100px; width: 100px;
min-width: 100px;
height: 40px; height: 40px;
padding: 9px 10px; padding: 9px 10px;
-webkit-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1); -webkit-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
-moz-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1); -moz-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
box-shadow: -8px 13px 31px -8px rgba(77,77,77,1); box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
display: none; /*display: none;*/
z-index: 100; z-index: 100;
/* margin-left: 10px; */ /* margin-left: 10px; */
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
} }
.nav-language .open .drop-language{
width: 100px;
min-width: 100px;
}
.nav-language .drop-language a{ .nav-language .drop-language a{
cursor: pointer; cursor: pointer;
padding: 5px 10px !important;
font-family: 'Lato-Light', sans-serif; font-family: 'Lato-Light', sans-serif;
} }
/* Show the dropdown menu on hover */
@media (min-width: 769px) {
.nav-language .dropdown:hover .dropdown-menu {
display: block;
}
}
@media (max-width: 767px){
.nav-language .open .dropdown-menu>li>a {
line-height: 1.42857143;
}
}
.navbar-transparent .nav-language .drop-language{ .navbar-transparent .nav-language .drop-language{
background: transparent; background: transparent;
border: 1px solid #fff; border: 1px solid #fff;
} }
.navbar-transparent .nav-language .drop-language a{ .navbar-transparent .nav-language .drop-language a{
color: #fff; color: #fff;
padding: 5px 10px !important;
font-family: 'Lato-Light', sans-serif; font-family: 'Lato-Light', sans-serif;
} }
.nav-language:hover .drop-language{ /* .nav-language:hover .drop-language{
display: block; display: block;
} } */
.intro-header { .intro-header {
height: 100vh; height: 100vh;
text-align: center; text-align: center;
@ -1025,7 +1047,7 @@ line-height: 40px;
color: #777; color: #777;
} }
.nav-language:hover{ .nav-language:hover{
height: 80px; /*height: 80px;*/
} }
.navbar-transparent .nav-language .select-language { .navbar-transparent .nav-language .select-language {
color: #777; color: #777;

39
datacenterlight/templates/datacenterlight/includes/_navbar.html
View file

@ -18,7 +18,7 @@
<a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a> <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
<a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a> <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
{% endif %} {% endif %}
</div> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse--> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
@ -30,7 +30,7 @@
<li><a class="url" href="{% url 'datacenterlight:index' %}#your" data-url="#your" >{% trans "Scale out" %}</a></li> <li><a class="url" href="{% url 'datacenterlight:index' %}#your" data-url="#your" >{% trans "Scale out" %}</a></li>
<li><a class="url" href="{% url 'datacenterlight:index' %}#our" data-url="#our">{% trans "Reliable and light" %}</a></li> <li><a class="url" href="{% url 'datacenterlight:index' %}#our" data-url="#our">{% trans "Reliable and light" %}</a></li>
<li> <a class="url" href="{% url 'datacenterlight:index' %}#price" data-url="#price" >{% trans "Order VM" %}</a></li> <li> <a class="url" href="{% url 'datacenterlight:index' %}#price" data-url="#price" >{% trans "Order VM" %}</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a> <a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a>
@ -40,24 +40,25 @@
</li> </li>
{% endif %} {% endif %}
<li class="nav-language"> <li class="nav-language">
<div class="select-language"> <div class="dropdown">
{% if LANGUAGE_CODE == 'en-us'%} <div class="dropdown-toggle select-language" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>English</span> {% if LANGUAGE_CODE == 'en-us'%}
{% else %} <span>English</span>
<span>Deutsch</span> {% else %}
{% endif %} <span>Deutsch</span>
<i class="fa fa-globe" aria-hidden="true"></i> {% endif %}
</div> <i class="fa fa-globe" aria-hidden="true"></i>
<div onclick="return true" class="drop-language"> </div>
{% if LANGUAGE_CODE == 'en-us'%} <ul class="dropdown-menu drop-language dropdown-menu-right">
<a class="url" href="{% change_lang 'de' %}">Deutsch</a> {% if LANGUAGE_CODE == 'en-us'%}
{% else %} <li><a class="url" href="{% change_lang 'de' %}">Deutsch</a></li>
<a class="url" href="{% change_lang 'en-us' %}" >English</a> {% else %}
{% endif %} <li><a class="url" href="{% change_lang 'en-us' %}" >English</a></li>
</div> {% endif %}
</ul>
</div>
</li> </li>
</ul> </ul>
</div><!-- /.navbar-collapse --> </div><!-- /.navbar-collapse -->
</div> </div>
</div> </div>