aykhans/series-robot-web
1
0
Fork 0
mirror of https://github.com/aykhans/series-robot-web.git synced 2025-04-16 04:53:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added scroll to table

Browse Source
This commit is contained in:
ayxan 2022-10-17 12:43:51 +04:00
parent 9ef0bc46f3
commit 6dfe4d1c5c
4 changed files with 68 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/series/templates/homepage.html
View File

@ -8,7 +8,7 @@
{% include 'components/message.html' %}
<link rel="stylesheet" href="{% static 'css/homepage.css' %}">
<table class="table" style="margin-bottom: 1.5rem;">
<table class="table">
<thead>
<tr>
<th scope="col">Title ({{series.paginator.count}})</th>
@ -48,38 +48,40 @@
</tbody>
</table>
<div style="float: left;">
<button type="button" class="btn btn-outline-primary">
<a href="/series/new-episodes/" style="text-decoration: none; color: inherit;">New Episodes</a>
</button>
</div>
<div style="margin-bottom: 8.5rem;">
<div class="btn-new-episode">
<button type="button" class="btn btn-outline-primary">
<a href="/series/new-episodes/" style="text-decoration: none; color: inherit;">New Episodes</a>
</button>
</div>
<div style="float: right;">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
{% if series.has_previous %}
<li class="page-item">
<a class="page-link" href="?page=1"><<</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{series.previous_page_number}}"><</a>
</li>
{% endif %}
<div class="pages">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
{% if series.has_previous %}
<li class="page-item">
<a class="page-link" href="?page=1"><<</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{series.previous_page_number}}"><</a>
</li>
{% endif %}
{% if series.paginator.count > 5 %}
<li class="page-item"><a class="page-link" href="#">{{series.number}}</a></li>
{% endif %}
{% if series.paginator.count > 5 %}
<li class="page-item"><a class="page-link" href="#">{{series.number}}</a></li>
{% endif %}
{% if series.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{series.next_page_number}}">></a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{series.paginator.num_pages}}">>></a>
</li>
{% endif %}
</ul>
</nav>
{% if series.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{series.next_page_number}}">></a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{series.paginator.num_pages}}">>></a>
</li>
{% endif %}
</ul>
</nav>
</div>
</div>
{% endblock content %}

8
src/series/templates/new_episodes.html
View File

@ -6,7 +6,8 @@
{% block content %}
<link rel="stylesheet" href="{% static 'css/new_episodes.css' %}">
<table class="table" style="margin-bottom: 1.5rem;">
<div class="table-div">
<table class="table">
<thead>
<tr>
<th scope="col">Title</th>
@ -24,10 +25,10 @@
</a>
<br>
<a class="btn mr-1 update-btn" style="padding: 0;" href="{% url 'update-series' s.slug %}">
<img src="{% static 'icons/edit.png' %}" width="21px" height="21px">
<img class="edit-icon" src="{% static 'icons/edit.png' %}" width="21px" height="21px">
</a>
<a class="btn delete-btn" href="{% url 'delete-series' s.slug %}">
<img src="{% static 'icons/trash.png' %}" width="24px" height="24px">
<img class="trash-icon" src="{% static 'icons/trash.png' %}" width="24px" height="24px">
</a>
</th>
<td>
@ -45,5 +46,6 @@
{% endfor %}
</tbody>
</table>
</div>
{% endblock content %}

22
src/static/css/homepage.css
View File

@ -1,15 +1,27 @@
.table {
margin-bottom: 1.5rem;
}
.btn-new-episode {
float: left;
}
.pages {
float: right;
}
@media only screen and (max-width: 510px) {
table {
font-size: 90%;
font-size: 87%;
}
.edit-icon {
width: 19px;
height: 19px;
width: 18px;
height: 18px;
}
.trash-icon {
width: 21px;
height: 21px;
width: 19px;
height: 19px;
}
}

19
src/static/css/new_episodes.css
View File

@ -1,15 +1,24 @@
.table {
margin-bottom: 1.5rem;
width: 670px;
}
.table-div {
overflow-x: scroll;
}
@media only screen and (max-width: 510px) {
table {
font-size: 85%;
font-size: 83%;
}
.edit-icon {
width: 15px;
height: 15px;
width: 18px;
height: 18px;
}
.trash-icon {
width: 17px;
height: 17px;
width: 19px;
height: 19px;
}
}