New updates.
This commit is contained in:
Dan Chadwick
parent
41d0d557fb
commit
41136a20c4
@ -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",
|
||||
|
||||
54
composer.lock
generated
54
composer.lock
generated
@ -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",
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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.
|
||||
34
web/themes/custom/dchadwick/components/heading/heading.css
Normal file
34
web/themes/custom/dchadwick/components/heading/heading.css
Normal file
@ -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; */
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
<h{{ level }}>
|
||||
{%- apply spaceless %}
|
||||
{% block text %}{% endblock %}
|
||||
{% endapply %}
|
||||
</h{{ level }}>
|
||||
@ -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;
|
||||
}
|
||||
13
web/themes/custom/dchadwick/dchadwick.layouts.yml
Normal file
13
web/themes/custom/dchadwick/dchadwick.layouts.yml
Normal file
@ -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]
|
||||
@ -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
|
||||
|
||||
@ -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 <body> element.
|
||||
$variables['attributes']['class'][] = 'node-type-' . $variables['node_type'];
|
||||
}
|
||||
}
|
||||
|
||||
function dchadwick_page_attachments_alter(&$page) {
|
||||
$page['#attached']['library'][] = 'dchadwick/brainjs';
|
||||
}
|
||||
|
||||
63
web/themes/custom/dchadwick/src/sass/partials/article.scss
Normal file
63
web/themes/custom/dchadwick/src/sass/partials/article.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -57,3 +57,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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'
|
||||
]%}
|
||||
<div{{ attributes.addClass(classes) }}>
|
||||
{{ title_prefix }}
|
||||
{{ title_suffix }}
|
||||
<div class="heading-wrapper">
|
||||
{% embed 'dchadwick:heading' with {
|
||||
level: 1
|
||||
}%}
|
||||
{% block text %}
|
||||
{{ label }}
|
||||
{% endblock %}
|
||||
{% endembed %}
|
||||
</div>
|
||||
|
||||
<div class="premier-img">
|
||||
{{ content.field_banner_image }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
{% if content %}
|
||||
<div {{ attributes.addClass('two-row') }}>
|
||||
{% if content.row_1 %}
|
||||
<div {{ region_attributes.main.addClass('row-one') }}>
|
||||
{{ content.row_1 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if content.row_2 %}
|
||||
<div {{ region_attributes.sidebar.addClass('row-two') }}>
|
||||
{{ content.row_2 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -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()
|
||||
*
|
||||
*/
|
||||
#}
|
||||
<article{{ attributes }}>
|
||||
|
||||
<div class="hero">
|
||||
{{ content.field_article_image }}
|
||||
<div class="article-intro">
|
||||
{{ title_prefix }}
|
||||
<h1>{{ label }}</h1>
|
||||
{{ title_suffix }}
|
||||
<span class="material-icons md-24">calendar_month</span>{{ date }}
|
||||
<span class="material-icons md-24">schedule</span>{{ content.field_read_time|default('1 minute read time') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="article-body" class="container">
|
||||
<div class="left-side">
|
||||
{{ content.body }}
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<p>This is where link block goes</p>
|
||||
<p>This is where link block goes</p>
|
||||
<p>This is where link block goes</p>
|
||||
<p>This is where link block goes</p>
|
||||
<p>This is where link block goes</p>
|
||||
<p>This is where link block goes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
Loading…
x
Reference in New Issue
Block a user