Skip to content
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

Jump to bottom

Upgrade to vanilla-4.5.0 & implement new documentation layout #510

Merged
merged 11 commits into from
Jan 29, 2024
Merged

Upgrade to vanilla-4.5.0 & implement new documentation layout #510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6277a1d
Upgrade to vanilla-4.5.0 & implement new documentation layout
petesfrench Jan 15, 2024
22173d5
Update visuals for search results
petesfrench Jan 16, 2024
fd40e6d
Align footer with documentation layout
petesfrench Jan 17, 2024
5e56093
Remove excess padding from footer on docs pages & remove temp scss fo…
petesfrench Jan 18, 2024
99de208
Upgrade to vanilla-4.5.0 & implement new documentation layout
petesfrench Jan 15, 2024
6687bc3
Update visuals for search results
petesfrench Jan 16, 2024
93e5809
Align footer with documentation layout
petesfrench Jan 17, 2024
70decf6
Remove excess padding from footer on docs pages & remove temp scss fo…
petesfrench Jan 18, 2024
2789849
max-width
Lukewh Jan 22, 2024
32b7396
Merge branch 'update-documentation-layout' of github.com:canonical/ju…
petesfrench Jan 23, 2024
cfedde2
Remove max-width
petesfrench Jan 23, 2024
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
122 changes: 0 additions & 122 deletions static/sass/_patterns_docs.scss
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions static/sass/_settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,6 @@ $sidebar-width: 18rem;

// Configs
$table-layout-fixed: false;

// Update documentation sidebar width for deeper nesting
$l-documentation-sidebar-width: 18rem;
9 changes: 6 additions & 3 deletions static/sass/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
$color-accent-background: #f0f5f7;
$color-accent: #e95420;
$breakpoint-medium: 619px;
$breakpoint-navigation-threshold: 900px;

@import "vanilla-framework/scss/vanilla";

Expand All @@ -15,10 +14,8 @@ $breakpoint-navigation-threshold: 900px;
// import cookie policy
@import "@canonical/cookie-policy/build/css/cookie-policy";
@import "@canonical/discourse-rad-parser/build/css/discourse-rad-parser";
@import "patterns_docs";
@import "hljs";

@include juju-docs;
// Local patterns
@import "patterns_cards";

Expand Down Expand Up @@ -75,6 +72,12 @@ $breakpoint-navigation-threshold: 900px;
}
}

// TODO: to be removed when fixed in Vanilla
// https://github.com/canonical/vanilla-framework/issues/4947
body:not(.docs) .p-navigation__banner {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I opened an issue to address that on Vanilla side, please add a comment for reference:
canonical/vanilla-framework#4947

Suggested change
body:not(.docs) .p-navigation__banner {
// TODO: to be removed when fixed in Vanilla
// https://github.com/canonical/vanilla-framework/issues/4947
body:not(.docs) .p-navigation__banner {

padding-left: 0;
}

.u-hide--x-large {
@media only screen and (min-width: $grid-max-width) {
display: none;
Expand Down
8 changes: 5 additions & 3 deletions templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,13 @@
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K9KCMZ" height="0" width="0" style="display: none; visibility: hidden;"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

{% include "partials/_navigation.html" %}
{% block body %}
{% include "partials/_navigation.html" %}

{% block content %}{% endblock %}
{% block content %}{% endblock %}

{% include "footer.html" %}
{% include "footer.html" %}
{% endblock body %}

<div class="u-hide" id="contact-form-container" data-form-location="/get-in-touch" data-form-id="1337" data-lp-id="2313" data-return-url="http://juju.is/thank-you" data-lp-url=""></div>
<script src="{{ versioned_static('js/dynamic-contact-form.js') }}"></script>
Expand Down
2 changes: 1 addition & 1 deletion templates/careers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

<section class="p-strip--suru-topped is-shallow u-no-padding--bottom">
<div class="u-fixed-width">
<h1>We’re Hiring!</h1>
<h1>We're Hiring!</h1>
bartaz marked this conversation as resolved.
Show resolved Hide resolved
</div>
<div class="u-fixed-width">
<p>Help SREs and DevSecOps to move from config management heck to application management happiness by building Juju, the Charm SDK, and Charmhub.</p>
Expand Down
40 changes: 29 additions & 11 deletions templates/docs/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,34 @@
{% block title %}{% if document %}{{ document.title }}{% else %}Docs{% endif %}{% endblock %}
{% block meta_title %}{% if document %}{{ document.title }}{% else %}Docs{% endif %}{% endblock %}

{% block content %}
<section id="search-docs" class="p-strip--image is-shallow" style="background-image: url('https://assets.ubuntu.com/v1/e54487e2-maas-docs-suru.png')">
<div class="row">
<form class="p-search-box u-no-margin--bottom" action="/docs/search">
<input type="search" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search documentation" required/>
<button type="reset" class="p-search-box__reset" alt="reset"><i class="p-icon--close">Reset</i></button>
<button type="submit" class="p-search-box__button" alt="search"><i class="p-icon--search">Search</i></button>
</form>
</div>
</section>
{% block body %}

<div class="l-docs">
<div class="l-docs__header">
{% include "partials/_navigation.html" %}
<section id="search-docs" class="p-strip is-shallow is-bordered l-docs__subgrid">
<div class="l-docs__main">
<div class="row">
<form class="p-search-box u-no-margin--bottom" action="/docs/search">
<input type="search" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search documentation" required/>
<button type="button" class="p-search-box__reset" alt="reset" onclick="this.previousElementSibling.value = '';this.previousElementSibling.focus()"><i class="p-icon--close">Reset</i></button>
<button type="submit" class="p-search-box__button"><i class="p-icon--search">Search</i></button>
</form>
</div>
</div>
</section>
</div>
{% block content_docs %}{% endblock content_docs %}
<div class="l-docs__footer">
{% include "footer.html" %}
</div>
{% endblock %}
</div>

<script src="{{ versioned_static('js/prism.js') }}"></script>
<script src="{{ versioned_static('js/docs-side-nav.js') }}"></script>
<script src="{{ versioned_static('js/build/discourse-rad-parser/discourse-rad-parser.js')}}"></script>
<script>
drpNs.DiscourseRADParser();
</script>

{% endblock body %}
Loading