From faa08fe710c2239457240b8ab1f80b619b18bfbe Mon Sep 17 00:00:00 2001
From: bcanini <canini.16@osu.edu>
Date: Fri, 18 Jan 2019 10:28:09 -0500
Subject: [PATCH] asc_bootstrap - adding tags to make main nav and breadcrumbs
aceesible, setting up and styling sidemenu, debugging 'default no image' img
size for people, debugging paragraph col sizes
---
.../assets/sass/components/_paragraphs.scss | 4 +-
.../assets/sass/components/_sidebar-menu.scss | 54 ++++++++++++++++
.../assets/sass/layout/_default.scss | 2 +-
.../asc_bootstrap/assets/sass/style.scss | 1 +
web/themes/asc_bootstrap/css/style.css | 46 ++++++++++++-
.../templates/menu/menu.html.twig | 64 +++++++++++++++++++
.../templates/system/page--front.html.twig | 4 +-
.../system/page--landing-page.html.twig | 4 +-
.../templates/system/page.html.twig | 8 ++-
9 files changed, 177 insertions(+), 10 deletions(-)
create mode 100644 web/themes/asc_bootstrap/assets/sass/components/_sidebar-menu.scss
create mode 100644 web/themes/asc_bootstrap/templates/menu/menu.html.twig
diff --git a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
index ac913978df..ede70a2946 100644
--- a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
+++ b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
@@ -47,8 +47,8 @@
}
.col-m {
- padding-right: 15px;
- padding-left: 15px;
+ padding-right: 7.5px;
+ padding-left: 7.5px;
@media (max-width: 768px) {
padding-right: 0;
diff --git a/web/themes/asc_bootstrap/assets/sass/components/_sidebar-menu.scss b/web/themes/asc_bootstrap/assets/sass/components/_sidebar-menu.scss
new file mode 100644
index 0000000000..ee20c3f8c3
--- /dev/null
+++ b/web/themes/asc_bootstrap/assets/sass/components/_sidebar-menu.scss
@@ -0,0 +1,54 @@
+@import "helpers/mixins";
+@import "helpers/variables";
+@import "helpers/functions";
+
+#block-mainnavigation-2 {
+
+ .navbar-nav {
+
+ li {
+ border-top: 1px #979797 dotted;
+
+ a {
+ display: inline;
+ }
+
+ }
+
+ ul {
+ display: inherit;
+ position: inherit;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ padding: 0;
+ list-style-type: none;
+
+ li {
+
+ a {
+ color: $black-base;
+ padding: 5px 5px 5px 35px;
+ }
+ }
+ }
+
+
+ i {
+ float: right;
+ margin-top: 8px;
+ }
+
+ &:nth-last-child(1) {
+ border-bottom: 1px #979797 dotted;
+ border-top: none;
+ }
+
+ }
+
+ .navbar-nav > li > a {
+ padding-top: 5px;
+ padding-bottom: 5px;
+ float: left;
+ }
+}
diff --git a/web/themes/asc_bootstrap/assets/sass/layout/_default.scss b/web/themes/asc_bootstrap/assets/sass/layout/_default.scss
index 297298f04f..73c7172310 100755
--- a/web/themes/asc_bootstrap/assets/sass/layout/_default.scss
+++ b/web/themes/asc_bootstrap/assets/sass/layout/_default.scss
@@ -123,7 +123,7 @@ p {
}
.img-responsive {
- width: auto;
+ width: 100%;
}
.hov {
diff --git a/web/themes/asc_bootstrap/assets/sass/style.scss b/web/themes/asc_bootstrap/assets/sass/style.scss
index ff0e21ccf2..299e4f7cca 100644
--- a/web/themes/asc_bootstrap/assets/sass/style.scss
+++ b/web/themes/asc_bootstrap/assets/sass/style.scss
@@ -76,6 +76,7 @@
@import "components/people";
@import "components/people-styles";
@import "components/simplemenu";
+@import "components/sidebar-menu";
@import "components/video";
@import "components/webforms";
diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css
index 14cf1c71a7..69e9faf9e4 100644
--- a/web/themes/asc_bootstrap/css/style.css
+++ b/web/themes/asc_bootstrap/css/style.css
@@ -8990,7 +8990,7 @@ p {
/* line 125, ../assets/sass/layout/_default.scss */
.img-responsive {
- width: auto;
+ width: 100%;
}
/* line 129, ../assets/sass/layout/_default.scss */
@@ -10823,8 +10823,8 @@ article.news-story {
}
/* line 49, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .col-m {
- padding-right: 15px;
- padding-left: 15px;
+ padding-right: 7.5px;
+ padding-left: 7.5px;
}
@media (max-width: 768px) {
/* line 49, ../assets/sass/components/_paragraphs.scss */
@@ -11480,6 +11480,46 @@ body {
display: flex;
}
+/* line 9, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .navbar-nav li {
+ border-top: 1px #979797 dotted;
+}
+/* line 12, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .navbar-nav li a {
+ display: inline;
+}
+/* line 18, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .navbar-nav ul {
+ display: inherit;
+ position: inherit;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ padding: 0;
+ list-style-type: none;
+}
+/* line 29, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .navbar-nav ul li a {
+ color: #000000;
+ padding: 5px 5px 5px 35px;
+}
+/* line 37, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .navbar-nav i {
+ float: right;
+ margin-top: 8px;
+}
+/* line 42, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .navbar-nav:nth-last-child(1) {
+ border-bottom: 1px #979797 dotted;
+ border-top: none;
+}
+/* line 49, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .navbar-nav > li > a {
+ padding-top: 5px;
+ padding-bottom: 5px;
+ float: left;
+}
+
/* line 8, ../assets/sass/components/_video.scss */
.p-vid {
max-width: 560px;
diff --git a/web/themes/asc_bootstrap/templates/menu/menu.html.twig b/web/themes/asc_bootstrap/templates/menu/menu.html.twig
new file mode 100644
index 0000000000..a03d8f017c
--- /dev/null
+++ b/web/themes/asc_bootstrap/templates/menu/menu.html.twig
@@ -0,0 +1,64 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a menu.
+ *
+ * Available variables:
+ * - classes: A list of classes to apply to the top level <ul> element.
+ * - dropdown_classes: A list of classes to apply to the dropdown <ul> element.
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ * - attributes: HTML attributes for the menu item.
+ * - below: The menu item child items.
+ * - title: The menu link title.
+ * - url: The menu link url, instance of \Drupal\Core\Url
+ * - localized_options: Menu link localized options.
+ *
+ * @ingroup templates
+ *
+ * Define a custom macro that will render all menu trees.
+ */
+#}
+{% macro menu_links(items, attributes, menu_level, classes, dropdown_classes) %}
+ {% if items %}
+
+ <ul{{ attributes.addClass(classes) }}>
+
+ {% for item in items %}
+ {%
+ set item_classes = item.url.getOption('container_attributes').class | split(" ")
+ %}
+ {%
+ set item_classes = [
+ item.is_expanded and item.below ? 'expanded dropdown',
+ item.in_active_trail ? 'active active-trail',
+ loop.first ? 'first',
+ loop.last ? 'last',
+ ]
+ %}
+ <li{{ item.attributes.addClass(item_classes) }}>
+ {% set link_title = item.title %}
+ {% set link_attributes = item.link_attributes %}
+ {# {% set link_attributes = link_attributes.addClass('dropdown-toggle').setAttribute('data-toggle', 'dropdown') %} #}
+
+ {# Must use link() here so it triggers hook_link_alter(). #}
+ {% if item.is_expanded and item.below %}
+ {{ link(link_title, item.url, link_attributes.addClass(item.in_active_trail ? 'active-trail')) }} <i class="fa fa-angle-right" aria-hidden="true"></i>
+ {% else %}
+ {{ link(link_title, item.url, link_attributes.addClass(item.in_active_trail ? 'active-trail')) }}
+ {% endif %}
+ {% if item.below %}
+ {{ _self.menu_links(item.below, attributes.removeClass(classes), menu_level + 1, dropdown_classes) }}
+ {% endif %}
+ </li>
+ {% endfor %}
+ </ul>
+ {% endif %}
+{% endmacro %}
+
+{#
+ Invoke the custom macro defined above. If classes were provided, use them.
+ This allows the template to be extended without having to also duplicate the
+ code above. @see http://twig.sensiolabs.org/doc/tags/macro.html
+#}
+{{ _self.menu_links(items, attributes, 0, classes ?: ['menu', 'menu--' ~ menu_name|clean_class, 'nav'], dropdown_classes ?: ['dropdown-menu']) }}
diff --git a/web/themes/asc_bootstrap/templates/system/page--front.html.twig b/web/themes/asc_bootstrap/templates/system/page--front.html.twig
index 957235b0ac..e89bd6c8fd 100755
--- a/web/themes/asc_bootstrap/templates/system/page--front.html.twig
+++ b/web/themes/asc_bootstrap/templates/system/page--front.html.twig
@@ -49,7 +49,9 @@
<div id="main-nav">
<div class="container">
- {{ page.navigation }}
+ <nav aria-label="Main">
+ {{ page.navigation }}
+ </nav>
</div>
</div>
diff --git a/web/themes/asc_bootstrap/templates/system/page--landing-page.html.twig b/web/themes/asc_bootstrap/templates/system/page--landing-page.html.twig
index e470900a65..79765bd047 100644
--- a/web/themes/asc_bootstrap/templates/system/page--landing-page.html.twig
+++ b/web/themes/asc_bootstrap/templates/system/page--landing-page.html.twig
@@ -52,7 +52,9 @@
<div id="main-nav">
<div class="container">
- {{ page.navigation }}
+ <nav aria-label="Main">
+ {{ page.navigation }}
+ </nav>
</div>
</div>
diff --git a/web/themes/asc_bootstrap/templates/system/page.html.twig b/web/themes/asc_bootstrap/templates/system/page.html.twig
index 73cab10fe3..9a72c67b6a 100755
--- a/web/themes/asc_bootstrap/templates/system/page.html.twig
+++ b/web/themes/asc_bootstrap/templates/system/page.html.twig
@@ -51,12 +51,16 @@
<div id="main-nav">
<div class="container">
- {{ page.navigation }}
+ <nav aria-label="Main">
+ {{ page.navigation }}
+ </nav>
</div>
</div>
<div id="breadcrumb-container">
<div class="container">
- {{ page.breadcrumb }}
+ <nav aria-label="Breadcrumb">
+ {{ page.breadcrumb }}
+ </nav>
</div>
</div>
--
GitLab