Overhaul of theme

This commit is contained in:
Dan Chadwick 2024-08-25 12:32:35 -04:00
parent f63bdddde4
commit 7304c4b0d7
58 changed files with 818 additions and 569 deletions

View File

@ -18,7 +18,7 @@
"composer/installers": "^2.0",
"cweagans/composer-patches": "^1.7",
"drupal/admin_toolbar": "^3.4",
"drupal/bootstrap5": "^4.0",
"drupal/better_exposed_filters": "^7.0",
"drupal/color_field": "^3.0",
"drupal/config_split": "^2.0",
"drupal/core-composer-scaffold": "^10.3",

65
composer.lock generated
View File

@ -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": "10307c45cf1b4a18017bea4209009af0",
"content-hash": "3148b5703d290b8646f1745a52b3962e",
"packages": [
{
"name": "asm89/stack-cors",
@ -1554,27 +1554,27 @@
}
},
{
"name": "drupal/bootstrap5",
"version": "4.0.3",
"name": "drupal/better_exposed_filters",
"version": "7.0.1",
"source": {
"type": "git",
"url": "https://git.drupalcode.org/project/bootstrap5.git",
"reference": "4.0.3"
"url": "https://git.drupalcode.org/project/better_exposed_filters.git",
"reference": "7.0.1"
},
"dist": {
"type": "zip",
"url": "https://ftp.drupal.org/files/projects/bootstrap5-4.0.3.zip",
"reference": "4.0.3",
"shasum": "3181f76d9f080396931cd5a5643ad710f7bfdad7"
"url": "https://ftp.drupal.org/files/projects/better_exposed_filters-7.0.1.zip",
"reference": "7.0.1",
"shasum": "985389c1c4bac5d3f1e4ea4d6c52ad3d7c789b9c"
},
"require": {
"drupal/core": "^10.1 || ^11.0"
"drupal/core": "^10 || ^11"
},
"type": "drupal-theme",
"type": "drupal-module",
"extra": {
"drupal": {
"version": "4.0.3",
"datestamp": "1723049588",
"version": "7.0.1",
"datestamp": "1724346308",
"security-coverage": {
"status": "covered",
"message": "Covered by Drupal's security advisory policy"
@ -1587,20 +1587,43 @@
],
"authors": [
{
"name": "Vladimir Roudakov (vladimiraus)",
"homepage": "https://www.drupal.org/u/vladimiraus",
"role": "Maintainer"
"name": "Mike Keran",
"homepage": "https://www.drupal.org/u/mikeker"
},
{
"name": "VladimirAus",
"homepage": "https://www.drupal.org/user/673120"
"name": "Martin Keereman",
"homepage": "https://www.drupal.org/u/etroid"
},
{
"name": "Neslee Canil Pinto",
"homepage": "https://www.drupal.org/u/neslee-canil-pinto"
},
{
"name": "mikeker",
"homepage": "https://www.drupal.org/user/192273"
},
{
"name": "neslee canil pinto",
"homepage": "https://www.drupal.org/user/3580850"
},
{
"name": "podarok",
"homepage": "https://www.drupal.org/user/116002"
},
{
"name": "rlhawk",
"homepage": "https://www.drupal.org/user/352283"
},
{
"name": "smustgrave",
"homepage": "https://www.drupal.org/user/3252890"
}
],
"description": "Master theme using Bootstrap 5: powerful front-end framework for faster and easier web development.",
"homepage": "https://www.drupal.org/project/bootstrap5",
"description": "Replaces the Views default single- or multi-select boxes with more advanced options.",
"homepage": "https://www.drupal.org/project/better_exposed_filters",
"support": {
"source": "https://git.drupalcode.org/project/bootstrap5",
"issues": "https://www.drupal.org/project/issues/bootstrap5"
"source": "https://git.drupalcode.org/project/better_exposed_filters",
"issues": "https://www.drupal.org/project/issues/better_exposed_filters"
}
},
{

View File

@ -1,27 +0,0 @@
uuid: e70338c0-9529-4094-9da2-10f0b31f21aa
langcode: en
status: false
dependencies:
config:
- system.menu.account
module:
- system
theme:
- bootstrap5
_core:
default_config_hash: YRZjNp4d68NjJAVhrrUrXKwpV12i7OFWg4MY6Bsd0mw
id: bootstrap5_account_menu
theme: bootstrap5
region: header
weight: -7
provider: null
plugin: 'system_menu_block:account'
settings:
id: 'system_menu_block:account'
label: 'User account menu'
label_display: '0'
provider: system
level: 1
depth: 0
expand_all_items: false
visibility: { }

View File

@ -1,25 +0,0 @@
uuid: 22b18482-150f-49f3-af60-ba9ea44b83c0
langcode: en
status: false
dependencies:
module:
- system
theme:
- bootstrap5
_core:
default_config_hash: nuW1Z5MdvzbCCEZ9RQojaEWB6Zni32zTq-v5OWbS2sc
id: bootstrap5_branding
theme: bootstrap5
region: header
weight: -6
provider: null
plugin: system_branding_block
settings:
id: system_branding_block
label: 'Site branding'
label_display: '0'
provider: system
use_site_logo: true
use_site_name: true
use_site_slogan: false
visibility: { }

View File

@ -1,22 +0,0 @@
uuid: 97018347-caed-406a-8b68-7db2430cb538
langcode: en
status: false
dependencies:
module:
- system
theme:
- bootstrap5
_core:
default_config_hash: VShtwe72J2j41BJzApoNbs8l554EpngM5RTObxM7yiw
id: bootstrap5_breadcrumbs
theme: bootstrap5
region: header
weight: 0
provider: null
plugin: system_breadcrumb_block
settings:
id: system_breadcrumb_block
label: Breadcrumbs
label_display: '0'
provider: system
visibility: { }

View File

@ -1,22 +0,0 @@
uuid: e3124841-e734-4552-9015-82c9b9738bc7
langcode: en
status: false
dependencies:
module:
- system
theme:
- bootstrap5
_core:
default_config_hash: 1o0W13wt232YmsDYiRA5xtlFq0L2WNS7FmIVbBeuhIY
id: bootstrap5_content
theme: bootstrap5
region: header
weight: -1
provider: null
plugin: system_main_block
settings:
id: system_main_block
label: 'Main page content'
label_display: '0'
provider: system
visibility: { }

View File

@ -1,27 +0,0 @@
uuid: a6852dd0-e9b5-4512-8cc1-a0017de1a0b3
langcode: en
status: false
dependencies:
config:
- system.menu.footer
module:
- system
theme:
- bootstrap5
_core:
default_config_hash: xBR1vgpnqSUW4pA2LC3rfhu27FQUox9zZEYsdAFM2Sg
id: bootstrap5_footer
theme: bootstrap5
region: header
weight: -6
provider: null
plugin: 'system_menu_block:footer'
settings:
id: 'system_menu_block:footer'
label: Footer
label_display: '0'
provider: system
level: 1
depth: 0
expand_all_items: false
visibility: { }

View File

@ -1,22 +0,0 @@
uuid: 0f25af78-db97-4a05-a95a-2fb71ff9cab4
langcode: en
status: false
dependencies:
module:
- help
theme:
- bootstrap5
_core:
default_config_hash: S0Y16qIQfKiOEzWlddOGk3u_BKwAruAheA8VVFfGbLc
id: bootstrap5_help
theme: bootstrap5
region: header
weight: -3
provider: null
plugin: help_block
settings:
id: help_block
label: Help
label_display: '0'
provider: help
visibility: { }

View File

@ -1,20 +0,0 @@
uuid: 2b637fb3-4dfe-4454-abd8-e78bdd223903
langcode: en
status: false
dependencies:
theme:
- bootstrap5
_core:
default_config_hash: MBqG1B5mr5-fPSCDyTR6z2zVTRxZ10XeS_pAw6C7za4
id: bootstrap5_local_actions
theme: bootstrap5
region: header
weight: -2
provider: null
plugin: local_actions_block
settings:
id: local_actions_block
label: 'Primary admin actions'
label_display: '0'
provider: core
visibility: { }

View File

@ -1,22 +0,0 @@
uuid: 47eddd6c-c952-469e-998a-206e0a2eb00b
langcode: en
status: false
dependencies:
theme:
- bootstrap5
_core:
default_config_hash: yX9o6NcntZnXRDfbJoHY1pJwuXlumW44m5AMs347NN4
id: bootstrap5_local_tasks
theme: bootstrap5
region: header
weight: -4
provider: null
plugin: local_tasks_block
settings:
id: local_tasks_block
label: Tabs
label_display: '0'
provider: core
primary: true
secondary: true
visibility: { }

View File

@ -1,27 +0,0 @@
uuid: 92ffc7ee-974e-459e-b035-d8d827614d10
langcode: en
status: false
dependencies:
config:
- system.menu.main
module:
- system
theme:
- bootstrap5
_core:
default_config_hash: Fm7sDs2U1u99MaVOZEZqa-QOJrrUiQMWJb1jMozYO48
id: bootstrap5_main_navigation
theme: bootstrap5
region: header
weight: 0
provider: null
plugin: 'system_menu_block:main'
settings:
id: 'system_menu_block:main'
label: 'Main navigation'
label_display: '0'
provider: system
level: 1
depth: 0
expand_all_items: true
visibility: { }

View File

@ -1,22 +0,0 @@
uuid: e1b8e61d-6455-4b31-ae00-fb085c3fa4a7
langcode: en
status: false
dependencies:
module:
- system
theme:
- bootstrap5
_core:
default_config_hash: 9LdMj38y4GDi23GrIUtIZIV1bJEn1C47N19jrswvcLc
id: bootstrap5_messages
theme: bootstrap5
region: header
weight: -7
provider: null
plugin: system_messages_block
settings:
id: system_messages_block
label: Messages
label_display: '0'
provider: system
visibility: { }

View File

@ -1,20 +0,0 @@
uuid: 784cd92c-5faa-4c68-b465-f0972458cc85
langcode: en
status: false
dependencies:
theme:
- bootstrap5
_core:
default_config_hash: qYppfxaWSy6BwGNKdMch1PeUA24PlRTt39jQft6A6Kg
id: bootstrap5_page_title
theme: bootstrap5
region: header
weight: -6
provider: null
plugin: page_title_block
settings:
id: page_title_block
label: 'Page title'
label_display: '0'
provider: core
visibility: { }

View File

@ -1,22 +0,0 @@
uuid: f21d8a74-b198-49c7-8cbd-2593e9f05058
langcode: en
status: false
dependencies:
module:
- system
theme:
- bootstrap5
_core:
default_config_hash: 2_xxaOb8b_0AUgYFdJLxIBDDwufyh6YozhGfBd97p38
id: bootstrap5_powered_by_drupal
theme: bootstrap5
region: header
weight: 0
provider: null
plugin: system_powered_by_block
settings:
id: system_powered_by_block
label: 'Powered by Drupal'
label_display: '0'
provider: system
visibility: { }

View File

@ -1,23 +0,0 @@
uuid: 4ae35a75-31bb-492a-8933-b1f6696a30f8
langcode: en
status: false
dependencies:
module:
- search
theme:
- bootstrap5
_core:
default_config_hash: HZJ8894mYbX0pdeltUdfnQjONb-BnkflWDqEm_x13m4
id: bootstrap5_search_form
theme: bootstrap5
region: header
weight: 0
provider: null
plugin: search_form_block
settings:
id: search_form_block
label: 'Search form'
label_display: '0'
provider: search
page_id: ''
visibility: { }

View File

@ -1,27 +0,0 @@
uuid: ec2d9add-9e53-4006-97bc-b65860f178ef
langcode: en
status: false
dependencies:
config:
- system.menu.account
module:
- system
theme:
- dchadwick
_core:
default_config_hash: gmxYWWHmgbe0Pnv8y48ZLSLH5mEHejOjAP6RLxUfdzU
id: dchadwick_account_menu
theme: dchadwick
region: navigation
weight: -3
provider: null
plugin: 'system_menu_block:account'
settings:
id: 'system_menu_block:account'
label: 'User account menu'
label_display: '0'
provider: system
level: 1
depth: 1
expand_all_items: false
visibility: { }

View File

@ -1,4 +1,4 @@
uuid: 123b5a5b-78e4-4156-bc6f-3218331df74b
uuid: 29f74c57-3c81-460b-bdaa-cb6ab64027ab
langcode: en
status: true
dependencies:

View File

@ -1,4 +1,4 @@
uuid: 429943c8-e547-4ab1-a226-f3758aa86d56
uuid: 391c708e-5550-4873-b7b1-0943984660c7
langcode: en
status: true
dependencies:

View File

@ -1,4 +1,4 @@
uuid: cac3f5b5-9b4b-41f0-a941-7d3d917931c6
uuid: e079b769-5def-4ddf-8946-416a67ea776f
langcode: en
status: true
dependencies:

View File

@ -1,4 +1,4 @@
uuid: 54417275-a461-42cf-b3c6-0356f5cc8ce7
uuid: e6e362b2-3c5e-4815-9c07-850e81190fae
langcode: en
status: true
dependencies:

View File

@ -1,20 +0,0 @@
uuid: 5dd6f40b-47fb-4e81-986f-c50208e5c90e
langcode: en
status: true
dependencies:
theme:
- dchadwick
_core:
default_config_hash: Q9_2whdOj1YIomfvsIfopROW4FT_X5pY0DjdOiOaQ5U
id: dchadwick_primary_admin_actions
theme: dchadwick
region: content
weight: -2
provider: null
plugin: local_actions_block
settings:
id: local_actions_block
label: 'Primary admin actions'
label_display: '0'
provider: core
visibility: { }

View File

@ -1,4 +1,4 @@
uuid: a909a64d-1789-4c8e-8693-4e3b2da391a2
uuid: b9dc6b43-f502-4144-887c-3553a527b6d0
langcode: en
status: true
dependencies:

View File

@ -1,4 +1,4 @@
uuid: f42a7f03-ba02-4dab-8cd8-26427d559a28
uuid: 7f8dcc6e-94eb-4f00-9366-85e929ef583e
langcode: en
status: false
dependencies:

View File

@ -1,4 +1,4 @@
uuid: 2145c621-fffa-4448-8615-695aff34a6d2
uuid: c5f0bbff-8b9d-4ae8-8e77-ac7aacfa1031
langcode: en
status: true
dependencies:

View File

@ -1,4 +1,4 @@
uuid: 13674544-ee71-4928-96ff-a053384579c6
uuid: f0722af2-0e09-4b22-b202-4ff456813cba
langcode: en
status: true
dependencies:

View File

@ -1,10 +0,0 @@
_core:
default_config_hash: o7UdhCuEHWPn7Pz1c9KT7W818Cvg9EMVd2Gay1qKKPk
b5_body_schema: ''
b5_body_bg_schema: ''
b5_navbar_schema: dark
b5_navbar_bg_schema: dark
b5_footer_schema: dark
b5_footer_bg_schema: secondary
b5_top_container: container
b5_top_container_config: ''

View File

@ -2,6 +2,8 @@ _core:
default_config_hash: R4IF-ClDHXxblLcG0L7MgsLvfBIMAvi_skumNFQwkDc
module:
announcements_feed: 0
auto_alt: 0
better_exposed_filters: 0
big_pipe: 0
block: 0
block_content: 0
@ -63,8 +65,7 @@ module:
minimal: 1000
theme:
claro: 0
dchadwick: 0
stable9: 0
bootstrap5: 0
gin: 0
dchadwick: 0
profile: minimal

View File

@ -1,22 +0,0 @@
features:
node_user_picture: 1
comment_user_picture: true
comment_user_verification: true
favicon: 1
logo:
use_default: 1
favicon:
use_default: 0
path: 'public://favicon.png'
mimetype: image/png
b5_top_container: container
b5_top_container_config: ''
b5_body_schema: none
b5_body_bg_schema: none
b5_navbar_schema: none
b5_navbar_bg_schema: none
b5_footer_schema: none
b5_footer_bg_schema: none
subtheme_folder: themes/custom
subtheme_name: 'B5 subtheme'
subtheme_machine_name: b5subtheme

View File

@ -12,6 +12,7 @@ dependencies:
- system.menu.main
- taxonomy.vocabulary.ufc_divisions
module:
- better_exposed_filters
- media
- node
- taxonomy
@ -359,15 +360,51 @@ display:
offset_label: Offset
quantity: 9
exposed_form:
type: basic
type: bef
options:
submit_button: Apply
submit_button: Search
reset_button: false
reset_button_label: Reset
exposed_sorts_label: 'Sort by'
expose_sort_order: true
expose_sort_order: false
sort_asc_label: Asc
sort_desc_label: Desc
text_input_required: 'Select any filter and click on Apply to see results'
text_input_required_format: basic_html
bef:
general:
autosubmit: true
autosubmit_exclude_textfield: false
autosubmit_textfield_delay: 500
autosubmit_hide: true
input_required: false
allow_secondary: false
secondary_label: 'Advanced options'
secondary_open: false
reset_button_always_show: false
filter:
title:
plugin_id: default
advanced:
placeholder_text: ''
collapsible: false
collapsible_disable_automatic_open: false
is_secondary: false
hide_label: false
field_division_target_id:
plugin_id: bef
advanced:
sort_options: false
rewrite:
filter_rewrite_values: ''
filter_rewrite_values_key: false
collapsible: false
collapsible_disable_automatic_open: false
is_secondary: false
hide_label: false
select_all_none: false
select_all_none_nested: false
display_inline: false
access:
type: perm
options:
@ -507,11 +544,13 @@ display:
limit: true
error_message: true
style:
type: default
type: grid_responsive
options:
grouping: { }
row_class: col-md-3
default_row_class: true
uses_fields: false
columns: 4
cell_min_width: 100
grid_gutter: 10
alignment: horizontal
row:
type: 'entity:node'
options:
@ -526,8 +565,14 @@ display:
replica: false
query_tags: { }
relationships: { }
css_class: container
use_ajax: true
header: { }
header:
entity_node:
id: entity_node
table: views
field: entity_node
plugin_id: entity
footer: { }
display_extenders: { }
cache_metadata:
@ -550,6 +595,20 @@ display:
display_plugin: page
position: 1
display_options:
defaults:
header: false
header:
area_text_custom:
id: area_text_custom
table: views
field: area_text_custom
relationship: none
group_type: group
admin_label: ''
plugin_id: text_custom
empty: false
content: '<h1>All Fighters</.h1>'
tokenize: false
display_extenders: { }
path: fighters-view
menu:

View File

@ -333,7 +333,19 @@ display:
replica: false
query_tags: { }
relationships: { }
header: { }
css_class: container
header:
area_text_custom:
id: area_text_custom
table: views
field: area_text_custom
relationship: none
group_type: group
admin_label: ''
plugin_id: text_custom
empty: false
content: '<h1 class="center">Events List</h1>'
tokenize: false
footer: { }
display_extenders: { }
cache_metadata:

View File

@ -0,0 +1,5 @@
name: Auto Alt
description: 'AI generated alt text on media items.'
type: module
package: Media
core_version_requirement: ^10 || ^11

View File

@ -0,0 +1,9 @@
auto_alt:
css:
theme:
css/styles.css: { }
js:
js/autoAlt.js: { }
dependencies:
- core/once
- core/drupal

View File

@ -0,0 +1,12 @@
<?php
function auto_alt_form_alter(&$form, &$form_state, $form_id) {
if ($form_id !== 'media_image_edit_form') {
return;
}
$form['auto_alt'] = [
'#type' => 'markup',
'#markup' => '<span id="autoalt">🪄</span>'
];
$form['#attached']['library'][] = 'auto_alt/auto_alt';
}

View File

@ -0,0 +1,7 @@
auto_alt.content:
path: '/ai/alt-text-generator'
defaults:
_controller: '\Drupal\auto_alt\Controller\AltTextGenerator::generate'
_title: ''
requirements:
_permission: 'access content'

View File

@ -0,0 +1,19 @@
.form-managed-file__meta-items {
position: relative;
}
#autoalt {
position: absolute;
top: 46px;
right: 3px;
padding: 8px;
background: 'whitesmoke';
transform: translateY(-50%);
border-radius: 0 5px 5px 0;
cursor: pointer;
transition: background .2s ease;
}
#autoalt:hover {
background: lightgray;
}

View File

@ -0,0 +1,32 @@
(function (Drupal, once) {
Drupal.behaviors.autoAltBehavior = {
attach: function (context, settings) {
once('autoAltBehavior', '#edit-field-media-image-0-alt', context).forEach(function (element) {
// Move the wand to where it should be.
let wand = context.getElementById("autoalt");
let mediaMeta = context.querySelector('.form-managed-file__meta-items');
mediaMeta.append(wand);
wand.addEventListener('click', generateAltText);
});
async function generateAltText() {
let imageUrl = document.querySelector('.image-preview__img-wrapper img').src;
const url = "/ai/alt-text-generator?";
try {
const response = await fetch(url + new URLSearchParams({
image: imageUrl,
}).toString());
if (!response.ok) {
throw new Error(`Response status: ${response.status}`);
}
const json = await response.json();
let altInput = document.getElementById('edit-field-media-image-0-alt');
altInput.value = json;
} catch (error) {
console.error(error.message);
}
}
}
};
})(Drupal, once);

View File

@ -0,0 +1,41 @@
<?php
namespace Drupal\auto_alt\Controller;
use \Drupal\Core\Controller\ControllerBase;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
/**
* Generate Alt Text for an image.
*/
class AltTextGenerator extends ControllerBase {
/**
* Returns a renderable array for a test page.
*
* return []
*/
public function generate() {
// Get the url to the image from the request.
$image_url = \Drupal::request()->get('image');
if (!$image_url) {
throw new NotFoundHttpException();
}
$image_contents = file_get_contents($image_url);
$encoded_image = base64_encode($image_contents);
// Now send this to chat gpt / ai to generate alt text.
$response = [
"This is some alt text for an image.",
"A new string for alt text",
"Another string about alt text",
];
$text_to_return = rand(0,2);
$json_response = new JsonResponse();
$json_response->headers->set('Content-Type', 'application/json');
$json_response->setData($response[$text_to_return]);
return $json_response;
}
}

View File

@ -20,6 +20,16 @@
display: flex;
flex-wrap: wrap;
flex-direction: row;
color: var(--site-platinum, #fff);
font-size: 1.5rem;
}
.ping-pong__info-text p {
margin-bottom: 0;
}
.ping-pong__info-text {
margin-bottom: 2rem;
}
.ping-pong__info-inner {
@ -35,7 +45,10 @@
}
.ping-pong__info h2 {
font-size: 3rem;
color: var(--site-white, #fff);
margin: 0;
margin-bottom: 1rem;
}
.ping-pong.right {
@ -55,7 +68,7 @@
}
.field--name-field-ping-pong-cta a {
background: rgba(255, 255, 255, 0.66);
background: var(--site-secondary, #fff);
padding: 10px 20px;
border-radius: 10px;
transition: background .5s ease;

View File

@ -31,7 +31,7 @@
<div class="ping-pong__info-text">
{% block body %}{% endblock %}
</div>
<div class="ping-pong__info-cta">
<div class="ping-pong__info-cta btn-primary">
{% block cta %}{% endblock %}
</div>
</div>

View File

@ -1,2 +1,2 @@
{{ attach_library('ufc/recent_fights_react') }}
<div id="recent-fights"></div>
<div id="recent-fights" class="container"></div>

View File

@ -1,35 +1,233 @@
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
header {
:root {
--site-primary: #009FB7;
--site-secondary: #FED766;
--site-white: #F4F4F8;
--site-platinum: #E6E6EA;
--site-danger: #FE4A49;
}
/* OLD GET RID OF THESE */
h1 {
font-size: 3rem;
margin: 20px 0;
}
h1.center {
text-align: center;
width: 100%;
}
#block-dchadwick-primary-local-tasks {
width: 100%;
}
#block-dchadwick-primary-local-tasks > ul {
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
list-style-type: none;
gap: 5px;
background: var(--site-platinum);
}
#block-dchadwick-primary-local-tasks > ul li a {
padding: 10px 20px;
border-radius: 10px;
background: var(--site-primary);
color: var(--site-white);
transition: all 0.2s ease;
}
#block-dchadwick-primary-local-tasks > ul li a:hover {
background: var(--site-secondary);
color: var(--site-primary);
}
.btn-primary {
background: var(--site-primary) !important;
color: var(--site-white);
cursor: pointer;
transition: background 0.2s ease;
padding: 10px 20px;
}
.btn-primary:hover {
background: var(--site-secondary);
color: var(--site-primary);
}
header#header {
display: flex;
width: 100%;
justify-content: center;
padding: 0.5rem;
border-top: 5px solid transparent;
border-bottom: 5px solid #9ccfd8;
border-bottom: 5px solid var(--site-secondary);
background: var(--site-primary);
}
header > div {
header#header > div {
display: flex;
justify-content: space-between;
width: 1152px;
align-items: center;
}
header .navbar-nav {
header#header #block-dchadwick-site-branding a {
white-space: nowrap;
color: var(--site-secondary);
text-transform: uppercase;
font-size: 1.5rem;
font-weight: 700;
transition: color 0.2s ease;
}
header#header #block-dchadwick-site-branding a:hover {
color: var(--site-white);
}
header#header #block-dchadwick-main-menu > ul {
display: flex;
flex-direction: row !important;
}
header .navbar-nav li:not(:last-child) {
border-right: 2px solid #f4e8d9;
header#header #block-dchadwick-main-menu > ul li:not(:last-child) {
border-right: 2px solid var(--site-secondary);
}
header .navbar-nav a.nav-link {
header#header #block-dchadwick-main-menu > ul a {
color: var(--site-white);
padding: 0 1rem;
text-decoration: none;
transition: color 0.2s ease-in-out;
}
header .navbar-nav a.nav-link:hover {
color: #f6c177;
header#header #block-dchadwick-main-menu > ul a:hover {
color: var(--site-secondary);
}
header#header #block-dchadwick-main-menu > ul a.is-active {
color: var(--site-secondary);
}
header#header #block-dchadwick-main-menu > ul a.is-active:hover {
color: var(--site-white);
}
#main {
z-index: 501;
#footer {
display: flex;
background: var(--site-primary);
color: var(--site-secondary);
justify-content: center;
align-items: center;
min-height: 50px;
margin-top: 50px;
box-shadow: 0 50vh 0 50vh var(--site-primary);
}
#footer h2 {
color: white !important;
}
#footer p {
margin: 0;
}
.table {
width: auto;
margin: auto;
border-collapse: collapse;
font-size: 0.9em;
min-width: 800px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.table.cols-5 {
width: 1152px;
}
.table th, .table td {
padding: 12px 15px;
}
.table thead {
border-radius: 5px 5px 0 0;
}
.table thead tr > th {
background: var(--site-primary);
color: var(--site-white);
}
.hero-slide {
height: 600px;
overflow: hidden;
position: relative;
}
.hero-slide video {
position: absolute;
top: -50px;
left: 0;
}
.hero-caption-wrapper {
position: relative;
height: 100%;
}
.hero-caption {
width: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 2rem;
background: white;
padding: 2rem 8rem 2rem 2rem;
}
@media screen and (max-width: 767px) {
.hero-caption {
width: 100%;
}
}
.hero-caption__text {
font-size: 2rem;
}
#recent-fights > div {
grid-gap: 5px;
justify-content: space-evenly;
}
#block-dchadwick-recentfightsblock h2, .block-recent-fights-block h2 {
text-transform: uppercase;
font-size: 2.4rem;
text-align: center;
width: 100%;
margin: 50px 0;
}
@media screen and (min-width: 1024px) {
#block-dchadwick-recentfightsblock .card, .block-recent-fights-block .card {
flex: 1 0 21%;
}
}
#block-dchadwick-recentfightsblock .fightcard-img, .block-recent-fights-block .fightcard-img {
height: 60px;
border-radius: 50%;
}
#block-dchadwick-recentfightsblock .card-header, .block-recent-fights-block .card-header {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-flow: wrap;
}
#block-dchadwick-recentfightsblock .card-body, .block-recent-fights-block .card-body {
text-align: center;
}
#block-dchadwick-recentfightsblock .card-body h4, .block-recent-fights-block .card-body h4 {
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
#block-dchadwick-recentfightsblock .card-body h4, .block-recent-fights-block .card-body h4 {
font-size: 0.8rem;
}
}
#block-dchadwick-recentfightsblock .card-footer, .block-recent-fights-block .card-footer {
display: flex;
}
#block-dchadwick-recentfightsblock .card-footer button, .block-recent-fights-block .card-footer button {
background: #fffaf3;
border: 1px solid #6e6a86;
flex-grow: 1;
}
#block-dchadwick-recentfightsblock .card-footer button:hover, .block-recent-fights-block .card-footer button:hover {
background: #191724;
}
#block-dchadwick-recentfightsblock .card-footer button:hover a, .block-recent-fights-block .card-footer button:hover a {
color: #f6c177;
}
#block-dchadwick-recentfightsblock .card-footer button a, .block-recent-fights-block .card-footer button a {
color: #6e6a86;
}
#fighter__personal-info .fieldset-wrapper, #fighter__stats .fieldset-wrapper {
@ -203,97 +401,6 @@ table.cols-5 td.incorrect {
color: white;
}
.hero-slide {
margin: 0 -0.5rem;
max-height: 500px;
overflow: hidden;
position: relative;
}
.hero-slide video {
position: relative;
bottom: 100px;
}
.hero-caption {
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 2rem;
background: white;
padding: 2rem 8rem 2rem 2rem;
}
#footer {
text-align: center;
background: #c4a7e7;
color: white;
padding: 0;
width: 100%;
}
#footer h2 {
color: white !important;
}
#footer p {
margin: 0;
}
#recent-fights > div {
grid-gap: 5px;
justify-content: space-evenly;
}
#block-dchadwick-recentfightsblock h2, .block-recent-fights-block h2 {
text-transform: uppercase;
font-size: 2.4rem;
text-align: center;
width: 100%;
margin: 50px 0;
}
@media screen and (min-width: 1024px) {
#block-dchadwick-recentfightsblock .card, .block-recent-fights-block .card {
flex: 1 0 21%;
}
}
#block-dchadwick-recentfightsblock .fightcard-img, .block-recent-fights-block .fightcard-img {
height: 60px;
border-radius: 50%;
}
#block-dchadwick-recentfightsblock .card-header, .block-recent-fights-block .card-header {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-flow: wrap;
}
#block-dchadwick-recentfightsblock .card-body, .block-recent-fights-block .card-body {
text-align: center;
}
#block-dchadwick-recentfightsblock .card-body h4, .block-recent-fights-block .card-body h4 {
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
#block-dchadwick-recentfightsblock .card-body h4, .block-recent-fights-block .card-body h4 {
font-size: 0.8rem;
}
}
#block-dchadwick-recentfightsblock .card-footer, .block-recent-fights-block .card-footer {
display: flex;
}
#block-dchadwick-recentfightsblock .card-footer button, .block-recent-fights-block .card-footer button {
background: #fffaf3;
border: 1px solid #6e6a86;
flex-grow: 1;
}
#block-dchadwick-recentfightsblock .card-footer button:hover, .block-recent-fights-block .card-footer button:hover {
background: #191724;
}
#block-dchadwick-recentfightsblock .card-footer button:hover a, .block-recent-fights-block .card-footer button:hover a {
color: #f6c177;
}
#block-dchadwick-recentfightsblock .card-footer button a, .block-recent-fights-block .card-footer button a {
color: #6e6a86;
}
html {
font-size: 100%;
box-sizing: border-box;
@ -304,15 +411,16 @@ html {
}
body {
background: #faf4ed;
color: #6e6a86;
background: var(--site-white);
color: var(--site-primary);
font-family: "Ubuntu", sans-serif;
margin: auto;
}
a {
color: #6e6a86;
color: var(--site-primary);
text-decoration: none;
cursor: pointer;
}
img {
@ -321,3 +429,8 @@ img {
max-width: 100%;
max-height: 100%;
}
.container {
width: 1152px;
margin: auto;
}

View File

@ -6,7 +6,7 @@ core_version_requirement: ^9 || ^10
libraries:
- dchadwick/global-styling
base theme: bootstrap5
base theme: stable9
regions:
navigation: Main navigation
hero: Hero

View File

@ -0,0 +1,12 @@
.btn-primary {
background: var(--site-primary) !important;
color: var(--site-white);
cursor: pointer;
transition: background .2s ease;
padding: 10px 20px;
&:hover {
background: var(--site-secondary);
color: var(--site-primary);
}
}

View File

@ -1,9 +1,12 @@
#footer {
text-align: center;
background: $iris;
color: white;
padding: 0;
width: 100%;
display: flex;
background: var(--site-primary);
color: var(--site-secondary);
justify-content: center;
align-items: center;
min-height: 50px;
margin-top: 50px;
box-shadow: 0 50vh 0 50vh var(--site-primary);
h2 {
color: white !important;

View File

@ -1,31 +1,56 @@
header {
header#header {
display: flex;
width: 100%;
justify-content: center;
padding: .5rem;
border-top: 5px solid transparent;
border-bottom: 5px solid $foam;
border-bottom: 5px solid var(--site-secondary);
background: var(--site-primary);
> div {
display: flex;
justify-content: space-between;
width: $container-full;
align-items: center;
}
.navbar-nav {
#block-dchadwick-site-branding {
a {
white-space: nowrap;
color: var(--site-secondary);
text-transform: uppercase;
font-size: 1.5rem;
font-weight: 700;
transition: color .2s ease;
&:hover {
color: var(--site-white);
}
}
}
#block-dchadwick-main-menu > ul {
display: flex;
flex-direction: row !important;
li:not(:last-child) {
border-right: 2px solid darken($base_light, 5%);
border-right: 2px solid var(--site-secondary);
}
a.nav-link {
a {
color: var(--site-white);
padding: 0 1rem;
text-decoration: none;
transition: color .2s ease-in-out;
&:hover {
color: $orangeish;
color: var(--site-secondary);
}
&.is-active {
color: var(--site-secondary);
&:hover {
color: var(--site-white)
}
}
}
}

View File

@ -0,0 +1,9 @@
h1 {
font-size: 3rem;
margin: 20px 0;
&.center {
text-align: center;
width: 100%;
}
}

View File

@ -1,21 +1,38 @@
.hero-slide {
margin: 0 -0.5rem;
max-height: 500px;
height: 600px;
overflow: hidden;
position: relative;
.hero-bground {
// position: relative;
}
video {
position: relative;
bottom: 100px;
position: absolute;
top: -50px;
left: 0;
}
}
.hero-caption-wrapper {
position: relative;
height: 100%;
}
.hero-caption {
width: auto;
width: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 2rem;
background: white;
padding: 2rem 8rem 2rem 2rem;
@media screen and (max-width: 767px) {
width: 100%;
}
&__text {
font-size: 2rem;
}
}

View File

@ -0,0 +1,26 @@
#block-dchadwick-primary-local-tasks {
width: 100%;
> ul {
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
list-style-type: none;
gap: 5px;
background: var(--site-platinum);
li a {
padding: 10px 20px;
border-radius: 10px;
background: var(--site-primary);
color: var(--site-white);
transition: all .2s ease;
&:hover {
background: var(--site-secondary);
color: var(--site-primary);
}
}
}
}

View File

@ -4,5 +4,5 @@ main {
}
#main {
z-index: 501;
// z-index: 501;
}

View File

@ -0,0 +1,30 @@
.table {
width: auto;
margin: auto;
border-collapse: collapse;
font-size: 0.9em;
min-width: 800px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
// overflow-x: scroll;
&.cols-5 {
width: $container-full;
}
tr {
// width: 100% !important;
}
th, td {
padding: 12px 15px;
// width: 100%;
}
thead {
border-radius: 5px 5px 0 0;
tr > th {
background: var(--site-primary);
color: var(--site-white);
}
}
}

View File

@ -1,4 +1,13 @@
// Colors.
:root {
--site-primary: #009FB7;
--site-secondary: #FED766;
--site-white: #F4F4F8;
--site-platinum: #E6E6EA;
--site-danger: #FE4A49;
}
/* OLD GET RID OF THESE */
$base_light: #faf4ed;
$base_bl: #191724;
$overlay_bl: #1f1d2e;
@ -22,19 +31,24 @@ $container-plus-padding: 1216px;
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
// Partials.
@import "partials/headings";
@import "partials/local-tasks";
@import "partials/buttons";
@import "partials/header";
@import "partials/footer";
@import "partials/main";
@import "partials/tables";
@import "partials/hero";
@import "partials/recent-fights";
@import "partials/fighter";
@import "partials/fighters-view";
@import "partials/fight";
@import "partials/event";
@import "partials/hero";
@import "partials/footer";
@import "partials/recent-fights";
html {
font-size: 100%;
box-sizing: border-box;
// overflow: hidden;
}
.region-content {
@ -42,15 +56,16 @@ html {
}
body {
background: $base_light;
color: $muted;
background: var(--site-white);
color: var(--site-primary);
font-family: "Ubuntu", sans-serif;
margin: auto;
}
a {
color: $muted;
color: var(--site-primary);
text-decoration: none;
cursor: pointer;
}
img {
@ -60,3 +75,8 @@ img {
max-height: 100%;
}
.container {
width: $container-full;
margin: auto;
}

View File

@ -54,18 +54,16 @@
{% endif %}
</div>
<div class="hero-caption">
<div class="hero-caption__text">
{{ content.field_slide_text }}
<div class="hero-caption-wrapper container">
<div class="hero-caption">
<div class="hero-caption__text">
{{ content.field_slide_text }}
</div>
<div class="hero-caption__button">
{{ content.field_slide_link }}
</div>
</div>
<div class="hero-caption__button">
{{ content.field_slide_link }}
</div>
</div>
{% endblock %}
</div>

View File

@ -61,7 +61,7 @@
{% set linkText = item.content['#title'] %}
{% set url = item.content['#url'] ?? '' %}
{% include '@dchadwick/templates/components/button.html.twig' with {
'type': 'dark',
'type': 'primary',
'text': linkText,
'uri': url
} %}

View File

@ -0,0 +1,26 @@
{#
/**
* @file
* Theme override to display a region.
*
* Available variables:
* - content: The content for this region, typically blocks.
* - attributes: HTML attributes for the region <div>.
* - region: The name of the region variable as defined in the theme's
* .info.yml file.
*
* @see template_preprocess_region()
*/
#}
{%
set classes = [
'region',
'region-' ~ region|clean_class,
'container'
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
{{ content }}
</div>
{% endif %}

View File

@ -14,7 +14,7 @@
<article{{ attributes }} id="fight" data-fight="{{ node.id }}">
<div{{ content_attributes }}>
<table class="align-center mx-auto w-auto table-bordered table table-striped" id="compare-fighters">
<table class="table" id="compare-fighters">
<thead>
<th></th>
<th><a href="/node/{{ fighter_1.id }}">{{ node.field_fighter_one.entity.getTitle() }}<br/><img src="{{ fighter1img }}"/></a></th>

View File

@ -77,7 +77,6 @@
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
]
%}
{{ attach_library('bootstrap5/node') }}
<div{{ attributes.addClass(classes) }}>
{% include '@dchadwick/components/card.html.twig' with {

View File

@ -1,4 +1,3 @@
{# attach_library('ufc/ufc_react') #}
<header aria-label="Site header" class="header" id="header" role="banner">
{{ page.navigation }}
</header>

View File

@ -0,0 +1,119 @@
{#
/**
* @file
* Theme override for displaying a view as a table.
*
* Available variables:
* - attributes: Remaining HTML attributes for the element.
* - class: HTML classes that can be used to style contextually through CSS.
* - title : The title of this group of rows.
* - header: The table header columns.
* - attributes: Remaining HTML attributes for the element.
* - content: HTML classes to apply to each header cell, indexed by
* the header's key.
* - default_classes: A flag indicating whether default classes should be
* used.
* - caption_needed: Is the caption tag needed.
* - caption: The caption for this table.
* - accessibility_description: Extended description for the table details.
* - accessibility_summary: Summary for the table details.
* - rows: Table row items. Rows are keyed by row number.
* - attributes: HTML classes to apply to each row.
* - columns: Row column items. Columns are keyed by column number.
* - attributes: HTML classes to apply to each column.
* - content: The column content.
* - default_classes: A flag indicating whether default classes should be
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
* - summary_element: A render array with table summary information (if any).
*
* @see template_preprocess_views_view_table()
*/
#}
{%
set classes = [
'cols-' ~ header|length,
responsive ? 'responsive-enabled',
sticky ? 'sticky-enabled sticky-header',
'table'
]
%}
<table{{ attributes.addClass(classes) }}>
{% if caption_needed %}
<caption>
{% if caption %}
{{ caption }}
{% else %}
{{ title }}
{% endif %}
{% if (summary_element is not empty) %}
{{ summary_element }}
{% endif %}
</caption>
{% endif %}
{% if header %}
<thead>
<tr>
{% for key, column in header %}
{% if column.default_classes %}
{%
set column_classes = [
'views-field',
'views-field-' ~ fields[key],
]
%}
{% endif %}
<th{{ column.attributes.addClass(column_classes).setAttribute('scope', 'col') }}>
{%- if column.wrapper_element -%}
<{{ column.wrapper_element }}>
{%- if column.url -%}
<a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow">{{ column.content }}{{ column.sort_indicator }}</a>
{%- else -%}
{{ column.content }}{{ column.sort_indicator }}
{%- endif -%}
</{{ column.wrapper_element }}>
{%- else -%}
{%- if column.url -%}
<a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow">{{ column.content }}{{ column.sort_indicator }}</a>
{%- else -%}
{{- column.content }}{{ column.sort_indicator }}
{%- endif -%}
{%- endif -%}
</th>
{% endfor %}
</tr>
</thead>
{% endif %}
<tbody>
{% for row in rows %}
<tr{{ row.attributes }}>
{% for key, column in row.columns %}
{% if column.default_classes %}
{%
set column_classes = [
'views-field'
]
%}
{% for field in column.fields %}
{% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
{% endfor %}
{% endif %}
<td{{ column.attributes.addClass(column_classes) }}>
{%- if column.wrapper_element -%}
<{{ column.wrapper_element }}>
{% for content in column.content %}
{{ content.separator }}{{ content.field_output }}
{% endfor %}
</{{ column.wrapper_element }}>
{%- else -%}
{% for content in column.content %}
{{- content.separator }}{{ content.field_output -}}
{% endfor %}
{%- endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>