DIA Frontend

Next Game 

<!-- ### Begin: Element next-game ### -->
<div id="c219" class="frame frame-default frame-type-next-game frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 order-md-2 game">
                        <h2>
                            Nächstes Spiel
                        </h2>
                        <time itemprop="datePublished" datetime="2021-11-18T19:00:00+01:00">
                            18.11.2021 - 19:00 Uhr
                        </time>
                        <p>
                            Rittal Arena
                        </p>
                    </div>
                    <div class="col-sm-6 col-md-4 order-md-1 home">
                        <div class="logo">
                            <img class="img-fluid" src="../../common/img/dummy-images/hsg-wetzlar.png" alt="HSG Wetzlar" />
                        </div>
                        <div class="text">
                            <h3>
                                HSG Wetzlar
                            </h3>
                            <span>5-1-0</span>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4 order-md-3 guest">
                        <div class="logo">
                            <img class="img-fluid" src="../../common/img/dummy-images/hc-erlangen.png" alt="HC Erlangen" />
                        </div>
                        <div class="text">
                            <h3>
                                HC Erlangen
                            </h3>
                            <span>3-0-3</span>
                        </div>
                    </div>
                    <div class="col-12 order-md-4 ctas">
                        <a href="#" class="btn btn-primary">
                            Mehr erfahren
                        </a>
                        <a href="#" class="btn btn-secondary">
                            Ticketshop
                        </a>
                    </div>
                </div>
            </div>

            <div class="presenter">
                <span>Präsentiert von</span>
                <img class="img-fluid" src="../../common/img/dummy-images/rosbacher.svg" alt="Rosbacher" />
            </div>
        </div>
    </div>
</div>
<!-- ### End: Element next-game ### -->
 
{% extends '@wrapper-frame' %}

{% set CType = 'next-game' %}

{% block main %}
    <div class="container">
        <div class="row">
            <div class="col-md-4 order-md-2 game">
                <h2>
                    Nächstes Spiel
                </h2>
                <time itemprop="datePublished"
                    datetime="{{ game.date|date(
                        'Y-m-d\\TH:i:sP',
                        'Europe/Berlin'
                    ) }}">
                    {{ game.date|date('d.m.Y - H:i', 'Europe/Berlin') }} Uhr
                </time>
                <p>
                    {{ game.location }}
                </p>
            </div>
            <div class="col-sm-6 col-md-4 order-md-1 home">
                <div class="logo">
                    <img class="img-fluid"
                        src="{{ home.logo }}"
                        alt="{{ home.name }}" />
                </div>
                <div class="text">
                    <h3>
                        {{ home.name }}
                    </h3>
                    <span>{{ home.stats }}</span>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 order-md-3 guest">
                <div class="logo">
                    <img class="img-fluid"
                        src="{{ guest.logo }}"
                        alt="{{ guest.name }}" />
                </div>
                <div class="text">
                    <h3>
                        {{ guest.name }}
                    </h3>
                    <span>{{ guest.stats }}</span>
                </div>
            </div>
            <div class="col-12 order-md-4 ctas">
                <a href="{{ game.link }}" class="btn btn-primary">
                    Mehr erfahren
                </a>
                <a href="{{ game.link }}" class="btn btn-secondary">
                    Ticketshop
                </a>
            </div>
        </div>
    </div>

    <div class="presenter">
        <span>Präsentiert von</span>
        <img class="img-fluid"
            src="{{ presenter.logo }}"
            alt="{{ presenter.name }}" />
    </div>
{% endblock %}
 
{
  "game": {
    "date": 1637258400,
    "location": "Rittal Arena",
    "link": "#",
    "ticketshop": "#"
  },
  "home": {
    "name": "HSG Wetzlar",
    "logo": "../../common/img/dummy-images/hsg-wetzlar.png",
    "stats": "5-1-0"
  },
  "guest": {
    "name": "HC Erlangen",
    "logo": "../../common/img/dummy-images/hc-erlangen.png",
    "stats": "3-0-3"
  },
  "presenter": {
    "name": "Rosbacher",
    "logo": "../../common/img/dummy-images/rosbacher.svg"
  }
}
  • Content: 
    .frame-type-next-game {
    position: relative;
    background-color: $dark;
    color: $white;
    overflow: hidden;

    .frame-container {
        position: initial;
    }

    &:after {
        content: '';
        @include position(absolute, 0);
        display: block;
        opacity: .08;
        background-image: url(../img/field.jpg);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: cover;
        filter: grayscale(100%);
        pointer-events: none;
    }

    .game {
        @include Rift-Regular;
        font-size: $h5-font-size;
        text-align: center;

        h2 {
            @include Rift-Regular;
            color: $white;
            font-size: $h3-font-size;
            letter-spacing: $h3-font-size/10;
        }

        time {
            @include Rift-Bold;
            color: $secondary;
        }
    }

    .home,
    .guest {
        align-items: center;
        display: flex;
        @include Rift-Regular;

        .logo {
            margin: 0 $grid-gutter-width;
            width: 60px;
            height: auto;
        }

        h3 {
            @include Rift-Bold;
            color: $white;
            font-size: $h5-font-size;
            letter-spacing: $h5-font-size/10;
            margin-bottom: 0;
        }
        
        span {
            font-size: $h5-font-size;
            letter-spacing: $h5-font-size/10;
        }
    }

    .guest {
        flex-direction: row-reverse;

        .text {
            text-align: right;
        }
    }

    .ctas {
        text-align: center;

        .btn {
            margin: $grid-gutter-width/2;
        }
    }

    .presenter {
        @include position(absolute, null null 0 0);
        @include Rift-Bold;
        background-color: white;
        box-shadow: $box-shadow;
        color: $body-color;
        display: flex;
        font-size: $font-size-sm;
        text-align: center;
        white-space: nowrap;
        z-index: 1;

        img {
            max-width: 90px;
        }

        @include media-breakpoint-up(md) {
            padding: $grid-gutter-width/2 $grid-gutter-width;
            flex-direction: column;
            width: 150px;
        }
    }

    @include media-breakpoint-down(sm) {
        padding-bottom: 100px;

        .presenter {
            align-items: center;
            padding: $btn-padding-y $btn-padding-x;

            span {
                margin-right: 10px;
            }
        }
    }
}
  • URL: /components/raw/plugin-next_game/_style.scss
  • Filesystem Path: ../template/components/03-typo3/plugin/next_game/_style.scss
  • Size: 2.5 KB

No notes defined.