[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