Skip to content

[feat]:mobile sticky navigation provided to all the documentation pages #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dev-enforced wants to merge 7 commits into
base: second_dev
Choose a base branch
from
Open

[feat]:mobile sticky navigation provided to all the documentation pages #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c2952f1
[feat]:mobile sticky navigation provided to all the documentation pages
dev-enforced Jul 27, 2022
037e246
mobile responsiveness adjustments
dev-enforced Jul 27, 2022
042327d
links adjusted and align items adjusted
dev-enforced Jul 27, 2022
960d265
[fix]
dev-enforced Jul 27, 2022
efbff28
[fix]
dev-enforced Jul 27, 2022
3a11e5a
[fix]
dev-enforced Jul 28, 2022
3037907
modal visibility adjusted
dev-enforced Jul 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion components/doc-sidebar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,33 @@
border-bottom-color: var(--primary-color);
}

.toggle-list {
display: none;
}

@media screen and (max-width: 768px) {
.sidebar-hidden{
display: none;
}
.sidebar {
position: sticky;
top: 10px;
z-index: 5;
}
.sidebar-heading {
padding-top: 1rem;
}
.sidebar-components {
flex-flow: row wrap;
flex-direction: column;
align-items: start;
height: 200vh;
overflow-y: auto;
}
.rotation {
transform: rotate(180deg);
}
.toggle-list {
display: block;
transition: 0.4s;
}
}
4 changes: 3 additions & 1 deletion components/modals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@
align-items: center;
justify-content: center;
}

.demo-modal{
visibility: hidden;
}
.gentle-modal-container.active-modal {
display: flex;
}
Expand Down
10 changes: 8 additions & 2 deletions documentation/alerts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -237,6 +242,7 @@ <h5 class="mb-4">COMPONENT DEMO</h5>

</div>
<script src="scripts/alerts.js"></script>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
10 changes: 8 additions & 2 deletions documentation/avatars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -218,6 +223,7 @@ <h5 class="mb-4">COMPONENT DEMO</h5>
</div>
</div>
</div>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
10 changes: 8 additions & 2 deletions documentation/badges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -154,6 +159,7 @@ <h5 class="mb-4">COMPONENT DEMO</h5>
</div>
</div>
</div>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
10 changes: 8 additions & 2 deletions documentation/buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -354,6 +359,7 @@ <h5 class="mb-4">COMPONENT DEMO</h5>
</div>
</div>
</div>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
12 changes: 9 additions & 3 deletions documentation/cards.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -66,7 +71,7 @@ <h6><a class="link-none" href="inputs.html">INPUT</a></h6>
<h6><a class="link-none" href="lists.html">LISTS</a></h6>
</li>
<li class="p-2 my-2">
<h6><a href="modals.html" class="link-none"></a></h6>
<h6><a href="modals.html" class="link-none">MODALS</a></h6>
</li>
<li class="p-2 my-2">
<h6><a class="link-none" href="navigation.html">NAVIGATION</a></h6>
Expand Down Expand Up @@ -521,6 +526,7 @@ <h4 class="txt-bold card-details-title">Proteinated Milk</h4>
</div>
</div>
</div>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
10 changes: 8 additions & 2 deletions documentation/grids.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -333,6 +338,7 @@ <h4 class="txt-bold card-details-title">Proteinated Milk</h4>
</div>
</div>
</div>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
12 changes: 9 additions & 3 deletions documentation/images.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -65,7 +70,7 @@ <h6><a class="link-none" href="inputs.html">INPUT</a></h6>
<h6><a class="link-none" href="lists.html">LISTS</a></h6>
</li>
<li class="p-2 my-2">
<h6><a class="link-none" href="modals.html">NAVIGATION</a></h6>
<h6><a class="link-none" href="modals.html">MODALS</a></h6>
</li>
<li class="p-2 my-2">
<h6><a class="link-none" href="navigation.html">NAVIGATION</a></h6>
Expand Down Expand Up @@ -129,6 +134,7 @@ <h5 class="mb-4">COMPONENT DEMO</h5>
</div>
</div>
</div>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
10 changes: 8 additions & 2 deletions documentation/inputs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -226,6 +231,7 @@ <h5 class="mb-4">COMPONENT-DEMO</h5>
</div>
</div>
</div>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
10 changes: 8 additions & 2 deletions documentation/lists.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -328,6 +333,7 @@ <h5 class="mb-4">COMPONENT DEMO</h5>
</div>
</div>
</div>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
10 changes: 8 additions & 2 deletions documentation/modals.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -142,6 +147,7 @@ <h5 class="mb-4">COMPONENT DEMO</h5>
</div>
</div>
<script src="scripts/modals.js"></script>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
10 changes: 8 additions & 2 deletions documentation/navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -170,6 +175,7 @@ <h6 class="txt-highlight">BRAND</h6>
</div>
</div>
<script src="scripts/navigation.js"></script>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
10 changes: 8 additions & 2 deletions documentation/ratings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -126,6 +131,7 @@ <h5 class="my-4">COMPONENT DEMO</h5>
</div>
</div>
</div>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
6 changes: 6 additions & 0 deletions documentation/scripts/docSidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
});
10 changes: 8 additions & 2 deletions documentation/sliders.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,13 @@ <h5><a href="../index.html" class="link-none">Gentle UI</a></h5>
</ul>
</div>
<div class="sidebar p-6">
<h4 class="text-bold">COMPONENTS</h4>
<ul class="sidebar-components">
<h4 class="text-bold g-flex-row g-flex-space-between">
<span class="sidebar-heading">COMPONENTS</span>
<span class="toggle-list">
<i class="fas fa-chevron-up"></i>
</span>
</h4>
<ul class="sidebar-components sidebar-hidden">
<li class="p-2 my-2">
<h6><a class="link-none" href="alerts.html">ALERT</a></h6>
</li>
Expand Down Expand Up @@ -117,6 +122,7 @@ <h5 class="my-4">COMPONENT DEMO</h5>
</div>
</div>
</div>
<script src="scripts/docSidebar.js"></script>
</body>

</html>
Loading