remove old hours CSS

components/hours-widget.html

@@ -0,0 +1,61 @@
+<div id="hours-content-container">
+        <div id="hours-content"></div>
+        <p>See our <a href="https://library.kbcc.cuny.edu/calendar">hours</a> page for more info.</p>
+</div>
+
+<script>
+
+$(document).ready(function(){
+
+// a function to add the offset
+Date.prototype.addHours= function(h){
+    this.setHours(this.getHours()+h);
+    return this;
+}
+
+$.ajax({
+  url: "https://kbcc-cuny.libcal.com/widget/hours/grid?iid=5570&format=json&weeks=1&systemTime=0",
+  type: 'GET',
+  cache: false,
+  dataType: 'jsonp'
+})
+  .done( function (data) {
+    for (let i = 0; i < data.locations.length; i++) {
+      if (data.locations[i].lid === 16733) {
+        weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+        for (let j = 0; j < weekdays.length; j++) {
+          let x = weekdays[j];
+          hours = data.locations[i].weeks[0][x]["rendered"];
+          currently = data.locations[i].weeks[0][x]["times"]["currently_open"];
+          let start_and_end = hours.split(" - ");
+          let target_date = new Date(data.locations[i].weeks[0][x]["date"]);
+          offset = target_date.getTimezoneOffset() / 60;
+          target_date.addHours(offset);
+          let today = new Date()
+          let isToday = (today.toDateString() == target_date.toDateString());
+          if (isToday) {
+            if (start_and_end.length === 1) {
+              document.getElementById("hours-content").innerHTML += "The library is <strong>CLOSED</strong> today.<br />"
+            } else if (currently) {
+              document.getElementById("hours-content").innerHTML += "The library is currently <strong>OPEN</strong>.<br />Today's hours are <strong>" + hours + "</strong>.<br />";
+            } else {
+              document.getElementById("hours-content").innerHTML += "The library is currently <strong>CLOSED</strong>.<br />Today's hours are <strong>" + hours + "</strong>.<br />";
+            }
+          }
+        } 
+      }   
+    }
+  })
+});
+
+</script>
+
+<style>
+
+#hours-content-container {
+        margin-top: -10px;
+        text-align: center;
+        font-size: 1.7em;
+}
+
+</style>

configuration/main.js

@@ -0,0 +1,245 @@
+const navComponent = {
+  template:
+    `<a>
+      <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+        <div class="caret-text">{{ navkey }}</div>
+        <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
+      </a>
+      <ul class="dropdown-menu fade dropdown-margin">
+        <li>
+          <a v-for="item in navmenu" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
+            <div class="bigger-fancy-text">
+              <i v-bind:class="item.icon" aria-hidden="true"></i>
+              <strong>{{ item.description }}</strong>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </a>`,
+  props: ['navmenu', 'navkey']
+}
+
+const menusComponent = {
+  template:
+  `<div class="bigger-fancy-text">
+    <i v-bind:class="item.icon" aria-hidden="true"></i>
+    <strong>{{ item.description }}</strong>
+  </div>`,
+   props: ['item'] 
+}
+
+
+new Vue({
+  el: '#app',
+  components: {
+    'nav-component': navComponent,
+    'menus-component': menusComponent
+  },
+  data() {
+    return {
+      hamburger: [
+        {
+          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
+          icon: "fas fa-search fa-fw bigger-icon",
+          description: "OneSearch",
+          target_blank: "",
+          id: 1
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/az.php",
+          icon: "fas fa-database fa-fw bigger-icon",
+          description: "Databases A to Z",
+          target_blank: "",
+          id: 2
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/guides",
+          icon: "fas fa-telescope fa-fw bigger-icon",
+          description: "Research Guides",
+          target_blank: "",
+          id: 3
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/faq",
+          icon: "fas fa-question-circle fa-fw bigger-icon",
+          description: "FAQ",
+          target_blank: "",
+          id: 4
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/calendar",
+          icon: "fas fa-clock fa-fw bigger-icon",
+          description: "Library Hours",
+          target_blank: "",
+          id: 5
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/sitemap",
+          icon: "fas fa-location-arrow fa-fw bigger-icon",
+          description: "Site Map",
+          target_blank: "",
+          id: 6
+        }
+      ],
+      navListOfMenus: { 
+        "Find It": [
+          {
+            link: "https://library.kbcc.cuny.edu/az.php",
+            icon: "fas fa-database fa-fw bigger-icon",
+            description: "Databases A to Z",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
+            icon: "fas fa-newspaper fa-fw bigger-icon",
+            description: "Newspaper Search",
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
+            icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
+            description: "Course Reserves",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
+            icon: "fas fa-book fa-fw bigger-icon",
+            description: "Search for Specific Journals",
+            target_blank: "",
+            id: 4
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/academicworks",
+            icon: "fas fa-archive fa-fw bigger-icon",
+            description: "CUNY Academic Works",
+            target_blank: "_blank",
+            id: 5
+          },
+          {
+            link: "https://www.bkstr.com/kingsboroughccstore/home",
+            icon: "fas fa-cash-register fa-fw bigger-icon",
+            description: "KBCC Bookstore",
+            target_blank: "_blank",
+            id: 6
+          }
+        ],
+        "Services": [
+          {
+            link: "http://kbcc.cuny.illiad.oclc.org/illiad/logon.html",
+            icon: "fas fa-books fa-fw bigger-icon",
+            description: "Interlibrary Loan",
+            target_blank: "_blank",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
+            icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
+            description: "Book a Library Instruction Session" ,
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/mediaservices",
+            icon: "fas fa-photo-video fa-fw bigger-icon",
+            description: "Media Services",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://kbcc-cuny.libwizard.com/f/bookrequest",
+            icon: "fas fa-shopping-basket fa-fw bigger-icon",
+            description: "Suggest a Book for Purchase",
+            target_blank: "",
+            id: 4
+          },
+          {
+            link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
+            icon: "fas fa-bookmark fa-fw bigger-icon",
+            description: "Suggest an Item to Add to Reserves",
+            target_blank: "",
+            id: 5
+          }
+        ],
+        "About Us": [
+          {
+            link: "https://library.kbcc.cuny.edu/about-us/directory",
+            icon: "fas fa-address-book fa-fw bigger-icon",
+            description: "Faculty & Staff Directory",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/newarrivals",
+            icon: "far fa-mail-bulk fa-fw bigger-icon",
+            description: "New Arrivals",
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/about-us/liaisons",
+            icon: "fas fa-theater-masks fa-fw bigger-icon",
+            description: "Subject Liaisons",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/social",
+            icon: "far fa-hashtag fa-fw bigger-icon",
+            description: "Social Media",
+            target_blank: "",
+            id: 4
+          }
+        ],
+        "Location & Hours": [
+          {
+            link: "https://tour.kingsborough.edu/",
+            icon: "fas fa-map-marked-alt fa-fw bigger-icon",
+            description: "Campus Map",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/calendar",
+            icon: "fas fa-clock fa-fw bigger-icon",
+            description: "Library Hours",
+            target_blank: "",
+            id: 2
+          }
+        ],
+        "Help": [
+          {
+            link: "https://library.kbcc.cuny.edu/askalibrarian",
+            icon: "fas fa-book-reader fa-fw bigger-icon",
+            description: "Ask A Librarian",
+            target_blank: "",
+            id: 1
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/faq",
+            icon: "fas fa-question-circle fa-fw bigger-icon",
+            description: "FAQ",
+            target_blank: "",
+            id: 2
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/guides",
+            icon: "fas fa-telescope fa-fw bigger-icon",
+            description: "Research Guides and Tutorials",
+            target_blank: "",
+            id: 3
+          },
+          {
+            link: "https://library.kbcc.cuny.edu/ENGLISH24",
+            icon: "fas fa-question fa-fw bigger-icon",
+            description: "How to Use the Library",
+            target_blank: "",
+            id: 4
+          }
+        ]
+  	  }
+    }
+  }
+});

