Improvment of the frontend

managetests/frontend/static/style.css

 /* A program which manages Ubuntu-it's web test server
  * Copyright (C) 2015-2016  Pietro Albini <pietroalbini@ubuntu.com>
- *
+ *               2016       Luca Lumetti  <lumetti.luca@gmail.com>
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published
  * by the Free Software Foundation, either version 3 of the License, or
@@ -14,13 +14,12 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see http://www.gnu.org/licenses/>.
  */
-@charset "utf-8";
 
+@charset "utf-8";
 body {
     font-family: sans-serif;
     color: #333;
     margin: 0;
-
     text-align: center;
     line-height: 1.3em;
 }
@@ -48,16 +47,6 @@ hr {
     margin: 1.4em 0;
 }
 
-ul {
-    padding: 0 0 0 1.5em;
-}
-
-ul li {
-    list-style: square;
-    margin: 0.4em 0;
-}
-
-
 div.wrapper {
     width: 50em;
     margin: auto;
@@ -71,61 +60,177 @@ table.branches td, table.branches th {
     padding: 0.3em 0;
 }
 
-ul.footer {
+th#branch-name{
+    width: 30%;
+}
+
+th#state{
+    width: 15%;
+}
+
+th#author{
+    width: 25%;
+}
+
+th#merge-request{
+    width: 7%;
+}
+
+th#build-log{
+    width: 10%;
+}
+
+th#live{
+    width: 13%;
+}
+
+div.footer div {
     color: #aaa;
     font-size: 0.9em;
     margin: 0;
     padding: 0;
 }
 
