index.html 11.9 KB
Newer Older
1
{% extends "base.html" %}
gouarin's avatar
gouarin committed
2
3

{% block header_content %}
gouarin's avatar
gouarin committed
4
5
6
7
8
9
{% set article = articles | highlighted_article(HIGHLIGHT_SETTINGS) -%}
<div class="container">
    <a href="{{SITEURL}}/{{article.category.url}}" class="header-btn btn btn-dark mb-2 p-2">
        <div class="row m-0 d-flex align-items-center">
            <div class="circle-{{article.category.slug}}"></div>
            <span class="category text-uppercase pl-2">{{CIRCLES[article.category.slug]}}</span>
10
11
        </div>
    </a>
gouarin's avatar
gouarin committed
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
</div>
<h1 class="mt-3 mb-2">{{ article.title }}</h1>
<div class="container text-center py-1">
    <div class="row d-flex justify-content-center">
        {% if article.start_date and article.end_date %}
        <div class="col-md-auto header-border px-2">
            <span>{{ [article.start_date, article.end_date] | date_interval }}</span>
        </div>
        {% endif %}
        {% if article.place %}
        <div class="col-md-auto header-border px-2">
            <span>{{ article.place }}</span>
        </div>
        {% endif %}
    </div>
</div>
<div class="font-weight-light text-center pt-4">{{article.summary}}</div>
Matthieu Boileau's avatar
Matthieu Boileau committed
29
30
31
32
33
<div class="detail">
    <a href="{{SITEURL}}/{{article.url}}">
        <button type="button" class="header-btn btn btn-outline-dark">L'événement en détail</button>
    </a>
</div>
gouarin's avatar
gouarin committed
34
35
{% endblock header_content %}

gouarin's avatar
gouarin committed
36
37
38
{% block toc_content %}
{% endblock toc_content %}

gouarin's avatar
gouarin committed
39

40
{% block content %}
gouarin's avatar
gouarin committed
41
<div class="container-fluid event">
Roland Denis's avatar
Roland Denis committed
42
    <div class="row d-flex justify-content-center mx-xl-5 mx-lg-3 event" style="margin-top: 22px;">
Roland Denis's avatar
Roland Denis committed
43
        {% import 'cards.html' as cards with context %}
Matthieu Boileau's avatar
Fix #31    
Matthieu Boileau committed
44
        {% for article in articles | previewed_articles %}
gouarin's avatar
gouarin committed
45
        {{ cards.dispatch(article) }}
Roland Denis's avatar
Roland Denis committed
46
        {% endfor %}
gouarin's avatar
gouarin committed
47
48

        <div class="card col-md-4 pt-3 pb-4 px-xl-5  px-md-3 align-self-end">
49
            <a href="{{SITEURL}}/archives.html">
gouarin's avatar
gouarin committed
50
51
52
53
54
55
56
57
                <div class="card-header"></div>
                <div class="card-footer p-0 d-flex align-items-center" id="special">
                    <div class="container-fluid p-0">
                        <p class="m-0" style="font-family: 'Playfair Display', serif; font-size:34px; font-weight:500;">
                            Tout l'agenda</p>
                        <p class="m-0" style="font-family: 'Roboto', serif; font-size:14px; font-weight:700;">et
                            événements passés</p>
                    </div>
Roland Denis's avatar
Roland Denis committed
58
                </div>
59
            </a>
gouarin's avatar
gouarin committed
60
61
62
63
        </div>
    </div>
</div>

gouarin's avatar
gouarin committed
64
65
<div class="container-fluid text-center service">
    <div class="container services pb-4">
gouarin's avatar
gouarin committed
66
        <h1>Le groupe Calcul est fier<br> d'animer, fédérer et développer la communauté</h1>
gouarin's avatar
gouarin committed
67
68
69
        <div class="row d-flex justify-content-center mx-md-5 px-md-5">
            <div class="card col-md-4 py-4">
                <div class="card-header py-3">
70
                    <a href="{{ SITEURL }}/tag/evt_tech.html">
gouarin's avatar
gouarin committed
71
72
                        <img src="{{ SITEURL }}/theme/img/evt_technique.png"
                            alt="Image symbolisant les événements techniques" />
73
                    </a>
gouarin's avatar
gouarin committed
74
                </div>
gouarin's avatar
gouarin committed
75
                <div class="card-body py-0">
gouarin's avatar
gouarin committed
76
77
                    <h1 class="card-title">Evénements techniques</h1>
                    <p class="card-text m-0">Programmation, optimisation,<br> parallélisme, architectures.</p>
78
                    <a class="card-link" href="{{ SITEURL }}/tag/evt_tech.html">L'agenda technique</a>
gouarin's avatar
gouarin committed
79
80
81
                </div>
            </div>

gouarin's avatar
gouarin committed
82
83
            <div class="card col-md-4 py-4">
                <div class="card-header  py-3">
84
                    <a href="{{ SITEURL }}/category/job.html">
gouarin's avatar
gouarin committed
85
86
                        <img src="{{ SITEURL }}/theme/img/offre_emploi.png"
                            alt="Image symbolisant les offres d'emploi" />
87
                    </a>
gouarin's avatar
gouarin committed
88
                </div>
gouarin's avatar
gouarin committed
89
                <div class="card-body py-0">
gouarin's avatar
gouarin committed
90
91
                    <h1 class="card-title">Offres d'emploi</h1>
                    <p class="card-text m-0">CDI, CDD, post-doc,<br> thèses, stages.</p>
Matthieu Boileau's avatar
Matthieu Boileau committed
92
                    <a class="card-link" href="{{ SITEURL }}/category/job.html">Tous les jobs</a>
gouarin's avatar
gouarin committed
93
94
95
                </div>
            </div>

gouarin's avatar
gouarin committed
96
97
            <div class="card col-md-4 py-4">
                <div class="card-header py-3">
98
                    <a href="{{ SITEURL }}/tag/evt_sci.html">
gouarin's avatar
gouarin committed
99
100
                        <img src="{{ SITEURL }}/theme/img/evt_scientifique.png"
                            alt="Image symbolisant les événements scientifiques" />
101
                    </a>
gouarin's avatar
gouarin committed
102
                </div>
gouarin's avatar
gouarin committed
103
                <div class="card-body py-0">
gouarin's avatar
gouarin committed
104
                    <h1 class="card-title">Evénements scientifiques</h1>
Matthieu Boileau's avatar
Matthieu Boileau committed
105
                    <p class="card-text m-0">Recherche et veille scientifique<br>autour du calcul.</p>
106
                    <a class="card-link" href="{{ SITEURL }}/tag/evt_sci.html">L'agenda scientifique</a>
gouarin's avatar
gouarin committed
107
108
109
                </div>
            </div>

gouarin's avatar
gouarin committed
110
111
            <div class="card col-md-4 py-4">
                <div class="card-header py-3">
112
                    <a href="{{ SITEURL }}/pages/mesocentres_en_france.html">
gouarin's avatar
gouarin committed
113
                        <img src="{{ SITEURL }}/theme/img/meso.png" alt="Image symbolisant les mésocentres" />
114
                    </a>
gouarin's avatar
gouarin committed
115
                </div>
gouarin's avatar
gouarin committed
116
                <div class="card-body py-0">
gouarin's avatar
gouarin committed
117
118
                    <h1 class="card-title">Mésocentres</h1>
                    <p class="card-text m-0">Recensement, coordination<br> des ressources de calcul académique.</p>
gouarin's avatar
gouarin committed
119
120
                    <a class="card-link" href="{{ SITEURL }}/pages/mesocentres_en_france.html">La liste des
                        mésocentres</a>
gouarin's avatar
gouarin committed
121
122
123
                </div>
            </div>

