Update schedule page - Program/Schedule page filter

* allow time slots to be associated with an event sponsor

this will enable the ability for a time slot to be displayed on an event website with an associated event sponsor

* finalize schedule appearence

redesign schedule to align with Gina's design.
Next steps is wiring up the schedule fly out.

* schedule fly out

this could use some additional work to make it a bit cleaner.
But for now it gets the job done.

fly out partial is hidden outside the right side of the screen.
When a title is clicked, the elemnt matching that titles id is 'revealed' as the side panel slides out.

* program filter pane

use stimulus to filter the content on the program page.
method used:

- filter partial is added to the page side panel
- form in filter partial, has a filter stimulus controller wrapped around it
- when form inputs are changed, stimulus fires event to update page contents
- update page contents using dom_ids for relevent filterable attributes

* add filter to schedule side panel

Reuse the filter controller by initilizing it with the class name of the 'cards' that it is filtering through
Also reverse the direction that the filter works. All values start unchecked, checking box, filters view & then updates counts

Additional Notes
- Rename schedule card partial to time_slot
- Make filtering an async function, update counts after completion
- Hide elements using 'display:none' instead of hidden attribute (hidden wouldn't work with the CSS Grid on the schedule)

* fixes per PR code review

* update schedule test to consider session format configuration

* schedule loads displaying the event current day

* Display placeholder message if filter produces no resutls

When filtering, if an applied filter resluts in all session content being hidden the stimulus controller will apply an empty class to the container.
That will lean in to some CSS magic to dispalys a "No results message" to the user

Also add some hover effect to the filter icon.

* add sponsor presents to time slot display

additionally I moved the sub_nav style to shared, so program and schedule were using the same sub nav css
Also added a check for empty containers on filter reset.

* collapse schedule block when cards filtered out

Had to resort to something interesting here, and Can redo this if someone suggests a better method.
In order to collapse the schedule blocks when their time slots had been filtered out I had to create custom class that defined a filtercontainer in a way that it could have sub containers (in this case 'schedule-block-containers').

Now when the stimulus controller calls apply filter it sill loop over the containers and update their apperence. IF a container has sub-containers, it will loop through them and update their apperance as well (i.e. give them an 'empty' class. Essentially collapse them)

* pull the bindings out of my schedule spec

move time helper to rails_helper file

* rework 'schedule load on correct date feature' with caching consideration

Use on page JS to load the schedule on the correct page.

When the page loads, the schedule will display a link for every event day.
The JS will determine what day it is for the user, and
- IF it is before the event OR 1 day after event it will load on the first event day
- IF it is during the event it will loop over the event days, and click on the current day.

Author: codyjamesbrooks

app/assets/images/themes/default/arrow-white.png

@@ -1,4 +1,5 @@
 @import 'colors';
+@import 'shared';
 @import 'nav';
 @import 'footer';
 @import 'program';
@@ -35,6 +36,7 @@ body {
 header + #content {
   background-color: var(--main_content_background);
   margin-top: 110px;
+  min-height: 95vh;
 }
 
 p {

app/assets/images/themes/default/caret-2.png

@@ -1,4 +1,5 @@
 :root {
+  --beige: #F4EEE6;
   --black: #000000;
   --blue: #3444DA;
   --blue-dark: #417D7A;
@@ -14,7 +15,7 @@
   --grey-light: #C4C4C4;
   --grey-lighter: #F5F5F5;
   --grey-lightest: #E7E7E7;
-  --grey-logo: #E6E6E6;
+  --grey-secondary: #E6E6E6;
   --orange: #FFBC90;
   --orange-burnt: #EA652C;
   --pastel-pink: #F94975;
@@ -29,9 +30,11 @@
   --red-dark: #E14943;
   --red-light: #E14943;
   --silver: #E0E0E0;
+  --silver-border: #EBEBEB;
+  --sponsor-tag: #F8B400;
   --teal: #48c892;
   --text: var(--grey);
-  --text-secondary: #515151;
+  --text-secondary: #5E5E5E;
   --yellow: #FFD801;
   --white: #FFFFFF;
 

app/assets/images/themes/default/room-icon.png

@@ -70,55 +70,6 @@
   }
 }
 
-.program-filter-pane {
-  img {
-    margin: 0 auto 15px;
-    display: block;
-    padding: 6px 6px;
-    border-radius: 50%;
-    border: 2px solid var(--red-light);
-
-
-    &.close-filter-icon {
-      background-color: var(--red-light);
-    }
-  }
-}
-
-.sub-nav {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 0 6px 60px;
-
-  ul {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 30px;
-    li {
-      margin: 0;
-      padding: 0;
-      a {
-        font-size: 24px;
-        font-weight: 700;
-        display: block;
-        color: var(--grey-light);
-        width: 100%;
-        margin: auto;
-        text-align: center;
-        text-decoration: none;
-        &:hover, &.selected {
-          color: var(--red-light);
-          box-shadow: 0 4px var(--main_content_background),
-                      0 7px var(--red-light);
-          transition: all 300ms;
-        }
-      }
-    }
-  }
-}
-
 .program-sessions-wrapper {
   display: flex;
   margin: auto;
@@ -130,10 +81,28 @@
   background-color: var(--main_content_background);
   padding: 20px 0 0 0;
   margin-bottom: 40px;
-  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
+
+  &.empty .empty-placeholder  {
+    display: block !important;
+    text-align: center;
+    margin-top: 30px;
+
+    h3 {
+      font-size: 18px;
+      font-weight: 800;
+      margin-bottom: 8px;
+    }
+
+    p {
+      font-family: var(--secondary-body-font);
+      line-height: 130%;
+    }
+  }
 }
 
-.session {
+
+
+.session-card {
   display: flex;
   position: relative;
   justify-content: space-between;
@@ -151,7 +120,6 @@
     height: 5rem;
   }
 
-  // UNDERLINE COLOR, FONT FAMILY
   .session-title {
     font-size: 21px;
     font-weight: 700;
@@ -187,34 +155,6 @@
 }
 
 .fly-out-wrapper {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  padding-top: 160px;
-  width: 40%;
-  height: 100%;
-  z-index: 10;
-  background-color: var(--white);
-  border: 1px solid black;
-  transition: all 1s;
-  overflow: scroll;
-
-
-  &.open {
-    right: 0;
-
-  }
-
-  &.closed {
-    right: -40%;
-  }
-
-  .close-icon {
-    position: absolute;
-    right: 40px;
-    top: 140px;
-  }
-
   .program-session-detail {
     margin: 0 40px 50px 30px;
     overflow: scroll;
@@ -274,15 +214,9 @@
     .program-sessions-wrapper {
       padding: 15px 10px;
     }
-    .session {
+    .session-card {
       width: 40%;
     }
-
-    .fly-out-wrapper {
-      width: 70%;
-      &.open { right: 0 }
-      &.closed { right: -70%; }
-    }
   }
 
 
@@ -294,13 +228,7 @@
       padding: 25px;
     }
 
-    .session {
-      width: 100%;
-    }
-
-    .fly-out-wrapper {
+    .session-card {
       width: 100%;
-      &.open { right: 0; }
-      &.closed { right: -100%; }
     }
   }