From b8aee0f3079b8896e31507df8ab2521756953ba9 Mon Sep 17 00:00:00 2001 From: Rob Davies Date: Mon, 22 May 2017 15:13:53 +0100 Subject: [PATCH] Session and speaker styling updates --- web/themes/dcb2017/css/style.css | 39 ++++++ web/themes/dcb2017/css/style.css.map | 2 +- web/themes/dcb2017/dcb2017.theme | 7 ++ web/themes/dcb2017/sass/_global.scss | 12 ++ web/themes/dcb2017/sass/content/_session.scss | 21 ++++ web/themes/dcb2017/sass/content/_speaker.scss | 17 +++ web/themes/dcb2017/sass/style.scss | 3 + .../templates/content/node--session.html.twig | 98 ++++++++++++++++ .../templates/content/node--speaker.html.twig | 111 ++++++++++++++++++ 9 files changed, 309 insertions(+), 1 deletion(-) create mode 100644 web/themes/dcb2017/sass/content/_session.scss create mode 100644 web/themes/dcb2017/sass/content/_speaker.scss create mode 100644 web/themes/dcb2017/templates/content/node--session.html.twig create mode 100644 web/themes/dcb2017/templates/content/node--speaker.html.twig diff --git a/web/themes/dcb2017/css/style.css b/web/themes/dcb2017/css/style.css index e17d5a729..faff23e63 100644 --- a/web/themes/dcb2017/css/style.css +++ b/web/themes/dcb2017/css/style.css @@ -10,6 +10,15 @@ a:visited { a:visited:focus { color: black; } +h1 { + font-size: 2.4em; } + +h2 { + font-size: 2em; } + +h3 { + font-size: 1.6em; } + h1, h2, h3, h4 { font-weight: 600; } @@ -338,4 +347,34 @@ nav.menu--main { height: auto; max-width: 100%; } +.node--type-session .field--name-field-category, +.node--type-session .field--name-field-level, +.node--type-session .field--name-field-length { + padding-right: 5em; } + @media screen and (min-width: 37.5rem) { + .node--type-session .field--name-field-category, + .node--type-session .field--name-field-level, + .node--type-session .field--name-field-length { + float: left; + font-weight: 600; } + .node--type-session .field--name-field-category .field__label, + .node--type-session .field--name-field-level .field__label, + .node--type-session .field--name-field-length .field__label { + display: none; } } + +.node--type-session .field--name-body { + clear: both; + padding: 0.5em 0; } + +.node--type-speaker .node__content { + position: relative; } + +@media screen and (min-width: 37.5rem) { + .node--type-speaker .profile-picture { + position: absolute; + top: 0; + left: 0; } + .node--type-speaker .profile-info { + padding-left: 9em; } } + /*# sourceMappingURL=style.css.map */ diff --git a/web/themes/dcb2017/css/style.css.map b/web/themes/dcb2017/css/style.css.map index f552fc69e..3d4edba5b 100644 --- a/web/themes/dcb2017/css/style.css.map +++ b/web/themes/dcb2017/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["_global.scss","base/_variables.scss","layout/_header.scss","layout/_featured.scss","layout/_content.scss","layout/_content-top.scss","layout/_content-bottom.scss","base/_mixins.scss","layout/_footer.scss","components/_menus.scss","components/_blocks.scss","components/_forms.scss","components/_views.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["html {\n font-family: 'Poppins', sans-serif;\n font-size: 16px;\n}\n\na,\na:visited {\n color: $dcb-grey;\n\n &:hover,\n &:focus {\n color: black;\n }\n}\n\nh1, h2, h3, h4 {\n font-weight: 600;\n}\n\nh1, h2 {\n text-transform: uppercase;\n}\n","// Custom variables, colours etc.\n\n$dcb-green: #0fa877;\n$dcb-blue: #b33ee9;\n$dcb-purple: #ec16a8;\n\n$dcb-grey: #666;\n",".region-header {\n margin: 0 auto;\n max-width: 72rem;\n overflow: hidden;\n}\n",".region-featured {\n position: relative;\n\n &:after {\n background-image: url('../images/dcb-bg.jpg');\n background-position: center center;\n background-size: cover;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n }\n}\n\n.featured-footer {\n background: black;\n color: white;\n font-size: 1.2rem;\n font-weight: bold;\n padding: 1rem;\n text-align: center;\n text-transform: uppercase;\n\n a {\n color: $dcb-purple;\n text-decoration: none;\n\n &:focus,\n &:hover {\n color: $dcb-grey;\n }\n }\n}\n",".region-content {\n margin: 0 auto;\n max-width: 72rem;\n padding: 1rem;\n\n .block-views {\n margin-bottom: 5em;\n }\n}\n",".region-content-top {\n overflow: hidden;\n}\n",".region-content-bottom {\n margin: 2em 0 4em;\n text-align: center;\n\n h2 {\n font-size: 2em;\n font-weight: 700;\n\n @include media-tablet {\n font-size: 3em;\n }\n @include media-large {\n font-size: 4em;\n }\n\n span {\n color: $dcb-green;\n }\n }\n\n .block {\n margin: 2em 1em;\n }\n\n .all-sponsors-link a {\n @include button;\n background-color: $dcb-green;\n\n &:hover,\n &:focus {\n background: $dcb-purple;\n }\n }\n\n img {\n height: auto;\n max-width: 100%;\n }\n}\n","// Tablet size breakpoint 600px.\n@mixin media-tablet {\n @media screen and (min-width: 37.5rem) {\n @content;\n }\n}\n\n// Desktop size breakpoint 900px.\n@mixin media-large {\n @media screen and (min-width: 56.25rem) {\n @content;\n }\n}\n\n// Wide Desktop size breakpoint 1200px.\n@mixin media-wide {\n @media screen and (min-width: 75rem) {\n @content;\n }\n}\n\n@mixin button {\n background: $dcb-blue;\n border: 0;\n color: white;\n font-size: 1rem;\n font-weight: 600;\n padding: 0.5rem 1rem;\n text-decoration: none;\n text-transform: uppercase;\n\n &:hover,\n &:focus {\n background: $dcb-green;\n }\n}\n",".region-footer {\n margin: 0 auto;\n max-width: 72rem;\n padding: 1rem;\n}\n\n.layout-container > footer {\n background-image: url('../images/dcb-bg.jpg');\n background-position: center center;\n background-size: cover;\n}\n","ul.menu {\n margin: 0;\n padding: 0;\n text-align: center;\n\n @include media-tablet {\n text-align: left;\n }\n\n li.menu-item {\n display: inline-block;\n padding: 0.5rem 1rem;\n text-transform: uppercase;\n\n @include media-tablet {\n padding: 1rem 0.8rem;\n }\n\n a {\n color: black;\n text-decoration: none;\n\n &:hover,\n &:focus,\n &.is-active {\n color: $dcb-green;\n }\n }\n }\n}\n\nnav.menu--main {\n font-weight: bold;\n\n @include media-tablet {\n margin: 0.8rem;\n float: right;\n }\n}\n",".block-system-branding-block {\n margin: 0.5rem auto;\n width: 8rem;\n\n @include media-tablet {\n float: left;\n margin: 0.5rem 2rem;\n width: auto;\n }\n}\n\n.site-logo img {\n display: block;\n max-width: 100%;\n width: 11rem;\n}\n\n#block-homepagehero {\n font-size: 1.8rem;\n line-height: 1.2;\n margin: auto;\n max-width: 30rem;\n padding: 3rem 1rem;\n text-align: center;\n\n @include media-large {\n padding: 6rem 1rem;\n }\n\n @include media-wide {\n padding: 10rem 1rem;\n }\n\n img {\n max-width: 100%;\n }\n\n p {\n margin: 1rem 0;\n }\n\n a.tickets,\n a.submit {\n @include button;\n display: inline-block;\n font-size: 1.2rem;\n margin: 0 0.5rem 0.5rem;\n padding: 0.8rem 1.6rem;\n }\n\n a.tickets {\n background-color: $dcb-purple;\n }\n}\n\n#block-dcbschedule {\n overflow: hidden;\n position: relative;\n\n .field {\n box-sizing: border-box;\n padding: 2rem 2rem 2rem;\n position: relative;\n text-align: center;\n text-transform: uppercase;\n\n @include media-large {\n float: left;\n padding: 3rem 3rem 3rem;\n position: static;\n width: 33.333%;\n }\n\n @include media-wide {\n padding: 5rem 4rem 4rem;\n }\n\n &:before {\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: -1;\n background-position: center;\n background-size: cover;\n\n @include media-large {\n width: 33.333%;\n }\n }\n\n &.field--name-field-cxo-text:before {\n background-image: url('../images/cxo.jpg');\n\n @include media-large {\n left: 0;\n }\n }\n &.field--name-field-dev-text:before {\n background-image: url('../images/dev.jpg');\n\n @include media-large {\n left: 33.333%;\n }\n }\n &.field--name-field-sprint-text:before {\n background-image: url('../images/sprint.jpg');\n\n @include media-large {\n left: 66.666%;\n }\n }\n }\n\n p, h2 {\n margin: 0;\n }\n\n h2 {\n font-size: 5rem;\n font-weight: 700;\n line-height: 1;\n\n @include media-large {\n font-size: 3rem;\n }\n\n @include media-wide {\n font-size: 5rem;\n }\n }\n\n .schedule-day {\n font-size: 2.5rem;\n font-weight: bold;\n\n @include media-large {\n font-size: 2rem;\n }\n\n @include media-wide {\n font-size: 2.5rem;\n }\n }\n\n .schedule-location {\n font-size: 1.6rem;\n font-weight: 600;\n padding-top: 2rem;\n\n @include media-large {\n font-size: 1.2rem;\n }\n\n @include media-wide {\n font-size: 1.6rem;\n }\n }\n\n .schedule-date {\n font-size: 1.6rem;\n font-weight: 600;\n\n @include media-large {\n font-size: 1.2rem;\n }\n\n @include media-wide {\n font-size: 1.6rem;\n }\n }\n}\n",".form-item > label {\n display: block;\n font-weight: 600;\n\n &.option {\n display: inline;\n font-weight: normal;\n }\n}\n\n.form-submit {\n @include button;\n}\n\n.form-text,\n.form-email {\n max-width: 95%;\n}\n",".views-view-table {\n td {\n display: block;\n vertical-align: top;\n\n &.views-field-field-logo {\n padding: 1em 0;\n text-align: center;\n\n @include media-large {\n padding: 2em 2em 2em 0;\n }\n }\n\n @include media-large {\n display: table-cell;\n }\n }\n\n .views-field-body a {\n @include button;\n }\n}\n\n.view-silver-sponsors {\n overflow: hidden;\n text-align: center;\n\n .sponsor {\n box-sizing: border-box;\n float: left;\n padding: 1em;\n width: 100%;\n\n @include media-tablet {\n width: 50%;\n }\n\n @include media-large {\n width: 33.333%;\n }\n\n @include media-wide {\n width: 20%;\n }\n }\n\n img {\n height: auto;\n max-width: 100%;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["_global.scss","base/_variables.scss","layout/_header.scss","layout/_featured.scss","layout/_content.scss","layout/_content-top.scss","layout/_content-bottom.scss","base/_mixins.scss","layout/_footer.scss","components/_menus.scss","components/_blocks.scss","components/_forms.scss","components/_views.scss","content/_session.scss","content/_speaker.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["html {\n font-family: 'Poppins', sans-serif;\n font-size: 16px;\n}\n\na,\na:visited {\n color: $dcb-grey;\n\n &:hover,\n &:focus {\n color: black;\n }\n}\n\nh1 {\n font-size: 2.4em;\n}\n\nh2 {\n font-size: 2em;\n}\n\nh3 {\n font-size: 1.6em;\n}\n\nh1, h2, h3, h4 {\n font-weight: 600;\n}\n\nh1, h2 {\n text-transform: uppercase;\n}\n","// Custom variables, colours etc.\n\n$dcb-green: #0fa877;\n$dcb-blue: #b33ee9;\n$dcb-purple: #ec16a8;\n\n$dcb-grey: #666;\n",".region-header {\n margin: 0 auto;\n max-width: 72rem;\n overflow: hidden;\n}\n",".region-featured {\n position: relative;\n\n &:after {\n background-image: url('../images/dcb-bg.jpg');\n background-position: center center;\n background-size: cover;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n }\n}\n\n.featured-footer {\n background: black;\n color: white;\n font-size: 1.2rem;\n font-weight: bold;\n padding: 1rem;\n text-align: center;\n text-transform: uppercase;\n\n a {\n color: $dcb-purple;\n text-decoration: none;\n\n &:focus,\n &:hover {\n color: $dcb-grey;\n }\n }\n}\n",".region-content {\n margin: 0 auto;\n max-width: 72rem;\n padding: 1rem;\n\n .block-views {\n margin-bottom: 5em;\n }\n}\n",".region-content-top {\n overflow: hidden;\n}\n",".region-content-bottom {\n margin: 2em 0 4em;\n text-align: center;\n\n h2 {\n font-size: 2em;\n font-weight: 700;\n\n @include media-tablet {\n font-size: 3em;\n }\n @include media-large {\n font-size: 4em;\n }\n\n span {\n color: $dcb-green;\n }\n }\n\n .block {\n margin: 2em 1em;\n }\n\n .all-sponsors-link a {\n @include button;\n background-color: $dcb-green;\n\n &:hover,\n &:focus {\n background: $dcb-purple;\n }\n }\n\n img {\n height: auto;\n max-width: 100%;\n }\n}\n","// Tablet size breakpoint 600px.\n@mixin media-tablet {\n @media screen and (min-width: 37.5rem) {\n @content;\n }\n}\n\n// Desktop size breakpoint 900px.\n@mixin media-large {\n @media screen and (min-width: 56.25rem) {\n @content;\n }\n}\n\n// Wide Desktop size breakpoint 1200px.\n@mixin media-wide {\n @media screen and (min-width: 75rem) {\n @content;\n }\n}\n\n@mixin button {\n background: $dcb-blue;\n border: 0;\n color: white;\n font-size: 1rem;\n font-weight: 600;\n padding: 0.5rem 1rem;\n text-decoration: none;\n text-transform: uppercase;\n\n &:hover,\n &:focus {\n background: $dcb-green;\n }\n}\n",".region-footer {\n margin: 0 auto;\n max-width: 72rem;\n padding: 1rem;\n}\n\n.layout-container > footer {\n background-image: url('../images/dcb-bg.jpg');\n background-position: center center;\n background-size: cover;\n}\n","ul.menu {\n margin: 0;\n padding: 0;\n text-align: center;\n\n @include media-tablet {\n text-align: left;\n }\n\n li.menu-item {\n display: inline-block;\n padding: 0.5rem 1rem;\n text-transform: uppercase;\n\n @include media-tablet {\n padding: 1rem 0.8rem;\n }\n\n a {\n color: black;\n text-decoration: none;\n\n &:hover,\n &:focus,\n &.is-active {\n color: $dcb-green;\n }\n }\n }\n}\n\nnav.menu--main {\n font-weight: bold;\n\n @include media-tablet {\n margin: 0.8rem;\n float: right;\n }\n}\n",".block-system-branding-block {\n margin: 0.5rem auto;\n width: 8rem;\n\n @include media-tablet {\n float: left;\n margin: 0.5rem 2rem;\n width: auto;\n }\n}\n\n.site-logo img {\n display: block;\n max-width: 100%;\n width: 11rem;\n}\n\n#block-homepagehero {\n font-size: 1.8rem;\n line-height: 1.2;\n margin: auto;\n max-width: 30rem;\n padding: 3rem 1rem;\n text-align: center;\n\n @include media-large {\n padding: 6rem 1rem;\n }\n\n @include media-wide {\n padding: 10rem 1rem;\n }\n\n img {\n max-width: 100%;\n }\n\n p {\n margin: 1rem 0;\n }\n\n a.tickets,\n a.submit {\n @include button;\n display: inline-block;\n font-size: 1.2rem;\n margin: 0 0.5rem 0.5rem;\n padding: 0.8rem 1.6rem;\n }\n\n a.tickets {\n background-color: $dcb-purple;\n }\n}\n\n#block-dcbschedule {\n overflow: hidden;\n position: relative;\n\n .field {\n box-sizing: border-box;\n padding: 2rem 2rem 2rem;\n position: relative;\n text-align: center;\n text-transform: uppercase;\n\n @include media-large {\n float: left;\n padding: 3rem 3rem 3rem;\n position: static;\n width: 33.333%;\n }\n\n @include media-wide {\n padding: 5rem 4rem 4rem;\n }\n\n &:before {\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: -1;\n background-position: center;\n background-size: cover;\n\n @include media-large {\n width: 33.333%;\n }\n }\n\n &.field--name-field-cxo-text:before {\n background-image: url('../images/cxo.jpg');\n\n @include media-large {\n left: 0;\n }\n }\n &.field--name-field-dev-text:before {\n background-image: url('../images/dev.jpg');\n\n @include media-large {\n left: 33.333%;\n }\n }\n &.field--name-field-sprint-text:before {\n background-image: url('../images/sprint.jpg');\n\n @include media-large {\n left: 66.666%;\n }\n }\n }\n\n p, h2 {\n margin: 0;\n }\n\n h2 {\n font-size: 5rem;\n font-weight: 700;\n line-height: 1;\n\n @include media-large {\n font-size: 3rem;\n }\n\n @include media-wide {\n font-size: 5rem;\n }\n }\n\n .schedule-day {\n font-size: 2.5rem;\n font-weight: bold;\n\n @include media-large {\n font-size: 2rem;\n }\n\n @include media-wide {\n font-size: 2.5rem;\n }\n }\n\n .schedule-location {\n font-size: 1.6rem;\n font-weight: 600;\n padding-top: 2rem;\n\n @include media-large {\n font-size: 1.2rem;\n }\n\n @include media-wide {\n font-size: 1.6rem;\n }\n }\n\n .schedule-date {\n font-size: 1.6rem;\n font-weight: 600;\n\n @include media-large {\n font-size: 1.2rem;\n }\n\n @include media-wide {\n font-size: 1.6rem;\n }\n }\n}\n",".form-item > label {\n display: block;\n font-weight: 600;\n\n &.option {\n display: inline;\n font-weight: normal;\n }\n}\n\n.form-submit {\n @include button;\n}\n\n.form-text,\n.form-email {\n max-width: 95%;\n}\n",".views-view-table {\n td {\n display: block;\n vertical-align: top;\n\n &.views-field-field-logo {\n padding: 1em 0;\n text-align: center;\n\n @include media-large {\n padding: 2em 2em 2em 0;\n }\n }\n\n @include media-large {\n display: table-cell;\n }\n }\n\n .views-field-body a {\n @include button;\n }\n}\n\n.view-silver-sponsors {\n overflow: hidden;\n text-align: center;\n\n .sponsor {\n box-sizing: border-box;\n float: left;\n padding: 1em;\n width: 100%;\n\n @include media-tablet {\n width: 50%;\n }\n\n @include media-large {\n width: 33.333%;\n }\n\n @include media-wide {\n width: 20%;\n }\n }\n\n img {\n height: auto;\n max-width: 100%;\n }\n}\n",".node--type-session {\n .field--name-field-category,\n .field--name-field-level,\n .field--name-field-length {\n padding-right: 5em;\n\n @include media-tablet {\n float: left;\n font-weight: 600;\n\n .field__label {\n display: none;\n }\n }\n }\n\n .field--name-body {\n clear: both;\n padding: 0.5em 0;\n }\n}\n",".node--type-speaker {\n .node__content {\n position: relative;\n }\n\n @include media-tablet {\n .profile-picture {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .profile-info {\n padding-left: 9em;\n }\n }\n}\n"]} \ No newline at end of file diff --git a/web/themes/dcb2017/dcb2017.theme b/web/themes/dcb2017/dcb2017.theme index ecde5b3bd..2141e5ab0 100644 --- a/web/themes/dcb2017/dcb2017.theme +++ b/web/themes/dcb2017/dcb2017.theme @@ -13,3 +13,10 @@ function dcb2017_preprocess_html(&$variables) { $variables['head_title'] = $site_config->get('name'); } } + +/** + * Implements template_preprocess_node(). + */ +function dcb2017_preprocess_node(&$variables) { + +} diff --git a/web/themes/dcb2017/sass/_global.scss b/web/themes/dcb2017/sass/_global.scss index 96fa63532..81026c44a 100644 --- a/web/themes/dcb2017/sass/_global.scss +++ b/web/themes/dcb2017/sass/_global.scss @@ -13,6 +13,18 @@ a:visited { } } +h1 { + font-size: 2.4em; +} + +h2 { + font-size: 2em; +} + +h3 { + font-size: 1.6em; +} + h1, h2, h3, h4 { font-weight: 600; } diff --git a/web/themes/dcb2017/sass/content/_session.scss b/web/themes/dcb2017/sass/content/_session.scss new file mode 100644 index 000000000..391a74d50 --- /dev/null +++ b/web/themes/dcb2017/sass/content/_session.scss @@ -0,0 +1,21 @@ +.node--type-session { + .field--name-field-category, + .field--name-field-level, + .field--name-field-length { + padding-right: 5em; + + @include media-tablet { + float: left; + font-weight: 600; + + .field__label { + display: none; + } + } + } + + .field--name-body { + clear: both; + padding: 0.5em 0; + } +} diff --git a/web/themes/dcb2017/sass/content/_speaker.scss b/web/themes/dcb2017/sass/content/_speaker.scss new file mode 100644 index 000000000..41d86da59 --- /dev/null +++ b/web/themes/dcb2017/sass/content/_speaker.scss @@ -0,0 +1,17 @@ +.node--type-speaker { + .node__content { + position: relative; + } + + @include media-tablet { + .profile-picture { + position: absolute; + top: 0; + left: 0; + } + + .profile-info { + padding-left: 9em; + } + } +} diff --git a/web/themes/dcb2017/sass/style.scss b/web/themes/dcb2017/sass/style.scss index ade4ef4ba..74241d3f8 100644 --- a/web/themes/dcb2017/sass/style.scss +++ b/web/themes/dcb2017/sass/style.scss @@ -16,3 +16,6 @@ @import 'components/blocks'; @import 'components/forms'; @import 'components/views'; + +@import 'content/session'; +@import 'content/speaker'; diff --git a/web/themes/dcb2017/templates/content/node--session.html.twig b/web/themes/dcb2017/templates/content/node--session.html.twig new file mode 100644 index 000000000..e085e5c09 --- /dev/null +++ b/web/themes/dcb2017/templates/content/node--session.html.twig @@ -0,0 +1,98 @@ +{# +/** + * @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') }} + + + {{ title_prefix }} + {% if not page %} + + {{ label }} + + {% endif %} + {{ title_suffix }} + + + {{ content }} + + + diff --git a/web/themes/dcb2017/templates/content/node--speaker.html.twig b/web/themes/dcb2017/templates/content/node--speaker.html.twig new file mode 100644 index 000000000..7c4818037 --- /dev/null +++ b/web/themes/dcb2017/templates/content/node--speaker.html.twig @@ -0,0 +1,111 @@ +{# +/** + * @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') }} + + + {{ title_prefix }} + {% if not page %} + + {{ label }} + + {% endif %} + {{ title_suffix }} + + +
+ {{ content.field_profile_picture }} +
+
+
+ {% if node.field_twitter_handle.value %} + {{ node.field_twitter_handle.value }} + {% endif %} + {% if node.field_drupal_org_handle.value %} + {{ node.field_drupal_org_handle.value }} + {% endif %} +
+ {{ content.body }} +
+ + +