Merge pull request #482 from tiwariav/task/3759/hosting_navbar
Task/3759 hosting navbar redesign
This commit is contained in:
		
				commit
				
					
						71e6fac997
					
				
			
		
					 8 changed files with 135 additions and 107 deletions
				
			
		|  | @ -122,7 +122,7 @@ button, input, optgroup, select, textarea { | ||||||
| 
 | 
 | ||||||
| .navbar-default { | .navbar-default { | ||||||
|     background: #fff; |     background: #fff; | ||||||
|     border: none; |     /* border: none; */ | ||||||
|     padding: 5px; |     padding: 5px; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | @ -143,15 +143,19 @@ button, input, optgroup, select, textarea { | ||||||
| 
 | 
 | ||||||
| .navbar-default .navbar-nav>li>a { | .navbar-default .navbar-nav>li>a { | ||||||
|     cursor: pointer; |     cursor: pointer; | ||||||
|     /*font-family: 'Lato-Light', sans-serif;*/ |     font-weight: 400; | ||||||
|     font-weight: 300; |  | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .navbar-transparent .navbar-nav>li>a { | .navbar-transparent .navbar-nav>li>a { | ||||||
|     color: #fff; |     color: #fff; | ||||||
|     cursor: pointer; |     cursor: pointer; | ||||||
|     /*font-family: 'Lato-Light', sans-serif;*/ | } | ||||||
|     font-weight: 300; | 
 | ||||||
|  | @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 { | .navbar-transparent .navbar-nav>li>a:hover { | ||||||
|  | @ -924,7 +928,7 @@ tech-sub-sec h2 { | ||||||
|     border: 1px solid #fff; |     border: 1px solid #fff; | ||||||
|     -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 14px 20px -5px rgba(77, 77, 77, 0.5); | ||||||
|     display: none; |     display: none; | ||||||
|     text-align: center; |     text-align: center; | ||||||
|     border-radius: 4px !important; |     border-radius: 4px !important; | ||||||
|  | @ -976,8 +980,12 @@ tech-sub-sec h2 { | ||||||
| 
 | 
 | ||||||
| .dropdown-menu>li>a { | .dropdown-menu>li>a { | ||||||
|     font-size: 13px; |     font-size: 13px; | ||||||
|     font-weight: 300; | } | ||||||
|     /*font-family: 'Lato-Light', sans-serif;*/ | 
 | ||||||
|  | @media (min-width: 768px) { | ||||||
|  |     .dropdown-menu>li>a { | ||||||
|  |         font-weight: 300; | ||||||
|  |     } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .navbar-default .navbar-nav>.active>a, | .navbar-default .navbar-nav>.active>a, | ||||||
|  |  | ||||||
|  | @ -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"> | <nav class="navbar navbar-default navbar-fixed-top topnav"> | ||||||
|     <div class="topnav"> |     <div class="topnav"> | ||||||
|         <!-- Brand and toggle get grouped for better mobile display --> |         <!-- Brand and toggle get grouped for better mobile display --> | ||||||
|         <div class="navbar-header"> |         <div class="navbar-header"> | ||||||
|             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> |             <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> |                 <span class="icon-bar"></span> | ||||||
|                 <span class="icon-bar"></span> |                 <span class="icon-bar"></span> | ||||||
|  |  | ||||||
|  | @ -12,42 +12,54 @@ from django.views.generic import RedirectView | ||||||
| from django.core.urlresolvers import reverse_lazy | from django.core.urlresolvers import reverse_lazy | ||||||
| import debug_toolbar | 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', |     url(r'^open_api/', include('opennebula_api.urls', | ||||||
|                                           namespace='opennebula_api')), |                                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(), | ||||||
|                url(r'^nosystemd/', include('nosystemd.urls', namespace="nosystemd")), |         name="node.hosting"), | ||||||
|                url(r'^taggit_autosuggest/', include('taggit_autosuggest.urls')), |     url(r'^djangohosting/', DjangoHostingView.as_view(), | ||||||
|                url(r'^jsi18n/(?P<packages>\S+?)/$', |         name="django.hosting"), | ||||||
|                    i18n.javascript_catalog), |     url(r'^nosystemd/', include('nosystemd.urls', namespace="nosystemd")), | ||||||
|                ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) |     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 | # note the django CMS URLs included via i18n_patterns | ||||||
| urlpatterns += i18n_patterns( | urlpatterns += i18n_patterns( | ||||||
|                              url(r'^$', LandingView.as_view()), |     url(r'^$', LandingView.as_view()), | ||||||
|                              url(r'^admin/', include(admin.site.urls)), |     url(r'^admin/', include(admin.site.urls)), | ||||||
|                              url(r'^datacenterlight/', include('datacenterlight.urls', namespace="datacenterlight")), |     url(r'^datacenterlight/', | ||||||
|                              url(r'^hosting/', RedirectView.as_view( |         include('datacenterlight.urls', namespace="datacenterlight")), | ||||||
|                                  url=reverse_lazy('hosting:login')), name='redirect_hosting_login'), |     url(r'^hosting/', RedirectView.as_view( | ||||||
|                              url(r'^alplora/', include('alplora.urls', namespace="alplora")), |         url=reverse_lazy('hosting:login')), name='redirect_hosting_login'), | ||||||
|                              url(r'^membership/', include(membership_urls)), |     url(r'^alplora/', include('alplora.urls', namespace="alplora")), | ||||||
|                              url(r'^digitalglarus/', include('digitalglarus.urls', |     url(r'^membership/', include(membership_urls)), | ||||||
|                                                              namespace="digitalglarus")), |     url(r'^digitalglarus/', include('digitalglarus.urls', | ||||||
|                              # url(r'^blog/', include('ungleich.urls', namespace='ungleich')), |                                     namespace="digitalglarus")), | ||||||
|                              url(r'^', |     # url(r'^blog/', include('ungleich.urls', namespace='ungleich')), | ||||||
|                                  include('ungleich_page.urls', namespace='ungleich_page'), |     url(r'^', | ||||||
|                                  name='ungleich_page'), |         include('ungleich_page.urls', | ||||||
|                              url(r'^blog/', include('ungleich.urls', namespace='ungleich')), |                 namespace='ungleich_page'), | ||||||
|                              url(r'^', include('cms.urls')) |         name='ungleich_page'), | ||||||
|                              ) |     url(r'^blog/', include('ungleich.urls', | ||||||
|  |                            namespace='ungleich')), | ||||||
|  |     url(r'^', include('cms.urls')) | ||||||
|  | ) | ||||||
|  | 
 | ||||||
| urlpatterns += [ | urlpatterns += [ | ||||||
|                         url(r'^media/(?P<path>.*)$', |     url(r'^media/(?P<path>.*)$', | ||||||
|                             static_view.serve, { |         static_view.serve, { | ||||||
|                                 'document_root': settings.MEDIA_ROOT, |             'document_root': settings.MEDIA_ROOT, | ||||||
|                             }), |         }), | ||||||
|                         ] | ] | ||||||
|  | 
 | ||||||
| if settings.DEBUG: | if settings.DEBUG: | ||||||
|     urlpatterns += [url(r'^__debug__/', include(debug_toolbar.urls))] |     urlpatterns += [url(r'^__debug__/', include(debug_toolbar.urls))] | ||||||
|  |  | ||||||
|  | @ -5,7 +5,7 @@ | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .dashboard-container { | .dashboard-container { | ||||||
|   padding-top:70px; |   padding-top: 80px; | ||||||
|   padding-bottom: 70px; |   padding-bottom: 70px; | ||||||
|   width: 90%; |   width: 90%; | ||||||
|   margin: 0 auto; |   margin: 0 auto; | ||||||
|  |  | ||||||
|  | @ -34,7 +34,8 @@ h6 { | ||||||
| 
 | 
 | ||||||
| .navbar-default { | .navbar-default { | ||||||
|     background: #fff; |     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 { | .navbar-default .navbar-header { | ||||||
|  | @ -78,13 +79,20 @@ h6 { | ||||||
|     left: 0 !important; |     left: 0 !important; | ||||||
|     min-width: 155px; |     min-width: 155px; | ||||||
|     margin-left: 15px; |     margin-left: 15px; | ||||||
|     padding: 5px !important; |     padding: 0 5px 8px !important; | ||||||
| } | } | ||||||
| @media(min-width: 768px) { | @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: ''; |         content: ''; | ||||||
|         display: block; |         display: block; | ||||||
|         height: 1px; |         height: 1px; | ||||||
|  | @ -93,13 +101,12 @@ h6 { | ||||||
|         top: -1px; |         top: -1px; | ||||||
|         left: -1px; |         left: -1px; | ||||||
|         right: -1px; |         right: -1px; | ||||||
|     } |     } */ | ||||||
| } | } | ||||||
| .navbar-right .highlights-dropdown .dropdown-menu > li > a{ | .navbar-right .highlights-dropdown .dropdown-menu > li > a{ | ||||||
|     font-size: 13px; |     font-size: 13px; | ||||||
|     font-weight: 300; |  | ||||||
|     font-family: 'Lato', sans-serif; |     font-family: 'Lato', sans-serif; | ||||||
|     padding: 1px 10px !important; |     padding: 1px 10px 1px 18px !important; | ||||||
|     background: transparent; |     background: transparent; | ||||||
|     color: #333; |     color: #333; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -53,61 +53,7 @@ | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|     {% block navbar %} |     {% 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 %} |     {% endblock navbar %} | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
							
								
								
									
										52
									
								
								hosting/templates/hosting/includes/_navbar_user.html
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										52
									
								
								hosting/templates/hosting/includes/_navbar_user.html
									
										
									
									
									
										Normal file
									
								
							|  | @ -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>  {% 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>  {{request.user.name}} <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>  Deutsch</a> | ||||||
|  |                     {% else %} | ||||||
|  |                         <a href="{% change_lang 'en-us' %}"><i class="fa fa-fw fa-globe" aria-hidden="true"></i>  English</a> | ||||||
|  |                     {% endif %} | ||||||
|  |                 </li> | ||||||
|  |             </ul> | ||||||
|  |         </div> | ||||||
|  |         {% endif %} | ||||||
|  |         <!-- /.navbar-collapse --> | ||||||
|  |     </div> | ||||||
|  |     <!-- /.container --> | ||||||
|  | </nav> | ||||||
|  | @ -11,6 +11,7 @@ from .views import ( | ||||||
|     SSHKeyChoiceView, DashboardView, SettingsView) |     SSHKeyChoiceView, DashboardView, SettingsView) | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | 
 | ||||||
| urlpatterns = [ | urlpatterns = [ | ||||||
|     url(r'index/?$', IndexView.as_view(), name='index'), |     url(r'index/?$', IndexView.as_view(), name='index'), | ||||||
|     url(r'django/?$', DjangoHostingView.as_view(), name='djangohosting'), |     url(r'django/?$', DjangoHostingView.as_view(), name='djangohosting'), | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue