Skip to content

Commit aff95a7

Browse files
StefanCodesStefanCodes
committed
Final batch of CSS fixes to try to better match the original layout
1 parent d6ccad5 commit aff95a7

File tree

5 files changed

+112
-55
lines changed

5 files changed

+112
-55
lines changed

‎tubesync/common/static/styles/tubesync.css‎

Lines changed: 77 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,13 @@ header svg.tubesync-logo .logo-icon {
8181
fill: var(--tubesync-text-on-dark) !important;
8282
}
8383

84+
header h1 {
85+
margin: 0 0 0 var(--bulma-spacing-2);
86+
font-size: var(--bulma-size-1);
87+
line-height: calc(var(--bulma-size-1) * 0.9);
88+
color: var(--tubesync-text-on-dark);
89+
}
90+
8491
@media screen and (max-width: 1023px) {
8592
header .container > div {
8693
padding-left: 0.75rem;
@@ -99,11 +106,13 @@ footer svg path {
99106

100107
footer a {
101108
color: var(--tubesync-text-on-dark);
102-
text-decoration: none;
109+
text-decoration: underline;
110+
text-decoration-color: rgba(253, 255, 252, 0.5);
103111
}
104112

105113
footer a:hover {
106114
color: var(--tubesync-orange);
115+
text-decoration-color: var(--tubesync-orange);
107116
}
108117

109118
footer strong {
@@ -112,6 +121,7 @@ footer strong {
112121

113122
[data-theme="dark"] footer a {
114123
color: var(--tubesync-text-on-dark);
124+
text-decoration-color: rgba(232, 234, 237, 0.5);
115125
}
116126

117127
[data-theme="dark"] footer strong {
@@ -222,12 +232,27 @@ main .container {
222232
padding-right: 0.75rem;
223233
}
224234

235+
main h1.title {
236+
font-weight: var(--bulma-weight-normal);
237+
}
238+
225239
a.box,
226240
a.box .title,
227241
a.box .subtitle {
228242
color: var(--tubesync-light-blue);
229243
}
230244

245+
.box .content a {
246+
font-weight: 300;
247+
line-height: 110%;
248+
}
249+
250+
hr {
251+
background-color: var(--tubesync-light-blue);
252+
border: none;
253+
height: 1px;
254+
}
255+
231256
/* ============================================
232257
Media Cards
233258
============================================ */
@@ -269,15 +294,6 @@ a.box .subtitle {
269294
Forms
270295
============================================ */
271296

272-
.simpleform .columns .column {
273-
display: flex;
274-
align-items: flex-end;
275-
}
276-
277-
.simpleform .field {
278-
width: 100%;
279-
}
280-
281297
.simpleform .label {
282298
text-transform: uppercase;
283299
}
@@ -348,14 +364,40 @@ a.box .subtitle {
348364
background-color: var(--bulma-danger);
349365
}
350366

351-
.errorlist li {
352-
color: #fdfffc;
367+
.has-background-transparent {
368+
background-color: transparent !important;
353369
}
354370

355-
.is-clipped {
356-
overflow: hidden;
357-
text-overflow: ellipsis;
358-
white-space: nowrap;
371+
.is-borderless {
372+
border: none !important;
373+
}
374+
375+
.m-0 {
376+
margin: 0 !important;
377+
}
378+
379+
.is-fullheight {
380+
height: 100%;
381+
}
382+
383+
.is-flex-grow-1 {
384+
flex-grow: 1;
385+
}
386+
387+
.is-align-items-flex-start {
388+
align-items: flex-start;
389+
}
390+
391+
.is-align-self-flex-start {
392+
align-self: flex-start;
393+
}
394+
395+
.has-text-decoration-underline {
396+
text-decoration: underline;
397+
}
398+
399+
.has-cursor-pointer {
400+
cursor: pointer;
359401
}
360402

361403
/* ============================================
@@ -411,3 +453,22 @@ a.box .subtitle {
411453
min-width: 0;
412454
}
413455
}
456+
457+
/* ============================================
458+
Download Lists
459+
============================================ */
460+
.download-item {
461+
color: var(--tubesync-light-blue);
462+
text-decoration: none;
463+
border-bottom: 1px solid var(--bulma-border);
464+
transition: background-color 0.2s;
465+
}
466+
467+
.download-item:last-child {
468+
border-bottom: none;
469+
}
470+
471+
.download-item:hover {
472+
background-color: var(--tubesync-orange);
473+
color: var(--tubesync-text-on-dark);
474+
}

‎tubesync/common/templates/base.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@
2525

2626
<body id="body">
2727

28-
<header class="py-3">
28+
<header class="pt-4 pb-4">
2929
<div class="container">
30-
<div style="display: flex; justify-content: space-between; align-items: center;">
30+
<div class="is-flex is-justify-content-space-between is-align-items-center">
3131
<a href="{% url 'sync:dashboard' %}" class="is-flex is-align-items-center">
3232
{% include 'tubesync.svg' with width='3rem' height='3rem' class='pr-4' %}
33-
<h1 class="title has-text-white mb-0 ml-2">TubeSync</h1>
33+
<h1>TubeSync</h1>
3434
</a>
35-
<a role="button" class="navbar-burger is-hidden-tablet" aria-label="menu" aria-expanded="false" data-target="navbarMenu" style="background: transparent; border: none; margin: 0;">
35+
<a role="button" class="navbar-burger is-hidden-tablet has-background-transparent is-borderless m-0" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
3636
<span aria-hidden="true"></span>
3737
<span aria-hidden="true"></span>
3838
<span aria-hidden="true"></span>

‎tubesync/common/templates/simpleform.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
{% if field.field.widget.input_type == 'hidden' %}
1414
{{ field }}
1515
{% else %}
16-
<div class="column is-half-tablet is-one-third-desktop{% if field.field.widget.input_type == 'checkbox' %} is-flex is-align-items-center{% endif %}">
17-
<div class="field">
16+
<div class="column is-half-tablet is-one-third-desktop is-flex is-align-items-flex-end{% if field.field.widget.input_type == 'checkbox' %} is-align-items-center{% endif %}">
17+
<div class="field is-fullwidth">
1818
{% if field.field.widget.input_type == 'checkbox' %}
1919
<div class="control">
2020
<label class="checkbox">
@@ -31,7 +31,7 @@
3131
{% if field.name == 'media_format' %}
3232
<p class="help help-text">
3333
<i class="fas fa-info-circle pr-2"></i> File format to use for saving files
34-
<a id="show-media-vars" style="cursor: pointer; text-decoration: underline;"><i class="fas fa-list"></i> show available variables</a>
34+
<a id="show-media-vars" class="has-text-decoration-underline has-cursor-pointer"><i class="fas fa-list"></i> show available variables</a>
3535
</p>
3636
{% elif field.help_text %}
3737
<p class="help help-text"><i class="fas fa-info-circle pr-2"></i> {{ field.help_text }}</p>

‎tubesync/sync/templates/sync/dashboard.html‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,14 @@ <h1 class="title mb-4">Dashboard</h1>
5959
<div class="column is-half-desktop">
6060
<div class="box">
6161
<h4 class="title is-5">Latest downloads</h4>
62-
<div class="content">
62+
<div class="is-fullwidth">
6363
{% for media in latest_downloads %}
64-
<div class="mb-4">
65-
<a href="{% url 'sync:media-item' pk=media.pk %}">
66-
<strong>{{ media.name }}</strong><br>
67-
<small class="has-text-grey">{{ media.download_date|timesince:now }} ago from "{{ media.source.name }}"</small>
68-
</a>
69-
</div>
64+
<a href="{% url 'sync:media-item' pk=media.pk %}" class="download-item is-block is-fullwidth p-3">
65+
<div class="is-clipped mb-1"><strong>{{ media.name }}</strong></div>
66+
<div class="is-clipped"><strong>{{ media.download_date|timesince:now }} ago</strong> from "{{ media.source.name }}"</div>
67+
</a>
7068
{% empty %}
71-
<p class="has-text-grey">No media has been downloaded.</p>
69+
<div class="download-item is-block is-fullwidth p-3">No media has been downloaded.</div>
7270
{% endfor %}
7371
</div>
7472
</div>
@@ -77,16 +75,14 @@ <h4 class="title is-5">Latest downloads</h4>
7775
<div class="column is-half-desktop">
7876
<div class="box">
7977
<h4 class="title is-5">Largest downloads</h4>
80-
<div class="content">
78+
<div class="is-fullwidth">
8179
{% for media in largest_downloads %}
82-
<div class="mb-4">
83-
<a href="{% url 'sync:media-item' pk=media.pk %}">
84-
{{ media.name }}<br>
85-
<small class="has-text-grey"><strong>{{ media.downloaded_filesize|bytesformat }}</strong>{% if media.downloaded_format %} in {{ media.downloaded_format }}{% endif %} from "{{ media.source.name }}"</small>
86-
</a>
87-
</div>
80+
<a href="{% url 'sync:media-item' pk=media.pk %}" class="download-item is-block is-fullwidth p-3">
81+
<div class="is-clipped mb-1">{{ media.name }}</div>
82+
<div class="is-clipped"><strong>{{ media.downloaded_filesize|bytesformat }}</strong>{% if media.downloaded_format %} in {{ media.downloaded_format }}{% endif %} from "{{ media.source.name }}"</div>
83+
</a>
8884
{% empty %}
89-
<p class="has-text-grey">No media has been downloaded.</p>
85+
<div class="download-item is-block is-fullwidth p-3">No media has been downloaded.</div>
9086
{% endfor %}
9187
</div>
9288
</div>
@@ -98,24 +94,24 @@ <h2 class="title is-4 mt-5">Runtime information</h2>
9894
<table class="table is-fullwidth is-hoverable is-striped">
9995
<tbody>
10096
<tr>
101-
<td><strong>User ID</strong></td>
102-
<td>{{ uid }}</td>
97+
<td>User ID</td>
98+
<td><strong>{{ uid }}</strong></td>
10399
</tr>
104100
<tr>
105-
<td><strong>Group ID</strong></td>
106-
<td>{{ gid }}</td>
101+
<td>Group ID</td>
102+
<td><strong>{{ gid }}</strong></td>
107103
</tr>
108104
<tr>
109-
<td><strong>Config directory</strong></td>
110-
<td>{{ config_dir }}</td>
105+
<td>Config directory</td>
106+
<td><strong>{{ config_dir }}</strong></td>
111107
</tr>
112108
<tr>
113-
<td><strong>Downloads directory</strong></td>
114-
<td>{{ downloads_dir }}</td>
109+
<td>Downloads directory</td>
110+
<td><strong>{{ downloads_dir }}</strong></td>
115111
</tr>
116112
<tr>
117-
<td><strong>Database</strong></td>
118-
<td>{{ database_connection }}{% if database_filesize %} ({{ database_filesize|bytesformat }}){% endif %}</td>
113+
<td>Database</td>
114+
<td><strong>{{ database_connection }}{% if database_filesize %} ({{ database_filesize|bytesformat }}){% endif %}</strong></td>
119115
</tr>
120116
</tbody>
121117
</table>

‎tubesync/sync/templates/sync/tasks.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -133,30 +133,30 @@ <h2 class="title is-4">{{ adjusted|intcomma }} Scheduled ({{ scheduled|length|in
133133

134134
<div class="columns is-multiline">
135135
<div class="column is-half">
136-
<div class="box is-flex is-flex-direction-column" style="height: 100%;">
136+
<div class="box is-flex is-flex-direction-column is-fullheight">
137137
<h2 class="title is-5">Completed</h2>
138-
<div style="flex-grow: 1; display: flex; align-items: flex-start;">
138+
<div class="is-flex-grow-1 is-flex is-align-items-flex-start">
139139
<p class="mb-4">
140140
A record of recently completed tasks is kept for a few days. You can use the button
141141
below to view recent tasks which have completed successfully.
142142
</p>
143143
</div>
144-
<a href="{% url 'sync:tasks-completed' %}" class="button is-primary" style="align-self: flex-start;">
144+
<a href="{% url 'sync:tasks-completed' %}" class="button is-primary is-align-self-flex-start">
145145
<span><span class="is-hidden-tablet-only">View </span>Completed tasks</span>
146146
<span class="icon"><i class="fas fa-check-double"></i></span>
147147
</a>
148148
</div>
149149
</div>
150150

151151
<div class="column is-half">
152-
<div class="box is-flex is-flex-direction-column" style="height: 100%;">
152+
<div class="box is-flex is-flex-direction-column is-fullheight">
153153
<h2 class="title is-5">Reset</h2>
154-
<div style="flex-grow: 1; display: flex; align-items: flex-start;">
154+
<div class="is-flex-grow-1 is-flex is-align-items-flex-start">
155155
<p class="mb-4">
156156
If you need to, you can reset and reschedule all tasks using the button below.
157157
</p>
158158
</div>
159-
<a href="{% url 'sync:reset-tasks' %}" class="button is-primary" style="align-self: flex-start;">
159+
<a href="{% url 'sync:reset-tasks' %}" class="button is-primary is-align-self-flex-start">
160160
<span>Reset tasks</span>
161161
<span class="icon"><i class="fas fa-history"></i></span>
162162
</a>

0 commit comments

Comments
 (0)