Skip to content

Commit 4b4241b

Browse files
pablogsalpablogsal
authored
Add some styles to the release dashboard (#532)
1 parent f9651f8 commit 4b4241b

File tree

2 files changed

+259
-77
lines changed

2 files changed

+259
-77
lines changed

‎master/custom/static/dashboard.css‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
:root {
2+
--primary-color: #306998;
3+
--secondary-color: #FFD43B;
4+
--background-color: #f4f4f4;
5+
--text-color: #333;
6+
--success-color: #4CAF50;
7+
--danger-color: #f44336;
8+
--pill-bg-color: #e0e0e0;
9+
--pill-text-color: #333;
10+
--pill-hover-bg-color: #306998;
11+
--pill-hover-text-color: #ffffff;
12+
}
13+
14+
body {
15+
font-family: 'Arial', sans-serif;
16+
line-height: 1.6;
17+
color: var(--text-color);
18+
background-color: var(--background-color);
19+
margin: 0;
20+
padding: 0;
21+
transition: all 0.3s ease;
22+
}
23+
24+
.container {
25+
width: 90%;
26+
max-width: 1200px;
27+
margin: 0 auto;
28+
padding: 20px;
29+
}
30+
31+
.release_status {
32+
background-color: white;
33+
border-radius: 10px;
34+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
35+
padding: 20px;
36+
margin-top: 20px;
37+
}
38+
39+
.header {
40+
text-align: center;
41+
margin-bottom: 30px;
42+
}
43+
44+
.header img {
45+
max-width: 100%;
46+
height: auto;
47+
animation: fadeIn 1s ease-out;
48+
}
49+
50+
h1, h2 {
51+
color: var(--primary-color);
52+
}
53+
54+
h1 {
55+
font-size: 2.5em;
56+
margin-top: 20px;
57+
}
58+
59+
h2 {
60+
font-size: 2em;
61+
border-bottom: 2px solid var(--secondary-color);
62+
padding-bottom: 10px;
63+
margin-top: 40px;
64+
}
65+
66+
.row {
67+
display: flex;
68+
flex-wrap: wrap;
69+
margin: -10px;
70+
}
71+
72+
.col-md-4 {
73+
flex: 0 0 calc(33.333% - 20px);
74+
margin: 10px;
75+
}
76+
77+
.panel {
78+
border-radius: 8px;
79+
overflow: hidden;
80+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
81+
transition: transform 0.3s ease, box-shadow 0.3s ease;
82+
}
83+
84+
.panel:hover {
85+
transform: translateY(-5px);
86+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
87+
}
88+
89+
.panel-heading {
90+
padding: 15px;
91+
font-weight: bold;
92+
text-align: center;
93+
}
94+
95+
.panel-success .panel-heading {
96+
background-color: var(--success-color);
97+
color: white;
98+
}
99+
100+
.panel-danger .panel-heading {
101+
background-color: var(--danger-color);
102+
color: white;
103+
}
104+
105+
.panel-body {
106+
padding: 20px;
107+
background-color: white;
108+
}
109+
110+
.badge {
111+
display: inline-block;
112+
padding: 8px 12px;
113+
border-radius: 20px;
114+
margin: 5px 0;
115+
text-decoration: none;
116+
font-weight: bold;
117+
transition: all 0.3s ease;
118+
background-color: var(--pill-bg-color);
119+
color: var(--pill-text-color);
120+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
121+
}
122+
123+
.badge:hover {
124+
background-color: var(--pill-hover-bg-color);
125+
color: var(--pill-hover-text-color);
126+
transform: translateY(-2px);
127+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
128+
}
129+
130+
.badge-status {
131+
animation: fadeInUp 0.5s ease-out;
132+
}
133+
134+
.results_FAILURE {
135+
background-color: var(--danger-color);
136+
color: white;
137+
}
138+
139+
.results_SUCCESS {
140+
background-color: var(--success-color);
141+
color: white;
142+
}
143+
144+
.fa-check {
145+
font-size: 48px;
146+
color: var(--success-color);
147+
animation: pulse 2s infinite;
148+
}
149+
150+
.tier-title {
151+
font-size: 1.2em;
152+
color: var(--primary-color);
153+
border-bottom: 2px solid var(--secondary-color);
154+
padding-bottom: 5px;
155+
margin-top: 20px;
156+
margin-bottom: 10px;
157+
font-weight: bold;
158+
}
159+
160+
@keyframes fadeIn {
161+
from { opacity: 0; }
162+
to { opacity: 1; }
163+
}
164+
165+
@keyframes pulse {
166+
0% { transform: scale(1); }
167+
50% { transform: scale(1.1); }
168+
100% { transform: scale(1); }
169+
}
170+
171+
@keyframes fadeInUp {
172+
from {
173+
opacity: 0;
174+
transform: translateY(20px);
175+
}
176+
to {
177+
opacity: 1;
178+
transform: translateY(0);
179+
}
180+
}
181+
182+
@media (max-width: 768px) {
183+
.col-md-4 {
184+
flex: 0 0 100%;
185+
}
186+
}

‎master/custom/templates/releasedashboard.html‎

Lines changed: 73 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,80 @@
1-
<div class="container release_status">
2-
<div style="text-align: center;">
3-
<img src="https://www.python.org/static/community_logos/python-logo-master-v3-TM.png" ,
4-
width="480" height="162">
5-
<h1>Branch release status dashboard</h1>
6-
</div>
7-
8-
<h2>Failing stable builders</h2>
9-
10-
<div class="container">
11-
<div class="col-sm-12">
12-
<div class="row">
13-
{% for branch, info_by_tier in failed_builders %}
14-
<div class="col-md-4 ng-scope">
15-
{% if not info_by_tier %}
16-
<div class="panel panel-success">
17-
<div class="panel-heading">
18-
<div style="text-align: center;">
19-
<h4 class="panel-title">
20-
Branch {{ branch }} status: Releaseable
21-
</h4>
22-
</div>
23-
</div>
24-
<div class="panel-body">
25-
<div style="text-align: center;">
26-
<i class="fa fa-check" style="font-size:48px;color:green;"></i>
27-
</div>
28-
</div>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Python Branch Release Status Dashboard</title>
7+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
8+
<link href="{{ url_for('static', filename='dashboard.css') }}" rel="stylesheet">
9+
</head>
10+
<body>
11+
<div class="container release_status">
12+
<div class="header">
13+
<img src="https://www.python.org/static/community_logos/python-logo-master-v3-TM.png" alt="Python Logo" width="480" height="162">
14+
<h1>Branch Release Status Dashboard</h1>
15+
</div>
16+
<h2>Failing Stable Builders</h2>
17+
<div class="row">
18+
{% for branch, info_by_tier in failed_builders %}
19+
<div class="col-md-4">
20+
{% if not info_by_tier %}
21+
<div class="panel panel-success">
22+
<div class="panel-heading">
23+
<h4 class="panel-title">
24+
Branch {{ branch }} status: Releasable
25+
</h4>
2926
</div>
30-
{% else %}
31-
<div class="panel panel-danger">
32-
<div class="panel-heading">
33-
<div style="text-align: center;">
34-
<h4 class="panel-title">
35-
Branch {{ branch }} status:
36-
</h4>
37-
</div>
27+
<div class="panel-body">
28+
<div style="text-align: center;">
29+
<i class="fas fa-check"></i>
3830
</div>
39-
<div class="panel-body">
40-
{% for tier, info in info_by_tier %}
41-
<h5>{{ tier }}</h5>
42-
{% for builder, build in info %}
43-
<!-- BROKEN? <div> <buildsummary buildid="{{build.buildid}}" condensed="1"/> </div> -->
44-
<div>
45-
<a class="badge-status badge results_{{build.results_text | upper}}"
46-
href="#/builders/{{build.builderid}}/builds/{{build.number}}">
31+
</div>
32+
</div>
33+
{% else %}
34+
<div class="panel panel-danger">
35+
<div class="panel-heading">
36+
<h4 class="panel-title">
37+
Branch {{ branch }} status:
38+
</h4>
39+
</div>
40+
<div class="panel-body">
41+
{% for tier, info in info_by_tier %}
42+
<div class="tier-title">{{ tier }}</div>
43+
{% for builder, build in info %}
44+
<div>
45+
<a class="badge badge-status results_{{build.results_text | upper}}"
46+
href="#/builders/{{build.builderid}}/builds/{{build.number}}">
4747
{{ builder.name }}: #{{ build.number }}
48-
</a>
49-
</div>
50-
{% endfor %}
48+
</a>
49+
</div>
5150
{% endfor %}
52-
</div>
51+
{% endfor %}
5352
</div>
54-
{% endif %}
55-
</div>
56-
{% endfor %}
57-
</div>
53+
</div>
54+
{% endif %}
55+
</div>
56+
{% endfor %}
57+
</div>
58+
<h2>Disconnected Stable Workers</h2>
59+
<div class="container">
60+
{% for name, worker in disconnected_workers %}
61+
<div class="row">
62+
<a href="#/workers/{{ worker.workerid }}">
63+
{{ name }}
64+
</a>
65+
</div>
66+
{% else %}
67+
None.
68+
{% endfor %}
69+
</div>
70+
<div class="container">
71+
<small>Generated at <time id="generatedAt" datetime="{{generated_at}}">{{generated_at}}</time></small>
5872
</div>
5973
</div>
60-
61-
<h2>Disconnected stable workers</h2>
62-
63-
<div class="container">
64-
{% for name, worker in disconnected_workers %}
65-
<div class="row">
66-
-
67-
<a href="#/workers/{{ worker.workerid }}">
68-
{{ name }}
69-
</a>
70-
</div>
71-
{% else %}
72-
None.
73-
{% endfor %}
74-
</div>
75-
76-
<div class="container">
77-
<small>Generated at <time id="generatedAt" datetime="{{generated_at}}">{{generated_at}}</time></small>
78-
</div>
79-
</div>
80-
<script>
81-
let elem = document.getElementById("generatedAt");
82-
let date = new Date(elem.dateTime);
83-
elem.innerText = date.toLocaleDateString("en-CA") + " " + date.toLocaleTimeString("pl-PL");
84-
</script>
74+
<script>
75+
let elem = document.getElementById("generatedAt");
76+
let date = new Date(elem.dateTime);
77+
elem.innerText = date.toLocaleDateString("en-CA") + " " + date.toLocaleTimeString("pl-PL");
78+
</script>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)