me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix the error toasts

Browse Source
This commit is contained in:
Alessio 2024-04-12 17:33:00 -07:00
parent 3eb281cb7e
commit 39c2cc0d3d
4 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
internal/webserver/response_helpers.go
View File

@ -35,8 +35,9 @@ func (app *Application) error_500(w http.ResponseWriter, err error) {
panic(err2) panic(err2)
} }
// Reset the HTMX response to return an error toast and put it in the
w.Header().Set("HX-Reswap", "beforeend") w.Header().Set("HX-Reswap", "beforeend")
w.Header().Set("HX-Retarget", "main") w.Header().Set("HX-Retarget", "#errorMessages")
w.Header().Set("HX-Push-Url", "false") w.Header().Set("HX-Push-Url", "false")
r := renderer{ r := renderer{

69
internal/webserver/static/styles.css
View File

@ -1,34 +1,26 @@
:root { :root {
--color-twitter-text-gray: #536171; /* Make it easy for stuff to match the width of <body> */
--color-twitter-blue: #1b95e0; /* hsl(203, 78%, 49%) */ --width-body-margins: 30%;
--color-twitter-blue-light: #7cc5f6; /* hsl(204, 87%, 73%) */
/**********
* Colors
**********/
--color-twitter-blue: hsl(204, 78%, 49%);
--color-twitter-blue-light: hsl(204, 87%, 73%);
--color-twitter-blue-extra-light: hsl(204, 95%, 85%); --color-twitter-blue-extra-light: hsl(204, 95%, 85%);
--color-twitter-off-white: #f7f9f9; /* hsl(180, 14%, 97%) */
--color-twitter-off-white-dark: #dae5e5; /* hsl(180, 17%, 88%) */
--color-outline-gray: #dcdcdc;
--color-twitter-text-gray: #536471;
--color-twitter-danger-red: #f4212e; /* hsl(356, 91%, 54%) */ --color-twitter-off-white: hsl(180, 14%, 97%);
--color-twitter-danger-red2: #de1b28; /* hsl(356, 78%, 49%) */ --color-twitter-off-white-dark: hsl(180, 17%, 88%);
--color-twitter-danger-red2-light: #f67e86; /* hsl(356, 87%, 73%) */ --color-outline-gray: hsl(204, 0%, 86%);
--color-twitter-danger-red2-hover: #f2a6aa; /* hsl(357, 75%, 80%);*/ --color-twitter-text-gray: hsl(204, 15%, 38%);
--color-space-purple: #a49bfd;
--color-space-purple-outline: #6452fc;
/*
const QColor COLOR_OUTLINE_GRAY = QColor(220, 220, 220);
const QColor COLOR_TWITTER_BLUE = QColor(27, 149, 224);
const QColor COLOR_TWITTER_BLUE_LIGHT = QColor(124,197,246);
const QColor COLOR_TWITTER_OFF_WHITE = QColor(247,249,249);
const QColor COLOR_TWITTER_OFF_WHITE_DARK = QColor(218,229,229);
const QColor COLOR_TWITTER_TEXT_GRAY = QColor(83, 100, 113);
const QColor COLOR_BACKGROUND_GREEN = QColor(40, 205, 50); --color-twitter-danger-red: hsl(356, 91%, 54%);
--color-twitter-danger-red2: hsl(356, 78%, 49%);
--color-twitter-danger-red2-light: hsl(356, 87%, 73%);
--color-twitter-danger-red2-hover: hsl(356, 75%, 80%);
const QColor COLOR_RED = QColor(255, 0, 0); --color-space-purple: hsl(246, 96%, 80%);
--color-space-purple-outline: hsl(246, 97%, 65%);
const QColor COLOR_SPACE_PURPLE = QColor(164, 155, 253);
const QColor COLOR_SPACE_PURPLE_OUTLINE = QColor(100, 82, 252);
*/
} }
@ -55,7 +47,7 @@ body {
*/ */
position: relative; position: relative;
margin: 0 30%; margin: 0 var(--width-body-margins);
min-height: 100vh; min-height: 100vh;
border-color: var(--color-twitter-off-white-dark); border-color: var(--color-twitter-off-white-dark);
@ -208,8 +200,8 @@ header {
z-index: 1; z-index: 1;
/* Match layout width of `body` */ /* Match layout width of `body` */
left: 30%; left: var(--width-body-margins);
right: 30%; right: var(--width-body-margins);
height: 4em; height: 4em;
padding: 0.5em 1em; padding: 0.5em 1em;
@ -298,16 +290,27 @@ main {
/** /**
* Toast notification popup that gets sent on HTTP 500 * Toast notification popup that gets sent on HTTP 500
*/ */
.server-error-msg { .error-messages {
position: fixed;
left: var(--width-body-margins);
top: 10em;
right: var(--width-body-margins);
display: flex;
flex-direction: column;
align-items: center;
.error-messages__msg {
background-color: #fee; background-color: #fee;
border: 1px solid red; border: 1px solid red;
border-radius: 1em; border-radius: 1em;
padding: 1em; padding: 1em;
color: red; color: red;
text-align: center; text-align: center;
top: 10em; word-wrap: break-word;
margin: 1em;
width: 90%; width: 90%;
} }
}
/** /**
* HTMX spinner module * HTMX spinner module
@ -340,8 +343,8 @@ main {
position: fixed; position: fixed;
top: 0; top: 0;
height: 100vh; height: 100vh;
left: 30%; left: var(--width-body-margins);
right: 30%; right: var(--width-body-margins);
} }
.htmx-spinner__background { .htmx-spinner__background {
opacity: 0.3; opacity: 0.3;

6
internal/webserver/tpl/http_500.tpl
View File

@ -1,6 +1,6 @@
{{define "error-toast"}} {{define "error-toast"}}
<dialog class="server-error-msg" open> <div class="error-messages__msg" open>
<span>{{.ErrorMsg}}</span> <span>{{.ErrorMsg}}</span>
<button class="suicide" onclick="htmx.remove('.server-error-msg')">X</button> <button class="suicide" onclick="htmx.remove('.error-messages__msg')">X</button>
</dialog> </div>
{{end}} {{end}}

2
internal/webserver/tpl/includes/base.tpl
View File

@ -43,6 +43,8 @@
<a class="button image-carousel__close-button" onclick="image_carousel.close()">X</a> <a class="button image-carousel__close-button" onclick="image_carousel.close()">X</a>
<img class="image-carousel__active-image" src=""> <img class="image-carousel__active-image" src="">
</dialog> </dialog>
<div class="error-messages" id="errorMessages">
</div>
</body> </body>
</html> </html>
{{end}} {{end}}