sonny/newsreader
1
0
Fork 0
Code Issues 13 Pull requests 2 Projects Releases 58 Packages Wiki Activity Actions

Update rule table styling

Browse source
This commit is contained in:
Sonny 2020-07-26 19:41:17 +02:00
parent 6a13c58712
commit fd16478909
3 changed files with 21 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/newsreader/news/collection/templates/news/collection/views/rules.html
View file

@ -21,7 +21,7 @@
</section> </section>
<section class="section form__section"> <section class="section form__section">
<table class="table rules-table"> <table class="table rules-table" border="0" cellspacing="0">
<thead class="table__header rules-table__header"> <thead class="table__header rules-table__header">
<tr class="table__row rules-table__row"> <tr class="table__row rules-table__row">
<th class="table__heading rules-table__heading--select"> <th class="table__heading rules-table__heading--select">
@ -32,20 +32,27 @@
<th class="table__heading rules-table__heading--url">{% trans "URL" %}</th> <th class="table__heading rules-table__heading--url">{% trans "URL" %}</th>
<th class="table__heading rules-table__heading--succeeded">{% trans "Successfuly ran" %}</th> <th class="table__heading rules-table__heading--succeeded">{% trans "Successfuly ran" %}</th>
<th class="table__heading rules-table__heading--enabled">{% trans "Enabled" %}</th> <th class="table__heading rules-table__heading--enabled">{% trans "Enabled" %}</th>
<th class="table__heading rules-table__heading--link"></th>
</tr> </tr>
</thead> </thead>
<tbody class="table__body"> <tbody class="table__body">
{% for rule in rules %} {% for rule in rules %}
<tr class="table__row rules-table__row"> <tr class="table__row {% if not rule.succeeded %}table__row--error {% endif %}rules-table__row">
<td class="table__item rules-table__item"> <td class="table__item rules-table__item">
{% with rule|id_for_label:"rules" as id_for_label %} {% with rule|id_for_label:"rules" as id_for_label %}
{% include "components/form/checkbox.html" with name="rules" value=rule.pk id=id_for_label id_for_label=id_for_label %} {% include "components/form/checkbox.html" with name="rules" value=rule.pk id=id_for_label id_for_label=id_for_label %}
{% endwith %} {% endwith %}
</td> </td>
<td class="table__item rules-table__item" title="{{ rule.name }}">{{ rule.name }}</td> <td class="table__item rules-table__item" title="{{ rule.name }}">
<td class="table__item rules-table__item" title="{{ rule.category.name }}">{{ rule.category.name }}</td> <a class="link" href="{{ rule.update_url }}">{{ rule.name }}</a>
<td class="table__item rules-table__item" title="{{ rule.url }}">{{ rule.url }}</td> </td>
<td class="table__item rules-table__item" title="{{ rule.category.name }}">
{% if rule.category %}
<a class="link" href="{% url 'news:core:category-update' pk=rule.category.pk %}">{{ rule.category.name }}</a>
{% endif %}
</td>
<td class="table__item rules-table__item" title="{{ rule.url }}">
<a class="link" href="{{ rule.url }}" target="_blank" rel="noopener noreferrer">{{ rule.url }}</a>
</td>
<td class="table__item rules-table__item"> <td class="table__item rules-table__item">
{% if rule.succeeded %} {% if rule.succeeded %}
<i class="gg-check"></i> <i class="gg-check"></i>
@ -60,9 +67,6 @@
<i class="gg-play-pause"></i> <i class="gg-play-pause"></i>
{% endif %} {% endif %}
</td> </td>
<td class="table__item rules-table__item">
<a class="link" href="{{ rule.update_url }}"><i class="gg-pen"></i></a>
</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>

13
src/newsreader/scss/components/table/_rules-table.scss
View file

@ -5,7 +5,7 @@
} }
&--name { &--name {
width: 20%; width: 25%;
} }
&--category { &--category {
@ -23,16 +23,5 @@
&--enabled { &--enabled {
width: 10%; width: 10%;
} }
&--link {
width: 5%;
}
}
& .link {
display: flex;
justify-content: center;
padding: 10px;
} }
} }

9
src/newsreader/scss/components/table/_table.scss
View file

@ -2,6 +2,7 @@
.table { .table {
table-layout: fixed; table-layout: fixed;
background-color: $white; background-color: $white;
width: 90%; width: 90%;
padding: 20px; padding: 20px;
@ -13,11 +14,15 @@
@extend .h1; @extend .h1;
} }
&__row {
&--error {
background-color: lighten($error-red, 25%);
}
}
&__item { &__item {
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid $border-gray;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;