From eb1b3b6eb581afe7dd15d9f072d6179ec403111f Mon Sep 17 00:00:00 2001 From: ARvind Tiwari <tiwariav@gmail.com> Date: Mon, 24 Jul 2017 19:43:03 +0530 Subject: [PATCH] new transparent navbar include in login,signup,reset-password --- hosting/static/hosting/css/landing-page.css | 28 +++- hosting/templates/hosting/base_short.html | 144 +++++++++--------- .../hosting/includes/_navbar_transparent.html | 72 +++++++++ hosting/templates/hosting/login.html | 13 +- hosting/templates/hosting/reset_password.html | 7 +- hosting/templates/hosting/signup.html | 6 +- 6 files changed, 191 insertions(+), 79 deletions(-) create mode 100644 hosting/templates/hosting/includes/_navbar_transparent.html diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css index b1972eed..63a2f54a 100644 --- a/hosting/static/hosting/css/landing-page.css +++ b/hosting/static/hosting/css/landing-page.css @@ -39,6 +39,30 @@ h6 { font-size: 14px; } +.navbar-transparent { + background: transparent; + border: none; + padding: 20px; +} + +.navbar-transparent .navbar-nav>li>a { + color: #fff; + cursor: pointer; + font-family: 'Lato-Regular', sans-serif; +} +.navbar-transparent .navbar-nav>li>a:hover { + color: #fff; +} +.navbar-transparent .navbar-nav>li>a:focus, .navbar-transparent .navbar-nav>li>a:hover { + color: #fff; + background-color: transparent; +} + +.navbar-transparent #logoWhite{ + display: block; + width: 220px; +} + .lead { font-size: 18px; font-weight: 400; @@ -634,11 +658,11 @@ a.unlink:hover { .card-cvc-element { padding-left: 10px; } - + .hide-mobile{ display:none; } - + #billing-form .form-control { box-shadow: none !important; font-weight: 400; diff --git a/hosting/templates/hosting/base_short.html b/hosting/templates/hosting/base_short.html index 6a08b97b..b5e19238 100644 --- a/hosting/templates/hosting/base_short.html +++ b/hosting/templates/hosting/base_short.html @@ -48,78 +48,80 @@ <body> - <!-- 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"> - <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> - <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: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 "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> - <!-- - <li> - <a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a> - </li> - <li> - <a href="{{ request.session.hosting_url }}#your">{% trans "Your infrastructure"%}</a> - </li> - <li> - <a href="{{ request.session.hosting_url }}#our">{% trans "Our inftrastructure"%}</a> - </li> - <li> - <a href="{{ request.session.hosting_url }}#price">{% trans "Pricing" %}</a> - </li> - <li> - <a href="{{ request.session.hosting_url }}#contact">{% trans "Contact"%}</a> - </li> - <li> - <a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a> - </li> --> - </ul> - </div> - {% endif %} - <!-- /.navbar-collapse --> - </div> - <!-- /.container --> - </nav> + {% block navbar %} + <!-- 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"> + <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> + <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: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 "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> + <!-- + <li> + <a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a> + </li> + <li> + <a href="{{ request.session.hosting_url }}#your">{% trans "Your infrastructure"%}</a> + </li> + <li> + <a href="{{ request.session.hosting_url }}#our">{% trans "Our inftrastructure"%}</a> + </li> + <li> + <a href="{{ request.session.hosting_url }}#price">{% trans "Pricing" %}</a> + </li> + <li> + <a href="{{ request.session.hosting_url }}#contact">{% trans "Contact"%}</a> + </li> + <li> + <a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a> + </li> --> + </ul> + </div> + {% endif %} + <!-- /.navbar-collapse --> + </div> + <!-- /.container --> + </nav> + {% endblock navbar %} <div class="content-dashboard"> diff --git a/hosting/templates/hosting/includes/_navbar_transparent.html b/hosting/templates/hosting/includes/_navbar_transparent.html new file mode 100644 index 00000000..d3befe60 --- /dev/null +++ b/hosting/templates/hosting/includes/_navbar_transparent.html @@ -0,0 +1,72 @@ +{% load static i18n %} + + +<nav class="navbar navbar-default navbar-fixed-top topnav navbar-transparent" role="navigation"> + <div class="container 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="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a id="logoWhite" class="navbar-brand topnav" href="{% if site_url %}{{site_url}}{% else %}{{ request.session.hosting_url}}{% endif %}"><img src="{% static 'datacenterlight/img/logo_white.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 "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> + <!-- + <li> + <a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a> + </li> + <li> + <a href="{{ request.session.hosting_url }}#your">{% trans "Your infrastructure"%}</a> + </li> + <li> + <a href="{{ request.session.hosting_url }}#our">{% trans "Our inftrastructure"%}</a> + </li> + <li> + <a href="{{ request.session.hosting_url }}#price">{% trans "Pricing" %}</a> + </li> + <li> + <a href="{{ request.session.hosting_url }}#contact">{% trans "Contact"%}</a> + </li> + <li> + <a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a> + </li> --> + </ul> + </div> + {% endif %} + <!-- /.navbar-collapse --> + </div> + <!-- /.container --> +</nav> \ No newline at end of file diff --git a/hosting/templates/hosting/login.html b/hosting/templates/hosting/login.html index 3ae7b7c2..12c9eba6 100644 --- a/hosting/templates/hosting/login.html +++ b/hosting/templates/hosting/login.html @@ -1,18 +1,23 @@ {% extends "hosting/base_short.html" %} {% load i18n %} {% load staticfiles bootstrap3%} + +{% block navbar %} + {% include 'hosting/includes/_navbar_transparent.html' %} +{% endblock navbar %} + {% block content %} <div class="auth-container"> <div class="auth-bg"></div> <div class="auth-center"> - + <div class="auth-title"> <h2>{% trans "Your VM hosted in Switzerland"%}</h2> </div> <div class="auth-content"> - + <div class="intro-message auth-box"> <h2 class="section-heading">{% trans "Login"%}</h2> <form action="{% url 'hosting:login' %}" method="post" class="form" novalidated> @@ -26,8 +31,8 @@ {% trans "Login"%} </button> {% endbuttons %} - - <input type='hidden' name='next' value='{{request.GET.next}}'/> + + <input type='hidden' name='next' value='{{request.GET.next}}'/> </form> <div class="auth-footer"> <div class="text"> diff --git a/hosting/templates/hosting/reset_password.html b/hosting/templates/hosting/reset_password.html index be9fb82b..b24546c5 100644 --- a/hosting/templates/hosting/reset_password.html +++ b/hosting/templates/hosting/reset_password.html @@ -2,6 +2,11 @@ {% load staticfiles bootstrap3%} {% load i18n %} +{% block navbar %} + {% include 'hosting/includes/_navbar_transparent.html' %} +{% endblock navbar %} + + {% block content %} <div class="auth-container"> <div class="auth-bg"></div> @@ -10,7 +15,7 @@ <h2>{% trans "Your VM hosted in Switzerland"%}</h2> </div> <div class="auth-content"> - + <div class="intro-message auth-box sign-up"> <h2 class="section-heading">{% trans "Reset your password"%}</h2> <form action="{% url 'hosting:reset_password' %}" method="post" class="form" novalidate> diff --git a/hosting/templates/hosting/signup.html b/hosting/templates/hosting/signup.html index 959cf346..5d97a3b6 100644 --- a/hosting/templates/hosting/signup.html +++ b/hosting/templates/hosting/signup.html @@ -1,6 +1,10 @@ {% extends "hosting/base_short.html" %} {% load staticfiles bootstrap3 i18n %} +{% block navbar %} + {% include 'hosting/includes/_navbar_transparent.html' %} +{% endblock navbar %} + {% block content %} <div class="auth-container auth-signup"> <div class="auth-bg"></div> @@ -32,7 +36,7 @@ </div> </div> </div> - + </div> </div> {% endblock %}