CXO schedule and styling

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 %}