groups/home/LibAnswers-6-js-css.html

@@ -65,7 +65,7 @@ body {
 #corona-alert {
         text-align: center;
         background-color: #faf870;
-        padding: 5px 15px;
+        padding: 5px 50px;
         cursor: pointer;
 }
 #corona-alert-text {
@@ -74,7 +74,7 @@ body {
 }
 
 /* style navbar */
-nav.navbar-default.yamm {
+nav.navbar-default.main-nav-container {
         background-color: white;
         border: none;
         font-size: 1.4em;
@@ -94,14 +94,13 @@ nav.navbar-default.yamm {
 .ga-main-navbar { 
         font-size: 1.3em;
 }
-.faux-card {
-        margin-left: 16px;
-}
 #dropdownMenu1 { border-radius: 0; }
-a.searchmenu { color: var(--text); }
+a.searchmenu {
-.highlight-menu-item { padding: 2px; }
+        color: var(--text);
+        text-decoration: none;
+}
+.highlight-menu-item { padding: 5px; }
 .highlight-menu-item:hover {
-        background-color: #eee;
         cursor: pointer;
 }
 
@@ -129,6 +128,27 @@ a.searchmenu { color: var(--text); }
         margin-right: -2px;
 }
 
+.zero-margin { margin: -2px; }
+
+/* add flex so that blue box-shadows line up */
+#flex-search-form {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+}
+.inherit-height-from-flex { height: inherit; }
+ 
+/* shadow for the search bar */
+#blue-border1 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
+}
+#blue-border2 {
+        box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
+}
+#blue-border3 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), 5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
+}
+
 /* style for nav by the jumbotron */
 .nav-divs-by-jumbotron {
         text-align: center;
@@ -185,6 +205,12 @@ a.no-underline { text-decoration: none; }
 .s-lib-public-side-header { display: none; }
 .slick-active { outline: 0; }
 
+/* style to make all imported boxes floating */
+.s-lib-box-title {display: none;}
+ .s-lg-box {box-shadow: none !important;}
+.s-lib-box .s-lib-box-title {display: none;}
+.s-lib-box {box-shadow: none !important; border: 0 !important;}
+
 /* style the hours */
 .hours { text-align:center; }
 .hours-panel-body { padding: 10px 5px 0 5px; }
@@ -227,10 +253,6 @@ a.no-underline { text-decoration: none; }
 .open > a > .fancy-caret { margin-bottom: -4px; vertical-align: -4px; display: inline-block; }
 .open > a > .caret-text { vertical-align: -1px; }
 
-/* additional styling for OneSearch dropdown */
-.yamm4 { max-width: 460px; }
-#yamm4-margins { margin: -15px 0; }
-
 /* style footer */
 #orange-line {
         height:10px; 
@@ -259,9 +281,8 @@ a.no-underline { text-decoration: none; }
                max-width: 100%;
                max-height: 150px;
         }
-        nav.navbar-default.yamm { margin-top: -20px; }
+        nav.navbar-default.main-nav-container { margin-top: -20px; }
         .form-width { width: 210px; }
-        .zero-margin { margin: 7px auto; }
         .nav-by-jumbotron { margin-top: 40px !important; }
         #main-blue-footer { min-height: 450px; }
         .library-address { float: left; }
@@ -278,31 +299,10 @@ a.no-underline { text-decoration: none; }
 
 @media only screen and (max-width: 768px) {
         #login-text { display: none; }
+        #defineYourSearch { display: none; }
 }
 
 @media only screen and (min-width: 768px) {
-        .zero-margin { margin: -2px; }
-
-        /* add flex so that blue box-shadows line up */
-        #flex-search-form {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-        }
-        .inherit-height-from-flex {
-                height: inherit;
-        }
- 
-        /* shadow for the search bar */
-        #blue-border1 {
-                box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
-        }
-        #blue-border2 {
-                box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
-        }
-        #blue-border3 {
-                box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), 5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
-        }
 
         .nav-by-jumbotron { margin-top: 0 !important; }
         #lighthouse-logo {