gouarin's avatar
gouarin committed
124
125
            <div class="card col-md-4 py-4">
                <div class="card-header py-3">
Matthieu Boileau's avatar
Matthieu Boileau committed
126
127
128
                    <a href="{{ SITEURL }}/pages/presentation_groupe.html#nos-partenaires">
                        <img src="{{ SITEURL }}/theme/img/reseau.png" alt="Image symbolisant la mise en réseau" />
                    </a>
gouarin's avatar
gouarin committed
129
                </div>
gouarin's avatar
gouarin committed
130
                <div class="card-body py-0">
gouarin's avatar
gouarin committed
131
132
                    <h1 class="card-title">Mise en réseau</h1>
                    <p class="card-text m-0">Partenaires nationaux, régionaux,<br> académiques et industriels.</p>
gouarin's avatar
gouarin committed
133
134
                    <a class="card-link" href="{{ SITEURL }}/pages/presentation_groupe.html#nos-partenaires">Notre
                        réseau</a>
gouarin's avatar
gouarin committed
135
136
137
138
139
                </div>
            </div>
        </div>
    </div>

140
    <div class="container-fluid mt-4 px-0 twitter" style="display:none">
gouarin's avatar
gouarin committed
141
142
        <div id="twitterCarousel" class="carousel slide" data-ride="carousel"
            data-interval="{{TWITTER['carousel_interval']}}">
Roland Denis's avatar
Roland Denis committed
143
            <ol class="carousel-indicators">
144
                {% for tweet_id in range(TWITTER['carousel_count']) %}
gouarin's avatar
gouarin committed
145
146
                <li data-target="#twitterCarousel" data-slide-to="{{tweet_id}}" {% if tweet_id == 0 %}class="active"
                    {% endif %}></li>
Roland Denis's avatar
Roland Denis committed
147
148
149
                {% endfor %}
            </ol>
            <div class="carousel-inner">
150
                {% for tweet_id in range(TWITTER['carousel_count']) %}
Roland Denis's avatar
Roland Denis committed
151
152
                <div class="carousel-item {% if tweet_id == 0 %}active{% endif %}">
                    <div class="container pb-4">
gouarin's avatar
gouarin committed
153
154
155
                        <img src="{{SITEURL}}/theme/img/twitter_comma.png" class="comma" alt="" />
                        <span class="share d-flex flex-row-reverse"><a class="twitter-share"
                                href="#">Partager</a></span>
156
157
158
                        <a href="https://twitter.com/{{TWITTER['user']}}" target="_blank" style="display:block">
                            <h1 class="pt-4">GroupeCalcul@twitter</h1>
                        </a>
Roland Denis's avatar
Roland Denis committed
159
160

                        <ul class="list-inline">
161
162
                            <li class="list-inline-item m-0 px-1"><span class="twitter-date">Date</span></li>
                            <li class="list-inline-item m-0 px-1"><span class="twitter-hashtag">#hashtag</span></li>
163
                            <!--<li class="list-inline-item m-0 px-1"> <img src="{{SITEURL}}/theme/img/twitter_refresh.png" />Rafraîchir</li>-->
gouarin's avatar
gouarin committed
164
165
                            <li class="list-inline-item m-0 px-1"><a class="twitter-author" href="#"
                                    target="_blank">@author</a></li>
Roland Denis's avatar
Roland Denis committed
166
167
168
169
                        </ul>

                        <div class="container px-0">
                            <div class="container" style="width:90%;">
170
171
                                <a class="twitter-link" href="#" target="_blank">
                                    <p class="twitter-text">Contenu</p>
172
                                </a>
Roland Denis's avatar
Roland Denis committed
173
174
175
                            </div>
                        </div>
                    </div>
gouarin's avatar
gouarin committed
176
                </div>
Roland Denis's avatar
Roland Denis committed
177
                {% endfor %}
gouarin's avatar
gouarin committed
178
            </div>
Roland Denis's avatar
Roland Denis committed
179
180
            <a class="carousel-control-prev" href="#twitterCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