-ul.footer li {
+div.footer div {
     display: inline-block;
     margin: 0 0 0 1em;
 }
 
-ul.footer li:first-child {
+div.footer div:first-child {
     margin-left: 0;
 }
 
-span.color-negative {
-    color: #d73024;
+span.dot {
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+    display: inline-block;
+    height: 14px;
+    width: 14px;
+}
+
+span.dot-warn {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='%23d73024' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='m271.459,73.426c-3.48-1.74-10.441,0-12.181,3.48l-19.106,32.244c-12.72-53.752-60.4-93.149-118.363-93.149-67.865,0.001-121.809,53.945-121.809,121.81s53.944,121.808 121.808,121.808c5.22,0 8.701-3.48 8.701-8.701s-3.48-8.701-8.701-8.701c-57.424,0-104.407-46.983-104.407-104.407s46.984-104.406 104.407-104.406c51.281,7.10543e-15 94.123,37.5 102.737,86.397l-40.092-23.752c-5.22-1.74-10.441,0-12.181,3.48-1.74,5.22 0,10.441 3.48,12.181l53.944,33.062c1.74,1.74 3.48,1.74 5.22,1.74 0,0 1.74,0 1.74-3.48 1.74,0 3.48-1.74 5.22-3.48l1.062-1.74h0.679c0-0.348-0.052-0.679-0.052-1.01l31.375-51.194c1.739-5.221-0.001-10.442-3.481-12.182zs' /%3E%3C/svg%3E");
 }
 
-span.color-warning {
-    color: #f99b11;
+span.dot-negative {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='%23d73024' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='M4.5,3.5 L7,6 L9.5,3.5 L10.5,4.5 L8,7 L10.5,9.5 L9.5,10.5 L7,8 L4.5,10.5 L3.5,9.5 L6,7 L3.5,4.5 4.5,3.5z' /%3E%3C/svg%3E");
 }
 
-span.color-positive {
-    color: #0f8420;
+span.dot-informative {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='%23f99b11' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='M6,2.5 L8,2.5 L8,8 L6,8 L6,11.5 L8,11.5 L8,9.5 L6,9.5 6,2.5z' /%3E%3C/svg%3E");
 }
 
-span.color-informative {
-    color: #007aa6;
+span.dot-positive {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='%230f8420' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='M6 11 L2.5 8 l1.5,-1.5 L6,8 l4.2,-3.7 1.5,1.5z' /%3E%3C/svg%3E");
 }
 
+span.dot-loading {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='%23007aa6' cx='7' cy='7' r='7'/%3E%3Ccircle fill='%23ffffff' cx='7' cy='7' r='4.75'/%3E%3Ccircle fill='%23007aa6' cx='7' cy='7' r='3'/%3E%3Cpath fill='%23007aa6' d='M7,7 L11.75,7 L11.75,11.75 L7,11.75 7,7z' /%3E%3Cpath fill='%23ffffff' d='M8.75,7 L12.75,7 L10.8765,9.5 8.5,7z' /%3E%3C/svg%3E");
+    animation-name: rotation;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+}
 
-@media all and (max-width: 52em) {
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(359deg);
+    }
+}
 
+ul {
+    width: 200px;
+    margin: 20px 30px;
+    list-style: none;
+    text-align: left;
+    padding: 0;
+    line-height: 1.3em;
+    justify-content: flex-start;
+    flex: 1 auto;
+}
+
+ul li {
+    font-size: 16px;
+    position: relative;
+    padding: 5px 0 10px 10px;
+}
+
+ul li span.author {
+    font-size: 14px;
+}
+
+ul li:before {
+    position: absolute;
+    left: -15px;
+    top: 0px;
+    content: '';
+    display: block;
+    border-left: 1px solid #aaa;
+    height: 1em;
+    border-bottom: 1px solid #aaa;
+    width: 20px;
+}
+
+ul li:after {
+    position: absolute;
+    left: -15px;
+    bottom: -7px;
+    content: '';
+    display: block;
+    border-left: 1px solid #aaa;
+    height: 100%;
+}
+
+ul li.root {
+    margin: 0px 0px 0px -20px;
+    padding: 0 0 10px 0;
+    font-size: 22px;
+}
+
+ul li.root:before {
+    display: none;
+}
+
+ul li.root:after {
+    display: none;
+}
+
+ul li:last-child:after {
+    display: none;
+}
+
+div.mobile{
+  display: none;
+}
+
+@media all and (max-width: 52em) {
+  table.branches{
+    display: none;
+  }
+  div.mobile {
+    display: flex;
+    justify-content: stretch;
+    align-content: flex-start;
+    flex-flow: row wrap;
+    margin: 0 auto;
+  }
     div.wrapper {
         width: 96%;
     }
-
-    ul.footer li {
+    div.footer div {
         display: block;
         margin: 0.5em 0;
     }
-
 }
 
 @media all and (max-width: 30em) {
-
     span.extra {
         margin-top: 0.1em;
         display: block;
     }
-
     span.extra small:first-child {
         margin-left: 0;
     }
-
 }

managetests/frontend/templates/index.html

 {# A program which manages Ubuntu-it's web test server
  # Copyright (C) 2015-2016  Pietro Albini <pietroalbini@ubuntu.com>
+ #                    2016  Luca Lumetti   <lumetti.luca@gmail.com>
  #
  # This program is free software: you can redistribute it and/or modify
  # it under the terms of the GNU Affero General Public License as published
@@ -14,20 +15,18 @@
  # You should have received a copy of the GNU Affero General Public License
  # along with this program.  If not, see http://www.gnu.org/licenses/>.
  #}
-
 {% extends "layout.html" %}
 {% set title = "Branch disponibili" %}
-
 {% block content %}
-    <table class="branches">
+<table class="branches">
     <thead>
         <tr>
-                <th width="30%">Nome branch</th>
-                <th width="15%">Stato</th>
-                <th width="25%">Proprietario</th>
-                <th width="7%">MR</th>
-                <th width="10%"></th>
-                <th width="13%"></th>
+            <th id="branch-name">Nome branch</th>
+            <th id="state">Stato</th>
+            <th id="author">Proprietario</th>
+            <th id="merge-request">MR</th>
+            <th id="build-log"></th>
+            <th id="live"></th>
         </tr>
     </thead>
     <tbody>
@@ -37,13 +36,13 @@
             <td>
                 {% set status = branch.status() %}
                 {% if status == "deploying" %}
-                        <span class="color-informative">Build in corso</span>
+                <span class="dot dot-informative"></span>
                 {% elif status == "not_present" %}
-                        <span class="color-warning">Non presente</span>
+                <span class="dot dot-warning"></span>
                 {% elif status == "running" %}
-                        <span class="color-positive">In esecuzione</span>
+                <span class="dot dot-positive"></span>
                 {% elif status == "broken" %}
-                        <span class="color-negative">Branch rotto</span>
+                <span class="dot dot-negative"></span>
                 {% else %}
                 {{ status }}
                 {% endif %}
@@ -61,16 +60,42 @@
             {% endif %}
             <td>
                 {% if branch.has_build_log() %}
-                    <a href="{{ url_for("build_log", branch=branch.name) }}">Build log</a>
-                    {% endif %}
+                <a href="{{ url_for(" build_log ", branch=branch.name) }}">Build log</a> {% endif %}
             </td>
             <td>
                 {% if branch.is_running() %}
-                    <a href="/{{ branch.name }}/">Istanza live</a>
-                    {% endif %}
+                <a href="/{{ branch.name }}/">Istanza live</a> {% endif %}
             </td>
         </tr>
         {% endfor %}
     </tbody>
-    </table>
+</table>
+<div class="mobile">
+    {% for branch in branches %}
+    <ul>
+        <li class="root">
+            {{ branch.name }}
+            {% if not branch.pinned %}
+            <span class="author">(<a href="{{ branch.author_url }}">{{ branch.author }}</a>)</span>
+            {% endif %} {% set status = branch.status() %} {% if status == "deploying" %}
+            <span class="dot dot-informative"></span>
+            {% elif status == "not_present" %}
+            <span class="dot dot-warning"></span>
+            {% elif status == "running" %}
+            <span class="dot dot-positive"></span>
+            {% elif status == "broken" %}
+            <span class="dot dot-negative"></span>
+            {% else %} {{ status }} {% endif %}
+        </li>
+        {% if not branch.pinned %}
+        <li><a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a></li>
+        {% endif %} {% if branch.has_build_log() %}
+        <li><a href="{{ url_for(" build_log ", branch=branch.name) }}">Build log</a>Build Log</a>
+        </li>
+        {% if branch.is_running() %}
+        <li><a href="/{{ branch.name }}/">Istanza live</a></li>
+        {% endif %}
+    </ul>
+    {% endfor %}
+</div>
 {% endblock %}