@@ -328,7 +328,6 @@ a.no-underline { text-decoration: none; }
 
 @media only screen and (min-width: 1px) and (max-width: 992px) {
         #hamburger-alternative { display: none; }
-        #corona-alert { margin-top: 10px; }
 }
 
 @media only screen and (min-width: 992px) {
@@ -344,34 +343,6 @@ a.no-underline { text-decoration: none; }
 @media only screen and (min-width: 1200px)  {
          #library-logo { margin-top: -3px; }
 }
-
-/*!
- * Yamm!3 - Yet another megamenu for Bootstrap 3
- * http://geedmo.github.com/yamm3
- *
- * @geedmo - Licensed under the MIT license
- */
-.yamm .nav,
-.yamm .collapse,
-.yamm .dropup,
-.yamm .dropdown {
-  position: static;
-}
-.yamm .container {
-  position: relative;
-}
-.yamm .dropdown-menu {
-  left: auto;
-}
-.yamm .yamm-content {
-  padding: 20px 30px;
-}
-.yamm .dropdown.yamm-fw .dropdown-menu {
-  left: 0;
-  right: 0;
-}
-/* End of Yamm */
-
 </style>
 
 <!-- trigger menu open when you hover over dropdowns
@@ -403,42 +374,6 @@ jQuery(function(){
 });
 </script>
 
-<!-- the configuration file for the hours widget -->
-<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/hours-babel.js"></script>
-
-<!-- the code for the hours widget -->
-<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
-<script type="text/javascript">
-function hoursFunction() {
-        const h = JSON.parse(hours);
-        const options_weekday = { weekday: 'long' };
-        const options_weekday_short = { weekday: 'short' };
-        const options_date = { month: 'short', day: 'numeric' };
-        for (var i = 0; i < h.length; i++) {
-                let targetDate = new Date(h[i].Date + "T00:00:00.000-05:00");
-                let today = new Date();
-                if (window.innerWidth < 500) {
-                    weekday = targetDate.toLocaleDateString("en-US", options_weekday_short)
-                } else { 
-                    weekday = targetDate.toLocaleDateString("en-US", options_weekday)
-                }
-                if (targetDate.getFullYear() === today.getFullYear() &&
-                    targetDate.getMonth() === today.getMonth() &&
-                    targetDate.getDate() === today.getDate()) {
-                           document.getElementById('hours0').innerHTML = "<p><strong>Today</strong><br />" + targetDate.toLocaleDateString("en-US", options_date) + "<br />" + h[i].Hours + "</p>";
-                           var start = true;
-                           var count = 1;
-                } else if (start === true && count < 3 && h[i].Hours === "Closed" ) {
-                        document.getElementById('hours' + count).innerHTML = "<span style='color:#666;'><p>" + weekday + "<br />" + targetDate.toLocaleDateString("en-US", options_date) + "<br />" + h[i].Hours + "</p></span>";
-                        count++;
-               } else if (start === true && count < 3 && h[i].Hours != "Closed") {
-                        document.getElementById('hours' + count).innerHTML = "<p>" + weekday + "<br />" + targetDate.toLocaleDateString("en-US", options_date) + "<br />" + h[i].Hours + "</p>";
-                        count++;
-               }
-        }
-};
-</script>
-
 <!-- polyfills to make .forEach and .includes work in IE10 and IE11 -->
 <script type="text/javascript">
 if (window.NodeList && !NodeList.prototype.forEach) {
@@ -469,7 +404,7 @@ function customizeSearch(facet) {
         if (facet === "Books") {
                 document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,books" type="hidden" class="deleteWithDropdownChange" />');
         } else if (facet === "Articles") {
-                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="mfacet" value="rtype,include,newspaper_articles,1" type="hidden" class="deleteWithDropdownChange" />');
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" class="deleteWithDropdownChange" />');
         } else if (facet === "Videos") {
                 document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,videos" type="hidden" class="deleteWithDropdownChange" />');
         } else if (facet === "Journals") {
@@ -525,10 +460,9 @@ function addPrimoQuery(e) {
 }
 </script>
 
-<!-- run the hours widget and the sessionStorage stuff on load -->
+<!-- run the sessionStorage stuff on load -->
 <script>
 window.onload = function () {
-        hoursFunction()
         sessionFunction()
 }
 </script>

groups/home/LibAnswers-7-js-css.html

@@ -0,0 +1,444 @@
+<style>
+
+:root {
+        --kbccblue: #003466;
+        --kbccorange: #ff4e00;
+        --text: #111;
+}
+
+body {
+        color: var(--text);
+        overflow-x: hidden;
+}
+
+a, a:hover { text-decoration: none; }
+
+/* style slide out chat */
+#lcs_slide_out_button-21944 { font-size: 1.5em; }
+
+/* style header */
+#header-div {
+        padding: 30px;
+}
+
+/* style the hamburger menu */
+#hamburger-container { float: left; }
+#hamburger, #hamburger:active { 
+        border: none;
+        outline: none;
+        background-color: #fff;
+        color: var(--kbccblue)
+}
+#hamburger-ul > li > .searchmenu { background-color: #fff; }
+#hamburger-ul { padding: 25px 0; }
+
+/* have bootstrap dropdowns fade in and out */
+.dropdown-menu.fade {
+        display: block;
+        opacity: 0;
+        pointer-events: none;
+}
+.open > .dropdown-menu.fade {
+        pointer-events: auto;
+        opacity: 1;
+}
+.fade {
+        -webkit-transition-duration: 5s; /* Safari */
+        transition-duration: 0.5s;
+}
+.dropdown:hover .dropdown-menu {
+        display: block;
+}
+
+/* style the login at the top right */
+#login-div {
+        float: right;
+        padding: 8px 15px 0 0;
+        color:var(--kbccblue);
+        font-size:1.5em;
+}
+#login-text {
+        display: inline-block;
+        vertical-align: -2px;
+}
+#login-icon { display: inline-block; }
+
+/* style alert */
+#corona-alert {
+        text-align: center;
+        background-color: #faf870;
+        padding: 5px 50px;
+        cursor: pointer;
+}
+#corona-alert-text {
+        color: var(--text);
+        font-size: 1.5em;
+}
+
+/* style navbar */
+nav.navbar-default.main-nav-container {
+        background-color: white;
+        border: none;
+        font-size: 1.4em;
+        color: var(--text);
+        border-radius: 0;
+}
+.dropdown > .ga-main-navbar, .dropdown > .ga-main-navbar:hover, .dropdown > .ga-main-navbar:active {
+        outline: none;
+        border: none;
+}
+.navbar-default .navbar-nav > li > a { color: var(--text); }
+#navbar-center {
+        display: flex;
+        justify-content: left;
+        float: none;
+}
+.ga-main-navbar { 
+        font-size: 1.3em;
+}
+#dropdownMenu1 { border-radius: 0; }
+a.searchmenu {
+        color: var(--text);
+}
+.highlight-menu-item { padding: 5px; }
+.highlight-menu-item:hover {
+        cursor: pointer;
+}
+
+/* style background image */
+.kbcc-background-image {
+        background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.6) 100%), url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
+        background-position: 50% 71%;
+        padding: 20px 0;
+        border-radius: 5px;
+        background-size: cover;
+        margin: -30px 0 30px 0;
+}
+
+/* style jumbotron */
+.onesearch-jumbotron {
+        text-align: center;
+        margin-top: -40px;
+}
+#onesearch-header {
+        font-size: 10em;
+        margin-bottom: 0;
+}
+.zero-margin {
+        margin-left: -2px;
+        margin-right: -2px;
+}
+
+.zero-margin { margin: -2px; }
+
+/* add flex so that blue box-shadows line up */
+#flex-search-form {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+}
+.inherit-height-from-flex { height: inherit; }
+ 
+/* shadow for the search bar */
+#blue-border1 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
+}
+#blue-border2 {
+        box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
+}
+#blue-border3 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), 5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
+}
+
+/* style for nav by the jumbotron */
+.nav-divs-by-jumbotron {
+        text-align: center;
+        padding: 6px;
+        margin: 6px 0;
+        color: white;
+        background-color: var(--kbccblue);
+        border-radius: 3px;
+}
+.nav-divs-by-jumbotron > h2 {
+        font-size: 1.5em;
+        margin-bottom: 4px;
+        margin-top: 4px;
+}
+.nav-divs-by-jumbotron:hover { background-color: #444; }
+#eq_32886 { 
+        background-color: var(--kbccblue);
+        border: none;
+}
+.nav-divs-by-jumbotron:hover > h2 > #eq_32886, #eq_32886:hover { background-color: #444; }
+#bookastudyroom { cursor: pointer; }
+
+/* style link list */
+.link-list { font-size: 1.7em; }
+
+/* style the panels with the text content */
+.panel > .show-panel {
+        background-color: var(--kbccblue);
+        text-align: center;
+}
+.hide-body-border {
+       border: none;
+       box-shadow: none;
+}
+.glyphicon-panel-title { font-size: 2em; }
+.content-panel-title {
+        color: white;
+        font-size: 2em;
+}
+.content-panel-title > h2 {
+        margin: 7px 0;
+        font-size: 1em;
+}
+.panel-heading { padding: 2px; }
+
+/* style the gallery */
+.slick-slide img {
+        padding: 2px;
+        max-height: 350px !important;
+        object-fit: contain;
+        margin: 0;
+}
+.s-lib-public-side-header { display: none; }
+.slick-active { outline: 0; }
+
+/* style to make all imported boxes floating */
+.s-lib-box-title {display: none;}
+ .s-lg-box {box-shadow: none !important;}
+.s-lib-box .s-lib-box-title {display: none;}
+.s-lib-box {box-shadow: none !important; border: 0 !important;}
+
+/* style the dropdown menus */
+.dropdown-margin { padding: 20px 0; }
+.bigger-fancy-text { font-size: 1.2em; padding: 5px; }
+.bigger-icon { font-size: 1.5em; margin-right: 8px; }
+.caret-text { display: inline-block; color: var(--kbccblue); font-weight: bold; }
+.fancy-caret { display: inline-block; margin-left: 2px; color: var(--kbccblue); }
+.open > a > .fancy-caret { margin-bottom: -4px; vertical-align: -4px; display: inline-block; }
+.open > a > .caret-text { vertical-align: -1px; }
+
+/* style footer */
+#orange-line {
+        height:10px; 
+        background-color: var(--kbccorange);
+}
+#main-blue-footer {
+        background-color: var(--kbccblue);
+        color: white; 
+        padding: 30px;
+}
+.whiteahrefs a:link, .whiteahrefs a:hover, .whiteahrefs a:visited, .whiteahrefs a:active { 
+        color: white;
+}
+.whiteahrefs a i {
+        margin: 4px 5px 0 0;
+        font-size: 1.5em
+}
+.whiteahrefs { margin-top: 10px; }
+#lighthouse-logo > a > img { max-width: 150px; }
+
+/* media queries */
+
+@media only screen and (min-width: 1px)  {
+        #library-logo {
+               max-width: 100%;
+               max-height: 150px;
+        }
+        nav.navbar-default.main-nav-container { margin-top: -20px; }
+        .form-width { width: 210px; }
+        .nav-by-jumbotron { margin-top: 40px !important; }
+        #main-blue-footer { min-height: 450px; }
+        .library-address { float: left; }
+        #cuny-logo {
+                float: left;
+                clear: both;
+                margin-top: 10px;
+        }
+        .libapps {
+                float: left; 
+                clear: left;
+        }
+}
+
+@media only screen and (max-width: 768px) {
+        #login-text { display: none; }
+        #defineYourSearch { display: none; }
+}
+
+@media only screen and (min-width: 768px) {
+
+        .nav-by-jumbotron { margin-top: 0 !important; }
+        #lighthouse-logo {
+                display: inline-block;
+                float: left;
+        }
+        #main-blue-footer { min-height: 210px; }
+        .library-address {
+                display: inline-block;
+                margin: -10px 30px;
+                font-size: 1.1em;
+        }
+        #cuny-logo {
+                float: right;
+                clear: none;
+                margin: -10px 0;
+        }
+        .libapps {
+                float: right; 
+                clear: both;
+        }
+}
+
+@media only screen and (min-width: 1px) and (max-width: 992px) {
+        #hamburger-alternative { display: none; }
+}
+
+@media only screen and (min-width: 992px) {
+        #header-div { text-align: center; }
+        #hamburger, #hamburger-ul { display: none; }
+        #library-logo {
+               max-width: 100%;
+               max-height: 350px;
+        }
+       .form-width { width: 340px; }
+}
+
+@media only screen and (min-width: 1200px)  {
+         #library-logo { margin-top: -3px; }
+}
+</style>
+
+<!-- trigger menu open when you hover over dropdowns
+<script>
+$(document).ready(function(){
+       // on tablets, trigger the dropdown on touchend, since there is no hover
+       if (navigator.userAgent.match(/iPad/i) != null) {
+               $('.dropdown.main-nav-dropdown').on('touchend', function() {
+                       $(this).click();
+                });
+        } else {
+        // else trigger dropdown on hover
+                $('.dropdown.main-nav-dropdown').mouseenter(function() {
+                        $(this).addClass('open');
+                });
+                $('.dropdown.main-nav-dropdown').mouseleave(function() {
+                        $(this).removeClass('open');
+                });
+        };
+});
+</script>
+-->
+
+<!-- scripts to make the Book a Study Room widget run -->
+<script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script>
+<script>
+jQuery(function(){
+   jQuery("#eq_32886, #bookastudyroom").LibCalEquipmentBooking({iid: 5570, gid: 32886, eid: 0, width: 560, height: 680});
+});
+</script>
+
+<!-- polyfills to make .forEach and .includes work in IE10 and IE11 -->
+<script type="text/javascript">
+if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}
+
+String.prototype.includes = function(match) {
+    return this.indexOf(match) !== -1;
+}
+</script>
+
+
+<!-- script to make OneSearch dropdown work -->
+<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
+<script type="text/javascript">
+function customizeSearch(facet) {
+        // re-render the dropdown menu with the current pick
+        document.getElementById('dropdownMenu1').innerHTML = facet + ' <span class="caret"></span>';
+        document.getElementById("primoQueryTemp").setAttribute("placeholder", "Enter search term here");      
+        
+        // reset any previously selected facets
+        document.querySelectorAll('.deleteWithDropdownChange').forEach( function(e) { e.remove(); });
+        document.getElementById("formToAppendInputsTo").setAttribute("action", "https://cuny-kb.primo.exlibrisgroup.com/discovery/search");
+        document.getElementById("tabSetting").setAttribute("value", "Everything");
+        document.getElementById("SearchScopeSetting").setAttribute("value", "IZ_CI_AW");
+
+        // add the facet that matches the user's dropdown selection
+        if (facet === "Books") {
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,books" type="hidden" class="deleteWithDropdownChange" />');
+        } else if (facet === "Articles") {
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" class="deleteWithDropdownChange" />');
+        } else if (facet === "Videos") {
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,videos" type="hidden" class="deleteWithDropdownChange" />');
+        } else if (facet === "Journals") {
+                document.getElementById("formToAppendInputsTo").setAttribute('action', 'https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch');
+                document.getElementById("tabSetting").setAttribute("value", "jsearch_slot");
+        } else if (facet === "Newspapers") {
+                document.getElementById("formToAppendInputsTo").setAttribute('action', 'https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch');
+        } else if (facet === "Reserves") {
+                document.getElementById("tabSetting").setAttribute("value", "CourseReserves");
+                document.getElementById("SearchScopeSetting").setAttribute("value", "CourseReserves");
+        } else {
+                console.log("no match");
+        }
+
+        // store the facet, for use on page reload
+        sessionStorage.facet = facet;
+}
+
+// if the stored facet exists on page load, render the dropdown with that facet, then clear the stored facet
+function sessionFunction() {
+        if (sessionStorage.facet && sessionStorage.searchTerms) {
+               stored_terms = sessionStorage.searchTerms;
+               document.getElementById("primoQueryTemp").value = stored_terms;
+               stored_facet = sessionStorage.facet;
+               customizeSearch(stored_facet);
+        }
+        sessionStorage.clear();
+};
+</script>
+
+<!-- OneSearch widget script from OLS, modified -->
+<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
+<script type="text/javascript">
+
+function addPrimoQuery(e) {
+        // prevent the user from submitting the form if no dropdown item has been selected. Added by ME.
+        e.preventDefault();
+        e.stopPropagation();
+        if (document.getElementById("dropdownMenu1").innerHTML.includes('Define') === true) {
+                $("#dropdownMenu1").trigger('click.bs.dropdown.data-api');
+                document.getElementById("primoQueryTemp").value = "";
+                document.getElementById("primoQueryTemp").setAttribute("placeholder", "Please make a selection");
+                return true;
+        };
+
+       // save the search terms, for use on page reload
+       sessionStorage.searchTerms = document.getElementById("primoQueryTemp").value;
+
+       // original OLS widget
+       document.getElementById("primoQuery").value = "any,contains," + document.getElementById("primoQueryTemp").value.replace(/[,]/g, " ");
+       // If you changed the form name at the top, change it below to match
+       document.forms.searchPrimoForm1.submit();
+}
+</script>
+
+<!-- run the sessionStorage stuff on load -->
+<script>
+window.onload = function () {
+        sessionFunction()
+}
+</script>
+
+<!-- FontAwesome -->
+<script src="https://kit.fontawesome.com/4c28f38a07.js" crossorigin="anonymous"></script>
+
+<!-- If browser is IE, run an alternate version of lg-public.min.js with no ECMAscript 6 -->
+<script type="text/javascript">
+if (window.document.documentMode) {
+  document.write('<script src="//libapps.s3.amazonaws.com/sites/2365/include/lg-public.min.js"><\/script>');
+}
+</script>

groups/home/LibAnswers-SlideOutChat-6.html

@@ -7,6 +7,8 @@
         <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
 		<div id="s-lg-index-cols">
                          <div class="row">
+                         <!--<div id="obsolete_browser_alert" class="alert alert-danger obsolete_browser_alert">It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.</div>-->
+                         <div id="app">
                                 <div class="col-xs-12" id="header-div">
                                         <div class="dropdown" id="hamburger-container">
                                                 <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" id="hamburger">
@@ -78,7 +80,7 @@
                          </div>
                          <div class="row" id="hamburger-alternative">
                                 <div class="col-xs-12">
-                                        <nav class="navbar navbar-default yamm">
+                                        <nav class="navbar navbar-default main-nav-container">
                                                 <div class="container-fluid">
                                                         <ul class="nav navbar-nav" id="navbar-center">
                                                                 <li class="dropdown main-nav-dropdown">
@@ -87,43 +89,7 @@
                                                                                 <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
                                                                         </a>
                                                                         <ul class="dropdown-menu fade dropdown-margin">
-                                                                                <li>
+                                                                                <li v-for="item in findIt">
-                                                                                        <a class="searchmenu" aria-label="Databases A to Z" href="https://library.kbcc.cuny.edu/az.php">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-database fa-fw bigger-icon" aria-hidden="true"></i> 
-                                                                                                        <strong>Databases A-Z</strong> 
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Newspaper Search" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-newspaper fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Newspaper Search</strong> 
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Course Reserves" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves">
-                                                                                               <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-cloud-download-alt fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Course Reserves</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="Journal Search" href="https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-book fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>Search for Specific Journals</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="CUNY Academic Works" href="https://library.kbcc.cuny.edu/academicworks" target="_blank">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-archive fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>CUNY Academic Works</strong>
-                                                                                                </div>
-                                                                                        </a>
-                                                                                        <a class="searchmenu" aria-label="KBCC Bookstore" href="https://www.bkstr.com/kingsboroughccstore/home" target="_blank">
-                                                                                                <div class="bigger-fancy-text">
-                                                                                                        <i class="fas fa-cash-register fa-fw bigger-icon" aria-hidden="true"></i>
-                                                                                                        <strong>KBCC Bookstore</strong>
-                                                                                                </div>
-                                                                                        </a>
                                                                                 </li>
                                                                         </ul>
                                                                 </li>
@@ -257,12 +223,13 @@
                                                 </div>
                                         </nav>
                                 </div>
+                        </div><!-- end Vue app -->
                         </div>
                 </div>
                 <div class="container" style="margin-top:14px;">
 			<div class="row kbcc-background-image">
                                  <div class="col-sm-8">
-				         <form class="form-inline yamm onesearch-jumbotron" name="searchPrimoForm1" role="search" method="get" action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search" onsubmit="addPrimoQuery();" enctype="application/x-www-form-urlencoded; charset=utf-8" id="formToAppendInputsTo">
+				         <form class="form-inline onesearch-jumbotron" name="searchPrimoForm1" role="search" method="get" action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search" onsubmit="addPrimoQuery();" enctype="application/x-www-form-urlencoded; charset=utf-8" id="formToAppendInputsTo">
                                                  <!-- default is "everything"  option suggested from OLS widget builder -->
                                                  <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
                                                  <input name="tab" value="Everything" type="hidden" id="tabSetting" />
@@ -283,68 +250,40 @@
                                                  <div class="form-group" id="flex-search-form">
                                                          <div class="dropdown input-group zero-margin" id="blue-border1">
                                                                  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                                                                         Define Your Search <span class="caret"></span>
+                                                                         <span id="defineYourSearch">Define Your Search </span><span class="caret"></span>
                                                                  </button>
-                                                                 <ul class="dropdown-menu fade" aria-labelledby="dropdownMenu1">
+                                                                 <ul class="dropdown-menu fade dropdown-margin" aria-labelledby="dropdownMenu1">
                                                                          <li>
-                                                                                 <div class="yamm-content yamm4">
-                                                                                         <div class="row" id="yamm4-margins">
                                                                                  <a class="searchmenu" onclick="customizeSearch('Books')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
                                                                                                  <strong>Books</strong>
-                                                                                                                 <p class="faux-card">Find print books and ebooks using OneSearch</p>
                                                                                          </div>
                                                                                  </a>
                                                                                  <a class="searchmenu" onclick="customizeSearch('Articles')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item"> 
+                                                                                         <div class="highlight-menu-item bigger-fancy-text"> 
-                                                                                                                 <strong>Articles</strong>
+                                                                                                 <strong>Articles (Peer Reviewed)</strong>
-                                                                                                                  <p class="faux-card">Find articles in journals, newspapers and magazines using OneSearch</p>
-                                                                                                          </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Videos')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Videos</strong>
-                                                                                                                 <p class="faux-card">Find DVDs and streaming videos using OneSearch</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Books & more')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Books, articles and videos</strong>
-                                                                                                                 <p class="faux-card">Search for books, articles & videos using OneSearch</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Advanced Search</strong>
-                                                                                                                 <p class="faux-card">Use OneSearch's advanced interface</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a href="https://library.kbcc.cuny.edu/az.php" class="searchmenu">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Databases</strong>
-                                                                                                                 <p class="faux-card">See our A to Z list and find databases by subject</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Journals')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                  <strong>Journals</strong>
-                                                                                                                  <p class="faux-card">Find specific scholarly journals (peer reviewed)</p>
-                                                                                                         </div>
-                                                                                                 </a>
-                                                                                                 <a class="searchmenu" onclick="customizeSearch('Newspapers')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
-                                                                                                                 <strong>Newspapers and magazines</strong>
-                                                                                                                 <p class="faux-card">Find specific newspapers and magazines</p>
                                                                                          </div>
                                                                                  </a>
                                                                                  <a class="searchmenu" onclick="customizeSearch('Course Reserves')">
-                                                                                                         <div class="col-xs-12 highlight-menu-item">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
                                                                                                  <strong>Course reserves</strong>
-                                                                                                                 <p class="faux-card">Find reserve materials for your classes</p>
                                                                                          </div>
                                                                                  </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Newspapers')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Newspapers and magazines</strong>
                                                                                          </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Journals')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                  <strong>Journals</strong>
                                                                                          </div>
+                                                                                 </a>
+                                                                                 <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Advanced Search</strong>
+                                                                                         </div>
+                                                                                 </a>
                                                                          <li>
                                                                  </ul>
                                                          </div>
@@ -403,8 +342,7 @@
                                                                        <ul class="link-list">
                                                                                <li><a href="https://library.kbcc.cuny.edu/ENGLISH24" class="ga-library-links">How to Use the Library</a></li>
                                                                                <li><a href="https://library.kbcc.cuny.edu/ebooks" class="ga-library-links">Find eTextbooks and eBooks</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/social" class="ga-library-links">Social Media</a></li>
+                                                                               <li><a href="https://library.kbcc.cuny.edu/video" class="ga-library-links">Streaming Video</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/faq" class="ga-library-links">FAQ</a></li>
                                                                        </ul>
                                                               </div>
                                                               <div class="col-sm-6">
@@ -412,7 +350,6 @@
                                                                                <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h" target="_blank" class="ga-library-links">Academic Search Complete</a></li>
                                                                                <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336" target="_blank" class="ga-library-links">US Newspapers</a></li>
                                                                                <li><a href="http://www.nytimes.com/passes" target="_blank" class="ga-library-links">NY Times Free Pass</a></li>
-                                                                               <li><a href="https://library.kbcc.cuny.edu/video" class="ga-library-links">Streaming Video</a></li>
                                                                        </ul>
                                                                </div>
                                                        </div>
@@ -420,39 +357,10 @@
                                         </div>
                                        <div class="panel panel-default hide-body-border">
                                                <div class="panel-heading show-panel">
-                                                       <span class="panel-title content-panel-title"><h2>Upcoming Library Hours</h2></span>
+                                                       <span class="panel-title content-panel-title"><h2>Today's Library Hours</h2></span>
                                                </div>
                                                <div class="panel-body">
-                                                       <div class="row equal">
+                                                      {{content_box_29248590}}
-                                                               <div class="col-xs-2 padding-0">
-                                                                        <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body hours-panel-body vertical-align">
-                                                                                      <span id="hours0" class="hours"></span>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                               <div class="col-xs-2 padding-0">
-                                                                       <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body hours-panel-body vertical-align">
-                                                                                      <span id="hours1" class="hours"></span>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                               <div class="col-xs-2 padding-0">
-                                                                       <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body hours-panel-body vertical-align">
-                                                                                       <span id="hours2" class="hours"></span>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                               <div class="col-xs-2 padding-0">
-                                                                       <div class="panel panel-default panel-outline-color">
-                                                                               <div class="panel-body vertical-align">
-                                                                                       <div class="more-link"><a href="https://library.kbcc.cuny.edu/calendar">More Hours</a></div>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
-                                                        </div>
                                                </div>
                                         </div>
                                 </div>
@@ -462,7 +370,7 @@
                                                        <span class="panel-title content-panel-title"><h2>Featured in the Library</h2></span>
                                                </div>
                                                <div class="panel-body">
-                                                       {{content_boxes}}                             
+                                                       {{content_box_25912431}}                             
                                                </div>
                                         </div>
                                 </div>
@@ -477,14 +385,14 @@
                                                 <a href="https://www.kbcc.cuny.edu"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png" alt="Kingsborough Lighthouse logo" /></a>
                                         </div>
                                         <div class="library-address">
-                                                <div>
+                                                <div class="whiteahrefs">
 			                                <strong>Robert J. Kibbee Library</strong><br />
                                                         2001 Oriental Blvd<br />
                                                         Brooklyn, NY, 11209<br />
-			                                718-368-5632
+			                                <a href="tel:+1-718-368-5632">718-368-5632</a>
                                                 </div>
                                                 <div class="whiteahrefs">
-                                                        <a href="mailto:reference.desk@kbcc.cuny.edu">reference.desk@kbcc.cuny.edu</a>
+                                                        <a href="https://kbcc-cuny.libwizard.com/f/reference">reference.desk@kbcc.cuny.edu</a>
                                                         <br />
                                                         <a aria-label="Twitter" href="https://twitter.com/KBCCLibrary" target="_blank"><i aria-hidden="true" class="fab fa-twitter"></i></a>
                                                         <a aria-label="Instagram" href="https://www.instagram.com/kbcclibrary/" target="_blank"><i aria-hidden="true" class="fab fa-instagram"></i></a>
