Merge pull request #119 from TYPO3incubator/task/events-teaser

task/events-teaser + templating & frontend styling
TYPO3incubator · Apr 12, 2024 · f8f3d5f · f8f3d5f
2 parents 1ca7c75 + 33e276b
commit f8f3d5f
Show file tree

Hide file tree

Showing 11 changed files with 227 additions and 10 deletions.
diff --git a/local_packages/football/Resources/Private/Scss/Abstracts/Utilities/_spacing.scss b/local_packages/football/Resources/Private/Scss/Abstracts/Utilities/_spacing.scss
@@ -1,4 +1,4 @@
 .pt-navbar {
-  padding-top: 100px;
+  padding-top: toRem(94);
 }
 
diff --git a/local_packages/football/Resources/Private/Scss/Base/layout.scss b/local_packages/football/Resources/Private/Scss/Base/layout.scss
@@ -12,7 +12,8 @@
 
 //will move this into the nav file after merging
 .navbar {
-    z-index: 1;
+  z-index: 1;
+  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
 }
 
 .navbar-toggler-icon {

diff --git a/local_packages/football/Resources/Private/Scss/Elements/_cta.scss b/local_packages/football/Resources/Private/Scss/Elements/_cta.scss
@@ -3,6 +3,16 @@
   background-color: #002345;
 
   .btn {
-    min-width: 150px;
+    min-width: toRem(150);
+    background-color: $color__primary-red;
+    border-color: $color__primary-red;
+    transition: all .3s ease-in-out;
+    &:hover {
+      background-color: $color__white;
+      color: $color__primary-red;
+      border-color: $color__primary-red;
+    }
   }
+
+
 }
diff --git a/local_packages/football/Resources/Private/Scss/Elements/_events.scss b/local_packages/football/Resources/Private/Scss/Elements/_events.scss
@@ -0,0 +1,69 @@
+.event {
+    position: relative;
+    height: toRem(680);
+
+    &--image {
+        height: 100%!important;
+        width: 100%!important;
+        object-fit: cover;
+    }
+
+    &--contents {
+        position: absolute;
+        bottom: toRem(30);
+        left: toRem(20);
+        z-index: 3;
+    }
+
+    &--title, &--button {
+        color: $color__white;
+        text-transform: uppercase;
+    }
+
+    &--title {
+        max-width: toRem(100);
+        margin: 0!important;
+        font-size: toRem(28);
+        font-weight: 900;
+    }
+
+    &--button {
+        display: flex;
+        align-items: center;
+        font-weight: 300;
+        letter-spacing: 1px;
+
+        &:hover {
+            border-bottom: 1px solid $color__white;
+        }
+
+        .icon-arrow {
+            position: relative;
+            display: block;
+            height: toRem(1);
+            width: toRem(20);
+            margin-left: toRem(8);
+            background: $color__white;
+
+            &:before, &:after {
+                content: " ";
+                position: absolute;
+                width: 7px;
+                height: 1px;
+                background: $color__white;
+            }
+
+            &:before {
+                top: toRem(-3);
+                right: toRem(-1);
+                transform: rotate(45deg);
+            }
+
+            &:after {
+                top: toRem(2);
+                right: toRem(-1);
+                transform: rotate(-45deg);
+            }
+        }
+    }
+}
diff --git a/local_packages/football/Resources/Private/Scss/Elements/_import.scss b/local_packages/football/Resources/Private/Scss/Elements/_import.scss
@@ -5,3 +5,4 @@
 @import "news";
 @import "game";
 @import "textmedia";
+@import "events";
diff --git a/local_packages/football/Resources/Private/Templates/ContentElements/EventTeaser.html b/local_packages/football/Resources/Private/Templates/ContentElements/EventTeaser.html
@@ -1,12 +1,66 @@
 <html data-namespace-typo3-fluid="true"
       xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
 