181
                <span class="sr-only">Tweet précédent</span>
Roland Denis's avatar
Roland Denis committed
182
183
184
            </a>
            <a class="carousel-control-next" href="#twitterCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
185
                <span class="sr-only">Tweet suivant</span>
Roland Denis's avatar
Roland Denis committed
186
            </a>
gouarin's avatar
gouarin committed
187
        </div>
188
        <div class="container pb-4">
gouarin's avatar
gouarin committed
189
190
191
192
            <a class="twitter-timeline" data-width="100%" data-lang="fr"
                data-tweet-limit="{{ TWITTER['carousel_count'] }}" data-link-color="#000" data-theme="light"
                href="https://twitter.com/{{TWITTER['user']}}"
                data-chrome="noheader transparent nofooter nofooter noborders">Tweets by Groupe Calcul</a>
Roland Denis's avatar
Roland Denis committed
193
            <script async src="https://platform.twitter.com/widgets.js"></script>
194
        </div>
gouarin's avatar
gouarin committed
195
196
    </div>
</div>
197
{% endblock content %}
gouarin's avatar
gouarin committed
198

199
{% block script %}
gouarin's avatar
gouarin committed
200
201
202
203
204
<script>
    jQuery('.twitter').delegate('#twitter-widget-0', 'DOMSubtreeModified propertychange', function () {
        //function call to override the base twitter styles
        customizeTweetMedia();
    });
205

gouarin's avatar
gouarin committed
206
207
208
    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
209

gouarin's avatar
gouarin committed
210
211
212
213
214
215
216
    function customizeTweet(tweet_id) {
        input_tweet = $($('.twitter').find('.twitter-timeline').contents().find('li.timeline-TweetList-tweet')[tweet_id]);
        output_tweet = $($('#twitterCarousel').find('.carousel-item')[tweet_id]);
        output_tweet.find('.twitter-text').html(input_tweet.find('p.timeline-Tweet-text').html());
        output_tweet.find('.twitter-date').html(capitalizeFirstLetter(input_tweet.find('time').attr('aria-label').substring(7)));
        output_tweet.find('.twitter-share').attr('href', input_tweet.find('a.timeline-ShareMenu-option').attr('href'));
        output_tweet.find('.twitter-link').attr('href', input_tweet.find('.timeline-Tweet').attr('data-click-to-open-target'));
217

gouarin's avatar
gouarin committed
218
219
220
221
        // Tweet author
        var tweet_author = input_tweet.find('.TweetAuthor-Link');
        output_tweet.find('.twitter-author').attr('href', tweet_author.attr('href'))
        output_tweet.find('.twitter-author').html(tweet_author.find('.TweetAuthor-screenName').html())
222

gouarin's avatar
gouarin committed
223
224
225
226
227
228
229
230
231
232
233
234
235
236
        // Hashtags
        var hashtag_obj = output_tweet.find('.twitter-hashtag');
        hashtag_obj.html('');
        input_tweet.find('a.hashtag').each(function () {
            hashtag_obj.append('<a href="' + $(this).attr('href') + '" target="_blank">' + $(this).text() + '</a> ');
        });
        if (hashtag_obj.html() == '') {
            hashtag_obj.remove();
        }
    }

    var customizeTweetMedia = function () {
        try {
            jQuery('.twitter').find('.twitter-timeline').css('display', 'none');
237

gouarin's avatar
gouarin committed
238
239
240
241
242
243
244
245
246
247
            for (var tweet_id = 0; tweet_id < {{ TWITTER['carousel_count'] }}; ++tweet_id) {
            customizeTweet(tweet_id);
        }

        jQuery('div.twitter').show();
    }
                catch (err) {
        jQuery('div.twitter').hide();
    }
            }
248

gouarin's avatar
gouarin committed
249
250
251
252
253
    jQuery('.twitter').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function () {
        customizeTweetMedia(this);
    });
</script>
{% endblock script %}