nologcz/headline
2
1
Fork 0
mirror of https://git.nolog.cz/NoLog.cz/headline.git synced 2025-01-31 20:03:34 +01:00
Code Issues Projects Releases Packages Wiki Activity

Improve mobile view

Browse source
This commit is contained in:
Ondřej Nývlt 2023-08-17 12:19:54 +02:00
parent b46af16644
commit 536aee8766
2 changed files with 42 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
view/static/main.css
View file

@ -107,7 +107,7 @@ summary {
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 0.5em; gap: 0.5em;
} }
@ -116,10 +116,12 @@ summary::-webkit-details-marker {
} }
summary::before { summary::before {
content: url('data:image/svg+xml,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"></path></svg>'); content: url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"></path></svg>');
display: grid; display: grid;
place-content: center; place-content: center;
transition: transform 120ms; transition: transform 120ms;
margin-left: -0.25rem;
margin-top: 0.25rem;
} }
details[open] summary::before { details[open] summary::before {
@ -203,7 +205,7 @@ details[open] summary::before {
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; padding: 0 1rem;
} }
.input { .input {
@ -223,6 +225,7 @@ details[open] summary::before {
.button { .button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
flex-shrink: 0;
gap: 0.5em; gap: 0.5em;
border-radius: var(--radius-s); border-radius: var(--radius-s);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@ -252,6 +255,10 @@ details[open] summary::before {
overflow: hidden; overflow: hidden;
} }
.pagination-container {
overflow-x: auto;
}
.pagination { .pagination {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
@ -317,6 +324,16 @@ details[open] summary::before {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
.filters form {
display: flex;
gap: 0.5rem;
}
.filters [name="search"] {
width: 100%;
max-width: 20rem;
}
.changesets { .changesets {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -328,8 +345,10 @@ details[open] summary::before {
.changeset-actions { .changeset-actions {
display: flex; display: flex;
gap: 1rem; column-gap: 1rem;
row-gap: 0.5rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
flex-wrap: wrap;
} }
.changeset-feed-name, .changeset-feed-name,
@ -337,6 +356,7 @@ details[open] summary::before {
.changeset-action { .changeset-action {
font-weight: 500; font-weight: 500;
font-size: var(--font-size-s); font-size: var(--font-size-s);
flex-shrink: 0;
} }
.changeset-action { .changeset-action {
@ -349,10 +369,6 @@ details[open] summary::before {
transition: color 200ms; transition: color 200ms;
} }
.changeset-action:first-of-type {
margin-left: 0.5em;
}
.changeset-title { .changeset-title {
font-size: var(--font-size-l); font-size: var(--font-size-l);
} }

6
view/templates/index.html
View file

@ -6,7 +6,6 @@
<div class="filters"> <div class="filters">
<div class="container"> <div class="container">
<form method="get"> <form method="get">
<div class="d-flex">
<input <input
class="input" class="input"
type="text" type="text"
@ -22,7 +21,6 @@
Hledat Hledat
<svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg> <svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>
</button> </button>
</div>
</form> </form>
</div> </div>
</div> </div>
@ -61,8 +59,10 @@
{% endfor %} {% endfor %}
</div> </div>
<div class="container"> <div class="container pagination-container">
{{ pagination.links }} {{ pagination.links }}
</div>
<div class="container">
{{ pagination.info }} {{ pagination.info }}
</div> </div>
{% endblock body %} {% endblock body %}