mirror of
https://git.nolog.cz/NoLog.cz/headline.git
synced 2025-01-31 11:53:35 +01:00
Improve mobile view
This commit is contained in:
Ondřej Nývlt
parent
b46af16644
commit
536aee8766
2 changed files with 42 additions and 26 deletions
|
|
@ -107,7 +107,7 @@ summary {
|
|||
cursor: pointer;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
|
|
@ -116,10 +116,12 @@ summary::-webkit-details-marker {
|
|||
}
|
||||
|
||||
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;
|
||||
place-content: center;
|
||||
transition: transform 120ms;
|
||||
margin-left: -0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
details[open] summary::before {
|
||||
|
|
@ -203,7 +205,7 @@ details[open] summary::before {
|
|||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
|
|
@ -223,6 +225,7 @@ details[open] summary::before {
|
|||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 0.5em;
|
||||
border-radius: var(--radius-s);
|
||||
border: 1px solid var(--border-color);
|
||||
|
|
@ -252,6 +255,10 @@ details[open] summary::before {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
|
@ -317,6 +324,16 @@ details[open] summary::before {
|
|||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.filters form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.filters [name="search"] {
|
||||
width: 100%;
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.changesets {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
|
@ -328,8 +345,10 @@ details[open] summary::before {
|
|||
|
||||
.changeset-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
row-gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.changeset-feed-name,
|
||||
|
|
@ -337,6 +356,7 @@ details[open] summary::before {
|
|||
.changeset-action {
|
||||
font-weight: 500;
|
||||
font-size: var(--font-size-s);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.changeset-action {
|
||||
|
|
@ -349,10 +369,6 @@ details[open] summary::before {
|
|||
transition: color 200ms;
|
||||
}
|
||||
|
||||
.changeset-action:first-of-type {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.changeset-title {
|
||||
font-size: var(--font-size-l);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,23 +6,21 @@
|
|||
<div class="filters">
|
||||
<div class="container">
|
||||
<form method="get">
|
||||
<div class="d-flex">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
id="search"
|
||||
name="search"
|
||||
value="{{ search|e }}"
|
||||
/>
|
||||
<button
|
||||
class="button"
|
||||
type="submit"
|
||||
value="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>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
id="search"
|
||||
name="search"
|
||||
value="{{ search|e }}"
|
||||
/>
|
||||
<button
|
||||
class="button"
|
||||
type="submit"
|
||||
value="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>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -61,8 +59,10 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container pagination-container">
|
||||
{{ pagination.links }}
|
||||
</div>
|
||||
<div class="container">
|
||||
{{ pagination.info }}
|
||||
</div>
|
||||
{% endblock body %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue