Player Profile

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="player-profile">
    <div class="hero">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-lg-3 align-self-center hero-left">
                    <h1 class="player-name">Kristian<br>Bjornsen</h1>
                    <div class="player-number"><span class="sr-only">Spielernummer: </span>7</div>
                </div>
                <div class="col-12 col-md-7 col-lg-6">
                    <div class="player-image-wrap">
                        <img src="../../common/img/dummy-images/HSG_Wetzlar_Bjoernsen_Kristian_7_Ganzkoerper_900x1425.png" alt="Kristian Bjornsen">
                    </div>
                </div>
            </div>
            <a class="arrow player-prev" href="#" data-toggle="tooltip" data-placement="top" data-html="true" title="Maximilian Holst <i>(#22)</i>"></a>
            <a class="arrow player-next" href="#" data-toggle="tooltip" data-placement="top" data-html="true" title="Maximilian Holst <i>(#22)</i>"></a>
        </div>
    </div>

    <div class="quick-facts">
        <div class="container">
            <div class="wrapper">
                <div class="item d-none d-md-flex">
                    <span class="type">Position</span>
                    <span class="value">Right Wing</span>
                </div>
                <div class="item d-none d-md-flex">
                    <span class="type">Nationalität</span>
                    <span class="value">Norway</span>
                </div>
                <div class="item">
                    <span class="type">Alter</span>
                    <span class="value">32</span>
                </div>
                <div class="item">
                    <span class="type">Spiele</span>
                    <span class="value">15</span>
                </div>
                <div class="item">
                    <span class="type">Tore</span>
                    <span class="value">54</span>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-hsg-1">
                <h2>
                    Spielerprofil
                </h2>

                <div class="player-facts">
                    <div class="item">
                        <span class="type">
                            Name:
                        </span>
                        <span class="value">Kristian Bjornsen</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Nationalität:
                        </span>
                        <span class="value">Norway</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Position:
                        </span>
                        <span class="value">Right Wing</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Spielernummer:
                        </span>
                        <span class="value">7</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Größe:
                        </span>
                        <span class="value">191cm</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Gewicht:
                        </span>
                        <span class="value">86Kg</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Bei der HSG:
                        </span>
                        <span class="value">
                            seit 01.07.2016
                        </span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Vertrag:
                        </span>
                        <span class="value">
                            bis 30.06.2021
                        </span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Vorheriger Club:
                        </span>
                        <span class="value">IFK Kristianstad</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Geburtsdatum:
                        </span>
                        <span class="value">10.01.1989</span>
                    </div>
                </div>

                <div class="presenter">
                    <span>Präsentiert von:</span>
                    <img class="img-fluid" src="../../common/img/dummy-images/arnold-gruppe.svg" alt="Arnold Gruppe">
                </div>

                <a class="btn btn-secondary" href="">Fanshop artikel von Kristian</a>
            </div>
            <div class="col-hsg-2">
                <div style="width: 300px; height: 250px; background: green; display: flex; align-items: center; color: white; justify-content: center; font-size: 30px; text-align: center">Banner<br>(Placeholder)</div>
            </div>
        </div>
    </div>
</div>


        {% set CType = 'player-profile' %}
{% set player = squad[1] %}