@@ -528,4 +436,10 @@
 	<!-- END: Custom Footer -->
         <!-- LibChat widget script -->
         <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
+
+        <!-- add Vue scripts -->
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
+        <script type="text/javascript" src="https://libapps.s3.amazonaws.com/sites/2365/include/seed.js"></script>
+        <script type="text/javascript" src="https://libapps.s3.amazonaws.com/sites/2365/include/main.js"></script>
+
 </body>

groups/home/LibAnswers-SlideOutChat-7.html

@@ -0,0 +1,279 @@
+<body class="s-lib-public-body">
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
+        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+	<!-- BEGIN: content -->
+        <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
+		<div id="s-lg-index-cols">
+                 <div id="app"><!-- vue app -->
+                         <div class="row">
+                         <!--<div id="obsolete_browser_alert" class="alert alert-danger obsolete_browser_alert">It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.</div>-->
+
+
+                                <div class="col-xs-12" id="header-div">
+                                        <div class="dropdown" id="hamburger-container">
+                                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" id="hamburger">
+                                                        <i class="fas fa-bars" style="font-size: 2em;"></i>
+                                                </button>
+                                                <ul class="dropdown-menu fade" aria-labelledby="hamburger" id="hamburger-ul">
+                                                        <li>
+                                                                <a v-for="item in hamburger" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
+                                                                        <menus-component v-bind:item="item"></menus-component>
+                                                                </a>
+                                                       </li>
+                                               </ul>
+                                        </div><!-- end of hamburger container -->
+                                        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB" id="login-div">
+                                               <div id="login-text">Login</div>
+                                               <div id="login-icon"><i class="fas fa-user"></i></div>
+                                        </a>
+                                        <img id="library-logo" class="image-fail" alt="Kibbee Library logo" src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg" />
+                                         <div id="corona-alert" type="button" data-toggle="modal" data-target=".bs-example-modal-sm">
+                                                 <span id="corona-alert-text">No fines on KBCC books checked out before the pandemic! Just return them to any CUNY Library.</span>
+                                         </div>
+                                 </div><!-- end of header div -->
+                                 <!-- Modal -->
+                                 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+                                         <div class="modal-dialog modal-sm" role="document">
+                                                 <div class="modal-content" style="border-radius: 3px;">
+                                                         <div class="modal-body">
+                                                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="padding: 5px 5px 12px 12px;"><span aria-hidden="true">&times;</span></button>
+                                                                 <h4 class="modal-title" id="myModalLabel">Before returning books to another CUNY library, please make sure you have updated your vaccine information to Cleared4 or checked  rules for visiting that campus.</h4>
+                                                         </div>
+                                                 </div>
+                                         </div>
+                                 </div><!-- End of modal -->
+                         </div><!-- end of row -->
+                         <div class="row" id="hamburger-alternative">
+                                <div class="col-xs-12">
+                                        <nav class="navbar navbar-default main-nav-container">
+                                                <div class="container-fluid">
+                                                        <ul class="nav navbar-nav" id="navbar-center">
+                                                                <li v-for="(navmenu, navkey) in navListOfMenus" class="dropdown main-nav-dropdown">
+                                                                        <nav-component v-bind:navmenu="navmenu" v-bind:navkey="navkey"></nav-component>
+                                                                </li>
+                                                        </ul>
+                                                </div><!-- end of container-fluid -->
+                                        </nav><!-- end of main-nav-container -->
+                                </div><!-- end of col-xs-12 -->
+                        </div><!--end of row-->
+                </div><!--end of Vue app-->
+                </div>
+                <div class="container" style="margin-top:14px;">
+			<div class="row kbcc-background-image">
+                                 <div class="col-sm-8">
+				         <form class="form-inline onesearch-jumbotron" name="searchPrimoForm1" role="search" method="get" action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search" onsubmit="addPrimoQuery();" enctype="application/x-www-form-urlencoded; charset=utf-8" id="formToAppendInputsTo">
+                                                 <!-- default is "everything"  option suggested from OLS widget builder -->
+                                                 <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
+                                                 <input name="tab" value="Everything" type="hidden" id="tabSetting" />
+                                                 <input name="search_scope" value="IZ_CI_AW" type="hidden" id=SearchScopeSetting />
+                                                 <input name="mode" value="basic" type="hidden" />
+                                                 <input name="highlight" value="true" type="hidden" />
+                                                 <input name="displayMode" value="full" type="hidden" />
+                                                 <input name="bulkSize" value="10" type="hidden" />
+                                                 <input name="dum" value="true" type="hidden" />
+                                                 <input name="displayField" value="all" type="hidden" />
+                                                 <input name="pcAvailabiltyMode" value="false" type="hidden" />
+                                                 <input name="query" id="primoQuery" type="hidden" />
+                                                 <h1 id="onesearch-header">
+                                                         <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
+                                                                 <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
+                                                         </a>
+                                                 </h1>
+                                                 <div class="form-group" id="flex-search-form">
+                                                         <div class="dropdown input-group zero-margin" id="blue-border1">
+                                                                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                                                                         <span id="defineYourSearch">Define Your Search </span><span class="caret"></span>
+                                                                 </button>
+                                                                 <ul class="dropdown-menu fade dropdown-margin" aria-labelledby="dropdownMenu1">
+                                                                         <li>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Books')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Books</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Articles')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text"> 
+                                                                                                 <strong>Articles (Peer reviewed)</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Reserves')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Course reserves</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Newspapers')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Newspapers and magazines</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a class="searchmenu" onclick="customizeSearch('Journals')">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                  <strong>Journals</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                                 <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
+                                                                                         <div class="highlight-menu-item bigger-fancy-text">
+                                                                                                 <strong>Advanced search</strong>
+                                                                                         </div>
+                                                                                 </a>
+                                                                         <li>
+                                                                 </ul>
+                                                         </div>
+                                                         <label class="sr-only" for="primoQueryTemp">Search terms</label>
+                                                         <div class="input-group zero-margin form-width" id="blue-border2">
+                                                                 <input class="form-control form-width inherit-height-from-flex" name="queryTemp" id="primoQueryTemp" type="search" value="" placeholder="Enter search term here">
+                                                         </div>
+                                                         <div class="input-group zero-margin" id="blue-border3">
+                                                                 <input type="submit" class="btn btn-default form-control onesearchsubmit inherit-height-from-flex" value="Search" onclick="return addPrimoQuery(event);" />
+                                                         </div>
+                                                 </div>
+                                         </form>
+
+                                 </div>
+                                 <div class="col-sm-4">
+                                         <div class="nav-by-jumbotron">
+                                                 <a class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron" id="bookastudyroom">
+                                                                 <h2><button id="eq_32886">Book A Study Room</button></h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://library.kbcc.cuny.edu/az.php" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Databases</h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://library.kbcc.cuny.edu/guides" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Research Guides</h2>
+                                                         </div>
+                                                 </a>
+                                                 <a href="https://kbcc-cuny.libwizard.com/f/feedback" class="ga-by-jumbotron">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Send Us Feedback</h2>
+                                                         </div>
+                                                 </a>
+                                                 <!-- hide chat with a librarian 
+                                                 <a class="chat2" style="cursor: pointer;" onclick="(function() {if (window.document.documentMode || navigator.userAgent.indexOf('Edge/') > -1) { window.location.href = 'http://library.kbcc.cuny.edu/oldbrowser'; return false; } else {window.open('https://kbcc-cuny.libanswers.com/chat/widget/f7d1629a91e178fd0f799322e803b6e7', 'newwindow', 'width=500, height=400, top=100, left=100'); return false;};})()">
+                                                         <div class="nav-divs-by-jumbotron">
+                                                                 <h2>Chat with a Librarian!</h2>
+                                                         </div>
+                                                 </a>
+                                                 -->
+                                          </div>
+                                  </div>
+			</div>
+                        <div class="row">
+                                <div class="col-md-7 col-lg-6">
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Library Links</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       <div class="row">
+                                                               <div class="col-sm-6">
+                                                                       <ul class="link-list">
+                                                                               <li><a href="https://library.kbcc.cuny.edu/ENGLISH24" class="ga-library-links">How to Use the Library</a></li>
+                                                                               <li><a href="https://library.kbcc.cuny.edu/ebooks" class="ga-library-links">Find eTextbooks and eBooks</a></li>
+                                                                               <li><a href="https://library.kbcc.cuny.edu/video" class="ga-library-links">Streaming Video</a></li>
+                                                                               <li><a href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129" class="ga-library-links">Comic Books & Graphic Novels</a></li>
+                                                                       </ul>
+                                                              </div>
+                                                              <div class="col-sm-6">
+                                                                       <ul class="link-list">
+                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h" target="_blank" class="ga-library-links">Academic Search Complete</a></li>
+                                                                               <li><a href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336" target="_blank" class="ga-library-links">US Newspapers</a></li>
+                                                                               <li><a href="http://www.nytimes.com/passes" target="_blank" class="ga-library-links">NY Times Free Pass</a></li>
+                                                                               <li><a href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8147703140006129" class="ga-library-links">Leisure Reading Collection</a></li>
+                                                                       </ul>
+                                                               </div>
+                                                       </div>
+                                               </div>
+                                        </div>
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Today's Library Hours</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                      {{content_box_29248590}}
+                                               </div>
+                                        </div>
+                                </div>
+                                <div class="col-md-5 col-lg-6">
+                                       <div class="panel panel-default hide-body-border">
+                                               <div class="panel-heading show-panel">
+                                                       <span class="panel-title content-panel-title"><h2>Featured in the Library</h2></span>
+                                               </div>
+                                               <div class="panel-body">
+                                                       {{content_box_25912431}}                             
+                                               </div>
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+                <div class="container">
+                        <div class="row">
+	                        <!-- BEGIN: Page Footer -->
+	                        <div id="orange-line"></div>
+		                <div id="main-blue-footer">
+		                        <div id="lighthouse-logo">
+                                                <a href="https://www.kbcc.cuny.edu"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png" alt="Kingsborough Lighthouse logo" /></a>
+                                        </div>
+                                        <div class="library-address">
+                                                <div class="whiteahrefs">
+			                                <strong>Robert J. Kibbee Library</strong><br />
+                                                        2001 Oriental Blvd<br />
+                                                        Brooklyn, NY, 11209<br />
+			                                <a href="tel:+1-718-368-5632">718-368-5632</a>
+                                                </div>
+                                                <div class="whiteahrefs">
+                                                        <a href="https://kbcc-cuny.libwizard.com/f/reference">reference.desk@kbcc.cuny.edu</a>
+                                                        <br />
+                                                        <a aria-label="Twitter" href="https://twitter.com/KBCCLibrary" target="_blank"><i aria-hidden="true" class="fab fa-twitter"></i></a>
+                                                        <a aria-label="Instagram" href="https://www.instagram.com/kbcclibrary/" target="_blank"><i aria-hidden="true" class="fab fa-instagram"></i></a>
+                                                        <a aria-label="Goodreads" href="https://www.goodreads.com/user/show/51717966-kingsborough-library" target="_blank"><i aria-hidden="true" class="fab fa-goodreads"></i></a>
+                                                        <a aria-label="TikTok" href="https://www.tiktok.com/@kbcclibrary?lang=en" target="_blank"><i aria-hidden="true" class="fab fa-tiktok"></i></a>
+                                                        <a aria-label= "YouTube" href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos" target="_blank"><i aria-hidden="true" class="fab fa-youtube"></i></a>
+                                                        <a aria-label="Spotify" href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a" target="_blank"><i aria-hidden="true" class="fab fa-spotify"></i></a>
+                                                </div>
+                                        </div>
+                                        <div id="cuny-logo">
+                                                <a href="https://www.cuny.edu" target="_blank"><img src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png" alt="CUNY logo" /></a>
+                                        </div>
+                                        <div class="whiteahrefs libapps">
+                                                <a href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365">Log in to LibApps</a>
+                                        </div>
+                                        <div style="height:10px;"></div>
+	                        </div>
+                                <!-- END: Page Footer -->
+                        </div>
+		 </div>
+	</div>
+
+	<div id="s-lib-alert" title="">
+		<div id="s-lib-alert-content"></div>
+	</div>        
+	<div id="s-lib-popover-title" class="hide">
+		<span class="text-info"><strong>title</strong></span> 
+		<button type="button" id="popclose" class="close" onclick="jQuery('.s-lib-popover').popover('hide')">&times;</button> 
+	</div>
+	<div id="s-lib-popover-content" class="hide"><i class="fa fa-refresh fa-spin"></i> Loading...
+		<button class="btn btn-default btn-sm popclose" type="button">Close</button>
+	</div>        
+	<div id="s-lib-scroll-top" title="Back to Top">
+	    <span class="fa-stack fa-lg">
+	        <i class="fa fa-square-o fa-stack-2x"></i>
+	        <i class="fa fa-angle-double-up fa-stack-1x" style="position:relative; bottom:2px;"></i>
+	    </span>
+	</div>
+
+        <!-- LibChat widget script -->
+        <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
+
+        <!-- add Vue scripts -->
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> <!-- development -->
+        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script> --> <!--production -->
+        <script type="text/javascript" src="https://libapps.s3.amazonaws.com/sites/2365/include/main.js"></script>
+
+</body>