From 0e71358c7878601cffc24e91c36a59ff98447349 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Wed, 13 Sep 2023 18:14:11 +0530 Subject: [PATCH] Toast improve --- src/html/components/_scripts.astro | 19 - src/html/components/dashboard/_sidenav.astro | 4 +- src/html/pages/UI/general.astro | 2173 ++++++++++++------ src/scss/_toasts.scss | 30 +- 4 files changed, 1422 insertions(+), 804 deletions(-) diff --git a/src/html/components/_scripts.astro b/src/html/components/_scripts.astro index 4dd4a791e..2da79617c 100644 --- a/src/html/components/_scripts.astro +++ b/src/html/components/_scripts.astro @@ -52,22 +52,3 @@ const adminlteJsUrl = path + "/js/adminlte.js"; }); - - - - - - diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 775ba71f4..16f79fefe 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -219,10 +219,10 @@ const htmlPath = convertPathToHtml(path);
  • -

    General Elements

    +

    General
  • diff --git a/src/html/pages/UI/general.astro b/src/html/pages/UI/general.astro index 55fc89f67..ffcbfd068 100644 --- a/src/html/pages/UI/general.astro +++ b/src/html/pages/UI/general.astro @@ -8,791 +8,1444 @@ import Scripts from "../../components/_scripts.astro"; const title = "AdminLTE 4 | General UI Elements"; const path = "../../../dist"; const mainPage = "ui-elements"; -const page = "bsgeneral"; +const page = "general"; const pageTitle = "General UI Elements"; --- - + - - - - - - - - -
    - - - -
    - -
    - -
    - -
    -
    -

    {pageTitle}

    -
    -
    -
      -
    1. Home
      2. -
    2. - {pageTitle} -
      3. -
    + + + + + + + + +
    + + + +
    + +
    + +
    + +
    +
    +

    {pageTitle}

    +
    +
    +
      +
    1. Home
      2. +
    2. + {pageTitle} +
      3. +
    +
    +
    +
    +
    - -
    - -
    - - -
    - -
    - -
    - -
    -
    - For detailed documentation of Components visit - Bootstrap Components - -
    -
    - - -
    - -
    - -
    -
    Accordion
    -
    - - -
    -
    -
    -

    - -

    -
    -
    - This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
    -
    -
    -
    -

    - -

    -
    -
    - This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
    -
    -
    -
    -

    - -

    -
    -
    - This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
    -
    -
    -
    -
    - -
    - - -
    - -
    -
    Alert
    -
    - - -
    - - - - - - - - -
    - -
    - - -
    - -
    -
    Badge
    -
    - - -
    -

    Example heading New

    -

    Example heading New

    -

    Example heading New

    -

    Example heading New

    -
    Example heading New
    -
    Example heading New
    -
    - -
    - -
    - -
    - Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
    - Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
    - -
    - - -
    - -
    -
    Button
    -
    - - -
    - - - - - - - - - -
    - - - - - - -
    - - - - - - - - -
    - - - -
    - -
    - -
    - - -
    - -
    - -
    -
    Button Group
    -
    - - -
    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    -
    - - - - - - - - -
    -
    - - - - - - - - -
    -
    -
    - - -
    - - -
    -
    -
    - -
    - - -
    - -
    -
    Collapse
    -
    - - -
    -

    -

    + Bootstrap Components - -

    -
    -
    - Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. +
    +
    + + +
    + +
    + +
    +
    Accordion
    + + +
    +
    +
    +

    + +

    +
    +
    + This is the first item's accordion body. It is shown by default, until the collapse plugin + adds the appropriate classes that we use to style + each element. These classes control the overall + appearance, as well as the showing and hiding via + CSS transitions. You can modify any of this with + custom CSS or overriding our default variables. It's + also worth noting that just about any HTML can go + within the .accordion-body, though the + transition does limit overflow. +
    +
    +
    +
    +

    + +

    +
    +
    + This is the second item's accordion body. It is hidden by default, until the collapse plugin + adds the appropriate classes that we use to style + each element. These classes control the overall + appearance, as well as the showing and hiding via + CSS transitions. You can modify any of this with + custom CSS or overriding our default variables. It's + also worth noting that just about any HTML can go + within the .accordion-body, though the + transition does limit overflow. +
    +
    +
    +
    +

    + +

    +
    +
    + This is the third item's accordion body. It is hidden by default, until the collapse plugin + adds the appropriate classes that we use to style + each element. These classes control the overall + appearance, as well as the showing and hiding via + CSS transitions. You can modify any of this with + custom CSS or overriding our default variables. It's + also worth noting that just about any HTML can go + within the .accordion-body, though the + transition does limit overflow. +
    +
    +
    +
    +
    +
    -
    - -
    - - -
    - -
    -
    Dropdowns
    -
    - - -
    -
    - - + + +
    + +
    +
    Alert
    +
    + + +
    + + + + + + + + +
    +
    -
    - - -
    -
    -
    - - - -
    -
    - - - -
    -
    - -
    - - -
    - -
    -
    List Group
    -
    - - -
    -
    - - The current link item - - A second link item - A third link item - A fourth link item - A disabled link item -
    -
    - -
    - - -
    - -
    -
    Navbar
    -
    - - -
    -
    + + +
    + +
    + +
    +
    Button Group
    +
    + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    + + + + + + + + +
    +
    + + + + + + + + +
    +
    +
    + + +
    + + +
    +
    +
    + +
    + + +
    + +
    +
    Collapse
    +
    + + +
    +

    + + +

    +
    +
    + Some placeholder content for the collapse component. + This panel is hidden by default but revealed when the + user activates the relevant trigger. +
    +
    +
    + +
    + + +
    + +
    +
    Dropdowns
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + + + +
    +
    + + + -
    - -
    - -
    - - -
    - -
    -
    Pagination
    -
    - - -
    - -
    - -
    - -
    - -
    - - -
    - -
    -
    Placeholder
    -
    - - -
    - + + +
    + +
    +
    List Group
    +
    + +
    -
    - -
    -

    - - - - - +

    + + The current link item + + A second link item + A third link item + A fourth link item + A disabled link item +
    +
    + +
    + + +
    + +
    +
    Navbar
    +
    + + +
    + +
    + +
    + + +
    + +
    +
    Pagination
    +
    + + +
    + +
    + +
    + +
    + +
    + + +
    + +
    +
    Placeholder
    +
    + + +
    + +
    + +
    + + +
    + +
    +
    Progress
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + +
    + +
    +
    Toast
    +
    + + +
    + +
    + + + + + + + + +
    + + + + + + + + + +
    +
    + +
    + + +
    + +
    +
    Tooltip
    +
    + + +
    +

    + Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. + Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips + would look when used in real-world situations. So + hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

    +
    + + +
    + +
    +
    Spinner
    +
    + + +
    + + + + + + + + +
    + +
    +
    - +
    - - -
    - -
    -
    Progress
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - - -
    - -
    -
    Toast
    -
    - - -
    - -
    - - - - - - - - -
    - - - - - - - - - -
    -
    - -
    - - -
    - -
    -
    Tooltip
    -
    - - -
    -

    Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

    -
    - -
    - - -
    - -
    -
    Spinner
    -
    - - -
    - - - - - - - - -
    - -
    - +
    - +
    - -
    - + +
    + +
    - - - -