Skip to content

Commit

Permalink
change homepage tab buttons to be positioned at the bottom
Browse files Browse the repository at this point in the history
  • Loading branch information
@chillkang
chillkang committed Oct 4, 2023
1 parent 452ad4c commit 91eb6d9
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 78 deletions.
9 changes: 9 additions & 0 deletions static/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,15 @@ $breakpoint-navigation-threshold: $breakpoint-large;
}
}

.homepage-tabs-content {
display: flex;
flex-direction: column;
height: 100%;
}

.tabs-content-wrapper {
flex: 1;
}

.p-icon--github-white {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9Ijk5OSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNTEyIDBDMjI5LjI1IDAgMCAyMjkuMjUgMCA1MTJjMCAyMjYuMjUgMTQ2LjY5IDQxOC4xMiAzNTAuMTYgNDg1LjgxIDI1LjU5IDQuNjkgMzQuOTMtMTEuMTIgMzQuOTMtMjQuNjIgMC0xMi4xOS0uNDctNTIuNTctLjcxLTk1LjMxQzI0MiA5MDguODEgMjExLjkxIDgxNy41IDIxMS45MSA4MTcuNWMtMjMuMzItNTkuMTItNTYuODUtNzQuODgtNTYuODUtNzQuODgtNDYuNTMtMzEuNzQgMy41My0zMS4xMiAzLjUzLTMxLjEyIDUxLjQxIDMuNTYgNzguNDcgNTIuNzUgNzguNDcgNTIuNzUgNDUuNjkgNzguMjUgMTE5Ljg4IDU1LjYzIDE0OSA0Mi41IDQuNjYtMzMgMTcuOTEtNTUuNjMgMzIuNS02OC4zNy0xMTMuNjUtMTIuOTQtMjMzLjIyLTU2Ljg4LTIzMy4yMi0yNTMuMDcgMC01NS45NCAxOS45Ny0xMDEuNTYgNTIuNjYtMTM3LjQtNS4yMi0xMy0yMi44NC02NS4xIDUuMDYtMTM1LjU3IDAgMCA0Mi45NC0xMy43NSAxNDAuODEgNTIuNSA0MC44Mi0xMS40IDg0LjYtMTcuMDMgMTI4LjEzLTE3LjIyIDQzLjUuMTkgODcuMzEgNS44OCAxMjguMTkgMTcuMjkgOTcuNjktNjYuMzIgMTQwLjY5LTUyLjUgMTQwLjY5LTUyLjUgMjggNzAuNTMgMTAuMzcgMTIyLjU2IDUuMTIgMTM1LjUgMzIuODEgMzUuODQgNTIuNjIgODEuNDcgNTIuNjIgMTM3LjQgMCAxOTYuNjktMTE5Ljc0IDI0MC0yMzMuODEgMjUyLjY5IDE4LjQ0IDE1Ljg4IDM0Ljc1IDQ3IDM0Ljc1IDk0Ljc1IDAgNjguNDQtLjY4IDEyMy42My0uNjggMTQwLjUgMCAxMy42MyA5LjMxIDI5LjU1IDM1LjI0IDI0LjU2Qzg3Ny40NCA5MzAgMTAyNCA3MzguMTIgMTAyNCA1MTIgMTAyNCAyMjkuMjUgNzk0Ljc1IDAgNTEyIDB6Ii8+PC9zdmc+Cg==");
Expand Down
157 changes: 79 additions & 78 deletions templates/jaasai/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,82 +251,84 @@ <h2>Add visibility, auditing and compliance controls to your Juju deployment</h2
</div>
</div>
<div class="col-8 homepage-tabs-content">
<div class="row" id="view-models-and-controllers-details">
{{ image(
<div class="tabs-content-wrapper">
<div class="row" id="view-models-and-controllers-details">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Drill down to view the details of everything that is deployed inside a model, such as applications, integrations, units, and more.</p>
</div>
<div class="row u-hide" id="run-actions">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Drill down to view the details of everything that is deployed inside a model, such as applications, integrations, units, and more.</p>
}}
<p>Execute Juju action from the UI and view the resulting logs to confirm their status.</p>
</div>
<div class="row u-hide" id="configure-applications">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Perform common administrative operations and apply machine configurations.</p>
</div>
<div class="row u-hide" id="onboard-controllers-and-manage-access">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Onboard controllers and add, remove or manage user access to models and controllers.</p>
</div>
<div class="row u-hide" id="run-audits-and-reports">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Access the logs from your deployment in a single, centralised location.</p>
</div>
<div class="row u-hide" id="search-and-filter">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Perform complex searches/filters through your entire deployment and share the result through a unique URL.</p>
</div>
</div>
<div class="homepage-tabs-button u-align--right">
<button class="p-button has-icon" disabled data-js="previous-tab-button">&lsaquo; Previous</button>
<button class="p-button has-icon" data-js="next-tab-button">Next &rsaquo;</button>
</div>
<div class="row u-hide" id="run-actions">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Execute Juju action from the UI and view the resulting logs to confirm their status.</p>
</div>
<div class="row u-hide" id="configure-applications">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Perform common administrative operations and apply machine configurations.</p>
</div>
<div class="row u-hide" id="onboard-controllers-and-manage-access">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Onboard controllers and add, remove or manage user access to models and controllers.</p>
</div>
<div class="row u-hide" id="run-audits-and-reports">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Access the logs from your deployment in a single, centralised location.</p>
</div>
<div class="row u-hide" id="search-and-filter">
{{ image(
url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
alt="",
height="588",
width="1031",
hi_def=True,
loading="auto",
) | safe
}}
<p>Perform complex searches/filters through your entire deployment and share the result through a unique URL.</p>
</div>
</div>
</div>
</section>
Expand Down Expand Up @@ -534,7 +536,7 @@ <h3 class="p-heading--5">Contact us</h3>
});
});

const tabs = document.querySelectorAll('.homepage-tabs-content > .row:not(.homepage-tabs-button)');
const tabs = document.querySelectorAll('.homepage-tabs-content .tabs-content-wrapper > .row');
const navItems = document.querySelectorAll('.p-side-navigation__item');
const images = [
'https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg',
Expand All @@ -550,24 +552,24 @@ <h3 class="p-heading--5">Contact us</h3>
}

function handlePrevious() {
if (currentTab > 0) {
currentTab--;
showTab(currentTab);
if (currentTab > 0) {
currentTab--;
showTab(currentTab);

const targetPanelLink = document.querySelector(`[data-js='panel-link'][href='#${tabs[currentTab].id}']`);
activatePanel(targetPanelLink);
}
const targetPanelLink = document.querySelector(`[data-js='panel-link'][href='#${tabs[currentTab].id}']`);
activatePanel(targetPanelLink);
}
}

function handleNext() {
if (currentTab < tabs.length - 1) {
currentTab++;
showTab(currentTab);
if (currentTab < tabs.length - 1) {
currentTab++;
showTab(currentTab);

const targetPanelLink = document.querySelector(`[data-js='panel-link'][href='#${tabs[currentTab].id}']`);
activatePanel(targetPanelLink);
}
const targetPanelLink = document.querySelector(`[data-js='panel-link'][href='#${tabs[currentTab].id}']`);
activatePanel(targetPanelLink);
}
}

function updateNavigation(index) {
navItems.forEach(item => item.classList.remove('is-active'));
Expand All @@ -586,6 +588,5 @@ <h3 class="p-heading--5">Contact us</h3>

prevBtn.addEventListener('click', handlePrevious);
nextBtn.addEventListener('click', handleNext);

</script>
{% endblock content %}

0 comments on commit 91eb6d9

Please sign in to comment.