Dev schedule config and styling

web/themes/dcb2017/css/style.css

@@ -362,7 +362,7 @@ nav.menu--main {
   padding: 0.5em 1.5em;
   vertical-align: middle; }
 
-.view-schedule h3 {
+.view-schedule .view-grouping-header {
   background: #0fa877;
   color: white;
   font-size: 1.5em;
@@ -378,6 +378,30 @@ nav.menu--main {
 .view-schedule p {
   margin: 0.5em 0; }
 
+.view-schedule .node--type-session {
+  margin-bottom: 3em; }
+
+@media screen and (min-width: 56.25rem) {
+  .view-schedule .group-wrapper {
+    box-sizing: border-box;
+    float: left;
+    padding-right: 2em; }
+    .view-schedule .group-wrapper h2 {
+      font-size: 1.2em;
+      line-height: 1.4; } }
+
+.view-schedule .group-wrapper h3 {
+  color: #666; }
+
+.view-schedule .view-grouping-content {
+  overflow: hidden; }
+  @media screen and (min-width: 56.25rem) {
+    .view-schedule .view-grouping-content.col-2 .group-wrapper {
+      width: 50%; } }
+  @media screen and (min-width: 56.25rem) {
+    .view-schedule .view-grouping-content.col-3 .group-wrapper {
+      width: 33.33%; } }
+
 .node--type-session .field--name-field-category,
 .node--type-session .field--name-field-level,
 .node--type-session .field--name-field-length {

web/themes/dcb2017/sass/components/_schedule.scss

@@ -1,5 +1,5 @@
 .view-schedule {
-  h3 {
+  .view-grouping-header {
     background: $dcb-green;
     color: white;
     font-size: 1.5em;
@@ -18,4 +18,41 @@
   p {
     margin: 0.5em 0;
   }
+
+  .node--type-session {
+    margin-bottom: 3em;
+  }
+
+  .group-wrapper {
+    @include media-large {
+      box-sizing: border-box;
+      float: left;
+      padding-right: 2em;
+
+      h2 {
+        font-size: 1.2em;
+        line-height: 1.4;
+      }
+    }
+
+    h3 {
+      color: $dcb-grey;
+    }
+  }
+
+  .view-grouping-content {
+    overflow: hidden;
+
+    &.col-2 .group-wrapper {
+      @include media-large {
+        width: 50%;
+      }
+    }
+
+    &.col-3 .group-wrapper {
+      @include media-large {
+        width: 33.33%;
+      }
+    }
+  }
 }

web/themes/dcb2017/templates/views/views-view-grouping.html.twig

@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Theme override to display a single views grouping.
+ *
+ * Available variables:
+ * - view: The view object.
+ * - grouping: The grouping instruction.
+ * - grouping_level: A number indicating the hierarchical level of the grouping.
+ * - title: The group heading.
+ * - content: The content to be grouped.
+ * - rows: The rows returned from the view.
+ *
+ * @see template_preprocess_views_view_grouping()
+ */
+#}
+<div class="view-grouping">
+  <div class="view-grouping-header">{{ title }}</div>
+  <div class="view-grouping-content col-{{ rows|length }}">{{ content }}</div>
+</div>

web/themes/dcb2017/templates/views/views-view-unformatted.html.twig

@@ -0,0 +1,36 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a view of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if title|trim %}
+  <div class="group-wrapper">
+    <h3>{{ title }}</h3>
+{% endif %}
+{% for row in rows %}
+  {%
+    set row_classes = [
+      default_row_class ? 'views-row',
+    ]
+  %}
+  <div{{ row.attributes.addClass(row_classes) }}>
+    {{ row.content }}
+  </div>
+{% endfor %}
+{% if title|trim %}
+  </div>
+{% endif %}