Implement new layout

JIRA INFRA-763 #action In Progress

app/static/css/csentry.css

+/* titillium-web-regular - latin */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
+       url('../fonts/titillium-web-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/titillium-web-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* titillium-web-600 - latin */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Titillium Web SemiBold'), local('TitilliumWeb-SemiBold'),
+       url('../fonts/titillium-web-v6-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/titillium-web-v6-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
 /* Padding required for navbar-fixed-top */
 body {
     min-height: 2000px;
     padding-top: 70px;
 }
+
+/* CSEntry logo in navbar */
+.navbar-brand img {
+    height: 24px;
+    vertical-align: top;
+}
+
+/* navbar color */
+.navbar {
+    background-color: #0094ca;
+}
+
+/* navbar menu */
+.navbar-nav .nav-item {
+    color: #b4ebff;
+    font-family: 'Titillium Web';
+    font-weight: 600;
+}
+/* navbar menu selected or hover */
+a.nav-item.nav-link.active, .navbar-nav .nav-item:focus,
+.navbar-nav .nav-item:hover {
+    color: #ffffff;
+}
+
+/* username */
+.navbar-right .dropdown-toggle {
+    color: #b4ebff;
+    font-family: 'Titillium Web';
+    font-weight: 400;
+}
+/* username selected or hover */
+.dropdown.active .dropdown-toggle, .dropdown-toggle:focus,
+.dropdown-toggle:hover {
+    color: #ffffff;
+}
+
+/* dropdown under username */
+.dropdown-item {
+    color: #5fbfe2;
+    font-family: 'Titillium Web';
+    font-weight: 400;
+}
+/* dropdown under username hover */
+.navbar .dropdown-item:focus, .navbar .dropdown-item:hover {
+    background-color: #0094ca;
+    color: #ffffff;
+}
+
+/* list items (left side menu) and nav items (top menu) */
+.list-group-item, .nav-item {
+    font-family: 'Titillium Web';
+    font-weight: 400;
+    border-color: #0094ca;
+    color: #5fbfe2;
+}
+
+/* list items active including hover */
+.list-group-item.active, .list-group-item-action.active:focus,
+.list-group-item-action.active:hover {
+    background-color: #0094ca;
+    border-color: #0094ca;
+    color: #ffffff;
+}
+/* list items hover */
+.list-group-item-action:focus, .list-group-item-action:hover {
+    color: #0094ca;
+}
+
+/* nav items active (including hover) */
+.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:focus,
+.nav-tabs .nav-link.active:hover {
+    background-color: #0094ca;
+    border-color: #0094ca;
+    color: #ffffff;
+}
+/* nav items hover */
+.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
+    color: #0094ca;
+    border-color: #0094ca;
+}
+
+.nav-tabs {
+    border-bottom-color: #0094ca;
+    border-bottom-width: 1px;
+}
+
+/* background image */
+.jumbotron {
+    background-image: url('/static/img/csentry_keyvisual_v02.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    min-height: 600px;
+}
+
+/* CSEntry logo */
+.jumbotron img {
+    max-width: 25%;
+    height: auto;
+}
+
+/* Text under logo */
+.jumbotron p {
+    color: #ffffff;
+    font-family: 'Titillium Web';
+    font-weight: 400;
+}
+
+/* button color */
+.btn-primary {
+    background-color: #5fbfe2;
+    border-color: #5fbfe2;
+}
+.btn-primary:hover {
+    background-color: #0094ca;
+    border-color: #0094ca;
+}
+
+/* hyperlinks color */
+a {
+    color: #5fbfe2;
+}
+a:hover {
+    color: #0094ca;
+}
+
+/* page link */
+.page-link {
+    color: #5fbfe2;
+}
+.page-link:hover {
+    color: #0094ca;
+}
+.page-item.active .page-link {
+    background-color: #0094ca;
+    border-color: #0094ca;
+    color: #ffffff;
+}

app/static/img/CS_entry_v02_verylightblue.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2560 854" style="enable-background:new 0 0 2560 854;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F2FAFC;}
+</style>
+<g id="Layer_1">
+	<g>
+		<path class="st0" d="M886.8,303.7c-67.8-15.7-130.9-36.1-130.9-66.2c0-18.1,18.5-44.6,72.4-44.6c75.5,0,78.5,36.1,80.1,50.6h251
+			c-21.6-175.8-215.6-210.8-328-210.8c-82.9,0-160.7,19.3-220.1,53.9c2,1.5,3.9,3,5.9,4.6c67.8,54.1,114.8,131,132.4,216.5l6.2,30.1
+			H527.8c35.5,45.9,101.4,77.4,175.7,95.9c163.2,49.4,226.4,55.4,226.4,101.2c0,32.5-46.2,51.8-89.3,51.8c-10.8,0-86.2,0-97-61.4
+			h-8.6c-23.9,61.6-63.3,116.7-114.1,158.7c-4.1,3.4-8.4,6.7-12.6,10c70.8,39.7,159.6,52.9,229.2,52.9c189.4,0,348-86.7,348-233.6
+			C1185.5,368.8,1031.5,335,886.8,303.7z"/>
+		<g>
+			<path class="st0" d="M726.2,469.6c-36.2,152-170.1,276.2-351,276.2C172.6,745.8,17,586.6,17,387.6C17,191,170.2,31.8,370.4,31.8
+				c177.3,0,320.8,117,354.6,281H522.3c-21.7-45.8-61.5-94.1-144.7-94.1c-47-2.4-86.8,15.7-115.8,47c-27.7,31.4-43.4,74.8-43.4,123
+				c0,97.7,63.9,170.1,159.2,170.1c83.2,0,123-48.2,144.7-89.2H726.2z"/>
+		</g>
+		<g>
+			<path class="st0" d="M1312.9,628.4c3.5,29.7,31.8,49.4,64.5,49.4c26.7,0,40.8-11.6,50.9-26.2h85.7c-13.6,31.3-33.3,55.5-57,71.6
+				c-23.2,16.6-50.9,25.2-79.7,25.2c-80.2,0-148.2-65-148.2-148.2c0-78.2,61.5-150.3,146.7-150.3c42.9,0,79.7,16.6,105.9,44.4
+				c35.3,37.8,45.9,82.7,39.3,134.1H1312.9z M1438.9,564.9c-2-13.1-19.2-44.4-62.5-44.4c-43.4,0-60.5,31.3-62.5,44.4H1438.9z"/>
+			<path class="st0" d="M1559.9,459.5h78.2v29.7c9.6-13.6,27.2-39.3,77.1-39.3c94.3,0,103.9,76.6,103.9,114.5v175h-83.7V586.6
+				c0-30.8-6.6-58-43.9-58c-41.3,0-47.9,29.7-47.9,58.5v152.3h-83.7V459.5z"/>
+			<path class="st0" d="M1895.2,523.1h-41.3v-63.5h41.3v-93.3h83.7v93.3h40.3v63.5h-40.3v216.3h-83.7V523.1z"/>
+			<path class="st0" d="M2055.1,459.5h78.7v31.3c8.1-15.1,22.7-40.8,71.1-40.8v84.2h-3c-42.9,0-63,15.6-63,55v150.3h-83.7V459.5z"/>
+			<path class="st0" d="M2332.9,725.2L2229,459.5h89.2l57,162.4l53.4-162.4h88.7l-140.2,373.1h-88.7L2332.9,725.2z"/>
+		</g>
+	</g>
+</g>
+<g id="lines">
+</g>
+<g id="rest">
+</g>
+</svg>

