Merge pull request #482 from ASCWebServices/canini-3

style and template updates

web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss

@@ -62,7 +62,17 @@
     }
   }
 
-  .col-ml,
+  .col-ml{
+    padding: 16px 0;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    @media (max-width: 768px) {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+
   .col-mr {
     padding: 16px 0;
     padding-left: 15px;
@@ -230,6 +240,10 @@
     margin-bottom: 10px;
     display: table;
   }
+
+  @media (max-width: 768px) {
+    padding: 20px;
+  }
 }
 
 
@@ -371,10 +385,10 @@
       margin: 0 12px;
       padding: 0 0 30px;
     }
-  }
 
-  .last-row {
-    display: block;
+    .transparent {
+      background: transparent;
+    }
   }
 
   .container {
@@ -623,6 +637,15 @@
 }
 
 
+// ---------------------------------------------------
+
+//## Pull Quote
+
+.paragraph--type--pull-quote {
+  padding: 20px;
+}
+
+
 // ---------------------------------------------------
 
 //## Slide
@@ -865,6 +888,23 @@
 }
 
 
+// --------------------------------------------------
+
+//## Text.
+
+.paragraph--type--text {
+
+  .field--type-text-long {
+
+    iframe {
+
+      @media (max-width: 768px) {
+        padding: 0 20px;
+      }
+    }
+  }
+}
+
 
 // --------------------------------------------------
 

web/themes/asc_bootstrap/assets/sass/layout/_section-background-colors.scss

@@ -16,6 +16,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 }
 
