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
* 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.color-warning {
color: #f99b11;
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-positive {
color: #0f8420;
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-informative {
color: #007aa6;
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.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 {
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
View file @ 062e9a0d
{# 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,63 +15,87 @@
# 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">
<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>
</tr>
</thead>
<tbody>
{% for branch in branches %}
<tr>
<td>{{ branch.name }}</td>
<td>
{% set status = branch.status() %}
{% if status == "deploying" %}
<span class="color-informative">Build in corso</span>
{% elif status == "not_present" %}
<span class="color-warning">Non presente</span>
{% elif status == "running" %}
<span class="color-positive">In esecuzione</span>
{% elif status == "broken" %}
<span class="color-negative">Branch rotto</span>
{% else %}
{{ status }}
{% endif %}
</td>
{% if branch.pinned %}
<td>-</td>
<td>-</td>
<table class="branches">
<thead>
<tr>
<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>
{% for branch in branches %}
<tr>
<td>{{ branch.name }}</td>
<td>
{% 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 %}
<td>
<a href="{{ branch.author_url }}">{{ branch.author }}</a>
</td>
<td>
<a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a>
</td>
{{ status }}
{% endif %}
<td>
{% 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>
</td>
{% if branch.pinned %}
<td>-</td>
<td>-</td>
{% else %}
<td>
<a href="{{ branch.author_url }}">{{ branch.author }}</a>
</td>
<td>
<a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a>
</td>
{% endif %}
<td>
{% 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 %}
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