From 28f10cd0b3c7a8d580c7fa464e9abf8aea00640f Mon Sep 17 00:00:00 2001
From: bcanini <canini.16@osu.edu>
Date: Tue, 29 Jan 2019 14:50:20 -0500
Subject: [PATCH] asc_bootstrap - adding padding to wysiwyg imgs, setting up
and styling sidebar menu
---
.../assets/sass/components/_sidebar-menu.scss | 46 +++++++++--
.../assets/sass/components/_wysiwyg.scss | 40 +++++++++
.../asc_bootstrap/assets/sass/style.scss | 1 +
web/themes/asc_bootstrap/css/style.css | 82 ++++++++++++++++---
web/themes/asc_bootstrap/js/scripts.js | 25 ++++++
.../templates/menu/menu.html.twig | 6 +-
.../templates/node/node--event.html.twig | 7 +-
7 files changed, 182 insertions(+), 25 deletions(-)
create mode 100644 web/themes/asc_bootstrap/assets/sass/components/_wysiwyg.scss
diff --git a/web/themes/asc_bootstrap/assets/sass/components/_sidebar-menu.scss b/web/themes/asc_bootstrap/assets/sass/components/_sidebar-menu.scss
index ee20c3f8c3..89cbc627bb 100644
--- a/web/themes/asc_bootstrap/assets/sass/components/_sidebar-menu.scss
+++ b/web/themes/asc_bootstrap/assets/sass/components/_sidebar-menu.scss
@@ -11,12 +11,13 @@
a {
display: inline;
+ padding: 0 14px;
}
}
ul {
- display: inherit;
+ display: none;
position: inherit;
background: transparent;
border: none;
@@ -28,15 +29,31 @@
a {
color: $black-base;
- padding: 5px 5px 5px 35px;
+ padding: 0px 5px 0px 35px;
+ }
+
+ i {
+ padding: 0 10px;
+ }
+
+ li {
+
+ a {
+ padding: 0px 5px 0px 55px;
+ }
}
}
}
+ .active-trail ul {
+ display: inherit;
+ }
+
i {
float: right;
- margin-top: 8px;
+ padding: 2px 10px;
+ cursor: pointer;
}
&:nth-last-child(1) {
@@ -46,9 +63,24 @@
}
- .navbar-nav > li > a {
- padding-top: 5px;
- padding-bottom: 5px;
- float: left;
+ .nav > li > a:hover, .nav > li > a:focus {
+ background-color: transparent;
}
+
+ .active-link {
+ background-color: $white;
+ border-left: solid #D0021B 3px;
+ }
+
+ .link-wrapper {
+
+ &:hover {
+ background-color: $white;
+ }
+ }
+
+ @media (max-width: 768px) {
+ display: none;
+ }
+
}
diff --git a/web/themes/asc_bootstrap/assets/sass/components/_wysiwyg.scss b/web/themes/asc_bootstrap/assets/sass/components/_wysiwyg.scss
new file mode 100644
index 0000000000..2c4c23c00f
--- /dev/null
+++ b/web/themes/asc_bootstrap/assets/sass/components/_wysiwyg.scss
@@ -0,0 +1,40 @@
+@import "../helpers/mixins";
+@import "../helpers/variables";
+@import "../helpers/functions";
+//
+// WYSIWYG image elements
+// --------------------------------------------------
+
+.align-right {
+ .field--name-field-media-image {
+ padding: 15px 0 15px 15px;
+ width: auto;
+ }
+
+ figcaption {
+ text-align: center;
+ }
+}
+
+.align-left {
+ .field--name-field-media-image {
+ padding: 15px 15px 15px 0;
+ width: auto;
+ }
+
+ figcaption {
+ text-align: center;
+ }
+}
+
+.align-center {
+ .field--name-field-media-image {
+ padding: 15px;
+ margin: 0 auto;
+ width: auto;
+ }
+
+ figcaption {
+ text-align: center;
+ }
+}
diff --git a/web/themes/asc_bootstrap/assets/sass/style.scss b/web/themes/asc_bootstrap/assets/sass/style.scss
index 299e4f7cca..18b8097d30 100644
--- a/web/themes/asc_bootstrap/assets/sass/style.scss
+++ b/web/themes/asc_bootstrap/assets/sass/style.scss
@@ -79,6 +79,7 @@
@import "components/sidebar-menu";
@import "components/video";
@import "components/webforms";
+@import "components/wysiwyg";
// Custom Pages
@import "pages/basic-page";
diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css
index 69e9faf9e4..efde2e5a09 100644
--- a/web/themes/asc_bootstrap/css/style.css
+++ b/web/themes/asc_bootstrap/css/style.css
@@ -11487,10 +11487,11 @@ body {
/* line 12, ../assets/sass/components/_sidebar-menu.scss */
#block-mainnavigation-2 .navbar-nav li a {
display: inline;
+ padding: 0 14px;
}
-/* line 18, ../assets/sass/components/_sidebar-menu.scss */
+/* line 19, ../assets/sass/components/_sidebar-menu.scss */
#block-mainnavigation-2 .navbar-nav ul {
- display: inherit;
+ display: none;
position: inherit;
background: transparent;
border: none;
@@ -11498,26 +11499,52 @@ body {
padding: 0;
list-style-type: none;
}
-/* line 29, ../assets/sass/components/_sidebar-menu.scss */
+/* line 30, ../assets/sass/components/_sidebar-menu.scss */
#block-mainnavigation-2 .navbar-nav ul li a {
color: #000000;
- padding: 5px 5px 5px 35px;
+ padding: 0px 5px 0px 35px;
+}
+/* line 35, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .navbar-nav ul li i {
+ padding: 0 10px;
+}
+/* line 41, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .navbar-nav ul li li a {
+ padding: 0px 5px 0px 55px;
}
-/* line 37, ../assets/sass/components/_sidebar-menu.scss */
+/* line 48, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .navbar-nav .active-trail ul {
+ display: inherit;
+}
+/* line 53, ../assets/sass/components/_sidebar-menu.scss */
#block-mainnavigation-2 .navbar-nav i {
float: right;
- margin-top: 8px;
+ padding: 2px 10px;
+ cursor: pointer;
}
-/* line 42, ../assets/sass/components/_sidebar-menu.scss */
+/* line 59, ../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 66, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .nav > li > a:hover, #block-mainnavigation-2 .nav > li > a:focus {
+ background-color: transparent;
+}
+/* line 70, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .active-link {
+ background-color: #ffffff;
+ border-left: solid #D0021B 3px;
+}
+/* line 77, ../assets/sass/components/_sidebar-menu.scss */
+#block-mainnavigation-2 .link-wrapper:hover {
+ background-color: #ffffff;
+}
+@media (max-width: 768px) {
+ /* line 5, ../assets/sass/components/_sidebar-menu.scss */
+ #block-mainnavigation-2 {
+ display: none;
+ }
}
/* line 8, ../assets/sass/components/_video.scss */
@@ -11539,6 +11566,37 @@ textarea.form-control {
margin-bottom: 10px;
}
+/* line 9, ../assets/sass/components/_wysiwyg.scss */
+.align-right .field--name-field-media-image {
+ padding: 15px 0 15px 15px;
+ width: auto;
+}
+/* line 14, ../assets/sass/components/_wysiwyg.scss */
+.align-right figcaption {
+ text-align: center;
+}
+
+/* line 20, ../assets/sass/components/_wysiwyg.scss */
+.align-left .field--name-field-media-image {
+ padding: 15px 15px 15px 0;
+ width: auto;
+}
+/* line 25, ../assets/sass/components/_wysiwyg.scss */
+.align-left figcaption {
+ text-align: center;
+}
+
+/* line 31, ../assets/sass/components/_wysiwyg.scss */
+.align-center .field--name-field-media-image {
+ padding: 15px;
+ margin: 0 auto;
+ width: auto;
+}
+/* line 37, ../assets/sass/components/_wysiwyg.scss */
+.align-center figcaption {
+ text-align: center;
+}
+
/* line 9, ../assets/sass/pages/_basic-page.scss */
article.page {
margin-bottom: 44px;
diff --git a/web/themes/asc_bootstrap/js/scripts.js b/web/themes/asc_bootstrap/js/scripts.js
index e5f606bae7..67853acca5 100644
--- a/web/themes/asc_bootstrap/js/scripts.js
+++ b/web/themes/asc_bootstrap/js/scripts.js
@@ -90,5 +90,30 @@ jQuery(document).ready(function(){
});
});
+
+ //add class if people directory
+ /*if ( jQuery('#block-exposedformpeople-directorypage-1').length ) {
+ jQuery('aside.col-sm-3').addClass('col-sm-push-9');
+ jQuery('section.col-sm-9').addClass('col-sm-pull-3');
+ }*/
+
+ if (jQuery(".sidebar-nav .active-trail").length) {
+ jQuery(".sidebar-nav .active-trail").find("i").removeClass('fa-angle-right').addClass( 'fa-angle-down' );
+ }
+
+ jQuery(".sidebar-nav li").click(function(e){
+ e.stopPropagation();
+ if ( jQuery(this).find("ul").css('display') == 'none' ) {
+ jQuery(this).find("i").removeClass('fa-angle-right').addClass( 'fa-angle-down' );
+ } else {
+ jQuery(this).find("i").removeClass( 'fa-angle-down' ).addClass( 'fa-angle-right' );
+ }
+ jQuery(this).find("ul").slideToggle();
+ });
+
+ if (jQuery(".is-active").length) {
+ jQuery( ".is-active" ).parent().addClass( "active-link" );
+ }
+
});
diff --git a/web/themes/asc_bootstrap/templates/menu/menu.html.twig b/web/themes/asc_bootstrap/templates/menu/menu.html.twig
index a03d8f017c..f7826df552 100644
--- a/web/themes/asc_bootstrap/templates/menu/menu.html.twig
+++ b/web/themes/asc_bootstrap/templates/menu/menu.html.twig
@@ -22,7 +22,7 @@
{% macro menu_links(items, attributes, menu_level, classes, dropdown_classes) %}
{% if items %}
- <ul{{ attributes.addClass(classes) }}>
+ <ul{{ attributes.addClass(classes, 'sidebar-nav') }}>
{% for item in items %}
{%
@@ -43,9 +43,9 @@
{# 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>
+ <div class="link-wrapper">{{ link(link_title, item.url, link_attributes.addClass(item.in_active_trail ? 'active-trail')) }} <i class="fa fa-angle-right" aria-hidden="true"></i></div>
{% else %}
- {{ link(link_title, item.url, link_attributes.addClass(item.in_active_trail ? 'active-trail')) }}
+ <div class="link-wrapper">{{ link(link_title, item.url, link_attributes.addClass(item.in_active_trail ? 'active-trail')) }}</div>
{% endif %}
{% if item.below %}
{{ _self.menu_links(item.below, attributes.removeClass(classes), menu_level + 1, dropdown_classes) }}
diff --git a/web/themes/asc_bootstrap/templates/node/node--event.html.twig b/web/themes/asc_bootstrap/templates/node/node--event.html.twig
index 5fd0b52494..224f566bec 100644
--- a/web/themes/asc_bootstrap/templates/node/node--event.html.twig
+++ b/web/themes/asc_bootstrap/templates/node/node--event.html.twig
@@ -138,7 +138,7 @@
{# if multiple days #}
<div class="field--item evt-date">{{ dates.value|date_modify("-4 hours")|date('F j') ~ ' - ' ~ dates.end_value|date_modify("-4 hours")|date('F j, Y') }}</div>
{% endif %}
- {% else %}
+ {% else %} {# not daylight savings #}
{# get end year for event date range field #}
{% set end_year = dates.end_value|date_modify("-5 hours")|date('Y') %}
@@ -156,7 +156,7 @@
<div class="field--item evt-date">{{ dates.value|date_modify("-5 hours")|date('F j, Y') ~ ' - ' ~ dates.end_value|date_modify("-5 hours")|date('F j, Y') }}</div>
{% endif %}
- {% else %}
+ {% else %}{# end date is NOT past new year#}
{# if same day #}
{% if start_date == end_date %}
<div class="field--item evt-date">{{ dates.value|date_modify("-5 hours")|date('F j, Y') }}</div>
@@ -170,7 +170,7 @@
{# place TIME value #}
<i class="fa fa-clock-o evt-icon"></i>
{# check if all day is selected #}
- {% if node.field_evt_all_day.value == 1 %}
+ {% if start_date_cal == end_date_cal %}
<div class="field--item evt-time">All Day</div>
{% else %}
{# check if daylight savings time, modify to correct time #}
@@ -220,6 +220,7 @@
{# END setup AddToCalendar btn #}
</div>
{# END AddToCalendar #}
+{{ content.field_evt_date_range_2 }}
{% endfor %}{# END for loop to display all event dates #}
--
GitLab