{% block main %}
<div class="player-profile">
    <div class="hero">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-lg-3 align-self-center hero-left">
                    <h1 class="player-name">{{ player.player_firstname }}<br>{{ player.player_lastname }}</h1>
                    <div class="player-number"><span class="sr-only">Spielernummer: </span>{{ player.player_number }}</div>
                </div>
                <div class="col-12 col-md-7 col-lg-6">
                    <div class="player-image-wrap">
                        <img src="{{ player.image }}" alt="{{ player.player_firstname }} {{ player.player_lastname }}">
                    </div>
                </div>
            </div>
            <a class="arrow player-prev" href="#"
                data-toggle="tooltip" data-placement="top" data-html="true"
                title="{{ squad[0].player_firstname }} {{ squad[0].player_lastname }} <i>(#{{ squad[0].player_number }})</i>"></a>
            <a class="arrow player-next" href="#"
                data-toggle="tooltip" data-placement="top" data-html="true"
                title="{{ squad[0].player_firstname }} {{ squad[0].player_lastname }} <i>(#{{ squad[0].player_number }})</i>"></a>
        </div>
    </div>

    <div class="quick-facts">
        <div class="container">
            <div class="wrapper">
                <div class="item d-none d-md-flex">
                    <span class="type">Position</span>
                    <span class="value">{{ player.player_position }}</span>
                </div>
                <div class="item d-none d-md-flex">
                    <span class="type">Nationalität</span>
                    <span class="value">{{ player.nationality }}</span>
                </div>
                <div class="item">
                    <span class="type">Alter</span>
                    <span class="value">{{ player.age }}</span>
                </div>
                <div class="item">
                    <span class="type">Spiele</span>
                    <span class="value">{{ player.matches }}</span>
                </div>
                <div class="item">
                    <span class="type">Tore</span>
                    <span class="value">{{ player.goals }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-hsg-1">
                <h2>
                    Spielerprofil
                </h2>

                <div class="player-facts">
                    <div class="item">
                        <span class="type">
                            Name:
                        </span>
                        <span class="value">{{ player.player_firstname }} {{ player.player_lastname }}</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Nationalität:
                        </span>
                        <span class="value">{{ player.nationality }}</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Position:
                        </span>
                        <span class="value">{{ player.player_position }}</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Spielernummer:
                        </span>
                        <span class="value">{{ player.player_number }}</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Größe:
                        </span>
                        <span class="value">{{ player.height }}cm</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Gewicht:
                        </span>
                        <span class="value">{{ player.weight }}Kg</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Bei der HSG:
                        </span>
                        <span class="value">
                            seit {{ player.contract_start|date('d.m.Y', 'Europe/Berlin') }}
                        </span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Vertrag:
                        </span>
                        <span class="value">
                            bis {{ player.contract_end|date('d.m.Y', 'Europe/Berlin') }}
                        </span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Vorheriger Club:
                        </span>
                        <span class="value">{{ player.previous_club.name }}</span>
                    </div>
                    <div class="item">
                        <span class="type">
                            Geburtsdatum:
                        </span>
                        <span class="value">{{ player.player_birthdate|date('d.m.Y', 'Europe/Berlin') }}</span>
                    </div>
                </div>

                <div class="presenter">
                    <span>Präsentiert von:</span>
                    <img class="img-fluid" src="{{ player.sponsor.image }}" alt="{{ player.sponsor.name }}">
                </div>

                <a class="btn btn-secondary" href="{{ player.link_fanshop }}">Fanshop artikel von {{ player.player_firstname }}</a>
            </div>
            <div class="col-hsg-2">
                <div style="width: 300px; height: 250px; background: green; display: flex; align-items: center; color: white; justify-content: center; font-size: 30px; text-align: center">Banner<br>(Placeholder)</div>
            </div>
        </div>
    </div>
</div>

{% endblock %}


        
            
            {
  "squad": [
    {
      "_id": 1,
      "_sid": "119020",
      "player_firstname": "Maximilian",
      "player_lastname": "Holst",
      "player_birthdate": "1989-06-23",
      "image": "../../common/img/dummy-images/HSG_Wetzlar_Holst_Maximilian_22_Ganzkoerper_900x1425.png",
      "age": 31,
      "nationality": "Germany",
      "goals": 64,
      "matches": 14,
      "weight": 0,
      "height": 180,
      "contracts": [
        {
          "eligibility": "main_agreement",
          "start": "2014-07-01",
          "end": "2022-06-30",
          "position": "Left Wing",
          "number": 22,
          "club_id": 1,
          "club_name": "HSG Wetzlar"
        }
      ],
      "previous_club": {
        "_id": 19,
        "_sid": "3985",
        "name": "TV Großwallstadt",
        "abbreviation": "TVG",
        "colors": {
          "name": "",
          "color_1": "",
          "color_2": ""
        },
        "calovo": "https://calovo.de/f/tvgrosswallstadt/spielplan"
      },
      "player_number": 22,
      "player_position": "Left Wing",
      "contract_start": "2014-07-01",
      "contract_end": "2022-06-30"
    },
    {
      "_id": 16,
      "_sid": "905048",
      "player_firstname": "Kristian",
      "player_lastname": "Bjornsen",
      "player_birthdate": "1989-01-10",
      "image": "../../common/img/dummy-images/HSG_Wetzlar_Bjoernsen_Kristian_7_Ganzkoerper_900x1425.png",
      "sponsor": {
        "image": "../../common/img/dummy-images/arnold-gruppe.svg",
        "name": "Arnold Gruppe"
      },
      "age": 32,
      "nationality": "Norway",
      "goals": 54,
      "matches": 15,
      "weight": 86,
      "height": 191,
      "contracts": [
        {
          "eligibility": "main_agreement",
          "start": "2016-07-01",
          "end": "2021-06-30",
          "position": "Right Wing",
          "number": 7,
          "club_id": 1,
          "club_name": "HSG Wetzlar"
        }
      ],
      "previous_club": {
        "_id": 29,
        "_sid": "22064",
        "name": "IFK Kristianstad",
        "abbreviation": "KRI",
        "colors": {
          "name": "",
          "color_1": "",
          "color_2": ""
        },
        "calovo": ""
      },
      "player_number": 7,
      "player_position": "Right Wing",
      "contract_start": "2016-07-01",
      "contract_end": "2021-06-30"
    },
    {
      "_id": 3,
      "_sid": "119020",
      "player_firstname": "Olle",
      "player_lastname": "Forsell Schefvert",
      "image": "../../common/img/dummy-images/HSG_Wetzlar_Forsell_Schefvert_Olle-25_Ganzkoerper_900x1425.png",
      "player_number": 25
    }
  ]
}

File:

Content:


                                .player-profile {
    .hero {
        position: relative;
        background-color: $dark;
        color: $white;

        &: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;
        }

        .container {
            position: relative;
            z-index: 1;
        }

        .hero-left {
            display: flex;
            flex-direction: column;
        }

        .player-name {
            color: $white;
            font-size: $h2-font-size;
            order: 1;
            margin-bottom: 0;
        }

        .player-number {
            @include Rift-Bold;
            color: $secondary;
            font-size: $display1-size;
            line-height: 1;
        }

        // Mobile
        @include media-breakpoint-down(sm) {
            .hero-left {
                @include position (absolute, null 0 $grid-gutter-width*2);
                z-index: 2;
            }

            .player-name {
                font-size: $h3-font-size;
                text-shadow: $text-shadow;
            }

            .player-number {
                font-size: $display2-size;
            }
        }

        .player-image-wrap {
            height: 360px;
            overflow: hidden;
            object-fit: cover;
            object-position: top;
            padding-top: $grid-gutter-width;

            // Tablet
            @include media-breakpoint-between(md, md) {
                height: 420px;
            }

            // Desktop
            @include media-breakpoint-up(lg) {
                height: 600px;
            }

            img {
                max-width: 100%;
                height: auto;
            }
        }
    }

    .quick-facts {
        background-color: $gray-100;
        margin-bottom: map-get($margin, 'medium');
        overflow: hidden;
        padding: $grid-gutter-width 0;

        .wrapper {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -#{$grid-gutter-width};

            .item {
                border-right: $border-width solid $border-color;
                display: flex;
                flex-direction: column;
                padding: 0 $grid-gutter-width;

                &:last-child {
                    border-right: 0;
                }
            }
        }
    }

    .player-facts {
        display: flex;
        flex-wrap: wrap;

        .item {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-bottom: $grid-gutter-width;

            @include media-breakpoint-up(lg) {
                width: 50%;
            }
        }
    }

    .type {
        font-size: $font-size-sm;
        letter-spacing: $font-size-sm/10;
        text-transform: uppercase;
    }

    .value {
        @include Rift-Bold;
        color: $primary;
        font-size: $h4-font-size;
        letter-spacing: $h4-font-size/10;

        @include media-breakpoint-up(lg) {
            font-size: $h3-font-size;
            letter-spacing: $h3-font-size/10;
        }
    }

    .presenter {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: map-get($margin, 'medium');

        span {
            font-size: $font-size-sm;
            letter-spacing: $font-size-sm/10;
            text-transform: uppercase;
            margin-right: $grid-gutter-width;
        }

        img {
            width: 50%;
        }
    }
}

URL: /components/raw/plugin-player_profile/player_profile.scss
Filesystem Path: ../template/components/03-typo3/plugin/player/player_profile/player_profile.scss
Size: 3.8 KB

Content:
$('.player-profile .arrow').tooltip();
URL: /components/raw/plugin-player_profile/script.js
Filesystem Path: ../template/components/03-typo3/plugin/player/player_profile/script.js
Size: 39 Bytes

Handle: @plugin-player_profile
Preview:
- With layout
- Component only
Filesystem Path: ../template/components/03-typo3/plugin/player/player_profile/player_profile.twig

No notes defined.