Update of the templates

At the moment, we decided to remove all unecessary css and keep only the
HTML architecture with bootstrap structure.

Signed-off-by: Matthieu Berjon <matthieu.berjon@inria.fr>

django/allgo/poc/urls.py

@@ -12,5 +12,4 @@ urlpatterns = [
         {'template_name': 'login.html'},
         name='login'),
     url(r'^logout/$', auth_views.logout, name='logout'),
-    url(r'^signup/', views.signup, name='signup'),
 ]

django/allgo/static/css/allgo.css

@@ -38,3 +38,60 @@ header {
 .footer img {
   height: 43px;
 }
+
+/*
+ * Home
+ */
+h1.homepage {
+  font-size: 350%;
+}
+
+#allgo-presentation {
+  font-weight: bold;
+  font-size: 1.5em;
+  margin: 1.5em 0;
+}
+.presentation {
+  margin-bottom: 4em;
+}
+
+.corner-ribbon{
+  width: 200px;
+  background: #e43;
+  position: absolute;
+  top: 25px;
+  left: -50px;
+  text-align: center;
+  line-height: 50px;
+  letter-spacing: 1px;
+  color: #f0f0f0;
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  font-weight: bold;
+}
+
+/* Custom styles */
+
+.corner-ribbon.sticky{
+  position: fixed;
+}
+
+.corner-ribbon.shadow{
+  box-shadow: 0 0 3px rgba(0,0,0,.3);
+}
+/*
+.corner-ribbon.top-left{
+  top: 25px;
+  left: -50px;
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+*/
+.corner-ribbon.top-right{
+  top: 25px;
+  right: -50px;
+  left: auto;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+.corner-ribbon.blue{background: #39d;}

django/allgo/templates/base.html

@@ -11,7 +11,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css"  href="{% static 'css/allgo.css' %}" media="all" charset="utf-8">
+    <!-- <link rel="stylesheet" type="text/css"  href="{% static 'css/allgo.css' %}" media="all" charset="utf-8"> -->
 
   </head>
 

django/allgo/templates/home.html

@@ -3,48 +3,35 @@
 {% block title %}Home{% endblock %}
 
 {% block content %}
-<style media="screen" type="text/css">
-  .alert {
-    position: absolute;
-    min-width: 300px;
-  }
-  div {
-    color:#2c3e50;
-  }
-</style>
-<div class="presentation">
-  <div class="container">
-    <div class="text-center">
-    <!-- <div class="text-center" style="color: yellow;transform-origin: 50% 100%;transform: perspective(300px) rotateX(25deg);"> -->
-      <h1 class="brand">A||GO</h1>
-      <br />
-      <h3 id="main-text">
-        Allgo is a platform for building deploying apps that analyze massive data in Linux containers, it has been specifically designed for use in scientific applications.
-      </h3>
-      <br />
-      <a href="#" class="btn btn-lg btn-success">Get Started</a>
-      <br />
-      <br />
-      <p class="text-muted">
-        Currently in Beta
-      </p>
-    </div>
+<div class="container">
+  <div class="text-center">
+    <h1>A||GO</h1>
+    <p>
+      Allgo is a platform for building deploying apps that analyze massive
+      data in Linux containers, it has been specifically designed for use in
+      scientific applications.
+    </p>
+    <p><a href="#" class="btn btn-lg btn-success">Get Started</a></p>
   </div>
 </div>
 
 <div class="container">
   <div class="row">
     <div class="col-lg-4">
-      <h3><i class="glyphicon glyphicon-share-alt"></i> Easy Sharing</h3>
-      <p>You don't need to spend hours packaging your algorithms anymore thanks to Allgo. End users can immediately use your application.</p>
+      <h3><i class="fas fa-share-alt"></i> Easy Sharing</h3>
+      <p>You don't need to spend hours packaging your algorithms anymore thanks
+      to Allgo. End users can immediately use your application.</p>
     </div>
     <div class="col-lg-4">
-      <h3><i class="glyphicon glyphicon-floppy-saved"></i> Backup your app</h3>
-      <p>We are using Linux container technology to run your applications. They can be launched several years after the initial deployement without any upgrade of your source code.</p>
+      <h3><i class="fas fa-save"></i> Backup your app</h3>
+      <p>We are using Linux container technology to run your applications. They
+      can be launched several years after the initial deployement without any
+      upgrade of your source code.</p>
     </div>
     <div class="col-lg-4">
-      <h3><i class="glyphicon glyphicon-console"></i> Command Line Interface</h3>
-      <p>Thanks to our easy to use HTTP REST API, you can do your own scripts using our platform.</p>
+      <h3><i class="fas fa-terminal"></i> Command Line Interface</h3>
+      <p>Thanks to our easy to use HTTP REST API, you can do your own scripts
+      using our platform.</p>
     </div>
   </div>
 </div>

django/allgo/templates/login.html

@@ -3,10 +3,12 @@
 {% block title %}Login{% endblock %}
 
 {% block content %}
-  <h2>Login</h2>
-  <form method="post">
-    {% csrf_token %}
+<h2>Login</h2>
+<form method="post">
+  {% csrf_token %}
+  <div class="form-group">
     {{ form.as_p }}
-    <button type="submit">Login</button>
-  </form>
+  </div>
+  <button class="btn btn-primary" type="submit">Login</button>
+</form>
 {% endblock %}

django/allgo/templates/partials/_footer.html

 {% load static %}
+
 <footer class="footer">
   <div class="container">
     <div class="row">
       <div class="col">
-        <img class="img-responsive" src="{% static 'images/credit.png' %}" alt="inria">
+        <img src="{% static 'images/credit.png' %}" alt="inria">
       </div>
       <div class="col">
         <p class="text-center">{% now "Y" %}</p>

django/allgo/templates/partials/_header.html

 <header class="container-fluid">
   <div class="container">
-    <nav class="allgo-main-nav navbar navbar-expand-lg navbar-light">
-      <a class="navbar-brand brand" href="{% url 'poc_home' %}">A||GO</a>
+    <nav class="navbar navbar-expand-lg navbar-light">
+      <a class="navbar-brand" href="{% url 'poc_home' %}">A||GO</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
@@ -15,7 +15,7 @@
           </li>
           {% if not user.is_authenticated %}
           <li class="nav-item">
-            <a class="nav-link" href="{% url 'login' %}"><i class="fas fa-sign-in-alt"></i></i> Login</a>
+            <a class="nav-link" href="{% url 'login' %}"><i class="fas fa-sign-in-alt"></i> Login</a>
           </li>
           {% else %}
           <li class="nav-item">

django/allgo/templates/partials/_messages.html

 {% for message in messages %}
-  <div class="alert {{ message.tags }} alert-dismissible" role="alert">
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
-    </button>
-    {{ message }}
-  </div>
+<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
+  {{ message }}
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+  {% comment %}
+  To enable it, need to add this javascript somewhere in the page
+  $('.alert').alert()
+  {% endcomment %}
+</div>
 {% endfor %}