revisi toast top right based screen view
This commit is contained in:
@@ -94,6 +94,48 @@ License: You must have a valid license purchased only from themeforest(the above
|
||||
>
|
||||
<!--begin::Main-->
|
||||
<div class="d-flex flex-column flex-root bg-white">
|
||||
<div
|
||||
id="notification-001"
|
||||
class="toast toast-top-right toas fade show"
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
hx-swap-oob="true"
|
||||
style="margin-top: 2vh; margin-right: 2vw;"
|
||||
>
|
||||
<div class="toast-header bg-success text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--ep mr-2 icon-xl"
|
||||
width="1em"
|
||||
height="1em"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 1024 1024"
|
||||
data-icon="ep:success-filled"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"
|
||||
></path>
|
||||
</svg>
|
||||
<strong class="mr-auto">Success</strong>
|
||||
<small class="text-muted text-white">just now</small>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-2 mb-1 close"
|
||||
data-dismiss="toast"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body bg-success-transparent">
|
||||
This is a success toast.
|
||||
</div>
|
||||
</div>
|
||||
<!-- begin::Navbar -->
|
||||
<div
|
||||
class="d-flex flex-lg-row justify-content-between py-5"
|
||||
|
||||
@@ -5198,6 +5198,8 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
|
||||
z-index: 99999999999 !important;
|
||||
width: 350px;
|
||||
height: auto;
|
||||
margin-top: 2vh;
|
||||
margin-right: 2vw;
|
||||
}
|
||||
|
||||
/* ### TOAST FONT SIZE */
|
||||
@@ -5274,6 +5276,16 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
|
||||
/* ## WARNING */
|
||||
/* ## DANGER */
|
||||
|
||||
/* ### HTMX INDICATOR */
|
||||
.htmx-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
.htmx-request .htmx-indicator {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.htmx-request.htmx-indicator {
|
||||
display: inline-block !important;
|
||||
}
|
||||
/* ### BUTTON HOVER TEXT */
|
||||
/* ### */
|
||||
/* ## PRIMARY */
|
||||
|
||||
@@ -13,7 +13,7 @@ func toastBody(typeToastBody string) string {
|
||||
}
|
||||
|
||||
func toastIcon(typeToast string) string {
|
||||
var stringx string
|
||||
var stringx string
|
||||
if typeToast == "success" {
|
||||
stringx = "solar:check-circle-broken"
|
||||
} else {
|
||||
@@ -30,12 +30,12 @@ func toastIcon(typeToast string) string {
|
||||
}
|
||||
}
|
||||
|
||||
return stringx
|
||||
return stringx
|
||||
}
|
||||
|
||||
templ CustomToastV2Show(title string, message string, typeToast string) {
|
||||
<div
|
||||
class="toast fade show"
|
||||
class="toast toast-top-right fade show"
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
@@ -63,14 +63,15 @@ templ CustomToastV2Show(title string, message string, typeToast string) {
|
||||
}
|
||||
|
||||
templ CustomToastV2Hide() {
|
||||
<div id="notification-001"
|
||||
class="toast fade hide"
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
style="opacity: 0"
|
||||
hx-swap-oob="true"
|
||||
>
|
||||
<div
|
||||
id="notification-001"
|
||||
class="toast fade hide"
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
style="opacity: 0"
|
||||
hx-swap-oob="true"
|
||||
>
|
||||
<div class="toast-header bg-success text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
|
||||
<strong class="mr-auto">Success</strong>
|
||||
|
||||
@@ -56,7 +56,7 @@ func CustomToastV2Show(title string, message string, typeToast string) templ.Com
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"toast fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" id=\"notification-001\" hx-swap-oob=\"true\" hx-get=\"/dev/hidetoast\" hx-trigger=\"load delay:3s\" hx-target=\"this\" style=\"border-radius: 8px 8px 8px 8px;\">")
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"toast toast-top-right fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" id=\"notification-001\" hx-swap-oob=\"true\" hx-get=\"/dev/hidetoast\" hx-trigger=\"load delay:3s\" hx-target=\"this\" style=\"border-radius: 8px 8px 8px 8px;\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user