diff --git a/composer.json b/composer.json index ef1767c..6521706 100644 --- a/composer.json +++ b/composer.json @@ -31,6 +31,7 @@ "drupal/gin": "^3.0@RC", "drupal/gin_login": "^2.1", "drupal/google_tag": "^2.0", + "drupal/html_formatter": "^2.0", "drupal/jsonapi_permission_access": "1.0.1", "drupal/layout_builder_admin_theme": "^2.0", "drupal/layout_builder_styles": "^2.0", diff --git a/composer.lock b/composer.lock index a727526..0a6c477 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "c81388871a3db4490fb9a752a9444ad6", + "content-hash": "6089571e27cbac2520d85b9198689722", "packages": [ { "name": "asm89/stack-cors", @@ -3099,6 +3099,58 @@ "source": "https://git.drupalcode.org/project/google_tag" } }, + { + "name": "drupal/html_formatter", + "version": "2.0.1", + "source": { + "type": "git", + "url": "https://git.drupalcode.org/project/html_formatter.git", + "reference": "2.0.1" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/html_formatter-2.0.1.zip", + "reference": "2.0.1", + "shasum": "07c4296bf29f9bc330288d5e2625e79506a11503" + }, + "require": { + "drupal/core": "^8 || ^9 || ^10 || ^11" + }, + "type": "drupal-module", + "extra": { + "drupal": { + "version": "2.0.1", + "datestamp": "1722681463", + "security-coverage": { + "status": "covered", + "message": "Covered by Drupal's security advisory policy" + } + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "license": [ + "GPL-2.0+" + ], + "authors": [ + { + "name": "albertski", + "homepage": "https://www.drupal.org/user/1327432" + }, + { + "name": "thejimbirch", + "homepage": "https://www.drupal.org/user/2507260" + } + ], + "description": "Adds HTML Formatter to textfields", + "homepage": "https://www.drupal.org/project/html_formatter", + "keywords": [ + "Drupal" + ], + "support": { + "source": "http://cgit.drupalcode.org/html_formatter", + "issues": "https://www.drupal.org/project/issues/html_formatter" + } + }, { "name": "drupal/jsonapi_permission_access", "version": "1.0.1", diff --git a/web/modules/custom/dc_components/components/ping-pong/ping-pong.css b/web/modules/custom/dc_components/components/ping-pong/ping-pong.css index 81c6100..aa1c870 100644 --- a/web/modules/custom/dc_components/components/ping-pong/ping-pong.css +++ b/web/modules/custom/dc_components/components/ping-pong/ping-pong.css @@ -73,6 +73,7 @@ border-radius: 10px; transition: background .5s ease; cursor: pointer; + color: var(--site-white); } .field--name-field-ping-pong-cta a:hover { diff --git a/web/themes/custom/dchadwick/components/heading/heading.component.yml b/web/themes/custom/dchadwick/components/heading/heading.component.yml new file mode 100644 index 0000000..aa96de3 --- /dev/null +++ b/web/themes/custom/dchadwick/components/heading/heading.component.yml @@ -0,0 +1,16 @@ +name: Heading +props: + type: object + required: + - level + properties: + level: + type: integer + title: Level + description: "The type of button to render" + # The enum directive restricts the possible values in the element to our list. + enum: [1, 2, 3, 4, 5, 6] +slots: + text: + title: Heading Text + description: The text for the heading. diff --git a/web/themes/custom/dchadwick/components/heading/heading.css b/web/themes/custom/dchadwick/components/heading/heading.css new file mode 100644 index 0000000..ad84df6 --- /dev/null +++ b/web/themes/custom/dchadwick/components/heading/heading.css @@ -0,0 +1,34 @@ +.ib-premier-banner { + width: 100%; + height: auto; + display: block; + position: relative; + height: 350px; + overflow: hidden; + background: var(--site-platinum); +} + +.ib-premier-banner img { + width: 100%; + display: block; + position: absolute; + bottom: 0px; + object-fit: cover; +} + + +.ib-premier-banner .heading-wrapper { + position: absolute; + top: 25%; + left: 5%; + background: var(--site-primary); + padding: 0 20px; + color: var(--site-white); +} + +@media screen and (min-width: 1153px) { + .ib-premier-banner .heading-wrapper { + /* left: calc((100vw - 1152px) / 2); */ + /* left: 10px; */ + } +} diff --git a/web/themes/custom/dchadwick/components/heading/heading.twig b/web/themes/custom/dchadwick/components/heading/heading.twig new file mode 100644 index 0000000..d5c4227 --- /dev/null +++ b/web/themes/custom/dchadwick/components/heading/heading.twig @@ -0,0 +1,5 @@ + + {%- apply spaceless %} + {% block text %}{% endblock %} + {% endapply %} + diff --git a/web/themes/custom/dchadwick/css/style.css b/web/themes/custom/dchadwick/css/style.css index f2a2a19..e536a03 100644 --- a/web/themes/custom/dchadwick/css/style.css +++ b/web/themes/custom/dchadwick/css/style.css @@ -106,6 +106,18 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover { color: var(--site-white); } +@media screen and (max-width: 1300px) { + #block-dchadwick-main-menu { + margin-right: 50px; + } + #block-dchadwick-site-branding { + margin-left: 50px; + } + header#header { + padding-left: 20px; + padding-right: 20px; + } +} #footer { display: flex; background: var(--site-primary); @@ -132,7 +144,7 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } .table.cols-5 { - width: 1152px; + width: 1300px; } .table th, .table td { padding: 12px 15px; @@ -428,6 +440,57 @@ table.cols-5 td.incorrect { color: white; } +.node-type-article .hero { + position: relative; + max-height: 60vh; + overflow: hidden; +} +.node-type-article .hero img { + object-fit: cover; + width: 100%; + height: 100%; +} +.node-type-article .hero h1 { + width: 100%; + flex-basis: 100%; + color: var(--site-primary); + margin: 0; +} +.node-type-article .article-intro { + display: flex; + position: absolute; + top: 50%; + height: auto; + background: rgba(254, 215, 101, 0.9); + color: var(--site-white); + flex-direction: row; + flex-wrap: wrap; + padding: 20px 30px; + transform: translateY(-50%); +} +@media screen and (min-width: 1300px) { + .node-type-article .article-intro { + left: calc((100vw - 1300px) / 2); + } +} +.node-type-article .article-intro > div { + flex: 1; +} +.node-type-article #article-body { + display: flex; + padding: 20px; +} +.node-type-article .left-side { + flex: 2; +} +.node-type-article .left-side p { + font-size: 16px; + line-height: 24px; +} +.node-type-article .right-side { + flex: 1; +} + html { font-size: 100%; box-sizing: border-box; @@ -459,6 +522,6 @@ img { } .container { - max-width: 1152px; + max-width: 1300px; margin: auto; } \ No newline at end of file diff --git a/web/themes/custom/dchadwick/dchadwick.layouts.yml b/web/themes/custom/dchadwick/dchadwick.layouts.yml new file mode 100644 index 0000000..08f025e --- /dev/null +++ b/web/themes/custom/dchadwick/dchadwick.layouts.yml @@ -0,0 +1,13 @@ +two_row: + label: 'Two Row' + category: 'DC Layouts' + template: templates/layouts/two-row + default_region: main + regions: + row_one: + label: First row + row_two: + label: Second row + icon_map: + - [top] + - [bottom] diff --git a/web/themes/custom/dchadwick/dchadwick.libraries.yml b/web/themes/custom/dchadwick/dchadwick.libraries.yml index fc4bfac..a49e18e 100644 --- a/web/themes/custom/dchadwick/dchadwick.libraries.yml +++ b/web/themes/custom/dchadwick/dchadwick.libraries.yml @@ -5,6 +5,7 @@ global-styling: css: theme: css/style.css: {} + https://fonts.googleapis.com/icon?family=Material+Icons: { external: true } # dcjs: # version: 1.x diff --git a/web/themes/custom/dchadwick/dchadwick.theme b/web/themes/custom/dchadwick/dchadwick.theme index 87de144..d48b137 100644 --- a/web/themes/custom/dchadwick/dchadwick.theme +++ b/web/themes/custom/dchadwick/dchadwick.theme @@ -2,6 +2,16 @@ use Drupal\node\NodeInterface; +/** + * Implements template_preprocess_html(). + */ +function dchadwick_preprocess_html(&$variables) { + if (isset($variables['node_type'])) { + // Add node-TYPE class to the element. + $variables['attributes']['class'][] = 'node-type-' . $variables['node_type']; + } +} + function dchadwick_page_attachments_alter(&$page) { $page['#attached']['library'][] = 'dchadwick/brainjs'; } diff --git a/web/themes/custom/dchadwick/src/sass/partials/article.scss b/web/themes/custom/dchadwick/src/sass/partials/article.scss new file mode 100644 index 0000000..a953519 --- /dev/null +++ b/web/themes/custom/dchadwick/src/sass/partials/article.scss @@ -0,0 +1,63 @@ +.node-type-article { + .hero { + position: relative; + max-height: 60vh; + overflow: hidden; + + img { + object-fit: cover; + width: 100%; + height: 100%; + } + + h1 { + // display: block; + width: 100%; + flex-basis: 100%; + color: var(--site-primary); + margin: 0; + } + } + + .article-intro { + display: flex; + position: absolute; + top: 50%; + height: auto; + background: rgba(254, 215, 101, 0.9); + color: var(--site-white); + flex-direction: row; + flex-wrap: wrap; + padding: 20px 30px; + transform: translateY(-50%); + + @media screen and (min-width: $container-full) { + left: calc((100vw - $container-full) / 2); + } + + > div { + flex: 1; + } + } + + #article-body { + display: flex; + padding: 20px; + + + } + + + .left-side { + flex: 2; + p { + font-size: 16px; + line-height: 24px; + } + } + + .right-side { + flex: 1; + } +} + diff --git a/web/themes/custom/dchadwick/src/sass/partials/header.scss b/web/themes/custom/dchadwick/src/sass/partials/header.scss index 0f1e07a..76cd8bc 100644 --- a/web/themes/custom/dchadwick/src/sass/partials/header.scss +++ b/web/themes/custom/dchadwick/src/sass/partials/header.scss @@ -60,3 +60,16 @@ header#header { } } +@media screen and (max-width: $container-full) { + #block-dchadwick-main-menu { + margin-right: 50px; + } + #block-dchadwick-site-branding { + margin-left: 50px; + } + header#header { + padding-left: 20px; + padding-right: 20px; + } +} + diff --git a/web/themes/custom/dchadwick/src/sass/partials/hero.scss b/web/themes/custom/dchadwick/src/sass/partials/hero.scss index 3c41564..828a286 100644 --- a/web/themes/custom/dchadwick/src/sass/partials/hero.scss +++ b/web/themes/custom/dchadwick/src/sass/partials/hero.scss @@ -57,3 +57,4 @@ } } } + diff --git a/web/themes/custom/dchadwick/src/sass/style.scss b/web/themes/custom/dchadwick/src/sass/style.scss index 4d6099d..6982d05 100644 --- a/web/themes/custom/dchadwick/src/sass/style.scss +++ b/web/themes/custom/dchadwick/src/sass/style.scss @@ -24,7 +24,7 @@ $iris: #c4a7e7; $link-color: $foam; // Other variables. -$container-full: 1152px; +$container-full: 1300px; $container-plus-padding: 1216px; // Google fonts. @@ -44,6 +44,7 @@ $container-plus-padding: 1216px; @import "partials/fighters-view"; @import "partials/fight"; @import "partials/event"; +@import "partials/article"; html { font-size: 100%; diff --git a/web/themes/custom/dchadwick/templates/blocks/block--inline-block--premier-banner.html.twig b/web/themes/custom/dchadwick/templates/blocks/block--inline-block--premier-banner.html.twig new file mode 100644 index 0000000..cb272d7 --- /dev/null +++ b/web/themes/custom/dchadwick/templates/blocks/block--inline-block--premier-banner.html.twig @@ -0,0 +1,49 @@ +{# +/** + * @file + * Theme override to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - in_preview: Whether the plugin is being rendered in preview mode. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * 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. + * + * @see template_preprocess_block() + */ +#} +{% set classes = [ + 'ib-premier-banner' +]%} + + {{ title_prefix }} + {{ title_suffix }} +
+ {% embed 'dchadwick:heading' with { + level: 1 + }%} + {% block text %} + {{ label }} + {% endblock %} + {% endembed %} +
+ +
+ {{ content.field_banner_image }} +
+ + diff --git a/web/themes/custom/dchadwick/templates/layouts/two-row.html.twig b/web/themes/custom/dchadwick/templates/layouts/two-row.html.twig new file mode 100644 index 0000000..5c475ad --- /dev/null +++ b/web/themes/custom/dchadwick/templates/layouts/two-row.html.twig @@ -0,0 +1,14 @@ +{% if content %} +
+ {% if content.row_1 %} +
+ {{ content.row_1 }} +
+ {% endif %} + {% if content.row_2 %} +
+ {{ content.row_2 }} +
+ {% endif %} +
+{% endif %} diff --git a/web/themes/custom/dchadwick/templates/node/node--article.html.twig b/web/themes/custom/dchadwick/templates/node/node--article.html.twig new file mode 100644 index 0000000..7d8800e --- /dev/null +++ b/web/themes/custom/dchadwick/templates/node/node--article.html.twig @@ -0,0 +1,91 @@ +{# +/** + * @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: (optional) 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: (optional) Themed creation date field. + * - author_name: (optional) 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'. + * + * @see template_preprocess_node() + * + */ +#} + + +
+ {{ content.field_article_image }} +
+ {{ title_prefix }} +

{{ label }}

+ {{ title_suffix }} + calendar_month{{ date }} + schedule{{ content.field_read_time|default('1 minute read time') }} +
+
+ +
+
+ {{ content.body }} +
+
+

This is where link block goes

+

This is where link block goes

+

This is where link block goes

+

This is where link block goes

+

This is where link block goes

+

This is where link block goes

+
+
+ +