From 025c63e1dd9a9869d34d5b8bc0ad55ff7006d791 Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Sun, 25 Aug 2024 19:36:28 -0400 Subject: [PATCH] Updating containers and mobile styles, allowing for local videos. --- config/default/gin.settings.yml | 2 +- .../KernelRequestNodePathCheck.php | 2 +- .../components/button/button.component.yml | 17 ++++--- .../dchadwick/components/button/button.twig | 8 ++-- web/themes/custom/dchadwick/css/style.css | 40 ++++++++++++++--- .../dchadwick/src/sass/partials/buttons.scss | 6 ++- .../dchadwick/src/sass/partials/header.scss | 4 ++ .../dchadwick/src/sass/partials/hero.scss | 29 ++++++++++-- .../custom/dchadwick/src/sass/style.scss | 4 +- .../block--inline-block--hero-slide.html.twig | 6 ++- ...-block-content--field-slide-link.html.twig | 45 +++++-------------- 11 files changed, 105 insertions(+), 58 deletions(-) diff --git a/config/default/gin.settings.yml b/config/default/gin.settings.yml index 9f643ae..06ee3d8 100644 --- a/config/default/gin.settings.yml +++ b/config/default/gin.settings.yml @@ -15,7 +15,7 @@ third_party_settings: preset_accent_color: teal preset_focus_color: accent enable_darkmode: '0' -classic_toolbar: new +classic_toolbar: horizontal secondary_toolbar_frontend: true high_contrast_mode: false accent_color: '' diff --git a/web/modules/custom/nodepath_access/src/EventSubscriber/KernelRequestNodePathCheck.php b/web/modules/custom/nodepath_access/src/EventSubscriber/KernelRequestNodePathCheck.php index 401f569..28c5435 100644 --- a/web/modules/custom/nodepath_access/src/EventSubscriber/KernelRequestNodePathCheck.php +++ b/web/modules/custom/nodepath_access/src/EventSubscriber/KernelRequestNodePathCheck.php @@ -38,7 +38,7 @@ public function onRequest(RequestEvent $event) { $current_request = \Drupal::requestStack()->getCurrentRequest(); $path = \Drupal::request()->getRequestUri(); if (str_contains($path, '/node/')) { - throw new NotFoundHttpException(); + return new NotFoundHttpException(); } } } diff --git a/web/themes/custom/dchadwick/components/button/button.component.yml b/web/themes/custom/dchadwick/components/button/button.component.yml index 9bda22a..05e3924 100644 --- a/web/themes/custom/dchadwick/components/button/button.component.yml +++ b/web/themes/custom/dchadwick/components/button/button.component.yml @@ -10,8 +10,15 @@ props: description: "The type of button to render" # The enum directive restricts the possible values in the element to our list. enum: ['primary', 'secondary', 'danger'] -slots: - # Content to display in the chip. - button_text: - title: Button Text - description: The text for the button + link: + type: boolean + title: Link type + description: If true, output anchor element, else button. + uri: + type: string + title: Uri destination + description: The destination for the button. + text: + type: string + title: Text + description: The text for the button. diff --git a/web/themes/custom/dchadwick/components/button/button.twig b/web/themes/custom/dchadwick/components/button/button.twig index a847f6c..ab7ce21 100644 --- a/web/themes/custom/dchadwick/components/button/button.twig +++ b/web/themes/custom/dchadwick/components/button/button.twig @@ -5,6 +5,8 @@ ] %} - +{% if link %} + {{ text }} +{% else %} + +{% endif %} diff --git a/web/themes/custom/dchadwick/css/style.css b/web/themes/custom/dchadwick/css/style.css index f353738..f2a2a19 100644 --- a/web/themes/custom/dchadwick/css/style.css +++ b/web/themes/custom/dchadwick/css/style.css @@ -47,10 +47,12 @@ h1.center { cursor: pointer; transition: background 0.2s ease; padding: 10px 20px; + border: none; + border-radius: 5px; } .btn-primary:hover { - background: var(--site-secondary); - color: var(--site-primary); + background: var(--site-white); + color: var(--site-secondary); } header#header { @@ -67,6 +69,9 @@ header#header > div { justify-content: space-between; align-items: center; } +header#header .region-navigation { + width: 100%; +} header#header #block-dchadwick-site-branding a { white-space: nowrap; color: var(--site-secondary); @@ -145,6 +150,17 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover { overflow: hidden; position: relative; } +.hero-slide .hero-bground::before { + content: ""; + position: absolute; + background: rgba(0, 0, 0, 0.3); + border-radius: 5px; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; +} .hero-slide video { position: absolute; top: -50px; @@ -157,21 +173,32 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover { } .hero-caption { - width: 50%; + z-index: 2; + width: 400px; position: absolute; top: 50%; transform: translateY(-50%); left: 2rem; - background: white; + background: rgba(254, 215, 101, 0.93); padding: 2rem 8rem 2rem 2rem; + border-radius: 10px; } @media screen and (max-width: 767px) { .hero-caption { width: 100%; + top: unset; + transform: none; + left: 0; + bottom: 0; + border-radius: 0; } } .hero-caption__text { - font-size: 2rem; + font-size: 24px; + margin-bottom: 20px; +} +.hero-caption__text p { + margin: 0; } #recent-fights > div { @@ -404,6 +431,7 @@ table.cols-5 td.incorrect { html { font-size: 100%; box-sizing: border-box; + overflow-x: hidden; } .region-content { @@ -431,6 +459,6 @@ img { } .container { - width: 1152px; + max-width: 1152px; margin: auto; } \ No newline at end of file diff --git a/web/themes/custom/dchadwick/src/sass/partials/buttons.scss b/web/themes/custom/dchadwick/src/sass/partials/buttons.scss index 211c19c..4854d2e 100644 --- a/web/themes/custom/dchadwick/src/sass/partials/buttons.scss +++ b/web/themes/custom/dchadwick/src/sass/partials/buttons.scss @@ -4,9 +4,11 @@ cursor: pointer; transition: background .2s ease; padding: 10px 20px; + border: none; + border-radius: 5px; &:hover { - background: var(--site-secondary); - color: var(--site-primary); + background: var(--site-white); + color: var(--site-secondary); } } diff --git a/web/themes/custom/dchadwick/src/sass/partials/header.scss b/web/themes/custom/dchadwick/src/sass/partials/header.scss index 3f27795..0f1e07a 100644 --- a/web/themes/custom/dchadwick/src/sass/partials/header.scss +++ b/web/themes/custom/dchadwick/src/sass/partials/header.scss @@ -13,6 +13,10 @@ header#header { align-items: center; } + .region-navigation { + width: 100%; + } + #block-dchadwick-site-branding { a { white-space: nowrap; diff --git a/web/themes/custom/dchadwick/src/sass/partials/hero.scss b/web/themes/custom/dchadwick/src/sass/partials/hero.scss index 487411d..3c41564 100644 --- a/web/themes/custom/dchadwick/src/sass/partials/hero.scss +++ b/web/themes/custom/dchadwick/src/sass/partials/hero.scss @@ -4,7 +4,17 @@ position: relative; .hero-bground { - // position: relative; + &::before { + content: ''; + position: absolute; + background: rgba(0, 0, 0, 0.3); + border-radius: 5px; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + } } video { @@ -20,19 +30,30 @@ } .hero-caption { - width: 50%; + z-index: 2; + width: 400px; position: absolute; top: 50%; transform: translateY(-50%); left: 2rem; - background: white; + background: rgba(254, 215, 101, 0.93); padding: 2rem 8rem 2rem 2rem; + border-radius: 10px; @media screen and (max-width: 767px) { width: 100%; + top: unset; + transform: none; + left: 0; + bottom: 0; + border-radius: 0; } &__text { - font-size: 2rem; + font-size: 24px; + margin-bottom: 20px; + p { + margin: 0; + } } } diff --git a/web/themes/custom/dchadwick/src/sass/style.scss b/web/themes/custom/dchadwick/src/sass/style.scss index d6419c8..4d6099d 100644 --- a/web/themes/custom/dchadwick/src/sass/style.scss +++ b/web/themes/custom/dchadwick/src/sass/style.scss @@ -48,7 +48,7 @@ $container-plus-padding: 1216px; html { font-size: 100%; box-sizing: border-box; - // overflow: hidden; + overflow-x: hidden; } .region-content { @@ -76,7 +76,7 @@ img { } .container { - width: $container-full; + max-width: $container-full; margin: auto; } diff --git a/web/themes/custom/dchadwick/templates/blocks/block--inline-block--hero-slide.html.twig b/web/themes/custom/dchadwick/templates/blocks/block--inline-block--hero-slide.html.twig index 1e49ea5..e661e97 100644 --- a/web/themes/custom/dchadwick/templates/blocks/block--inline-block--hero-slide.html.twig +++ b/web/themes/custom/dchadwick/templates/blocks/block--inline-block--hero-slide.html.twig @@ -39,7 +39,7 @@ {# Set the variables for the block #} {% set hasRemoteVideo = content.field_external_video.0['#context']['value'] %} {% set slideImage = content.field_slide_image.0['#media'].field_media_image.entity.uri.value %} - +{% set slideVideo = file_url(content.field_slide_image.0['#media'].field_media_video_file.entity.uri.value) %} {% block content %} {{ title_prefix }} @@ -49,6 +49,10 @@ + {% elseif slideVideo is not null %} + {% else %} {% endif %} diff --git a/web/themes/custom/dchadwick/templates/field/field--block-content--field-slide-link.html.twig b/web/themes/custom/dchadwick/templates/field/field--block-content--field-slide-link.html.twig index ed140b0..a189b81 100644 --- a/web/themes/custom/dchadwick/templates/field/field--block-content--field-slide-link.html.twig +++ b/web/themes/custom/dchadwick/templates/field/field--block-content--field-slide-link.html.twig @@ -37,36 +37,15 @@ * @see template_preprocess_field() */ #} -{% - set classes = [ - 'field', - 'field--name-' ~ field_name|clean_class, - 'field--type-' ~ field_type|clean_class, - 'field--label-' ~ label_display, - label_display == 'inline' ? 'clearfix', - ] -%} -{% - set title_classes = [ - 'field__label', - label_display == 'visually_hidden' ? 'visually-hidden', - ] -%} - - - {% if multiple %} -
- {% endif %} - {% for item in items %} - {% set linkText = item.content['#title'] %} - {% set url = item.content['#url'] ?? '' %} - {% include '@dchadwick/templates/components/button.html.twig' with { - 'type': 'primary', - 'text': linkText, - 'uri': url - } %} - {% endfor %} - {% if multiple %} -
- {% endif %} - + + {% for item in items %} + {% set linkText = item.content['#title'] %} + {% set url = item.content['#url'] ?? '' %} + {% include 'dchadwick:button' with { + 'type': 'primary', + 'text': linkText, + 'uri': url, + 'link': true + } %} + {% endfor %} +