Overhaul of theme
This commit is contained in:
Dan Chadwick
@@ -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 {
|
||||
@@ -320,4 +428,9 @@ img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1152px;
|
||||
margin: auto;
|
||||
}
|
||||
@@ -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
|
||||
|
||||
12
web/themes/custom/dchadwick/src/sass/partials/buttons.scss
Normal file
12
web/themes/custom/dchadwick/src/sass/partials/buttons.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 20px 0;
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,5 +4,5 @@ main {
|
||||
}
|
||||
|
||||
#main {
|
||||
z-index: 501;
|
||||
// z-index: 501;
|
||||
}
|
||||
|
||||
30
web/themes/custom/dchadwick/src/sass/partials/tables.scss
Normal file
30
web/themes/custom/dchadwick/src/sass/partials/tables.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
} %}
|
||||
|
||||
@@ -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 %}
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
{# attach_library('ufc/ufc_react') #}
|
||||
<header aria-label="Site header" class="header" id="header" role="banner">
|
||||
{{ page.navigation }}
|
||||
</header>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user