Merge pull request #482 from tiwariav/task/3759/hosting_navbar

Task/3759 hosting navbar redesign

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -122,7 +122,7 @@ button, input, optgroup, select, textarea {
 
 .navbar-default {
     background: #fff;
-    border: none;
+    /* border: none; */
     padding: 5px;
 }
 
@@ -143,16 +143,20 @@ button, input, optgroup, select, textarea {
 
 .navbar-default .navbar-nav>li>a {
     cursor: pointer;
-    /*font-family: 'Lato-Light', sans-serif;*/
+    font-weight: 400;
-    font-weight: 300;
 }
 
 .navbar-transparent .navbar-nav>li>a {
     color: #fff;
     cursor: pointer;
-    /*font-family: 'Lato-Light', sans-serif;*/
+}
+
+@media (min-width: 768px) {
+    .navbar-default .navbar-nav>li>a,
+    .navbar-transparent .navbar-nav>li>a {
         font-weight: 300;
     }
+}
 
 .navbar-transparent .navbar-nav>li>a:hover {
     color: #fff;
@@ -924,7 +928,7 @@ tech-sub-sec h2 {
     border: 1px solid #fff;
     -webkit-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 14px 20px -5px rgba(77, 77, 77, 0.5);
     display: none;
     text-align: center;
     border-radius: 4px !important;
@@ -976,8 +980,12 @@ tech-sub-sec h2 {
 
 .dropdown-menu>li>a {
     font-size: 13px;
+}
+
+@media (min-width: 768px) {
+    .dropdown-menu>li>a {
         font-weight: 300;
-    /*font-family: 'Lato-Light', sans-serif;*/
+    }
 }
 
 .navbar-default .navbar-nav>.active>a,

datacenterlight/templates/datacenterlight/includes/_navbar.html

@@ -1,10 +1,12 @@
-{% load staticfiles i18n%} {% load custom_tags %} {% get_current_language as LANGUAGE_CODE %}
+{% load staticfiles i18n%}
+{% load custom_tags %}
+{% get_current_language as LANGUAGE_CODE %}
 <nav class="navbar navbar-default navbar-fixed-top topnav">
     <div class="topnav">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                <span class="sr-only">Toggle navigation</span>
+                <span class="sr-only">{% trans "Toggle navigation" %}</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>

dynamicweb/urls.py

@@ -12,24 +12,32 @@ from django.views.generic import RedirectView
 from django.core.urlresolvers import reverse_lazy
 import debug_toolbar
 
-urlpatterns = [url(r'^index.html$', LandingView.as_view()),
+urlpatterns = [
-               url(r'^hosting/', include('hosting.urls', namespace="hosting")),
+    url(r'^index.html$', LandingView.as_view()),
     url(r'^open_api/', include('opennebula_api.urls',
                                namespace='opennebula_api')),
-               url(r'^railshosting/', RailsHostingView.as_view(), name="rails.hosting"),
+    url(r'^railshosting/', RailsHostingView.as_view(),
-               url(r'^nodehosting/', NodeJSHostingView.as_view(), name="node.hosting"),
+        name="rails.hosting"),
-               url(r'^djangohosting/', DjangoHostingView.as_view(), name="django.hosting"),
+    url(r'^nodehosting/', NodeJSHostingView.as_view(),
+        name="node.hosting"),
+    url(r'^djangohosting/', DjangoHostingView.as_view(),
+        name="django.hosting"),
     url(r'^nosystemd/', include('nosystemd.urls', namespace="nosystemd")),
     url(r'^taggit_autosuggest/', include('taggit_autosuggest.urls')),
     url(r'^jsi18n/(?P<packages>\S+?)/$',
         i18n.javascript_catalog),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 
+urlpatterns += i18n_patterns(
+    url(r'^hosting/', include('hosting.urls', namespace="hosting")),
+)
+
 # note the django CMS URLs included via i18n_patterns
 urlpatterns += i18n_patterns(
     url(r'^$', LandingView.as_view()),
     url(r'^admin/', include(admin.site.urls)),
-                             url(r'^datacenterlight/', include('datacenterlight.urls', namespace="datacenterlight")),
+    url(r'^datacenterlight/',
+        include('datacenterlight.urls', namespace="datacenterlight")),
     url(r'^hosting/', RedirectView.as_view(
         url=reverse_lazy('hosting:login')), name='redirect_hosting_login'),
     url(r'^alplora/', include('alplora.urls', namespace="alplora")),
@@ -38,16 +46,20 @@ urlpatterns += i18n_patterns(
                                     namespace="digitalglarus")),
     # url(r'^blog/', include('ungleich.urls', namespace='ungleich')),
     url(r'^',
-                                 include('ungleich_page.urls', namespace='ungleich_page'),
+        include('ungleich_page.urls',
+                namespace='ungleich_page'),
         name='ungleich_page'),
-                             url(r'^blog/', include('ungleich.urls', namespace='ungleich')),
+    url(r'^blog/', include('ungleich.urls',
+                           namespace='ungleich')),
     url(r'^', include('cms.urls'))
 )
+
 urlpatterns += [
     url(r'^media/(?P<path>.*)$',
         static_view.serve, {
             'document_root': settings.MEDIA_ROOT,
         }),
 ]
+
 if settings.DEBUG:
     urlpatterns += [url(r'^__debug__/', include(debug_toolbar.urls))]

hosting/static/hosting/css/commons.css

@@ -5,7 +5,7 @@
 }
 
 .dashboard-container {
-  padding-top:70px;
+  padding-top: 80px;
   padding-bottom: 70px;
   width: 90%;
   margin: 0 auto;

hosting/static/hosting/css/landing-page.css

@@ -34,7 +34,8 @@ h6 {
 
 .navbar-default {
     background: #fff;
-    box-shadow: 0 3px 3px -2px hsla(0,0%,78%,.72);
+    /* box-shadow: 0 3px 3px -2px hsla(0,0%,78%,.72); */
+    padding: 5px;
 }
 
 .navbar-default .navbar-header {
@@ -78,13 +79,20 @@ h6 {
     left: 0 !important;
     min-width: 155px;
     margin-left: 15px;
-    padding: 5px !important;
+    padding: 0 5px 8px !important;
 }
 @media(min-width: 768px) {
-    .navbar-right .highlights-dropdown .dropdown-menu {
+    .navbar-default .navbar-nav>li>a,
-        border: 1px solid #fff;
+    .navbar-right .highlights-dropdown .dropdown-menu > li > a {
+        font-weight: 300;
     }
-    .navbar-right .highlights-dropdown .dropdown-menu:before {
+    .navbar-right .highlights-dropdown .dropdown-menu {
+        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.02);
+        border-width: 0 0 1px 0;
+        border-color: #e7e7e7;
+        box-shadow: -8px 14px 20px -5px rgba(77, 77, 77, 0.5);
+    }
+/*     .navbar-right .highlights-dropdown .dropdown-menu:before {
         content: '';
         display: block;
         height: 1px;
@@ -93,13 +101,12 @@ h6 {
         top: -1px;
         left: -1px;
         right: -1px;
-    }
+    } */
 }
 .navbar-right .highlights-dropdown .dropdown-menu > li > a{
     font-size: 13px;
-    font-weight: 300;
     font-family: 'Lato', sans-serif;
-    padding: 1px 10px !important;
+    padding: 1px 10px 1px 18px !important;
     background: transparent;
     color: #333;
 }

hosting/templates/hosting/base_short.html

@@ -53,61 +53,7 @@
 
 
     {% block navbar %}
-
+        {% include "hosting/includes/_navbar_user.html" %}
-        <!-- Navigation -->
-
-        <nav class="navbar navbar-default  navbar-fixed-top topnav" role="navigation">
-            <div class="container topnav">
-                <!-- Brand and toggle get grouped for better mobile display -->
-                <div class="navbar-header">
-                    {% if request.user.is_authenticated %}
-                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                            <span class="sr-only">Toggle navigation</span>
-                            <span class="icon-bar"></span>
-                            <span class="icon-bar"></span>
-                            <span class="icon-bar"></span>
-                        </button>
-                    {% endif %}
-                    <a class="navbar-brand topnav" href="{% url 'datacenterlight:index' %}"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
-                </div>
-                {% if request.user.is_authenticated %}
-                <!-- Collect the nav links, forms, and other content for toggling -->
-                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                    <ul class="nav navbar-nav navbar-right">
-                        <li>
-                            <a href="{% url 'hosting:virtual_machines' %}">
-                                <i class="fa fa-server" aria-hidden="true"></i> {% trans "My Virtual Machines"%}
-                            </a>
-                        </li>
-                        <li>
-                            <a href="{% url 'hosting:orders' %}">
-                                <i class="fa fa-credit-card"></i> {% trans "My Orders"%}
-                            </a>
-                        </li>
-                        <li class="dropdown">
-                          <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
-                            <i class="glyphicon glyphicon-user"></i> {{request.user.name}} <span class="caret"></span></a>
-                          <ul id="g-account-menu" class="dropdown-menu" role="menu">
-                            <li>
-                                <a href="{% url 'hosting:ssh_keys' %}">
-                                    <i class="fa fa-key"></i> {% trans "SSH Keys" %}
-                                </a>
-                            </li>
-                            <li>
-                                <a href="{% url 'hosting:notifications' %}">
-                                    <i class="fa fa-bell"></i> {% trans "Notifications "%}
-                                </a>
-                            </li>
-                            <li><a href="{% url 'hosting:logout' %}"><i class="glyphicon glyphicon-lock"></i>{% trans "Logout"%} </a></li>
-                          </ul>
-                        </li>
-                    </ul>
-                </div>
-                {% endif %}
-                <!-- /.navbar-collapse -->
-            </div>
-            <!-- /.container -->
-        </nav>
     {% endblock navbar %}
 
 

hosting/templates/hosting/includes/_navbar_user.html

@@ -0,0 +1,52 @@
+{% load staticfiles %}
+{% load i18n %}
+{% load custom_tags %}
+
+<!-- Navigation -->
+
+<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
+    <div class="topnav">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+            {% if request.user.is_authenticated %}
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">{% trans "Toggle navigation" %}</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+            {% endif %}
+            <a class="navbar-brand topnav" href="{% if site_url %}{{site_url}}{% else %}{{ request.session.hosting_url}}{% endif %}"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
+        </div>
+        {% if request.user.is_authenticated %}
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+            <ul class="nav navbar-nav navbar-right">
+                <li>
+                    <a href="{% url 'hosting:dashboard' %}">
+                        <i class="fa fa-fw fa-server" aria-hidden="true"></i>&nbsp;&nbsp;{% trans "Dashboard"%}
+                    </a>
+                </li>
+                <li class="dropdown highlights-dropdown">
+                    <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
+                        <i class="fa fa-fw fa-user"></i>&nbsp;&nbsp;{{request.user.name}}&nbsp;<span class="fa fa-fw fa-caret-down"></span>
+                    </a>
+                    <ul id="g-account-menu" class="dropdown-menu" role="menu">
+                        <li><a href="{% url 'hosting:logout' %}">{% trans "Logout"%}</a></li>
+                    </ul>
+                </li>
+                <li>
+                    {% get_current_language as LANGUAGE_CODE %}
+                    {% if LANGUAGE_CODE == 'en-us'%}
+                        <a href="{% change_lang 'de' %}"><i class="fa fa-fw fa-globe" aria-hidden="true"></i>&nbsp;&nbsp;Deutsch</a>
+                    {% else %}
+                        <a href="{% change_lang 'en-us' %}"><i class="fa fa-fw fa-globe" aria-hidden="true"></i>&nbsp;&nbsp;English</a>
+                    {% endif %}
+                </li>
+            </ul>
+        </div>
+        {% endif %}
+        <!-- /.navbar-collapse -->
+    </div>
+    <!-- /.container -->
+</nav>

hosting/urls.py

@@ -11,6 +11,7 @@ from .views import (
     SSHKeyChoiceView, DashboardView, SettingsView)
 
 
+
 urlpatterns = [
     url(r'index/?$', IndexView.as_view(), name='index'),
     url(r'django/?$', DjangoHostingView.as_view(), name='djangohosting'),