Skip to content

Commit

Permalink
New full-width layout for Design System website [WD-775] (#4621)
Browse files Browse the repository at this point in the history 
* Move POC code to SCSS and new example

* Some initial clean-up of POC code

* Add example with no sidebar, improve responsiveness

* Clean up layout SCSS

* Fix build issues with 100% max width

* WIP POC - reimagined version of layout containers

* WIP: clean up code for demo

* Move layout classes to strip component

* Properly scope appliaction layout styles

* POC Put layout inside strips, separate sidebar

* Fix linting

* Rename and fix some inconsistencies

* Rename layout file

* Revert "Properly scope appliaction layout styles"

This reverts commit 881ef38.

* Minor fixes

* Bump version and update docs

* Add shadow to sidebar

* Review fixes and styling updates

- fixes opening sidebar navigation on small screens
- removes renundant background from HTML
- fixes background and shadow styling
  • Loading branch information
@bartaz
bartaz committed Jan 25, 2023
1 parent 70ce54e commit 744a101
Show file tree
Hide file tree
Showing 7 changed files with 511 additions and 17 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"percy": "percy exec -- node snapshots.js",
"icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
},
"version": "3.10.1",
"version": "3.11.0",
"files": [
"_index.scss",
"/scss",
Expand Down
86 changes: 86 additions & 0 deletions scss/_layouts_full-width.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
@mixin vf-l-full-width {
$l-full-screen-aside-width: 15rem;

// we switch to full screen layout (with side navigation fixed to left side)
// when screen is big enough to fit side nav on left, same size on right, and grid
// in the middle
// we have to calculate media query breakpoint in px instead of rem to make sure
// we take into account bigger font size on large screens
$breakpoint-full-screen-layout: calc(($grid-max-width + 2 * $l-full-screen-aside-width) * $font-size-ratio--largescreen);
// TODO: make sure it works with grid-max-width set to 100% as in
// like: https://github.com/canonical/jaas-dashboard/blob/b9ca3876d054c48dc2da74df0080cd14a0f15740/src/scss/index.scss#L28

@media (min-width: $breakpoint-large) {
.l-full-width__sidebar {
background: $color-light;

// height of top navigation, as padding applied to .p-navigation__link + line-heigh of the anchor text inside
$navigation-top-height: $spv--large * 2 + map-get($line-heights, default-text);

height: calc(100% - $navigation-top-height); // height of document reduced by height of top nav
min-height: calc(100vh - $navigation-top-height);
position: absolute;
width: $l-full-screen-aside-width;
z-index: 1;

&::after {
background: linear-gradient(90deg, transparent, rgba($color-x-dark, 0.05));
bottom: 0;
content: '';
position: absolute;
right: 0;
top: 0;
width: 8px;
}

// side navigation component drawer needs background only when it's fixed on smaller screens
// keep it transparent when it's visible as part of full width layout
.p-side-navigation__drawer {
background: transparent;
}
}

.l-full-width {
display: grid;
grid-template-areas: 'start main end';
grid-template-columns: $l-full-screen-aside-width minmax(0, 1fr) min-content;
width: 100%;

// left side container
.l-start {
grid-area: start;
}

// main container
.l-main {
grid-area: main;

// grid should align to the left (no left margin)
// TODO: ideally this should be applied to %fixed-width-container
.row,
.u-fixed-width {
margin-left: 0;
}
}

// right side container
.l-end {
grid-area: end;
}
}
}

// full width layout
@media (min-width: $breakpoint-full-screen-layout) {
.l-full-width {
grid-template-columns: $l-full-screen-aside-width minmax(0, 1fr) $l-full-screen-aside-width;

.l-main {
.row,
.u-fixed-width {
margin-left: auto;
}
}
}
}
}
2 changes: 2 additions & 0 deletions scss/_vanilla.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@

// Layouts
@import 'layouts_application';
@import 'layouts_full-width';
@import 'layouts_site';
@import 'layouts_fluid-breakout';

Expand Down Expand Up @@ -137,6 +138,7 @@

// Layouts
@include vf-l-application;
@include vf-l-full-width;
@include vf-l-site;
@include vf-l-fluid-breakout;

Expand Down
227 changes: 227 additions & 0 deletions templates/docs/examples/layouts/full-width/default.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
{% extends "_layouts/examples.html" %}
{% block title %}Full width / Default{% endblock %}

{% block style %}
<style>
body {
margin: 0;
position: relative;
}
</style>
{% endblock %}

{% block content %}
<a href="#main-content" class="p-link--skip">Jump to main content</a>

<header id="navigation" class="p-navigation is-dark">
<div class="l-full-width">
<div class="l-start">
<div class="p-navigation__banner">
<div class="p-navigation__tagged-logo">
<a class="p-navigation__link" href="/docs/examples/layouts/full-width/no-sidebar">
<div class="p-navigation__logo-tag">
<img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/b36b0862-Vanilla_icon_RGB_2022.svg" alt="Vanilla framework">
</div>
<span class="p-navigation__logo-title">Vanilla</span>
</a>
</div>
<ul class="p-navigation__items">
<li class="p-navigation__item">
<button class="js-search-button p-navigation__link--search-toggle">
<span class="p-navigation__search-label">Search</span>
</button>
</li>
<li class="p-navigation__item">
<button class="js-menu-button p-navigation__link">Menu</button>
</li>
</ul>
</div>
</div>
<div class="l-main">
<div class="p-navigation__row u-fixed-width">
<nav class="p-navigation__nav" aria-label="Main">
<ul class="p-navigation__items">
<li class="p-navigation__item is-selected"><a class="p-navigation__link" href="/docs/examples/layouts/full-width/default">Docs</a></li>
<li class="p-navigation__item "><a class="p-navigation__link" href="/docs/examples/layouts/full-width/default">Examples</a></li>
<li class="p-navigation__item"><a class="p-navigation__link" href="/docs/examples/layouts/full-width/default">Accessibility</a></li>
<li class="p-navigation__item"><a class="p-navigation__link" href="/docs/examples/layouts/full-width/default">Browser support</a></li>
<li class="p-navigation__item"><a class="p-navigation__link" href="/docs/examples/layouts/full-width/default">Contribute</a></li>
</ul>
<ul class="p-navigation__items">
<li class="p-navigation__item">
<button class="js-search-button p-navigation__link--search-toggle">
<span class="p-navigation__search-label">Search</span>
</button>
</li>
</ul>
<div class="p-navigation__search">
<form class="p-search-box" action="/docs/search">
<input type="search" id="search-docs" class="p-search-box__input" name="q" placeholder="Search the docs" title="Search the documentation" autocomplete="on" aria-label="Search the docs" required />
<button type="reset" id="search-docs-reset" class="p-search-box__reset u-no-margin--right" name="close"><i class="p-icon--close">Clear input</i></button>
<button type="submit" class="p-search-box__button" name="submit"><i class="p-icon--search">Submit</i></button>
</form>
</div>
</nav>
</div>
</div>
<div class="l-end">
<nav class="p-navigation__nav p-navigation--right" style="width: auto">
<ul class="p-navigation__items" style="margin-left: auto">
<li class="p-navigation__item"><a class="p-navigation__link" href="/docs">Login</a></li>
</ul>
</nav>
</div>
</div>
<div class="p-navigation__search-overlay"></div>
</header>

<div class="l-full-width__sidebar">

<div class="p-side-navigation is-sticky" id="side-navigation-drawer" aria-label="Side">
<div class="u-hide--large p-strip--light is-shallow">
<div class="u-fixed-width">
<button class="p-button has-icon u-no-margin js-drawer-toggle"><i class="p-icon--menu"></i><span>Contents</span></button>
</div>
</div>

<div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="side-navigation-drawer"></div>

<nav class="p-side-navigation__drawer" aria-label="Example side">
<aside class="p-strip is-shallow">
<div class="p-side-navigation__drawer-header">
<a href="#" class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="drawer">
Toggle side navigation
</a>
</div>


<ul class="p-side-navigation__list">
<li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Welcome</span></li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="/docs" aria-current="page">
Get started

</a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="/docs/building-vanilla" >
Building with Vanilla

</a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="/docs/customising-vanilla" >
Customising Vanilla

</a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="/docs/whats-new" >
What’s new in 3.8.1

</a>
</li>
<li class="p-side-navigation__item">
<a class="p-side-navigation__link" href="/docs/migration-guide-to-v3" >
Migrating to v3.0

</a>
</li>
</ul>
</aside>
</nav>
</div>
</div>

<div class="p-strip--light is-shallow l-full-width">
<div class="l-main">
<div class="row">
<div class="col-6 col-medium-3"><h1 class="p-heading--2">Get started</h1></div>
<div class="col-6 col-medium-3"><p>You can use Vanilla in your projects in a few different ways. See <a href="/docs/building-vanilla">Building with Vanilla</a> and <a href="/docs/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p></div>
</div>
</div>
</div>

<hr>

<div class="p-strip is-shallow l-full-width">
<div class="l-main">
<div class="row">
<div class="col-6 col-medium-3"><h2>Install</h2></div>
<div class="col-6 col-medium-3">
<p>You can use Vanilla in your projects in a few different ways. See <a href="/docs/building-vanilla">Building with Vanilla</a> and <a href="/docs/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p>

<p>The recommended way to get Vanilla is with <a href="https://www.yarnpkg.com/">yarn</a>:</p>
<pre><code>yarn add vanilla-framework</code></pre>
<p>Or <a href="https://www.npmjs.com/">npm</a>:</p>
<pre><code>npm install vanilla-framework</code></pre>
<p>This will pull down the latest version into your local <code>node_modules</code> folder and save it into your project's dependencies in <code>package.json</code>.</p>

<p>You can now reference Vanilla from your main Sass file - note that the path to <code>node_modules</code> might be different for your project:</p>
<pre><code>// Import the framework
@import 'node_modules/vanilla-framework';

// Include all of Vanilla Framework
@include vanilla;</code></pre>

<p><em>For information on overriding settings and importing only parts of Vanilla, see <a href="/docs/customising-vanilla">Customising Vanilla</a>.</em></p>

</div>
</div>
</div>
</div>

<div class="l-full-width">
<div class="l-main">
<div class="u-fixed-width">
<hr>
</div>
</div>
</div>

<div class="p-strip is-shallow l-full-width">
<div class="l-main">
<div class="row">
<div class="col-6 col-medium-3"><h2>Hotlink</h2></div>
<div class="col-6 col-medium-3">
<p>You can add Vanilla directly to your markup:</p>
<pre><code>&lt;link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-3.8.1.min.css" /&gt;</code></pre>
</div>
</div>
</div>
</div>

<div class="p-strip--light is-shallow l-full-width">
<div class="l-main">
<div class="row">
<div class="col-6 col-medium-3"><h2>Download</h2></div>
<div class="col-6 col-medium-3">
<p>Download the latest version of Vanilla from GitHub.</p>
<p><a class="p-button--positive" href="https://github.com/canonical/vanilla-framework/archive/v3.8.1.zip">Download v3.8.1</a></p>
<p>See the <a href="https://github.com/canonical/vanilla-framework/releases">release notes</a> for details on the latest updates.</p>
</div>
</div>
</div>
</div>

<div class="p-strip is-shallow l-full-width">
<div class="l-main">
<div class="row">
<div class="col-6 col-medium-3"><h2>Local development</h2></div>
<div class="col-6 col-medium-3">
<p>To make improvements to Vanilla itself, please follow the instructions on the project’s <a href="https://github.com/canonical/vanilla-framework#vanilla-framework">README.md</a>.</p>
<ul class="p-inline-list">
<li class="p-inline-list__item"><i class="p-list__icon--slack"></i><a href="https://vanillaframework.slack.com/">Join our channel</a></li>
<li class="p-inline-list__item"><i class="p-list__icon--twitter"></i><a href="https://twitter.com/vanillaframewrk">Tweet us</a></li>
<li class="p-inline-list__item"><i class="p-list__icon--github"></i><a href="https://github.com/canonical/vanilla-framework/issues/new">Fork us on GitHub</a></li>
</ul>
</div>
</div>
</div>
</div>

<script>
{% include "docs/examples/patterns/side-navigation/_toggle_script.js" %}
</script>
{% endblock %}

0 comments on commit 744a101

Please sign in to comment.