changeset 147:0f19ece4e7e5

Add logos at multiple places
author Benoît Allard <benoit.allard@greenbone.net>
date Fri, 31 Oct 2014 12:12:48 +0100
parents 105bb08570ed
children 3500cb0c54d1
files farol/static/background.png farol/static/logo_120x120.png farol/static/logo_50x50.png farol/static/style.css farol/templates/about.j2 farol/templates/layout.j2 farol/templates/welcome.j2
diffstat 7 files changed, 78 insertions(+), 43 deletions(-) [+]
line wrap: on
line diff
Binary file farol/static/background.png has changed
Binary file farol/static/logo_120x120.png has changed
Binary file farol/static/logo_50x50.png has changed
--- a/farol/static/style.css	Fri Oct 31 12:00:15 2014 +0100
+++ b/farol/static/style.css	Fri Oct 31 12:12:48 2014 +0100
@@ -14,6 +14,16 @@
 }
 */
 
+@media (min-width: 768px){
+  body {
+    background: url('background.png') no-repeat fixed right bottom rgb(255,255,255);
+  }
+}
+
+.cover {
+  background: rgba(255,255,255,0.8);
+}
+
 form.inlined-form {
   display: inline-block;
 }
--- a/farol/templates/about.j2	Fri Oct 31 12:00:15 2014 +0100
+++ b/farol/templates/about.j2	Fri Oct 31 12:12:48 2014 +0100
@@ -26,11 +26,21 @@
 {% extends "base.j2" %}
 {% from "macros.j2" import textinput, textarea %}
 
+{% set active = "about" %}
+
 {% block title %}About{% endblock %}
 
 {% block content %}
 <div class="page-header">
-<h1>Farol <small>The Security Advisory Management Platform</small></h1>
+  <div class="media">
+    <div class="media-left">
+      <img src="{{ url_for("static", filename="logo_120x120.png") }}">
+    </div>
+    <div class="media-body">
+      <h1>Farol</h1>
+      <h1><small>The Security Advisory Management Platform</small></h1>
+    </div>
+  </div>
 </div>
 
 <div>
--- a/farol/templates/layout.j2	Fri Oct 31 12:00:15 2014 +0100
+++ b/farol/templates/layout.j2	Fri Oct 31 12:12:48 2014 +0100
@@ -38,47 +38,53 @@
 <body>
   <script src="{{ url_for('static', filename='jquery-2.1.1.min.js') }}"></script>
   <script src="{{ url_for('static', filename='bootstrap.min.js') }}"></script>
-  <nav class="navbar navbar-inverse" role="navigation">
-    <div class="container">
-      {# 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" href="{{ url_for('welcome') }}" title="A Security Advisory Management Platform">Farol</a>
-      </div>
+  <div class="cover">
+    <nav class="navbar navbar-inverse" role="navigation">
+      <div class="container">
+        {# 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" href="{{ url_for('welcome') }}" title="{{ 'The Security Advisory Management Platform' if active in ("welcome", "about") else 'Farol' }}">
+            {% if active in ("welcome", "about") %}Farol{% else %}
+            <img src="{{ url_for('static', filename='logo_50x50.png') }}" style="width:40px; margin-top:-10px;">
+            {% endif %}
+          </a>
+        </div>
 
-      {# 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">
-          <li{% if active == 'new' %} class="active"{% endif %}><a href="{{ url_for('new') }}">New</a></li>
-          {% block navbar %}
-          {% endblock %}
-        </ul>
-        <ul class="nav navbar-nav navbar-right">
-          {% block navbar_right %}
-          {% endblock %}
-        </ul>
-      </div>{# /.navbar-collapse #}
-    </div>{# /.container-fluid #}
-  </nav>
-  <div class="main container">
-    {% block pre_content %}{% endblock %}
-    <div>
-      {% block content %}{% endblock %}
+        {# 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">
+            <li{% if active == 'new' %} class="active"{% endif %}><a href="{{ url_for('new') }}">New</a></li>
+            {% block navbar %}
+            {% endblock %}
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            {% block navbar_right %}
+            {% endblock %}
+          </ul>
+        </div>{# /.navbar-collapse #}
+      </div>{# /.container-fluid #}
+    </nav>
+    <div class="container">
+      {% block pre_content %}{% endblock %}
+      <div>
+        {% block content %}{% endblock %}
+      </div>
+      {% block post_content %}{% endblock %}
     </div>
-    {% block post_content %}{% endblock %}
+    <footer class="footer container-fluid navbar-inverse">
+      <div class="text-center">
+        <span class="text-muted">Copyright &copy; 2014 Greenbone Networks GmbH</span>
+        |
+        <span><a href="{{ url_for('about') }}">About Farol</a></span>
+      </div>
+      <a href="http://greenbone.net/" id="greenbone" class="logo_img text-hide center-block">Greenbone Networks GmbH</a>
+    </footer>
   </div>
-  <footer class="footer container-fluid navbar-inverse">
-    <div class="text-center">
-      <span class="text-muted">Copyright &copy; 2014 Greenbone Networks GmbH</span>
-      |
-      <span><a href="{{ url_for('about') }}">About Farol</a></span>
-    </div>
-    <a href="http://greenbone.net/" id="greenbone" class="logo_img text-hide center-block">Greenbone Networks GmbH</a>
-  </footer>
 </body>
 </html>
--- a/farol/templates/welcome.j2	Fri Oct 31 12:00:15 2014 +0100
+++ b/farol/templates/welcome.j2	Fri Oct 31 12:12:48 2014 +0100
@@ -26,6 +26,8 @@
 {% extends "base.j2" %}
 {% from "macros.j2" import panel %}
 
+{% set active = "welcome" %}
+
 {% macro progress_label(progress) -%}
 <span class="label label-
 {%- if progress < 70 %}danger{% elif progress < 95 %}warning{% else %}success{% endif -%}
@@ -36,9 +38,16 @@
 
 {% block content %}
 <div class="well well-lg">
-  <h1>Farol <small>The Security Advisory Management Platform</small></h1>
-  <div class="pull-right"><a class="btn btn-primary btn-lg" role="button" href="{{ url_for('new') }}" >Start !</a></div>
-  <p>This web platform offers to review, create, edit and transform security advisories supporting various input and output formats. During your session the advisory is stored in a cache from which you should save your changes to your local file system.</p>
+  <div class="media">
+    <div class="media-left">
+      <img src="{{ url_for('static', filename="logo_120x120.png") }}">
+    </div>
+    <div class="media-body">
+      <h1 class="media-heading">Farol <small>The Security Advisory Management Platform</small></h1>
+      <div class="pull-right"><a class="btn btn-primary btn-lg" role="button" href="{{ url_for('new') }}" >Start !</a></div>
+      <p>This web platform offers to review, create, edit and transform security advisories supporting various input and output formats. During your session the advisory is stored in a cache from which you should save your changes to your local file system.</p>
+    </div>
+  </div>
 </div>
 <div class="row">
   <div class="col-sm-9"><img src="{{ url_for('static', filename="flower.png") }}" class="img-responsive img-thumbnail" alt="Security Advisories interactions"></div>

http://farol.wald.intevation.org