-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #111 from TYPO3incubator/task/game-teaser
Implement game teaser slider and table view
- Loading branch information
Showing
12 changed files
with
761 additions
and
28 deletions.
There are no files selected for viewing
10 changes: 10 additions & 0 deletions
10
local_packages/football/Resources/Private/JavaScript/Src/main.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,17 @@ | ||
| import * as bootstrap from 'bootstrap'; | ||
| import Splide from '@splidejs/splide'; | ||
|
|
||
| const dropdownElementList = document.querySelectorAll('[data-bs-toggle="dropdown"]') | ||
| const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl)) | ||
|
|
||
| const collapseElementList = document.querySelectorAll('[data-bs-toggle="collapse"]') | ||
| const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl)) | ||
|
|
||
| new Splide( '.splide', { | ||
| perPage: 3, | ||
| breakpoints: { | ||
| 768: { | ||
| perPage: 1, | ||
| }, | ||
| } | ||
| }).mount(); |
16 changes: 16 additions & 0 deletions
16
local_packages/football/Resources/Private/Scss/Elements/_game.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| .game-slider-image { | ||
| max-height: 100px; | ||
| width: auto; | ||
| } | ||
|
|
||
| .game-slider-image-small { | ||
| max-height: 2.5rem; | ||
| padding-inline: 10px; | ||
| width: auto; | ||
| } | ||
|
|
||
| .game-score { | ||
| color: $color__primary; | ||
| font-size: 2.5rem; | ||
| font-weight: bolder; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,3 +3,4 @@ | |
| @import "search"; | ||
| @import "form"; | ||
| @import "news"; | ||
| @import "game"; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 2 additions & 1 deletion
3
local_packages/football/Resources/Private/Scss/Vendor/_import.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| @import "bootstrap"; | ||
| @import "bootstrap"; | ||
| @import "splide"; |
1 change: 1 addition & 0 deletions
1
local_packages/football/Resources/Private/Scss/Vendor/_splide.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @import "@splidejs/splide/dist/css/splide.min"; |
115 changes: 90 additions & 25 deletions
115
local_packages/football/Resources/Private/Templates/ContentElements/GameResults.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,90 @@ | ||
| <html data-namespace-typo3-fluid="true" | ||
| xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"> | ||
|
|
||
| <h3>{data.header}</h3> | ||
| <span>{data.game_results_mode}</span> | ||
|
|
||
| <!--- for data structure have a look at Resources/Public/Data/matches.json --> | ||
| <f:for each="{results}" as="result"> | ||
| <div> | ||
| {result.homeTeam.name} : {result.awayTeam.name}<br /> | ||
| <f:format.date date="{result.datetime}" format="d.m.Y" /><br /> | ||
| {result.location}<br /> | ||
| <f:if condition="{result.result}"> | ||
| <f:then> | ||
| {result.result.home} : {result.result.away} | ||
| </f:then> | ||
| <f:else> | ||
| not played yet | ||
| </f:else> | ||
| </f:if> | ||
| <br /><br /> | ||
| </div> | ||
| </f:for> | ||
|
|
||
| </html> | ||
| <html data-namespace-typo3-fluid="true" | ||
| xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"> | ||
|
|
||
| <f:if condition="{data.game_results_mode} == 'slider'"> | ||
| <f:then> | ||
| <f:render section="ResultsSlider" arguments="{_all}"></f:render> | ||
| </f:then> | ||
| <f:else> | ||
| <f:render section="ResultsTable" arguments="{_all}"></f:render> | ||
| </f:else> | ||
| </f:if> | ||
|
|
||
| <f:section name="ResultsSlider"> | ||
| <section class="splide" aria-labelledby="carousel-heading"> | ||
| <h3 id="carousel-heading">{data.header}</h3> | ||
|
|
||
| <div class="splide__track"> | ||
| <ul class="splide__list"> | ||
| <f:for each="{results}" as="result"> | ||
| <li class="splide__slide text-center"> | ||
| <div class="d-flex align-items-center justify-content-around my-4"> | ||
| <img class="game-slider-image" src="{result.homeTeam.iconUrl}" alt="{result.homeTeam.name}"/> | ||
| <div class="game-score"> | ||
| <f:if condition="{result.result}"> | ||
| <f:then> | ||
| {result.result.home} : {result.result.away} | ||
| </f:then> | ||
| <f:else> | ||
| TBA | ||
| </f:else> | ||
| </f:if> | ||
| </div> | ||
| <img class="game-slider-image" src="{result.awayTeam.iconUrl}" alt="{result.awayTeam.name}"/> | ||
| </div> | ||
| <div class="font-italic text-muted"> | ||
| {result.meta.league} @ {result.location} | ||
| </div> | ||
| <time datetime="{result.datetime}"> | ||
| <f:format.date date="{result.datetime}" format="d.m.Y" /> | ||
| </time> | ||
| </li> | ||
| </f:for> | ||
| </ul> | ||
| </div> | ||
| </section> | ||
| </f:section> | ||
|
|
||
| <f:section name="ResultsTable"> | ||
| <div class="table-responsive"> | ||
| <table class="table table-bordered align-middle"> | ||
| <tbody> | ||
| <f:for each="{results}" as="result"> | ||
| <tr class="text-center {f:if(condition: '!{result.result}', then: 'opacity-50 pe-none')}"> | ||
| <td> | ||
| <time class="fw-bold" datetime="{result.datetime}"> | ||
| <f:format.date date="{result.datetime}" format="d.m.Y" /> | ||
| </time> | ||
| </td> | ||
| <td> | ||
| <div class="d-flex align-items-center justify-content-center mb-2"> | ||
| <img class="game-slider-image-small" src="{result.homeTeam.iconUrl}" alt="{result.homeTeam.name}"/> | ||
| <div class="game-score"> | ||
| <f:if condition="{result.result}"> | ||
| <f:then> | ||
| {result.result.home} : {result.result.away} | ||
| </f:then> | ||
| <f:else> | ||
| TBA | ||
| </f:else> | ||
| </f:if> | ||
| </div> | ||
| <img class="game-slider-image-small" src="{result.awayTeam.iconUrl}" alt="{result.awayTeam.name}"/> | ||
| </div> | ||
| </td> | ||
| <td> | ||
| <div class="fw-bold"> | ||
| {result.meta.league} | ||
| </div> | ||
| <div class="text-muted"> | ||
| {result.location} | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| </f:for> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </f:section> | ||
|
|
||
| </html> |
Oops, something went wrong.