From 536aee8766fc4ae80f9e2fa88083b0081bdf1f18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= <ondrej@nyv.lt>
Date: Thu, 17 Aug 2023 12:19:54 +0200
Subject: [PATCH] Improve mobile view

---
 view/static/main.css      | 32 ++++++++++++++++++++++++--------
 view/templates/index.html | 36 ++++++++++++++++++------------------
 2 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/view/static/main.css b/view/static/main.css
index d301f6f..c4665d2 100644
--- a/view/static/main.css
+++ b/view/static/main.css
@@ -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);
 }
diff --git a/view/templates/index.html b/view/templates/index.html
index edc7d0a..4912c05 100644
--- a/view/templates/index.html
+++ b/view/templates/index.html
@@ -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 %}