@@ -31,6 +35,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   .panel {
@@ -64,6 +72,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   .panel {
@@ -96,6 +108,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   .panel {
@@ -128,6 +144,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   .panel {
@@ -160,6 +180,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   .panel {
@@ -192,6 +216,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   .panel {
@@ -224,6 +252,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   .panel {
@@ -261,6 +293,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   p {
@@ -327,6 +363,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   p {
@@ -393,6 +433,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   p {
@@ -459,6 +503,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   p {
@@ -525,6 +573,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   p {
@@ -591,6 +643,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   p {
@@ -657,6 +713,10 @@
 
   .field--name-field-text {
     padding: 16px 16px 16px 0;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
   }
 
   p {

web/themes/asc_bootstrap/css/style.css

@@ -6270,6 +6270,9 @@ figcaption {
 
 .transparent-bg .field--name-field-text {
   padding: 16px 16px 16px 0; }
+  @media (max-width: 768px) {
+    .transparent-bg .field--name-field-text {
+      padding: 20px; } }
 
 .lgray-bg {
   background-color: #EFF1F2;
@@ -6277,6 +6280,9 @@ figcaption {
   position: relative; }
   .lgray-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .lgray-bg .field--name-field-text {
+        padding: 20px; } }
   .lgray-bg .panel {
     background-color: transparent; }
   .lgray-bg .paragraph--type--tabs a:hover {
@@ -6299,6 +6305,9 @@ figcaption {
   position: relative; }
   .lblue-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .lblue-bg .field--name-field-text {
+        padding: 20px; } }
   .lblue-bg .panel {
     background-color: transparent; }
   .lblue-bg .paragraph--type--tabs a:hover {
@@ -6321,6 +6330,9 @@ figcaption {
   position: relative; }
   .lviolet-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .lviolet-bg .field--name-field-text {
+        padding: 20px; } }
   .lviolet-bg .panel {
     background-color: transparent; }
   .lviolet-bg .paragraph--type--tabs a:hover {
@@ -6343,6 +6355,9 @@ figcaption {
   position: relative; }
   .ltaupe-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .ltaupe-bg .field--name-field-text {
+        padding: 20px; } }
   .ltaupe-bg .panel {
     background-color: transparent; }
   .ltaupe-bg .paragraph--type--tabs a:hover {
@@ -6365,6 +6380,9 @@ figcaption {
   position: relative; }
   .lturquoise-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .lturquoise-bg .field--name-field-text {
+        padding: 20px; } }
   .lturquoise-bg .panel {
     background-color: transparent; }
   .lturquoise-bg .paragraph--type--tabs a:hover {
@@ -6387,6 +6405,9 @@ figcaption {
   position: relative; }
   .lteal-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .lteal-bg .field--name-field-text {
+        padding: 20px; } }
   .lteal-bg .panel {
     background-color: transparent; }
   .lteal-bg .paragraph--type--tabs a:hover {
@@ -6409,6 +6430,9 @@ figcaption {
   position: relative; }
   .lyellow-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .lyellow-bg .field--name-field-text {
+        padding: 20px; } }
   .lyellow-bg .panel {
     background-color: transparent; }
   .lyellow-bg .paragraph--type--tabs a:hover {
@@ -6431,6 +6455,9 @@ figcaption {
   position: relative; }
   .dgray-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .dgray-bg .field--name-field-text {
+        padding: 20px; } }
   .dgray-bg p {
     color: #ffffff; }
   .dgray-bg a {
@@ -6471,6 +6498,9 @@ figcaption {
   position: relative; }
   .dscarlet-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .dscarlet-bg .field--name-field-text {
+        padding: 20px; } }
   .dscarlet-bg p {
     color: #ffffff; }
   .dscarlet-bg a {
@@ -6511,6 +6541,9 @@ figcaption {
   position: relative; }
   .dviolet-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .dviolet-bg .field--name-field-text {
+        padding: 20px; } }
   .dviolet-bg p {
     color: #ffffff; }
   .dviolet-bg a {
@@ -6551,6 +6584,9 @@ figcaption {
   position: relative; }
   .dteal-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .dteal-bg .field--name-field-text {
+        padding: 20px; } }
   .dteal-bg p {
     color: #ffffff; }
   .dteal-bg a {
@@ -6591,6 +6627,9 @@ figcaption {
   position: relative; }
   .dpurple-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .dpurple-bg .field--name-field-text {
+        padding: 20px; } }
   .dpurple-bg p {
     color: #ffffff; }
   .dpurple-bg a {
@@ -6631,6 +6670,9 @@ figcaption {
   position: relative; }
   .dgreen-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .dgreen-bg .field--name-field-text {
+        padding: 20px; } }
   .dgreen-bg p {
     color: #ffffff; }
   .dgreen-bg a {
@@ -6671,6 +6713,9 @@ figcaption {
   position: relative; }
   .dorange-bg .field--name-field-text {
     padding: 16px 16px 16px 0; }
+    @media (max-width: 768px) {
+      .dorange-bg .field--name-field-text {
+        padding: 20px; } }
   .dorange-bg p {
     color: #ffffff; }
   .dorange-bg a {
@@ -8468,13 +8513,19 @@ article.news-story {
       .paragraph__column .col-m {
         padding-right: 0;
         padding-left: 0; } }
-  .paragraph__column .col-ml,
+  .paragraph__column .col-ml {
+    padding: 16px 0;
+    padding-left: 15px;
+    padding-right: 15px; }
+    @media (max-width: 768px) {
+      .paragraph__column .col-ml {
+        padding-right: 0;
+        padding-left: 0; } }
   .paragraph__column .col-mr {
     padding: 16px 0;
     padding-left: 15px;
     padding-right: 15px; }
     @media (max-width: 768px) {
-      .paragraph__column .col-ml,
       .paragraph__column .col-mr {
         padding-right: 0;
         padding-left: 0; } }
@@ -8573,6 +8624,9 @@ article.news-story {
 .paragraph--type--button-stack .btn {
   margin-bottom: 10px;
   display: table; }
+@media (max-width: 768px) {
+  .paragraph--type--button-stack {
+    padding: 20px; } }
 
 .call-out-container .img-link-wrapper:hover + .field--type-link a {
   color: #BA0C2F;
@@ -8665,8 +8719,8 @@ article.news-story {
       background: #EFF1F2;
       margin: 0 12px;
       padding: 0 0 30px; }
-  .carousel.adv-callout-carousel .last-row {
-    display: block; }
+    .carousel.adv-callout-carousel .row .transparent {
+      background: transparent; }
   @media (max-width: 768px) {
     .carousel.adv-callout-carousel .container {
       margin-bottom: 20px; } }
@@ -8827,6 +8881,9 @@ article.news-story {
 .file .file-size {
   color: #BA0C2F; }
 
+.paragraph--type--pull-quote {
+  padding: 20px; }
+
 .slide-txt-container {
   width: 100%;
   position: absolute;
@@ -8983,6 +9040,10 @@ article.news-story {
 .paragraph--type--tabs .field--name-field-media-image {
   padding: 20px 0; }
 
+@media (max-width: 768px) {
+  .paragraph--type--text .field--type-text-long iframe {
+    padding: 0 20px; } }
+
 .para_1_col .field--name-field-media-twitter {
   margin: 0 auto;
   width: 60%; }

web/themes/asc_bootstrap/templates/block/block--views-block--academic-programs-block-1.html.twig

+{#
+/**
+ * @file
+ * Displays block for affiliated Departments and Centers on the Academic Programs page.
+ *
+ * Available variables:
+ * - $block->subject: Block title.
+ * - $content: Block content.
+ * - $block->module: Module that generated the block.
+ * - $block->delta: An ID for the block, unique within each module.
+ * - $block->region: The block region embedding the current block.
+ * - $classes: String of classes that can be used to style contextually through
+ *   CSS. It can be manipulated through the variable $classes_array from
+ *   preprocess functions. The default values can be one or more of the
+ *   following:
+ *   - block: The current template type, i.e., "theming hook".
+ *   - block-[module]: The module generating the block. For example, the user
+ *     module is responsible for handling the default user navigation block. In
+ *     that case the class would be 'block-user'.
+ * - $title_prefix (array): An array containing additional output populated by
+ *   modules, intended to be displayed in front of the main title tag that
+ *   appears in the template.
+ * - $title_suffix (array): An array containing additional output populated by
+ *   modules, intended to be displayed after the main title tag that appears in
+ *   the template.
+ *
+ * Helper variables:
+ * - $classes_array: Array of html class attribute values. It is flattened
+ *   into a string within the variable $classes.
+ * - $block_zebra: Outputs 'odd' and 'even' dependent on each block region.
+ * - $zebra: Same output as $block_zebra but independent of any block region.
+ * - $block_id: Counter dependent on each block region.
+ * - $id: Same output as $block_id but independent of any block region.
+ * - $is_front: Flags true when presented in the front page.
+ * - $logged_in: Flags true when the current user is a logged-in member.
+ * - $is_admin: Flags true when the current user is an administrator.
+ * - $block_html_id: A valid HTML ID and guaranteed unique.
+ *
+ * @ingroup templates
+ *
+ * @see bootstrap_preprocess_block()
+ * @see template_preprocess()
+ * @see template_preprocess_block()
+ * @see bootstrap_process_block()
+ * @see template_process()
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+    'clearfix',
+  ]
+%}
+
+{# variable to check if block has more than just an h2 tag in it #}
+{% set has_content = content|render|striptags('<h2>')|trim|length %}
+
+{% if has_content %}
+{# if it does it displays the content #}
+<section{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes.addClass('block-title') }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+
+  {% block content %}
+
+    {{ content }}
+
+  {% endblock %}
+</section>
+{% else %}
+  <section{{ attributes.addClass(classes) }}>
+    {# if it doesn't it displays nothing #}
+  </section>
+{% endif %}
+

web/themes/asc_bootstrap/templates/block/block--views-block--academic-programs-block-2.html.twig

+{#
+/**
+ * @file
+ * Displays block for Related Programs on the Academic Programs page.
+ *
+ * Available variables:
+ * - $block->subject: Block title.
+ * - $content: Block content.
+ * - $block->module: Module that generated the block.
+ * - $block->delta: An ID for the block, unique within each module.
+ * - $block->region: The block region embedding the current block.
+ * - $classes: String of classes that can be used to style contextually through
+ *   CSS. It can be manipulated through the variable $classes_array from
+ *   preprocess functions. The default values can be one or more of the
+ *   following:
+ *   - block: The current template type, i.e., "theming hook".
+ *   - block-[module]: The module generating the block. For example, the user
+ *     module is responsible for handling the default user navigation block. In
+ *     that case the class would be 'block-user'.
+ * - $title_prefix (array): An array containing additional output populated by
+ *   modules, intended to be displayed in front of the main title tag that
+ *   appears in the template.
+ * - $title_suffix (array): An array containing additional output populated by
+ *   modules, intended to be displayed after the main title tag that appears in
+ *   the template.
+ *
+ * Helper variables:
+ * - $classes_array: Array of html class attribute values. It is flattened
+ *   into a string within the variable $classes.
+ * - $block_zebra: Outputs 'odd' and 'even' dependent on each block region.
+ * - $zebra: Same output as $block_zebra but independent of any block region.
+ * - $block_id: Counter dependent on each block region.
+ * - $id: Same output as $block_id but independent of any block region.
+ * - $is_front: Flags true when presented in the front page.
+ * - $logged_in: Flags true when the current user is a logged-in member.
+ * - $is_admin: Flags true when the current user is an administrator.
+ * - $block_html_id: A valid HTML ID and guaranteed unique.
+ *
+ * @ingroup templates
+ *
+ * @see bootstrap_preprocess_block()
+ * @see template_preprocess()
+ * @see template_preprocess_block()
+ * @see bootstrap_process_block()
+ * @see template_process()
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+    'clearfix',
+  ]
+%}
+
+{# variable to check if block has more than just an h2 tag in it #}
+{% set has_content = content|render|striptags('<h2>')|trim|length %}
+
+{% if has_content %}
+{# if it does it displays the content #}
+<section{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes.addClass('block-title') }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+
+  {% block content %}
+
+    {{ content }}
+
+  {% endblock %}
+</section>
+{% else %}
+  <section{{ attributes.addClass(classes) }}>
+    {# if it doesn't it displays nothing #}
+  </section>
+{% endif %}
+

web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_four.html.twig

@@ -86,7 +86,7 @@
       {% for item in thecont|slice(0, contcount) %}
           <div class="item {% if loop.first %}active{% endif %}">
 
-            <div class="col-xs-12">
+            <div class="col-xs-12 col-adv-call-mobile">
               <div class="card">
                 {{ thecont[loop.index0] }}
               </div>
@@ -115,7 +115,7 @@
     </div>
 
 
-{# Advanced Callout box #}
+{# Advanced Callout box desktop #}
       {% set counter = 1 %}
       {% set contcount = thecont|length - 17 %}
 
@@ -139,6 +139,43 @@
               </div>
             </div>
 
+            {% if loop.last and counter == 3 %}
+
+              <div class="col-xs-12 col-md-4 col-r transparent">
+
+              </div>
+
+            {% endif %}
+
+            {% if loop.last and counter == 2 %}
+
+              <div class="col-xs-12 col-md-4 col-m transparent">
+
+              </div>
+
+              <div class="col-xs-12 col-md-4 col-r transparent">
+
+              </div>
+
+            {% endif %}
+
+            {% if loop.last and counter == 1 %}
+
+
+              <div class="col-xs-12 col-md-4 col-m transparent">
+
+              </div>
+
+              <div class="col-xs-12 col-md-4 col-m transparent">
+
+              </div>
+
+              <div class="col-xs-12 col-md-4 col-r transparent">
+
+              </div>
+
+            {% endif %}
+
           {% if counter == 4 or loop.last %}
             </div>
           </div>

web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_three.html.twig

@@ -101,7 +101,7 @@
 
 {% if page_content_type == 'landing_page' %}
     <div class="container">
-{% endif %}
+
 
       <div class="carousel-inner adv-call-mob-inner" role="listbox">
 
@@ -113,7 +113,7 @@
           <div class="item active">
         {% endif %}
 
-            <div class="col-xs-12">
+            <div class="col-xs-12 col-adv-call-mobile">
               <div class="card">
                 {{ thecont[loop.index0] }}
               </div>
@@ -124,10 +124,28 @@
 
       </div>
 
-{% if page_content_type == 'landing_page' %}
     </div>
 {% endif %}
 
+{% if page_content_type == 'page' %}
+ <div class="carousel-inner adv-call-mob-inner" role="listbox">
+
+      {% for item in thecont|slice(0, 3) %}
+
+          <div class="item active">
+
+            <div class="col-xs-12 col-adv-call-mobile">
+              <div class="card">
+                {{ thecont[loop.index0] }}
+              </div>
+            </div>
+
+          </div>
+        {% endfor %}
+
+      </div>
+{% endif %}
+
 {% if page_content_type != 'page' %}
       <!-- Controls -->
       <div class="col-12 text-center">
@@ -165,6 +183,27 @@
               </div>
             </div>
 
+            {% if loop.last and counter == 2 %}
+
+              <div class="col-xs-12 col-md-4 col-r transparent">
+
+              </div>
+
+            {% endif %}
+
+            {% if loop.last and counter == 1 %}
+
+
+              <div class="col-xs-12 col-md-4 col-m transparent">
+
+              </div>
+
+              <div class="col-xs-12 col-md-4 col-r transparent">
+
+              </div>
+
+            {% endif %}
+
           {% if counter == 3 or loop.last %}
             </div>
           </div>

web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_two.html.twig

@@ -100,7 +100,6 @@
 
 {% if page_content_type == 'landing_page' %}
     <div class="container">
-{% endif %}
 
       <div class="carousel-inner adv-call-mob-inner" role="listbox">
       {% for item in thecont|slice(0, contcount) %}
@@ -121,10 +120,28 @@
         {% endfor %}
       </div>
 
-{% if page_content_type == 'landing_page' %}
     </div>
 {% endif %}
 
+{% if page_content_type == 'page' %}
+ <div class="carousel-inner adv-call-mob-inner" role="listbox">
+
+      {% for item in thecont|slice(0, 2) %}
+
+          <div class="item active">
+
+            <div class="col-xs-12 col-adv-call-mobile">
+              <div class="card">
+                {{ thecont[loop.index0] }}
+              </div>
+            </div>
+
+          </div>
+        {% endfor %}
+
+      </div>
+{% endif %}
+
 {% if page_content_type != 'page' %}
       <!-- Controls -->
       <div class="col-12 text-center">
@@ -163,6 +180,18 @@
               </div>
             </div>
 
+
+            {% if loop.last and counter == 1 %}
+
+
+              <div class="col-xs-12 col-md-6 col-r transparent">
+
+              </div>
+
+
+            {% endif %}
+
+
           {% if counter == 2 or loop.last %}
             </div>
           </div>

web/themes/asc_bootstrap/templates/system/page--academic-programs.html.twig

@@ -141,13 +141,16 @@
               </a>
             </div>
           {% endif %}
-          <div class="ap-sidebar-btn-wrap">
-            <a href="/request-info" title="Request Info">
-              <div class="btn ap-sidebar-btns">
-                Request Info
-              </div>
-            </a>
-          </div>
+
+          {% if node.field_ap_program.value[0].target_id == 51 %}
+            <div class="ap-sidebar-btn-wrap">
+              <a href="/request-info" title="Request Info">
+                <div class="btn ap-sidebar-btns">
+                  Request Info
+                </div>
+              </a>
+            </div>
+          {% endif %}
 
           {# Sidebar Second #}
           {% if page.sidebar_menu %}