-<f:render partial="Header/All" arguments="{_all}" />
+<div class="row">
+    <div class="col-lg-6 col-md-6 mb-4">
+        <f:render partial="Header/All" arguments="{_all}" />
+    </div>
+    <div class="col-lg-6 col-md-6 mb-4">
+        <f:if condition="{data.bodytext}">
+            <div>
+                <f:format.html>{data.bodytext}</f:format.html>
+            </div>
+        </f:if>
+    </div>
+</div>
+<div class="row">
+    <div class="col-xl-6 col-lg-6 mb-4">
+        <div class="event">
+            <f:image class="event--image" src="EXT:football/Resources/Public/Images/Events/event4.png" width="800" />
+
+            <div class="event--contents">
+                <h3 class="event--title">
+                    Gameday
+                </h3>
+                <a class="event--button" href="/events">Learn more <span class="icon-arrow"></span></a>
+            </div>
+        </div>
+    </div>
+    <div class="col-xl-2 col-lg-6 mb-4">
+        <div class="event">
+            <f:image class="event--image" src="EXT:football/Resources/Public/Images/Events/event5.png" width="800" />
+
+            <div class="event--contents">
+                <h3 class="event--title">
+                    Charity event
+                </h3>
+                <a class="event--button" href="/events">Learn more <span class="icon-arrow"></span></a>
+            </div>
+        </div>
+    </div>
+    <div class="col-xl-2 col-lg-6 mb-4">
+        <div class="event">
+            <f:image class="event--image" src="EXT:football/Resources/Public/Images/Events/event1.png" width="800" />
+
+            <div class="event--contents">
+                <h3 class="event--title">Junior training
+                </h3>
+                <a class="event--button" href="/events">Learn more <span class="icon-arrow"></span></a>
+
+            </div>
+
+        </div>
+    </div>
+    <div class="col-xl-2 col-lg-6 mb-4">
+    <div class="event">
+        <f:image class="event--image" src="EXT:football/Resources/Public/Images/Events/event2.png" width="800" />
 
-<f:if condition="{data.bodytext}">
-    <div>
-        <f:format.html>{data.bodytext}</f:format.html>
+        <div class="event--contents">
+            <h3 class="event--title">Training</h3>
+            <a class="event--button" href="/events">Learn more <span class="icon-arrow"></span></a>
+        </div>
     </div>
-</f:if>
+</div>
+</div>
 
 </html>
diff --git a/local_packages/football/Resources/Public/Css/index.css b/local_packages/football/Resources/Public/Css/index.css
@@ -11231,7 +11231,7 @@ fieldset:disabled .btn {
 }
 
 .pt-navbar {
-  padding-top: 100px;
+  padding-top: 5.875rem;
 }
 
 h1,
@@ -11415,6 +11415,7 @@ a.main-logo:hover {
 
 .navbar {
   z-index: 1;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
 }
 
 .navbar-toggler-icon {
@@ -11440,7 +11441,16 @@ a.main-logo:hover {
 }
 
 .call-to-action .btn {
-  min-width: 150px;
+  min-width: 9.375rem;
+  background-color: #FF3232;
+  border-color: #FF3232;
+  transition: all 0.3s ease-in-out;
+}
+
+.call-to-action .btn:hover {
+  background-color: #ffffff;
+  color: #FF3232;
+  border-color: #FF3232;
 }
 
 .footer-menu {
@@ -11763,4 +11773,76 @@ textarea.form-control {
   .ce-gallery[data-ce-columns="3"] .ce-column {
     width: 33.333%;
   }
+}
+
+.event {
+  position: relative;
+  height: 42.5rem;
+}
+
+.event--image {
+  height: 100% !important;
+  width: 100% !important;
+  object-fit: cover;
+}
+
+.event--contents {
+  position: absolute;
+  bottom: 1.875rem;
+  left: 1.25rem;
+  z-index: 3;
+}
+
+.event--title,
+.event--button {
+  color: #ffffff;
+  text-transform: uppercase;
+}
+
+.event--title {
+  max-width: 6.25rem;
+  margin: 0 !important;
+  font-size: 1.75rem;
+  font-weight: 900;
+}
+
+.event--button {
+  display: flex;
+  align-items: center;
+  font-weight: 300;
+  letter-spacing: 1px;
+}
+
+.event--button:hover {
+  border-bottom: 1px solid #ffffff;
+}
+
+.event--button .icon-arrow {
+  position: relative;
+  display: block;
+  height: 0.0625rem;
+  width: 1.25rem;
+  margin-left: 0.5rem;
+  background: #ffffff;
+}
+
+.event--button .icon-arrow:before,
+.event--button .icon-arrow:after {
+  content: " ";
+  position: absolute;
+  width: 7px;
+  height: 1px;
+  background: #ffffff;
+}
+
+.event--button .icon-arrow:before {
+  top: -0.1875rem;
+  right: -0.0625rem;
+  transform: rotate(45deg);
+}
+
+.event--button .icon-arrow:after {
+  top: 0.125rem;
+  right: -0.0625rem;
+  transform: rotate(-45deg);
 }
diff --git a/local_packages/football/Resources/Public/Images/Events/event1.png b/local_packages/football/Resources/Public/Images/Events/event1.png
diff --git a/local_packages/football/Resources/Public/Images/Events/event2.png b/local_packages/football/Resources/Public/Images/Events/event2.png
diff --git a/local_packages/football/Resources/Public/Images/Events/event4.png b/local_packages/football/Resources/Public/Images/Events/event4.png
diff --git a/local_packages/football/Resources/Public/Images/Events/event5.png b/local_packages/football/Resources/Public/Images/Events/event5.png