~nixgoat/public-inbox

shoelace: templates/error: add search bar to error page v1 APPLIED

aoife cassidy: 1
 templates/error: add search bar to error page

 5 files changed, 105 insertions(+), 100 deletions(-)
#1236187 .build.yml success
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~nixgoat/public-inbox/patches/53037/mbox | git am -3
Learn more about email & git

[PATCH shoelace] templates/error: add search bar to error page Export this patch

+ additional CSS consistency between main and error
---
 static/css/error.css        | 13 ++++--
 static/css/home.css         | 91 -------------------------------------
 static/css/main.css         | 90 +++++++++++++++++++++++++++++++++++-
 templates/common/error.html |  5 ++
 templates/home.html         |  6 +--
 5 files changed, 105 insertions(+), 100 deletions(-)

diff --git a/static/css/error.css b/static/css/error.css
index 9b3d9c2..19098b6 100644
--- a/static/css/error.css
+++ b/static/css/error.css
@@ -1,9 +1,11 @@
/* Error container */
.error {
	padding: 48pt;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 64pt 0 64pt 0;
	gap: 10pt;
	width: 50%;
}

/* Error code */
@@ -11,13 +13,14 @@
	font-size: 48pt;
	margin: 0;
	text-shadow: 0 0 10px #111;
	user-select: none;
}

/* Error description */
.error-description {
	color: #888;
	line-height: 1em;
	margin-top: 0.75em;
	margin-bottom: 0;
	line-height: 0.25em;
	margin: 0.25em 0;
	font-size: 14pt;
}
\ No newline at end of file
	user-select: none;
}
diff --git a/static/css/home.css b/static/css/home.css
index c10c283..8401edf 100644
--- a/static/css/home.css
+++ b/static/css/home.css
@@ -25,98 +25,7 @@
	user-select: none;
}

/* Form container */
.home-form {
	display: flex;
	border-radius: 0;
	overflow: hidden;
	align-items: center;
	height: 30pt;
	border-radius: 8pt;
	margin-top: 16pt;
	width: 100%;
	box-shadow: 0 0 12px #111;
}

/* Textbox */
#home-value {
	height: inherit;
	max-height: 100%;
	flex: 8;
	border: none;
	background: #333;
	font-size: 12pt;
	padding: 0 10px;
	color: white;
}

#home-value:focus {
	outline-width: 0;
	outline: none;
}

#home-value::placeholder {
	font-style: italic;
}

/* Go button */
.home-button {
	display: flex;
	align-items: center;
	background-color: #444;
	height: inherit;
	max-height: 100%;
	padding: 0 10px;
	flex: 1;
	color: white;
	border: none;
	font-size: 100%;
	line-height: 0;
	user-select: none;
	cursor: pointer;
	justify-content: center;
}

.home-button:hover {
	background-color: #555;
}

.home-button:active:hover {
	background-color: #4a4a4a;
}


/* Light mode adjustments */
@media (prefers-color-scheme: light) {
	#home-title {
		text-shadow: 0 0 4px #666;
	}

	.home-form {
		box-shadow: 0 0 12px #777;
	}

	#home-value {
		background-color: #bbb;
		color: black;
	}

	.home-button {
		background-color: #ccc;
		color: black;
	}

	.home-button:hover {
		background-color: #c8c8c8;
	}
}

/* Adjustments for smaller screens */
@media (max-width: 700px) {
	.home-value {
		flex: 1;
	}

	.home {
		width: 90%;
		margin: 40pt 0 40pt 0;
diff --git a/static/css/main.css b/static/css/main.css
index 9b88a91..bff2415 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -68,12 +68,78 @@ hr {
	color: #666;
}

/* Form container */
.search-form {
	display: flex;
	border-radius: 0;
	overflow: hidden;
	align-items: center;
	height: 30pt;
	border-radius: 8pt;
	margin-top: 16pt;
	width: 100%;
	box-shadow: 0 0 12px #111;
}

/* Textbox */
#search-value {
	height: inherit;
	max-height: 100%;
	flex: 8;
	border: none;
	background: #333;
	font-size: 12pt;
	padding: 0 10px;
	color: white;
}

#search-value:focus {
	outline-width: 0;
	outline: none;
}

#search-value::placeholder {
	font-style: italic;
}

/* Go button */
.search-button {
	display: flex;
	align-items: center;
	background-color: #444;
	height: inherit;
	max-height: 100%;
	padding: 0 10px;
	flex: 1;
	color: white;
	border: none;
	font-size: 100%;
	line-height: 0;
	user-select: none;
	cursor: pointer;
	justify-content: center;
}

.search-button:hover {
	background-color: #555;
}

.search-button:active:hover {
	background-color: #4a4a4a;
}


/* Adjustments for smaller screens */
@media (max-width: 1152px) {
	.base-container {
		width: 95vw;
	}
}
@media (max-width: 700px) {
	.search-value {
		flex: 1;
	}
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
@@ -98,4 +164,26 @@ hr {
	hr {
		color: #ccc;
	}
}
\ No newline at end of file

	#search-title {
		text-shadow: 0 0 4px #666;
	}

	.search-form {
		box-shadow: 0 0 12px #777;
	}

	#search-value {
		background-color: #bbb;
		color: black;
	}

	.search-button {
		background-color: #ccc;
		color: black;
	}

	.search-button:hover {
		background-color: #c8c8c8;
	}
}
diff --git a/templates/common/error.html b/templates/common/error.html
index 7cb0f20..c0cb67c 100644
--- a/templates/common/error.html
+++ b/templates/common/error.html
@@ -11,5 +11,10 @@
  <div class="error">
    <h1 class="error-code">{{ status_code }}</h1>
    <p class="error-description">{{ error }}</p>
    {# Search bar #}
    <form class="search-form" action="/find">
      <input id="search-value" type="text" name="value" placeholder="Jump to a profile...">
      <input class="search-button" type="submit" value="Go">
    </form>
  </div>
{% endblock body %}
diff --git a/templates/home.html b/templates/home.html
index 220c043..8ab04b2 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -12,9 +12,9 @@
	<h1 id="home-title">Shoelace</h1>
	<p id="home-subtitle">an alternative frontend for Threads</p>
	{# Search bar #}
	<form class="home-form" action="/find">
		<input id="home-value" type="text" name="value" placeholder="Jump to a profile...">
		<input class="home-button" type="submit" value="Go">
	<form class="search-form" action="/find">
		<input id="search-value" type="text" name="value" placeholder="Jump to a profile...">
		<input class="search-button" type="submit" value="Go">
	</form>
</div>
{% endblock body %}
-- 
2.44.0
shoelace/patches/.build.yml: SUCCESS in 5m12s

[templates/error: add search bar to error page][0] from [aoife cassidy][1]

[0]: https://lists.sr.ht/~nixgoat/public-inbox/patches/53037
[1]: mailto:aoife@enby.space

✓ #1236187 SUCCESS shoelace/patches/.build.yml https://builds.sr.ht/~nixgoat/job/1236187