app/templates/base.html

@@ -14,9 +14,14 @@
 
 {% block navbar %}
   <!-- Fixed navbar -->
-  <div class="navbar fixed-top navbar-expand-lg navbar-light bg-light" role="navigation">
-    <a class="navbar-brand{% if config['CSENTRY_ENVIRONMENT'] == "staging" %} text-danger{% endif %}"
-       href="{{ url_for('main.index') }}">CSEntry{% if config['CSENTRY_ENVIRONMENT'] == "staging" %}-test{% endif %}</a>
+  <div class="navbar fixed-top navbar-expand-lg" role="navigation">
+    <a class="navbar-brand" href="{{ url_for('main.index') }}">
+       {% if config['CSENTRY_ENVIRONMENT'] == "staging" %}
+       <img src="{{ url_for('static', filename='img/CS_entry_TEST_v03.gif') }}" alt="CSEntry TEST">
+       {% else %}
+       <img src="{{ url_for('static', filename='img/CS_entry_v02_verylightblue.svg') }}" alt="CSEntry">
+       {% endif %}
+   </a>
       <button class="navbar-toggler" type="button" data-toggle="collapse"
               data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
               aria-expanded="false" aria-label="Toggle navigation">
@@ -35,7 +40,7 @@
           {% endif %}
           <a class="nav-item nav-link" href="{{ config['DOCUMENTATION_URL'] }}" target="_blank">Help</a>
         </div>
-        <div class="navbar-nav">
+        <div class="navbar-nav navbar-right">
           {% block navbar_right %}{% endblock %}
           {% if current_user.is_authenticated %}
           <div class="dropdown {{ is_active(path == "/user/profile") }}">

app/templates/index.html

@@ -2,7 +2,9 @@
 
 {% block main %}
   <div class="jumbotron">
-    <h1 class="display-4">Welcome to CSEntry!</h1>
+    <h1 class="display-4">
+      <img src="{{ url_for('static', filename='img/CS_entry_v02_verylightblue.svg') }}" alt="CSEntry" class="img-fluid">
+    </h1>
     <p class="lead">Control System Entry allows you to easily register items and network devices.</lead>
   </div>
 {%- endblock %}