CXO schedule and styling

config/views.view.schedule.yml

@@ -4,7 +4,6 @@ status: true
 dependencies:
   config:
     - core.entity_view_mode.node.teaser
-    - field.storage.node.field_session_type
     - field.storage.node.field_time_slot
     - node.type.session
   module:
@@ -57,7 +56,7 @@ display:
         options:
           offset: 0
       style:
-        type: grid
+        type: default
         options:
           grouping:
             -
@@ -68,14 +67,9 @@ display:
               field: field_time_slot
               rendered: true
               rendered_strip: false
+          row_class: ''
+          default_row_class: true
           uses_fields: true
-          columns: 3
-          automatic_width: true
-          alignment: horizontal
-          col_class_default: true
-          col_class_custom: ''
-          row_class_default: true
-          row_class_custom: ''
       row:
         type: 'entity:node'
         options:
@@ -194,68 +188,6 @@ display:
           separator: ', '
           field_api_classes: false
           plugin_id: field
-        field_session_type:
-          id: field_session_type
-          table: node__field_session_type
-          field: field_session_type
-          relationship: none
-          group_type: group
-          admin_label: ''
-          label: ''
-          exclude: false
-          alter:
-            alter_text: false
-            text: ''
-            make_link: false
-            path: ''
-            absolute: false
-            external: false
-            replace_spaces: false
-            path_case: none
-            trim_whitespace: false
-            alt: ''
-            rel: ''
-            link_class: ''
-            prefix: ''
-            suffix: ''
-            target: ''
-            nl2br: false
-            max_length: 0
-            word_boundary: true
-            ellipsis: true
-            more_link: false
-            more_link_text: ''
-            more_link_path: ''
-            strip_tags: false
-            trim: false
-            preserve_tags: ''
-            html: false
-          element_type: h2
-          element_class: ''
-          element_label_type: ''
-          element_label_class: ''
-          element_label_colon: false
-          element_wrapper_type: ''
-          element_wrapper_class: ''
-          element_default_classes: true
-          empty: ''
-          hide_empty: false
-          empty_zero: false
-          hide_alter_empty: true
-          click_sort_column: value
-          type: list_default
-          settings: {  }
-          group_column: value
-          group_columns: {  }
-          group_rows: true
-          delta_limit: 0
-          delta_offset: 0
-          delta_reversed: false
-          delta_first_last: false
-          multi_type: separator
-          separator: ', '
-          field_api_classes: false
-          plugin_id: field
       filters:
         status:
           value: '1'
@@ -277,6 +209,45 @@ display:
           entity_type: node
           entity_field: type
           plugin_id: bundle
+        field_session_type_value:
+          id: field_session_type_value
+          table: node__field_session_type
+          field: field_session_type_value
+          relationship: none
+          group_type: group
+          admin_label: ''
+          operator: or
+          value:
+            'Business day': 'Business day'
+          group: 1
+          exposed: false
+          expose:
+            operator_id: ''
+            label: ''
+            description: ''
+            use_operator: false
+            operator: ''
+            identifier: ''
+            required: false
+            remember: false
+            multiple: false
+            remember_roles:
+              authenticated: authenticated
+            reduce: false
+          is_grouped: false
+          group_info:
+            label: ''
+            description: ''
+            identifier: ''
+            optional: true
+            widget: select
+            multiple: false
+            remember: false
+            default_group: All
+            default_group_multiple: {  }
+            group_items: {  }
+          reduce_duplicates: false
+          plugin_id: list_field
       sorts:
         field_time_slot_value:
           id: field_time_slot_value
@@ -290,7 +261,7 @@ display:
           expose:
             label: ''
           plugin_id: standard
-      title: Schedule
+      title: 'CXO Day Schedule'
       header: {  }
       footer: {  }
       empty: {  }
@@ -306,16 +277,16 @@ display:
         - 'user.node_grants:view'
         - user.permissions
       tags:
-        - 'config:field.storage.node.field_session_type'
         - 'config:field.storage.node.field_time_slot'
   page_1:
     display_plugin: page
     id: page_1
-    display_title: Page
+    display_title: CXO
     position: 1
     display_options:
       display_extenders: {  }
-      path: schedule
+      path: schedule-cxo
+      display_description: ''
     cache_metadata:
       max-age: -1
       contexts:
@@ -324,5 +295,4 @@ display:
         - 'user.node_grants:view'
         - user.permissions
       tags:
-        - 'config:field.storage.node.field_session_type'
         - 'config:field.storage.node.field_time_slot'

web/themes/dcb2017/css/style.css

@@ -354,6 +354,30 @@ nav.menu--main {
     height: auto;
     max-width: 100%; }
 
