Merge pull request #637 from middlebury/chat-widget-fix

Fix for Olark and Libchat widgets hiding footer links

src/data/data.yml

@@ -128,17 +128,19 @@ utility_footer_nav:
 
 secondary_footer_nav:
   - text: About Middlebury
-    href: http://www.middlebury.edu/about
+    href: https://www.middlebury.edu/about
   - text: Giving
-    href: http://www.middlebury.edu/giving
+    href: https://www.middlebury.edu/giving
   - text: Employment
-    href: http://www.middlebury.edu/offices/business/hr/jobseeker
+    href: https://www.middlebury.edu/offices/business/hr/jobseeker
   - text: Offices and Services
-    href: http://www.middlebury.edu/office/
+    href: https://www.middlebury.edu/office/
   - text: Copyright
-    href: http://www.middlebury.edu/about/copyright
+    href: https://www.middlebury.edu/about/copyright
   - text: Privacy
-    href: http://www.middlebury.edu/about/privacy
+    href: https://www.middlebury.edu/about/privacy
+  - text: Emergency
+    href: https://www.middlebury.edu/emergency-response
   - text: Site-Editor login
     href: '#'
 

src/scss/_vendor.scss

@@ -4,22 +4,53 @@
 
 /* libchat widget button */
 // stylelint-disable-next-line selector-class-pattern
-.lcs_slide_out header a {
-  right: 10px !important;
+.lcs_slide_out.lcs_slide_out-b {
+  bottom: 64px !important;
+  border: 0 !important;
+
+  @media only screen and (min-width: 512px) {
+    right: 0px !important;
+    bottom: 0px !important;
+  }
+
+  @media only screen and (min-width: 1024px) {
+    right: 0px !important;
+  }
+
+  @media only screen and (min-width: 1200px) {
+    right: 100px !important;
+  }
+}
+
+// stylelint-disable-next-line selector-class-pattern
+.lcs_slide_out.lcs_slide_out-b.open {
+  border: 1px solid #ccc;
+}
+
+// stylelint-disable-next-line selector-class-pattern
+.lcs_slide_out .lcs_header a {
+  right: -56px !important;
   left: auto !important;
-  top: auto !important;
-  bottom: 100% !important;
+  top: 16px !important;
+  bottom: auto !important;
   border: 1px solid #fff !important;
   box-shadow: none !important;
+
+  @media only screen and (min-width: 512px) {
+    top: -48px !important;
+    right: 10px !important;
+  }
 }
 
 // Push Olark chat button away from right edge more
 // to make space for back to top button.
 
 // stylelint-disable selector-max-id
-#olark-wrapper {
+#olark-wrapper, 
+#olark-wrapper .olark-launch-button-wrapper .olark-button-focus-wrapper:focus,
+#olark-wrapper .olark-launch-button-wrapper .olark-button-focus-wrapper:focus-within {
   position: fixed !important;
-  bottom: 15px !important;
+  bottom: 64px !important;
   right: 100px !important;
   left: auto !important;
   z-index: 9000000 !important;
@@ -33,6 +64,19 @@
   z-index: 9000000 !important;
 }
 
+#olark-wrapper #olark-container,
+#olark-wrapper #olark-container:focus:not(.olark-inline) {
+  bottom: 144px !important;
+}
+
+#olark-wrapper .olark-launch-button.olark-text-button .olark-button-text {
+  padding: 10px !important;
+}
+
+#olark-wrapper .olark-launch-button.olark-text-button .olark-button-text {
+  line-height: 1em !important;
+}
+
 .typography .anchorjs-link,
 .anchorjs-link {
   border: 0;

src/scss/components/_midd-footer.scss

@@ -8,9 +8,10 @@
 .midd-footer__list {
   @include breakpoint(lg) {
     display: flex;
-    justify-content: flex-end;
+    justify-content: flex-start;
     align-items: center;
     height: 100%;
+    margin-top: $spacing-3;
   }
 }
 

src/scss/components/_top-btn.scss

@@ -1,11 +1,11 @@
 .to-top-btn {
   color: $navy;
-  padding: $spacing-3;
+  padding: rem(14);
   background: $white;
   font-weight: $font-weight-medium;
   box-shadow: 0 0 8px rgba(#000, 0.2);
   position: fixed;
-  bottom: $spacing-2;
+  bottom: $spacing-8;
   right: $spacing-2;
   transition:
     transform 0.2s,

src/templates/office-library-home.twig

@@ -21,3 +21,10 @@
     {% endblock %}
   {% endembed %}
 {% endblock %}
+
+{% block scripts %}
+  <script src="js/main.bundle.js" async></script>
+  {% if env.vercel or not env.production %}
+    <script src="//middlebury.libanswers.com/load_chat.php?hash=7799596699468240cefaabd896f80a52"></script>
+  {% endif %}
+{% endblock %}

src/templates/partials/midd-footer.twig

@@ -2,8 +2,8 @@
   <h2 class="sr-only">
     Additional Navigation
   </h2>
-  <div class="container">
-    <div class="row">
+  <div class="container px-0">
+    {# <div class="row"> #}
       <div class="col-lg-3">
         <div class="mb-4 mb-lg-0">
           <a href="https://www.middlebury.edu">
@@ -25,7 +25,7 @@
           {% endfor %}
         </ul>
       </div>
-    </div>
+    {# </div> #}
   </div>
   {% include 'partials/to-top-btn.twig' %}
 </nav>