Skip to content

M
Managetests
Commit 062e9a0d authored by Lumetti Luca's avatar Lumetti Luca
Browse files
Options

Improvment of the frontend

parent 1388028d
Hide whitespace changes
Inline Side-by-side
Showing with 215 additions and 85 deletions
managetests/frontend/static/style.css
View file @ 062e9a0d
/* A program which manages Ubuntu-it's web test server /* A program which manages Ubuntu-it's web test server
* Copyright (C) 2015-2016 Pietro Albini <pietroalbini@ubuntu.com> * 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 * 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 * 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 * by the Free Software Foundation, either version 3 of the License, or
...@@ -14,13 +14,12 @@ ...@@ -14,13 +14,12 @@
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see http://www.gnu.org/licenses/>.
*/ */
@charset "utf-8";
@charset "utf-8";
body { body {
font-family: sans-serif; font-family: sans-serif;
color: #333; color: #333;
margin: 0; margin: 0;
text-align: center; text-align: center;
line-height: 1.3em; line-height: 1.3em;
} }
...@@ -48,16 +47,6 @@ hr { ...@@ -48,16 +47,6 @@ hr {
margin: 1.4em 0; margin: 1.4em 0;
} }
ul {
padding: 0 0 0 1.5em;
}
ul li {
list-style: square;
margin: 0.4em 0;
}
div.wrapper { div.wrapper {
width: 50em; width: 50em;
margin: auto; margin: auto;
...@@ -71,61 +60,177 @@ table.branches td, table.branches th { ...@@ -71,61 +60,177 @@ table.branches td, table.branches th {
padding: 0.3em 0; 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; color: #aaa;
font-size: 0.9em; font-size: 0.9em;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
ul.footer li { div.footer div {
display: inline-block; display: inline-block;
margin: 0 0 0 1em; margin: 0 0 0 1em;
} }
ul.footer li:first-child { div.footer div:first-child {
margin-left: 0; margin-left: 0;
} }
span.color-negative { span.dot {
color: #d73024; background-position: 0 50%;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
width: 14px;
} }
span.color-warning { span.dot-warn {
color: #f99b11; 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-positive { span.dot-negative {
color: #0f8420; 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-informative { span.dot-informative {
color: #007aa6; 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.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");
}
@media all and (max-width: 52em) { 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;
}
@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 { div.wrapper {
width: 96%; width: 96%;
} }
div.footer div {
ul.footer li {
display: block; display: block;
margin: 0.5em 0; margin: 0.5em 0;
} }
} }
@media all and (max-width: 30em) { @media all and (max-width: 30em) {
span.extra { span.extra {
margin-top: 0.1em; margin-top: 0.1em;
display: block; display: block;
} }
span.extra small:first-child { span.extra small:first-child {
margin-left: 0; margin-left: 0;
} }
} }
managetests/frontend/templates/index.html
View file @ 062e9a0d
{# A program which manages Ubuntu-it's web test server {# A program which manages Ubuntu-it's web test server
# Copyright (C) 2015-2016 Pietro Albini <pietroalbini@ubuntu.com> # 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 # 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 # it under the terms of the GNU Affero General Public License as published
...@@ -14,63 +15,87 @@ ...@@ -14,63 +15,87 @@
# You should have received a copy of the GNU Affero General Public License # 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/>. # along with this program. If not, see http://www.gnu.org/licenses/>.
#} #}
{% extends "layout.html" %} {% extends "layout.html" %}
{% set title = "Branch disponibili" %} {% set title = "Branch disponibili" %}
{% block content %} {% block content %}
<table class="branches"> <table class="branches">
<thead> <thead>
<tr> <tr>
<th width="30%">Nome branch</th> <th id="branch-name">Nome branch</th>
<th width="15%">Stato</th> <th id="state">Stato</th>
<th width="25%">Proprietario</th> <th id="author">Proprietario</th>
<th width="7%">MR</th> <th id="merge-request">MR</th>
<th width="10%"></th> <th id="build-log"></th>
<th width="13%"></th> <th id="live"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for branch in branches %} {% for branch in branches %}
<tr> <tr>
<td>{{ branch.name }}</td> <td>{{ branch.name }}</td>
<td> <td>
{% set status = branch.status() %} {% set status = branch.status() %}
{% if status == "deploying" %} {% if status == "deploying" %}
<span class="color-informative">Build in corso</span> <span class="dot dot-informative"></span>
{% elif status == "not_present" %} {% elif status == "not_present" %}
<span class="color-warning">Non presente</span> <span class="dot dot-warning"></span>
{% elif status == "running" %} {% elif status == "running" %}
<span class="color-positive">In esecuzione</span> <span class="dot dot-positive"></span>
{% elif status == "broken" %} {% elif status == "broken" %}
<span class="color-negative">Branch rotto</span> <span class="dot dot-negative"></span>
{% else %}
{{ status }}
{% endif %}
</td>
{% if branch.pinned %}
<td>-</td>
<td>-</td>
{% else %} {% else %}
<td> {{ status }}
<a href="{{ branch.author_url }}">{{ branch.author }}</a>
</td>
<td>
<a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a>
</td>
{% endif %} {% endif %}
<td> </td>
{% if branch.has_build_log() %} {% if branch.pinned %}
<a href="{{ url_for("build_log", branch=branch.name) }}">Build log</a> <td>-</td>
{% endif %} <td>-</td>
</td> {% else %}
<td> <td>
{% if branch.is_running() %} <a href="{{ branch.author_url }}">{{ branch.author }}</a>
<a href="/{{ branch.name }}/">Istanza live</a> </td>
{% endif %} <td>
</td> <a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a>
</tr> </td>
{% endfor %} {% endif %}
</tbody> <td>
</table> {% if branch.has_build_log() %}
<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 %}
</td>
</tr>
{% endfor %}
</tbody>
</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 %} {% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment