From c2952f1761324713b96853f7c05ecd157f9b5154 Mon Sep 17 00:00:00 2001 From: Roshan J Date: Thu, 28 Jul 2022 02:24:08 +0530 Subject: [PATCH 1/7] [feat]:mobile sticky navigation provided to all the documentation pages --- components/doc-sidebar.css | 25 ++++++++++++++++++++++++- documentation/alerts.html | 8 +++++++- documentation/avatars.html | 8 +++++++- documentation/badges.html | 8 +++++++- documentation/buttons.html | 8 +++++++- documentation/cards.html | 8 +++++++- documentation/grids.html | 8 +++++++- documentation/images.html | 8 +++++++- documentation/inputs.html | 8 +++++++- documentation/lists.html | 8 +++++++- documentation/modals.html | 8 +++++++- documentation/navigation.html | 8 +++++++- documentation/ratings.html | 8 +++++++- documentation/scripts/docSidebar.js | 6 ++++++ documentation/sliders.html | 8 +++++++- documentation/text-utilities.html | 8 +++++++- documentation/toasts.html | 11 ++++++++--- 17 files changed, 136 insertions(+), 18 deletions(-) create mode 100644 documentation/scripts/docSidebar.js diff --git a/components/doc-sidebar.css b/components/doc-sidebar.css index acb50bc..b93ac8a 100644 --- a/components/doc-sidebar.css +++ b/components/doc-sidebar.css @@ -15,8 +15,31 @@ border-bottom-color: var(--primary-color); } +.sidebar-hidden, +.toggle-list { + display: none; +} + @media screen and (max-width: 768px) { + .sidebar { + position: sticky; + top: 0; + z-index: 5; + } + .sidebar h4 { + padding-top: 1rem; + } .sidebar-components { - flex-flow: row wrap; + flex-flow: column; + height: 90vh; + width: 100%; + overflow-y: auto; + } + .rotation { + transform: rotate(180deg); + } + .toggle-list { + display: block; + transition: 0.4s; } } diff --git a/documentation/alerts.html b/documentation/alerts.html index 1b7e203..ed77296 100644 --- a/documentation/alerts.html +++ b/documentation/alerts.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/avatars.html b/documentation/avatars.html index 769ce02..74fb61f 100644 --- a/documentation/avatars.html +++ b/documentation/avatars.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/badges.html b/documentation/badges.html index 02cbd08..d0e27fd 100644 --- a/documentation/badges.html +++ b/documentation/badges.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/buttons.html b/documentation/buttons.html index 9b6ee8f..631859b 100644 --- a/documentation/buttons.html +++ b/documentation/buttons.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/cards.html b/documentation/cards.html index 8257ed6..2fd9f21 100644 --- a/documentation/cards.html +++ b/documentation/cards.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/grids.html b/documentation/grids.html index 44caf4a..3680026 100644 --- a/documentation/grids.html +++ b/documentation/grids.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/images.html b/documentation/images.html index 0adaa39..39e7dff 100644 --- a/documentation/images.html +++ b/documentation/images.html @@ -35,7 +35,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/inputs.html b/documentation/inputs.html index f67f4de..d49a9c3 100644 --- a/documentation/inputs.html +++ b/documentation/inputs.html @@ -35,7 +35,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/lists.html b/documentation/lists.html index cadfdc3..6deeff4 100644 --- a/documentation/lists.html +++ b/documentation/lists.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/modals.html b/documentation/modals.html index 8270c5a..953b266 100644 --- a/documentation/modals.html +++ b/documentation/modals.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/navigation.html b/documentation/navigation.html index 8b03774..8b84475 100644 --- a/documentation/navigation.html +++ b/documentation/navigation.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/ratings.html b/documentation/ratings.html index 3c35f2c..d7d4377 100644 --- a/documentation/ratings.html +++ b/documentation/ratings.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/scripts/docSidebar.js b/documentation/scripts/docSidebar.js new file mode 100644 index 0000000..73f1112 --- /dev/null +++ b/documentation/scripts/docSidebar.js @@ -0,0 +1,6 @@ +const toggleHeading = document.querySelector(".toggle-list"); +const sidebarList = document.querySelector(".sidebar-components"); +toggleHeading.addEventListener("click", () => { + sidebarList.classList.toggle("sidebar-hidden"); + toggleHeading.classList.toggle("rotation"); +}); diff --git a/documentation/sliders.html b/documentation/sliders.html index c0b272e..e42432e 100644 --- a/documentation/sliders.html +++ b/documentation/sliders.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/text-utilities.html b/documentation/text-utilities.html index c4b4938..9717127 100644 --- a/documentation/text-utilities.html +++ b/documentation/text-utilities.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

+ \ No newline at end of file diff --git a/documentation/toasts.html b/documentation/toasts.html index 0b7805b..a7c5cbb 100644 --- a/documentation/toasts.html +++ b/documentation/toasts.html @@ -36,7 +36,12 @@
Gentle UI
-

COMPONENTS

+

+ COMPONENTS + + + +

- + + \ No newline at end of file From 037e246b696cbd092d28e8ab94ea328237b94cf7 Mon Sep 17 00:00:00 2001 From: Roshan J Date: Thu, 28 Jul 2022 03:05:55 +0530 Subject: [PATCH 2/7] mobile responsiveness adjustments --- components/doc-sidebar.css | 8 +++----- documentation/alerts.html | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/components/doc-sidebar.css b/components/doc-sidebar.css index b93ac8a..c77b793 100644 --- a/components/doc-sidebar.css +++ b/components/doc-sidebar.css @@ -26,14 +26,12 @@ top: 0; z-index: 5; } - .sidebar h4 { + .sidebar-heading { padding-top: 1rem; } .sidebar-components { - flex-flow: column; - height: 90vh; - width: 100%; - overflow-y: auto; + flex-direction: column; + justify-content: start; } .rotation { transform: rotate(180deg); diff --git a/documentation/alerts.html b/documentation/alerts.html index ed77296..8b7326a 100644 --- a/documentation/alerts.html +++ b/documentation/alerts.html @@ -37,7 +37,7 @@
Gentle UI

- COMPONENTS + COMPONENTS From 042327d1ffa7c3120b63fa7620d03977ec93c6e4 Mon Sep 17 00:00:00 2001 From: Roshan J Date: Thu, 28 Jul 2022 03:46:18 +0530 Subject: [PATCH 3/7] links adjusted and align items adjusted --- components/doc-sidebar.css | 2 +- documentation/cards.html | 2 +- documentation/images.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/doc-sidebar.css b/components/doc-sidebar.css index c77b793..0651470 100644 --- a/components/doc-sidebar.css +++ b/components/doc-sidebar.css @@ -31,7 +31,7 @@ } .sidebar-components { flex-direction: column; - justify-content: start; + align-items: start; } .rotation { transform: rotate(180deg); diff --git a/documentation/cards.html b/documentation/cards.html index 2fd9f21..7b6f6e4 100644 --- a/documentation/cards.html +++ b/documentation/cards.html @@ -71,7 +71,7 @@
INPUT
LISTS
  • -
    +
    MODALS
  • NAVIGATION
    diff --git a/documentation/images.html b/documentation/images.html index 39e7dff..1f1981f 100644 --- a/documentation/images.html +++ b/documentation/images.html @@ -70,7 +70,7 @@
    INPUT
    LISTS
  • -
    NAVIGATION
    +
    MODALS
  • NAVIGATION
    From 960d2654ecef7c04f8ace492af0f13eb0ff172db Mon Sep 17 00:00:00 2001 From: Roshan J Date: Thu, 28 Jul 2022 05:05:41 +0530 Subject: [PATCH 4/7] [fix] --- components/doc-sidebar.css | 4 +++- documentation/alerts.html | 2 +- documentation/avatars.html | 4 ++-- documentation/badges.html | 4 ++-- documentation/buttons.html | 4 ++-- documentation/cards.html | 4 ++-- documentation/grids.html | 4 ++-- documentation/images.html | 4 ++-- documentation/inputs.html | 4 ++-- documentation/lists.html | 4 ++-- documentation/modals.html | 4 ++-- documentation/navigation.html | 4 ++-- documentation/ratings.html | 4 ++-- documentation/sliders.html | 4 ++-- documentation/text-utilities.html | 4 ++-- documentation/toasts.html | 4 ++-- 16 files changed, 32 insertions(+), 30 deletions(-) diff --git a/components/doc-sidebar.css b/components/doc-sidebar.css index 0651470..2cee972 100644 --- a/components/doc-sidebar.css +++ b/components/doc-sidebar.css @@ -15,12 +15,14 @@ border-bottom-color: var(--primary-color); } -.sidebar-hidden, .toggle-list { display: none; } @media screen and (max-width: 768px) { + .sidebar-hidden{ + display: none; + } .sidebar { position: sticky; top: 0; diff --git a/documentation/alerts.html b/documentation/alerts.html index 8b7326a..21309e7 100644 --- a/documentation/alerts.html +++ b/documentation/alerts.html @@ -42,7 +42,7 @@

    -
      +
      • ALERT
        • diff --git a/documentation/avatars.html b/documentation/avatars.html index 74fb61f..dcd9570 100644 --- a/documentation/avatars.html +++ b/documentation/avatars.html @@ -37,12 +37,12 @@
        Gentle UI

    • - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/badges.html b/documentation/badges.html index d0e27fd..efdb2ed 100644 --- a/documentation/badges.html +++ b/documentation/badges.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/buttons.html b/documentation/buttons.html index 631859b..386f92e 100644 --- a/documentation/buttons.html +++ b/documentation/buttons.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/cards.html b/documentation/cards.html index 7b6f6e4..7fd75e0 100644 --- a/documentation/cards.html +++ b/documentation/cards.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/grids.html b/documentation/grids.html index 3680026..483e913 100644 --- a/documentation/grids.html +++ b/documentation/grids.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/images.html b/documentation/images.html index 1f1981f..10d3eb2 100644 --- a/documentation/images.html +++ b/documentation/images.html @@ -36,12 +36,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/inputs.html b/documentation/inputs.html index d49a9c3..44b01d3 100644 --- a/documentation/inputs.html +++ b/documentation/inputs.html @@ -36,12 +36,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/lists.html b/documentation/lists.html index 6deeff4..44b6308 100644 --- a/documentation/lists.html +++ b/documentation/lists.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/modals.html b/documentation/modals.html index 953b266..14cb51c 100644 --- a/documentation/modals.html +++ b/documentation/modals.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/navigation.html b/documentation/navigation.html index 8b84475..163bdc3 100644 --- a/documentation/navigation.html +++ b/documentation/navigation.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/ratings.html b/documentation/ratings.html index d7d4377..8e68659 100644 --- a/documentation/ratings.html +++ b/documentation/ratings.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/sliders.html b/documentation/sliders.html index e42432e..c741b92 100644 --- a/documentation/sliders.html +++ b/documentation/sliders.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/text-utilities.html b/documentation/text-utilities.html index 9717127..f857a15 100644 --- a/documentation/text-utilities.html +++ b/documentation/text-utilities.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • diff --git a/documentation/toasts.html b/documentation/toasts.html index a7c5cbb..9436655 100644 --- a/documentation/toasts.html +++ b/documentation/toasts.html @@ -37,12 +37,12 @@
        Gentle UI

    - COMPONENTS + COMPONENTS

    -
      +
      • ALERT
        • From efbff281297395c2f8fc52d1671f3f083025230f Mon Sep 17 00:00:00 2001 From: Roshan J Date: Thu, 28 Jul 2022 05:26:20 +0530 Subject: [PATCH 5/7] [fix] --- components/doc-sidebar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/doc-sidebar.css b/components/doc-sidebar.css index 2cee972..e1a98df 100644 --- a/components/doc-sidebar.css +++ b/components/doc-sidebar.css @@ -25,7 +25,7 @@ } .sidebar { position: sticky; - top: 0; + top: 10px; z-index: 5; } .sidebar-heading { From 3a11e5ad20bf7fbca0af5355e8778abc3a060ce3 Mon Sep 17 00:00:00 2001 From: Roshan J Date: Thu, 28 Jul 2022 05:51:59 +0530 Subject: [PATCH 6/7] [fix] --- components/doc-sidebar.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/doc-sidebar.css b/components/doc-sidebar.css index e1a98df..2a91e9d 100644 --- a/components/doc-sidebar.css +++ b/components/doc-sidebar.css @@ -34,6 +34,8 @@ .sidebar-components { flex-direction: column; align-items: start; + height: 200vh; + overflow-y: auto; } .rotation { transform: rotate(180deg); From 30379071d122bc588be0f0729f5835b34a197324 Mon Sep 17 00:00:00 2001 From: Roshan J Date: Thu, 28 Jul 2022 06:14:45 +0530 Subject: [PATCH 7/7] modal visibility adjusted --- components/modals.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/modals.css b/components/modals.css index 8e5b72d..06a7fbd 100644 --- a/components/modals.css +++ b/components/modals.css @@ -11,7 +11,9 @@ align-items: center; justify-content: center; } - +.demo-modal{ + visibility: hidden; +} .gentle-modal-container.active-modal { display: flex; }