+.view-display-id-sponsor_logo_gold .view-content {
+  text-align: center; }
+
+.view-display-id-sponsor_logo_gold .views-row {
+  display: inline-block;
+  padding: 0.5em 1.5em;
+  vertical-align: middle; }
+
+.view-schedule h3 {
+  background: #0fa877;
+  color: white;
+  font-size: 1.5em;
+  text-align: center; }
+
+.view-schedule h2 {
+  font-size: 1.8em;
+  text-transform: none; }
+
+.view-schedule h4 {
+  font-size: 1.3em; }
+
+.view-schedule p {
+  margin: 0.5em 0; }
+
 .node--type-session .field--name-field-category,
 .node--type-session .field--name-field-level,
 .node--type-session .field--name-field-length {
@@ -382,11 +406,15 @@ nav.menu--main {
     top: 0;
     left: 0; }
   .node--type-speaker .profile-info {
+    min-height: 7em;
     padding-left: 9em; } }
 
 .node--type-speaker.node--view-mode-speaker-profile {
   margin-bottom: 2em; }
 
+.node--type-speaker .speaker-link {
+  text-decoration: none; }
+
 .speaker-twitter {
   background: url("../images/twitter-1.png") no-repeat left center transparent;
   padding: 0 10px 0 20px; }

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

@@ -0,0 +1,21 @@
+.view-schedule {
+  h3 {
+    background: $dcb-green;
+    color: white;
+    font-size: 1.5em;
+    text-align: center;
+  }
+
+  h2 {
+    font-size: 1.8em;
+    text-transform: none;
+  }
+
+  h4 {
+    font-size: 1.3em
+  }
+
+  p {
+    margin: 0.5em 0;
+  }
+}

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

@@ -51,3 +51,15 @@
     max-width: 100%;
   }
 }
+
+.view-display-id-sponsor_logo_gold {
+  .view-content {
+    text-align: center;
+  }
+
+  .views-row {
+    display: inline-block;
+    padding: 0.5em 1.5em;
+    vertical-align: middle;
+  }
+}

web/themes/dcb2017/sass/content/_speaker.scss

@@ -11,6 +11,7 @@
     }
 
     .profile-info {
+      min-height: 7em;
       padding-left: 9em;
     }
   }
@@ -18,6 +19,10 @@
   &.node--view-mode-speaker-profile {
     margin-bottom: 2em;
   }
+
+  .speaker-link {
+    text-decoration: none;
+  }
 }
 
 .speaker-twitter {

web/themes/dcb2017/sass/style.scss

@@ -16,6 +16,7 @@
 @import 'components/blocks';
 @import 'components/forms';
 @import 'components/views';
+@import 'components/schedule';
 
 @import 'content/session';
 @import 'content/speaker';

web/themes/dcb2017/templates/content/node--session.html.twig

@@ -86,7 +86,7 @@
   {{ title_prefix }}
   {% if not page %}
     <h2{{ title_attributes }}>
-      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+      {{ label }}
     </h2>
   {% endif %}
   {{ title_suffix }}

web/themes/dcb2017/templates/content/node--speaker--speaker-profile-schedule.html.twig

@@ -0,0 +1,107 @@
+{#
+/**
+ * @file
+ * Theme override to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: Themed creation date field.
+ * - author_name: Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ */
+#}
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+  ]
+%}
+{{ attach_library('classy/node') }}
+<article{{ attributes.addClass(classes) }}>
+
+  <div{{ content_attributes.addClass('node__content') }}>
+    <div class="profile-picture">
+      {{ content.field_profile_picture }}
+    </div>
+    <div class="profile-info">
+      <h4{{ title_attributes }}>
+        <a class="speaker-link" href="/speakers#{{ node.id }}">{{ label }}</a>
+      </h4>
+      <div class="speaker-links">
+        {% if node.field_twitter_handle.value %}
+          <span class="speaker-twitter"><a href="https://twitter.com/{{ node.field_twitter_handle.value }}">{{ node.field_twitter_handle.value }}</a></span>
+        {% endif %}
+        {% if node.field_drupal_org_handle.value %}
+          <span class="speaker-drupal"><a href="https://www.drupal.org/u/{{ node.field_drupal_org_handle.value }}">{{ node.field_drupal_org_handle.value }}</a></span>
+        {% endif %}
+      </div>
+      {{ content.field_organisation }}
+      {{ content.body }}
+    </div>
+  </div>
+
+</article>

web/themes/dcb2017/templates/content/node--speaker.html.twig

@@ -81,7 +81,7 @@
   ]
 %}
 {{ attach_library('classy/node') }}
-<article{{ attributes.addClass(classes) }}>
+<article{{ attributes.addClass(classes) }} id={{ node.id }}>
 
   {{ title_prefix }}
   {% if not page %}