From b900de5d682928f086fe1b9fbea073d8ff912b73 Mon Sep 17 00:00:00 2001 From: Pete Date: Tue, 16 Jan 2024 17:24:16 +0100 Subject: [PATCH 1/3] Implement new documentation layout --- package.json | 2 +- static/sass/_settings.scss | 2 + static/sass/styles.scss | 15 ++++ templates/base_layout.html | 4 +- templates/docs/document.html | 91 ++++++++++++++++------ templates/docs/search.html | 116 ++++++++++++++--------------- templates/partial/_footer.html | 40 +++++++++- templates/partial/_navigation.html | 87 ++++++++++++++-------- yarn.lock | 8 +- 9 files changed, 242 insertions(+), 123 deletions(-) diff --git a/package.json b/package.json index 44316a82..885464e4 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "postcss": "8.4.20", "postcss-cli": "10.1.0", "sass": "1.57.1", - "vanilla-framework": "3.15.1", + "vanilla-framework": "4.5.1", "webpack-cli": "4.10.0" }, "devDependencies": { diff --git a/static/sass/_settings.scss b/static/sass/_settings.scss index c3f7583d..6bbdd711 100644 --- a/static/sass/_settings.scss +++ b/static/sass/_settings.scss @@ -5,3 +5,5 @@ $breakpoint-navigation-threshold: 940px; // Sidebar $content-padding: 0 5%; $sidebar-width: 18rem; + +$l-documentation-sidebar-width: 18rem; \ No newline at end of file diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 31592944..cb704c2c 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -17,3 +17,18 @@ margin-bottom: 0 !important; } } + +// TODO: to be removed when properly fixed on Vanilla side +// https://github.com/canonical/vanilla-framework/issues/4898 +@media screen and (min-width: $breakpoint-navigation-threshold) { + // align navigation items with grid in docs layout + .l-docs__subgrid .p-navigation__row { + padding-left: 0.5rem; + } +} + +body:not(.docs) { + .p-navigation__banner { + padding-left: 0; + } +} \ No newline at end of file diff --git a/templates/base_layout.html b/templates/base_layout.html index 278c3551..9cfb8bda 100644 --- a/templates/base_layout.html +++ b/templates/base_layout.html @@ -58,11 +58,12 @@ - + + {% block body%} {% include "partial/_navigation.html" %}
@@ -70,6 +71,7 @@
{% include "partial/_footer.html" %} + {% endblock body %} -{% endblock %} +{% endblock body %} diff --git a/templates/docs/search.html b/templates/docs/search.html index 8e7e1119..89f65a14 100644 --- a/templates/docs/search.html +++ b/templates/docs/search.html @@ -1,8 +1,8 @@ {% extends "base_layout.html" %} {% block meta %} - {{ super() }} - + {{ super() }} + {% endblock %} {% block page_class %}docs{% endblock %} @@ -20,73 +20,71 @@ -
-
-
-
- {% if results and results.entries %} -

We've found these results for your search "{{ query }}"

- {% else %} -

We haven't found any results for your search "{{ query }}".

- {% endif %} -
+
+
+
+ {% if results and results.entries %} +

We've found these results for your search "{{ query }}"

+ {% else %} +

We haven't found any results for your search "{{ query }}".

+ {% endif %}
+
- {% if results and results.entries %} - {% for item in results.entries %} -
-
-
-
{{ item.htmlTitle | safe}}
-

- {{ item.htmlSnippet | safe }} -

- {{ item.htmlFormattedUrl | safe }} -
+ {% if results and results.entries %} + {% for item in results.entries %} +
+
+
+
{{ item.htmlTitle | safe}}
+

+ {{ item.htmlSnippet | safe }} +

+ {{ item.htmlFormattedUrl | safe }}
- {% endfor %} -
- {% if results.queries and results.queries.previousPage %} - - Previous - - {% endif %} - {% if results.queries and results.queries.nextPage %} +
+ {% endfor %} +
+ {% if results.queries and results.queries.previousPage %} - Next + Previous - {% endif %} -
- {% else %} -
-
-
-

Why not try widening your search?

-

You can do this by:

-
    -
  • Adding alternative words or phrases
    • -
  • Using individual words instead of phrases
    • -
  • Trying a different spelling
    • -
-
-
-

Still no luck?

- -
+ {% endif %} + {% if results.queries and results.queries.nextPage %} + + Next + + {% endif %} +
+ {% else %} +
+
+
+

Why not try widening your search?

+

You can do this by:

+
    +
  • Adding alternative words or phrases
    • +
  • Using individual words instead of phrases
    • +
  • Trying a different spelling
    • +
+
+
+

Still no luck?

+
- {% endif %}
+ {% endif %} {% endblock content %} diff --git a/templates/partial/_footer.html b/templates/partial/_footer.html index 64992395..69a7d138 100644 --- a/templates/partial/_footer.html +++ b/templates/partial/_footer.html @@ -1,7 +1,43 @@ +{% if is_docs %} + +{% else %} +{% endif%} \ No newline at end of file diff --git a/templates/partial/_navigation.html b/templates/partial/_navigation.html index 61a9d945..d5d2f476 100644 --- a/templates/partial/_navigation.html +++ b/templates/partial/_navigation.html @@ -1,34 +1,59 @@ - \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 44d45ffd..aec51971 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5612,10 +5612,10 @@ vanilla-framework@3.14.0: resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-3.14.0.tgz#c5b94d7e2e3ef2d3c9f24091b7efc4abf8054cf9" integrity sha512-06Vr2nhjU72N9IivwCLcd7FgqFNopkiHfzANJUCNdvs8FkbTjIB7fcsFgJ6O76KnOBsEiAoJAssRkTh9x3a2jw== -vanilla-framework@3.15.1: - version "3.15.1" - resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-3.15.1.tgz#3059f97e1fff68f3a274dd2950e2daa5409eeb21" - integrity sha512-wOHprZ01HyMByojT2RlhLL18Jq8P4U7wIfkMIH0fwjbR4HR6rbhaCbh1zh9Fkot+KBdgNQGTgqWw52liDtHmNA== +vanilla-framework@4.5.1: + version "4.5.1" + resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.5.1.tgz#19b55dd4771c304b2bae8af646312916f5f45917" + integrity sha512-vF7GGZsXcQZnM2522Q2am08to/iM2K+EhsfYPuYsiHvp2kRGxY/rJ8tcjbKftNY859qOqT8yJg0PE+sVmKI5zg== verbalize@^0.1.2: version "0.1.2" From 8b993d88946a952056527e9e43f038fad04cccde Mon Sep 17 00:00:00 2001 From: Pete Date: Tue, 23 Jan 2024 17:13:53 +0100 Subject: [PATCH 2/3] Remove temp styles --- static/sass/styles.scss | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/static/sass/styles.scss b/static/sass/styles.scss index cb704c2c..6718bbe9 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -18,15 +18,8 @@ } } -// TODO: to be removed when properly fixed on Vanilla side -// https://github.com/canonical/vanilla-framework/issues/4898 -@media screen and (min-width: $breakpoint-navigation-threshold) { - // align navigation items with grid in docs layout - .l-docs__subgrid .p-navigation__row { - padding-left: 0.5rem; - } -} - +// 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; From 3d4024cc1eceb932b6cc431d23f32d0dbe2f2811 Mon Sep 17 00:00:00 2001 From: Pete Date: Thu, 25 Jan 2024 10:46:28 +0100 Subject: [PATCH 3/3] Lint --- static/sass/_settings.scss | 3 +-- static/sass/styles.scss | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/static/sass/_settings.scss b/static/sass/_settings.scss index 6bbdd711..d90e80bd 100644 --- a/static/sass/_settings.scss +++ b/static/sass/_settings.scss @@ -5,5 +5,4 @@ $breakpoint-navigation-threshold: 940px; // Sidebar $content-padding: 0 5%; $sidebar-width: 18rem; - -$l-documentation-sidebar-width: 18rem; \ No newline at end of file +$l-documentation-sidebar-width: 18rem; diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 6718bbe9..9c0d395d 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -24,4 +24,4 @@ body:not(.docs) { .p-navigation__banner { padding-left: 0; } -} \ No newline at end of file +}