-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtrick_list.html.twig
194 lines (190 loc) · 15.4 KB
/
trick_list.html.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
{% extends 'base.html.twig' %}
{% block title %}SnowTricks - Trick list{% endblock %}
{% block header %}
<div class="uk-position-relative uk-visible-toggle uk-light" uk-slideshow="autoplay: true; animation: scale; min-height: 250; max-height: 600">
<ul class="uk-slideshow-items st-home-slideshow">
<li>
{% include 'partials/all/image_header_loader.html.twig' with {'spinnerRatio': '2.5'} %}
<div class="uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-background-blend-darken uk-invisible st-background-image-header" data-src="{{ asset(globalImageDirectory~'snowboard-4.jpg') }}" style="background-position: 40% 10%; height: 600px" uk-img>
<div class="uk-position-center uk-text-center uk-padding-small st-overlay-image-header-container">
<p class="st-color-white st-text-shadow-dark uk-text-large" uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0;">
Contribute to snowboard tricks learning.
</p>
<p class="st-color-white st-text-shadow-dark uk-text-medium uk-visible@m" uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0;">
Before you start learning tricks, even easy snowboard tricks, you should have mastered some of the basics. <br class="uk-visible@l">
You especially need to be confident riding both ways (riding switch) down the mountain before getting into any tricks.
</p>
</div>
</div>
</li>
<li>
{% include 'partials/all/image_header_loader.html.twig' with {'spinnerRatio': '2.5'} %}
<div class="uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-background-blend-darken uk-invisible st-background-image-header" data-src="{{ asset(globalImageDirectory~'snowboard-2.jpg') }}" style="background-position: 10% 50%; height: 600px" uk-img>
<div class="uk-position-center uk-text-center uk-padding-small st-overlay-image-header-container">
<p class="st-color-white st-text-shadow-dark uk-text-large" uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0;">
Choose the right conditions to practice
</p>
<p class="st-color-white st-text-shadow-dark uk-text-medium uk-visible@m" uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0;">
The best time to learn tricks is when you’ve had a good recent dump of snow – so that the landing is going to be fairly soft. <br class="uk-visible@l">
This isn’t always possible so if this isn’t the case then you just need to be prepared to take a few hard knocks.
</p>
</div>
</div>
</li>
<li>
{% include 'partials/all/image_header_loader.html.twig' with {'spinnerRatio': '2.5'} %}
<div class="uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-background-blend-darken uk-invisible st-background-image-header" data-src="{{ asset(globalImageDirectory~'snowboard-1.jpg') }}" style="background-position: 40% 30%; height: 600px" uk-img>
<div class="uk-position-center uk-text-center uk-padding-small st-overlay-image-header-container">
<p class="st-color-white st-text-shadow-dark uk-text-large" uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0;">
Don't forget technique and confidence to avoid injury.
</p>
<p class="st-color-white st-text-shadow-dark uk-text-medium uk-visible@m" uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0;">
Remember that there is always a risk of injury in snowboarding and this is especially so when you are learning new things like tricks. <br class="uk-visible@l">
You need to push yourself a little bit to expand your skill set but don’t push yourself to try unrealistic things.
</p>
</div>
</div>
</li>
<li>
{% include 'partials/all/image_header_loader.html.twig' with {'spinnerRatio': '2.5'} %}
<div class="uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-background-blend-darken uk-invisible st-background-image-header" data-src="{{ asset(globalImageDirectory~'snowboard-5.jpg') }}" style="background-position: 40% 10%; height: 600px" uk-img>
<div class="uk-position-center uk-text-center uk-padding-small st-overlay-image-header-container">
<p class="st-color-white st-text-shadow-dark uk-text-large" uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0;">
Follow the best way to progress
</p>
<p class="st-color-white st-text-shadow-dark uk-text-medium uk-visible@m" uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0;">
Finding the best way to learn is to focus on and master one trick before moving on to the next. <br class="uk-visible@l">
It will be a good foundation for learning bigger better tricks later
</p>
</div>
</div>
</li>
</ul>
<a class="uk-slidenav-large uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-slidenav-large uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
<!-- Direct access to trick list -->
<div class="uk-position-bottom-right"><a id="st-home-list-anchor" class="uk-button uk-button-primary" href="#st-trick-list" uk-scroll><span uk-icon="icon: arrow-down; ratio: 2"></span> Let's go!</a></div>
</div>
{% endblock %}
{% block content %}
<div class="uk-heading-line uk-text-large uk-text-center uk-margin-top">
<span uk-icon="icon: bolt; ratio: 2"></span>
</div>
<div id="st-trick-list" class="uk-section uk-preserve-color">
<div class="uk-container">
<h1 class="uk-heading-bullet uk-text-large uk-text-center uk-text-uppercase uk-text-bold">
Trick list - {{ 'DESC' == trickLoadingMode ? 'Latest' : 'Oldest' }} tricks on top<br><span class="uk-text-small">(Sorted by date with {{ 'DESC' == trickLoadingMode ? 'Descending' : 'Ascending' }} order)</span>
</h1>
<p class="uk-text-center uk-text-uppercase uk-text-bold st-color-red">
These resources can help you to decide which tricks to start learning.<br>
So make sure you really master them, and with proper technique, before moving onto anything more complex!
</p>
</div>
{# No trick was found! #}
{% if tricks is null %}
<div class="uk-container uk-margin-top uk-text-center">
<p class="uk-display-inline-block uk-padding-small uk-text-bold uk-text-uppercase st-background-yellow st-box-shadow-full-small">
<span class="st-color-blue"><span uk-icon="icon: warning"></span> {{ noList }}</span>
</p>
</div>
{% endif %}
{# Display trick list #}
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-child-width-1-5@xl uk-grid-match uk-padding"
uk-grid uk-height-match="target: > .st-card-container > .uk-card > .uk-card-body"
data-loading-mode="{{ trickLoadingMode }}" data-count="{{ trickCount }}"
data-limit="{{ trickNumberPerLoading }}" data-path="{{ trickAjaxLoadingPath }}"
data-technical-error="{{ technicalError }}" data-ended="{{ listEnded }}">
{# This block is also used for ajax loading! #}
{% block trick_cards %}
{% for trick in tricks %}
<div class="st-card-container" data-offset="{{ trick.rank }}"{% if (loop.index == 1) and (listError is defined) and (listError is not null) %} data-error="{{ listError }}"{% endif %}>
<div class="uk-card uk-card-primary uk-box-shadow-medium uk-box-shadow-hover-large{{ ajaxMode is defined ? ' uk-animation-slide-bottom-medium' }} st-border-white-small">
<div class="uk-card-badge uk-label uk-flex uk-flex-center uk-flex-middle uk-box-shadow-large uk-text-center">
<span>
<span class="st-color-red">In</span> {{ trick.trickGroup.name }}<br>
<span class="st-color-red">Trick #</span> {{ 'DESC' == trickLoadingMode ? trickCount - (- trick.rank - 1 + trickCount) : trickCount + (trick.rank + 1 - trickCount) }} <span class="st-color-red">Added on</span> {{ trick.creationDate|date('d/m/Y') }}
</span>
</div>
<div class="uk-card-media-top uk-position-relative st-background-black">
{% include 'partials/all/trick_media_loader.html.twig' with {'spinnerRatio': '1.5'} %}
{# Get trick main image thumbnail or default thumbnail #}
{% set trickImage = asset(globalImageDirectory~'trick-default-image-400x225.png') %}
{% set trickImageDesc = 'No description is available. A main image must be defined!' %}
{% if trick.mediaOwner.medias|length != 0 %}
{% for media in trick.mediaOwner.medias %}
{% if media.mediaType.type == 't_thumbnail' and media.isMain == 1 %}
{% set trickImage = asset(globalTrickUploadDirectory~media.mediaSource.image.name~'.'~media.mediaSource.image.format) %}
{% set trickImageDesc = media.mediaSource.image.description|e('html_attr') %}
{% endif %}
{% endfor %}
{% endif %}
<img id="st-card-image-{{ trick.rank }}" class="uk-invisible" data-default-image="{{ asset(globalImageDirectory~'trick-default-image-400x225.png') }}"
src="{{trickImage }}"
alt="{{ trickImageDesc }}">
{# Add darken mode on thumbnail image #}
<div class="uk-position-cover uk-background-cover st-background-image-header"></div>
{# Unpublished trick indicator can be viewed only with permission #}
{% if trick.isPublished == 0 and is_granted('AUTHOR_OR_ADMIN_CAN_VIEW_UNPUBLISHED_TRICKS', trick) %}
<div id="st-unpublished-indicator-{{ trick.rank }}" class="uk-position-bottom uk-flex uk-flex-center uk-text-center st-background-red st-unpublished-indicator">
<span class="uk-text-small uk-text-uppercase uk-text-bold st-color-white st-svg-icon-padding">
<span uk-icon="icon: warning; ratio: 1"></span> Unpublished
<small class="uk-flex">Waiting for moderation</small>
</span>
</div>
{% endif %}
</div>
<div class="uk-card-body uk-position-relative uk-padding-small">
{% if trick.commentCount != 0 %}
{# Trick comment counter #}
<small class="uk-position-top-right uk-padding-small uk-padding-remove-bottom">
<span uk-icon="icon: comment; ratio: 1"></span> {{ trick.commentCount > 1 ? trick.commentCount~' comments' : '1 comment' }}
</small>
{% endif %}
<h2 class="uk-card-title uk-margin-small-top uk-padding-small uk-padding-remove-left uk-padding-remove-right uk-padding-remove-bottom">{{ trick.name }}</h2>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-middle{{ is_granted('AUTHOR_OR_ADMIN_CAN_UPDATE_OR_DELETE_TRICKS', trick) ? ' uk-flex-between' : ' uk-flex-right' }} st-card-link-footer">
<div class="{{is_granted('AUTHOR_OR_ADMIN_CAN_UPDATE_OR_DELETE_TRICKS', trick) ? 'uk-text-left' : 'uk-text-right' }}">
<a href="{{ path('show_single_trick', { 'slug': trick.slug, 'encodedUuid': trick.uuid|uuid_encode }) }}" class="uk-link-text" title="Read more">
Read <span class="uk-hidden@xl">+</span><span class="uk-visible@xl">more</span>
<span uk-icon="icon: arrow-right; ratio: 1.3" class="uk-icon"></span>
</a>
</div>
{% if is_granted('AUTHOR_OR_ADMIN_CAN_UPDATE_OR_DELETE_TRICKS', trick) %}
<div class="uk-text-right">
{# Update trick #}
<a href="{{ path('update_trick', { 'mainRoleLabel': app.user.mainRoleLabel|lower, 'slug': trick.slug, 'encodedUuid': trick.uuid|uuid_encode }) }}"
class="uk-button uk-box-shadow-medium uk-box-shadow-hover-large uk-padding-remove" title="Update">
<span uk-icon="icon: pencil; ratio: 1" class="uk-icon st-color-white st-background-black st-svg-icon-button st-svg-icon-update"></span>
</a>
{# Delete trick #}
<a id="st-delete-trick-{{ trick.rank }}" data-action="{{ path('delete_trick', { 'mainRoleLabel': app.user.mainRoleLabel|lower, 'encodedUuid': trick.uuid|uuid_encode, 'csrfToken': csrf_token('delete_trick') }) }}"
class="uk-button uk-box-shadow-medium uk-box-shadow-hover-large uk-padding-remove st-delete-trick"
href="#st-modal-delete-trick" title="Delete" uk-toggle>
<span uk-icon="icon: trash; ratio: 1" class="uk-icon st-color-white st-background-black st-svg-icon-button st-svg-icon-delete"></span>
</a>
{# ------------------------------------------------------------------------- #}
{# Get trick removal ajax action in modal #}
{% include 'admin/partials/removal/delete_trick.html.twig' only %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock trick_cards %}
</div>
<!-- Load more -->
<div class="uk-flex uk-flex-center">
<button id="st-home-load-more" class="uk-button uk-button-secondary uk-border-rounded uk-box-shadow-hover-medium uk-hidden">
<span class="st-home-spinner st-color-yellow uk-hidden" uk-spinner="ratio: 0.8"></span>
Load more <span uk-icon="plus-circle"></span>
</button>
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset(globalAssetsDirectory~'/js/home-trick-list.js') }}"></script>
{% endblock %}