Browse Source

turning base html into haml

Axolotle 1 year ago
parent
commit
87018ccebe
7 changed files with 196 additions and 334 deletions
  1. 14
    14
      app/main/views.py
  2. 5
    5
      app/static/js/app.js
  3. 85
    111
      app/templates/_macros.haml
  4. 6
    6
      app/templates/base.haml
  5. 29
    87
      app/templates/index.haml
  6. 20
    24
      app/templates/menu.haml
  7. 37
    87
      app/templates/player.haml

+ 14
- 14
app/main/views.py View File

@@ -15,7 +15,7 @@ from sqlalchemy import cast, Date
15 15
 from . import main
16 16
 from .forms import SubscribeForm       # same
17 17
 from .partial_content import *
18
-from .jinja_custom_filters import *
18
+# from .jinja_custom_filters import *
19 19
 from .. import db                      # same
20 20
 from app.models.admin import *
21 21
 from app.models.event import Event
@@ -69,7 +69,7 @@ def about():
69 69
         'function': 'displayMain',
70 70
         'content': {
71 71
             'template': render_template(
72
-                "main_pages/about.html",
72
+                "main_pages/about.haml",
73 73
                 page=page
74 74
             ),
75 75
             'title': "À propos"
@@ -84,7 +84,7 @@ def contribute():
84 84
         'function': 'displayMain',
85 85
         'content': {
86 86
             'template': render_template(
87
-                "main_pages/contribute.html",
87
+                "main_pages/contribute.haml",
88 88
                 page=page
89 89
             ),
90 90
             'title': "Contribuer"
@@ -107,7 +107,7 @@ def podcasts():
107 107
         'function': 'displayMain',
108 108
         'content': {
109 109
             'template': render_template(
110
-                "main_pages/podcasts.html",
110
+                "main_pages/podcasts.haml",
111 111
                 podcasts=podcasts,
112 112
                 pagination=pagination
113 113
             ),
@@ -123,7 +123,7 @@ def podcast(id):
123 123
         'function': 'displayMain',
124 124
         'content': {
125 125
             'template': render_template(
126
-                "elem_pages/podcast.html",
126
+                "elem_pages/podcast.haml",
127 127
                 elem=podcast
128 128
             ),
129 129
             'title': podcast.name,
@@ -156,7 +156,7 @@ def contributors():
156 156
         'function': 'displayMain',
157 157
         'content': {
158 158
             'template': render_template(
159
-                "main_pages/contributors.html",
159
+                "main_pages/contributors.haml",
160 160
                 contributors=Contributor.list(),
161 161
                 collectives=Collective.list()
162 162
             ),
@@ -173,7 +173,7 @@ def contributor(id):
173 173
         'function': 'displayMain',
174 174
         'content': {
175 175
             'template': render_template(
176
-                "elem_pages/contributor.html",
176
+                "elem_pages/contributor.haml",
177 177
                 elem=contributor
178 178
             ),
179 179
             'title': contributor.name,
@@ -189,7 +189,7 @@ def collective(id):
189 189
         'function': 'displayMain',
190 190
         'content': {
191 191
             'template': render_template(
192
-                "elem_pages/contributor.html",
192
+                "elem_pages/contributor.haml",
193 193
                 elem=collective
194 194
             ),
195 195
             'title': collective.name,
@@ -208,7 +208,7 @@ def channels():
208 208
         'function': 'displayMain',
209 209
         'content': {
210 210
             'template': render_template(
211
-                "main_pages/channels.html",
211
+                "main_pages/channels.haml",
212 212
                 channels=Channel.list()
213 213
             ),
214 214
             'title': "Chaînes",
@@ -225,7 +225,7 @@ def channel(id):
225 225
         'function': 'displayMain',
226 226
         'content': {
227 227
             'template': render_template(
228
-                "elem_pages/contributor.html",
228
+                "elem_pages/contributor.haml",
229 229
                 elem=channel
230 230
             ),
231 231
             'title': channel.name
@@ -248,7 +248,7 @@ def blogs():
248 248
         'function': 'displayMain',
249 249
         'content': {
250 250
             'template': render_template(
251
-                "main_pages/blogs.html",
251
+                "main_pages/blogs.haml",
252 252
                 blog_posts=BlogPost.list(number=10),
253 253
                 pagination = pagination
254 254
             ),
@@ -265,7 +265,7 @@ def blog(id):
265 265
         'function': 'displayMain',
266 266
         'content': {
267 267
             'template': render_template(
268
-                "elem_pages/blog.html",
268
+                "elem_pages/blog.haml",
269 269
                 elem=blog_post
270 270
             ),
271 271
             'title': blog_post.name
@@ -289,7 +289,7 @@ def agendas():
289 289
         'function': 'displayMain',
290 290
         'content': {
291 291
             'template': render_template(
292
-                "main_pages/agendas.html",
292
+                "main_pages/agendas.haml",
293 293
                 events = events,
294 294
                 pagination = pagination),
295 295
             'title': "Agendas"
@@ -304,7 +304,7 @@ def agenda(id):
304 304
         'function': 'displayMain',
305 305
         'content': {
306 306
             'template': render_template(
307
-                "elem_pages/agenda.html",
307
+                "elem_pages/agenda.haml",
308 308
                 elem=event
309 309
             ),
310 310
             'title': event.name

+ 5
- 5
app/static/js/app.js View File

@@ -82,7 +82,7 @@ function displayMain(data) {
82 82
 }
83 83
 
84 84
 function checkLive() {
85
-    loadContent(document.getElementById('live_autocheck').getAttribute('href'));
85
+    loadContent(document.getElementById('live-autocheck').getAttribute('href'));
86 86
 }
87 87
 
88 88
 //checkLive();
@@ -91,13 +91,13 @@ function checkLive() {
91 91
 function updateLive(data) {
92 92
     // If live started / is ongoing
93 93
     if (data.next_live_in < 0) {
94
-        document.getElementById('live_autocheck').style.display = '';
95
-        document.getElementById('live_play').setAttribute('href', data.stream_url_play);
94
+        document.getElementById('live-autocheck').style.display = '';
95
+        document.getElementById('live-play').setAttribute('href', data.stream_url_play);
96 96
     }
97 97
     // If live is not ongoing
98 98
     else {
99
-        document.getElementById('live_autocheck').style.display = 'none';
100
-        document.getElementById('live_play').setAttribute('href', '');
99
+        document.getElementById('live-autocheck').style.display = 'none';
100
+        document.getElementById('live-play').setAttribute('href', '');
101 101
     }
102 102
 }
103 103
 

+ 85
- 111
app/templates/_macros.haml View File

@@ -1,119 +1,93 @@
1
-% macro pagination_widget(pagination, endpoint)
2
-<div class="pagination">
3
-<ul class="pagination">
4
-    <li{% if not pagination.has_prev %} class="disabled"{% endif %}>
5
-        <a class="content-link" href="{% if pagination.has_prev %}{{ url_for(endpoint,
6
-        page = pagination.page - 1, **kwargs) }}{% else %}#{% endif %}">
7
-        &laquo;</a>
8
-    </li>
9
-    % for p in pagination.iter_pages()
10
-    % if p
11
-    % if p == pagination.page
12
-    <li class="active">
13
-    <a class="content-link" href="{{ url_for(endpoint, page = p, **kwargs) }}">{{- p -}}</a>
14
-    </li>
15
-    % else
16
-    <li>
17
-    <a class="content-link" href="{{ url_for(endpoint, page = p, **kwargs) }}">{{- p -}}</a>
18
-    </li>
19
-    % endif
20
-    % else
21
-    <li class="disabled"><a href="#">&hellip;</a></li>
22
-    % endif
23
-    % endfor
24
-    <li{% if not pagination.has_next %} class="disabled"{% endif %}>
25
-    <a class="content-link" href="{% if pagination.has_next %}{{ url_for(endpoint,
26
-    page = pagination.page + 1, **kwargs) }}{% else %}#{% endif %}">
27
-    &raquo;
28
-    </a>
29
-    </li>
30
-</ul>
31
-</div>
32
-% endmacro
1
+-macro podcast_box(elem):
2
+    %div.flex
3
+        %a.picto.content-link href='{{ url_for('main.play', id=elem.id) }}'
4
+            %svg -> %use href='#small_play'
5
+        %div.bloc.name
6
+            %h3 -> =elem.name
7
+            -if elem.channel.name:
8
+                %h3 -> %a.content-link \
9
+                href='{{ url_for('main.channel', id=elem.channel.id) }}'
10
+                    =elem.channel.name|upper
33 11
 
34
-{# dont forget to import the pictos before using this #}
35
-% macro podcast_box(elem)
36
-<div class="flex">
37
-    <a class="picto content-link" href="{{ url_for('main.play', id=elem.id) }}">
38
-    <svg><use href="#small-play"></use></svg>
39
-    </a>
40
-    <div class="bloc name">
41
-        <h3>{{ elem.name }}</h3>
42
-        % if elem.channel.name
43
-        <h3><a class="content-link" href="{{ url_for('main.channel', id=elem.channel.id) }}">{{ elem.channel.name|upper }}</a></h3>
44
-        % endif
45
-    </div>
46
-</div>
47
-% endmacro
12
+-macro title(route, route_id, name):
13
+    %h3 -> %a.content-link href='{{ url_for(route, id=route_id) }}'
14
+        =name
48 15
 
49
-% macro title(route, route_id, name)
50
-<h3><a class="content-link" href="{{ url_for(route, id=route_id) }}">{{ name }}</a></h3>
51
-% endmacro
16
+-macro link_list(group, route, word, css, open=True, close=True):
17
+    -if group|length > 0:
18
+        -if open:
19
+            <p class="marg {% if css %}{{ css }}{% endif %}">{{ word }}
20
+        -else:
21
+            =word
22
+        -for elem in group:
23
+            %a.content-link href='{{ url_for(route, id=elem.id)}}'
24
+                =elem.name
25
+            -if not loop.last:
26
+                ,
27
+        -if close:
28
+            </p>
52 29
 
53
-% macro link_list(group, route, word, css, open=True, close=True)
54
-% if group|length > 0
55
-% if open
56
-<p class="marg {% if css %}{{ css }}{% endif %}">{{ word }}
57
-% else
58
-{{ word }}
59
-% endif
60
-% for elem in group
61
-    <a class="content-link" href="{{ url_for(route, id=elem.id)
62
-        }}">{{ elem.name }}</a>
63
-    {%- if not loop.last %}, {% endif %}
64
-% endfor
65
-% if close
66
-</p>
67
-% endif
68
-% endif
69
-% endmacro
30
+-macro contributors_list(group, route):
31
+    -for elem in group:
32
+        %article.widget
33
+            %p
34
+                %a.content-link href='{{ url_for(route, id=elem.id) }}'
35
+                    =elem.name
36
+                =>
37
+                %a.pabo href='{{ elem.website }}'
38
+                    =elem.website
39
+            %p.marg
40
+                ------> {{ elem.status }}
70 41
 
71
-% macro contributors_list(group, route)
72
-% for elem in group
73
-<article class="widget">
74
-    <p><a class="content-link" href="{{ url_for(route, id=elem.id)
75
-        }}">{{ elem.name }}</a> => <a class="pabo" href="{{ elem.website
76
-        }}">{{ elem.website }}</a></p>
77
-    <p class="marg">------> {{ elem.status }}</p>
78
-</article>
79
-% endfor
80
-% endmacro
42
+-macro description(desc, truncate_value, css):
43
+    -if desc:
44
+        %div class='marg2 description {% if css %}{{ css }}{% endif %}'
45
+            -if truncate_value:
46
+                =desc|safe|truncate(truncate_value, False)
47
+            -else:
48
+                =desc|safe
81 49
 
82
-% macro description(desc, truncate_value, css)
83
-% if desc
84
-<div class="marg2 description {% if css %}{{ css }}{% endif %}">
85
-% if truncate_value
86
-{{ desc|safe|truncate(truncate_value, False) -}}
87
-% else
88
-{{ desc|safe -}}
89
-% endif
90
-</div>
91
-% endif
92
-% endmacro
50
+-macro more_button(route, route_id):
51
+    %p.more
52
+        %a.content-link href='{{ url_for(route, id=route_id) }}'
53
+            more
93 54
 
94
-% macro more_button(route, route_id)
95
-<p class="more"><a class="content-link" href="{{ url_for(route, id=route_id)
96
-    }}">more</a></p>
97
-% endmacro
55
+-macro podcast_list(group):
56
+    -if group|length > 0:
57
+        -for elem in group:
58
+            %article.widget
59
+                =podcast_box(elem)
60
+                %span.license
61
+                    =elem.timestamp|format_date
98 62
 
99
-% macro podcast_list(group)
100
-% if group|length > 0
101
-% for elem in group
102
-<article class="widget">
103
-    {{ podcast_box(elem) }}
104
-    <span class="license">{{ elem.timestamp|format_date }}</span>
105
-</article>
106
-% endfor
107
-% endif
108
-% endmacro
63
+-macro tag_list(group, css):
64
+    -if group|length > 0:
65
+        %p class='tags marg2 {% if css %}{{ css }}{% endif %}'
66
+            Tags :
67
+        -for elem in group:
68
+            %a << {{ elem.name }}
69
+            -if not loop.last:
70
+                ,
109 71
 
110
-% macro tag_list(group, css)
111
-% if group|length > 0
112
-<p class="tags marg2 {% if css %}{{ css }}{% endif %}">Tags :
113
-% for elem in group
114
-    <a>{{ elem.name }}</a>
115
-    {%- if not loop.last %}, {% endif %}
116
-% endfor
117
-</p>
118
-% endif
119
-% endmacro
72
+-macro pagination(pag, endpoint):
73
+    %div.pagination -> %ul.pagination
74
+        %li class="{% if not pag.has_prev %}disabled{% endif %}"
75
+            %a.content-link href='{% if pag.has_prev %}\
76
+            {{ url_for(endpoint, page = pag.page - 1, **kwargs) }}\
77
+            {% else %}#{% endif %}')
78
+                &laquo;
79
+        -for p in pag.iter_pages():
80
+            -if p:
81
+                %li class='{% if p == pag.page %}active{% endif %}'
82
+                    %a.content-link \
83
+                    href='{{ url_for(endpoint, page = p, **kwargs) }}'
84
+                        =p
85
+            -else:
86
+                %li.disabled
87
+                    %a href='#'
88
+                        &hellip;
89
+        %li class='{% if not pag.has_next %}disabled{% endif %}'
90
+            %a.content-link href='{% if pag.has_next %}\
91
+            {{ url_for(endpoint, page = pagination.page + 1, **kwargs) }}\
92
+            {% else %}#{% endif %}'
93
+                &raquo;

+ 6
- 6
app/templates/base.haml View File

@@ -1,27 +1,27 @@
1 1
 <!DOCTYPE html>
2
-%html(lang='fr' dir='ltghfhfgdfghfghfghfghfghfghr')
2
+%html(lang='fr' dir='ltr')
3 3
     %head
4 4
         %meta(charset='utf-8')
5 5
         <!-- Instruct Internet Explorer to use its latest rendering engine -->
6 6
         %meta(http-equiv='x-ua-compatible' content='ie=edge')
7 7
         %meta(name='viewport' content='width=device-width, initial-scale=1')
8
-        %title << Radio Rhino {% if title %} | {{title}} {% endif %}
8
+        %title << Radio Rhino {% if title %} | {{ title }} {% endif %}
9 9
         <!-- FIXME add favicon -->
10 10
         <!-- FIXME add canonical links -->
11
-        %meta(name='description'\
11
+        %meta(name='description' \
12 12
               content='{% if description %}{{ description }}\
13 13
               {% else %}Radio radicale pour personnes sensibles, le Rhino déboule \
14 14
               sur Strasbourg pour tout retourner sur sa route !{% endif %}')
15 15
         %meta(property='og:image' \
16
-              content="http://podcast.radiorhino.eu/bannière-Rhino-blanche.png")
16
+              content='http://podcast.radiorhino.eu/bannière-Rhino-blanche.png')
17 17
         %link(rel='stylesheet' href={{ url_for('static', filename='css/style.css') }})
18 18
         %link(rel='stylesheet' href={{ url_for('static', filename='css/player.css') }})
19 19
 
20 20
     %body
21
-        -include 'menu.html'
21
+        -include 'menu.haml'
22 22
         %main
23 23
             =template|safe
24
-        -include 'player.html'
24
+        -include 'player.haml'
25 25
 
26 26
     %script(type='text/javascript'\
27 27
             src={{ url_for('static', filename='js/player.js') }})

+ 29
- 87
app/templates/index.haml View File

@@ -1,87 +1,29 @@
1
-{% include 'svg/pictos/small_play.svg' %}
2
-
3
-<section class="principal">
4
-    <div class="title">
5
-        {% include 'svg/titles/title_podcasts.svg' %}
6
-    </div>
7
-    {% for elem in podcasts %}
8
-    <article class="widget">
9
-        <div class="flex">
10
-            <a class="picto content-link" href="{{ url_for('main.play', id=elem.id) }}">
11
-                <svg><use href="#small-play"></use></svg>
12
-            </a>
13
-            <div class="bloc name">
14
-                <h3><a class="content-link" href="{{ url_for('main.podcast', id=elem.id) }}">{{ elem.name }}</a></h3>
15
-            </div>
16
-        </div>
17
-        <span class="license">{{ elem.timestamp|format_date }}</span>
18
-    </article>
19
-    {% endfor %}
20
-
21
-    {% if events %}
22
-        <div class="title marg2">
23
-            {% include 'svg/titles/title_agenda.svg' %}
24
-        </div>
25
-        <div>
26
-            {% for elem in events %}
27
-            <article class="widgetBis">
28
-                <a href="{{ url_for('main.agenda', id=elem.id) }}">
29
-                    <h3>{{ elem.name }}</h3>
30
-                </a>
31
-                <span>Du {{ elem.begin|format_date  }} au {{ elem.end|format_date }}</span>
32
-                <div class="marg description">
33
-                    {{ elem.description|safe|truncate(200, False) }}
34
-                </div>
35
-            </article>
36
-            {% endfor %}
37
-        </div>
38
-
39
-
40
-    {% endif %}
41
-
42
-</section>
43
-
44
-<section class="second">
45
-    {% if blog_posts %}
46
-    <div class="title">
47
-        {% include 'svg/titles/title_blog.svg' %}
48
-    </div>
49
-
50
-    {% for elem in blog_posts %}
51
-    <article class="widgetBis">
52
-        <a href="{{ url_for('main.blog', id=elem.id) }}">
53
-            <h3>{{ elem.name }}</h3>
54
-        </a>
55
-        <span class="license">{{ elem.timestamp|format_date }}</span>
56
-
57
-        {% if elem.contributors|length > 0 %}
58
-        <p class="marg">Par
59
-        {% for contributor in elem.contributors %}
60
-            <a class="content-link"
61
-                href="{{ url_for('main.contributor', id=contributor.id) }}">
62
-            {{ contributor.name -}}
63
-            </a>
64
-            {%- if not loop.last %}, {% endif %}
65
-        {% endfor %}
66
-        {% if elem.contributors|length > 0 %}
67
-        @
68
-        {% for collective in elem.collectives %}
69
-            <a class="content-link"
70
-                href="{{ url_for('main.collective', id=collective.id) }}">
71
-            {{ collective.name -}}
72
-            </a>
73
-            {%- if not loop.last %}, {% endif %}
74
-        {% endfor %}
75
-        {% endif %}
76
-        </p>
77
-        {% endif %}
78
-
79
-        <div class="marg2 description">
80
-            {{ elem.description|safe }}
81
-        </div>
82
-
83
-    </article>
84
-    {% endfor %}
85
-    {% endif %}
86
-
87
-</section>
1
+-include 'svg/pictos/small_play.svg'
2
+
3
+%section.principal
4
+    %div.title
5
+        -include 'svg/titles/title_podcasts.svg'
6
+    -for elem in podcasts:
7
+        %article.widget
8
+            %div.flex
9
+                %a.picto.content-link href={{ url_for('main.play', id=elem.id) }}
10
+                    %svg -> %use href='#small-play'
11
+                %div.bloc.name
12
+                    %h3 -> %a.content-link href={{ url_for('main.podcast', id=elem.id) }}
13
+                        =elem.name
14
+            %span.license
15
+                =elem.timestamp|format_date
16
+    -if events:
17
+        %div.title.marg2
18
+            -include 'svg/titles/title_agenda.svg'
19
+        %div
20
+    -for elem in events:
21
+            %article.widgetBis
22
+                %a href={{ url_for('main.agenda', id=elem.id) }}
23
+                    %h3 -> =elem.name
24
+                    %span
25
+                        Du {{ elem.begin|format_date }} au {{ elem.end|format_date }}
26
+                    %div.marg.description
27
+                        =elem.description|safe|truncate(200, False)
28
+
29
+%section.second

+ 20
- 24
app/templates/menu.haml View File

@@ -1,24 +1,20 @@
1
-<nav>
2
-    <a id="logo" class="content-link" href="{{ url_for('main.index') }}">
3
-        {% include 'svg/logo.svg' %}
4
-    </a>
5
-    <div id="live_autocheck" href="{{ url_for('main.get_live') }}" style="display:none;">
6
-        <a id="live_play" class="content-link" href="">Play</a>
7
-    </div>
8
-    <div>
9
-        <a class="content-link" href="{{ url_for('main.podcasts') }}">
10
-            {% include 'svg/titles/title_podcasts.svg' %}</a>
11
-        <a class="content-link" href="{{ url_for('main.contributors') }}">
12
-            {% include 'svg/titles/title_contributors.svg' %}</a>
13
-        <a class="content-link" href="{{ url_for('main.blogs') }}">
14
-            {% include 'svg/titles/title_blog.svg' %}</a>
15
-        <a class="content-link" href="{{ url_for('main.agendas') }}">
16
-            {% include 'svg/titles/title_agenda.svg' %}</a>
17
-    </div>
18
-    <div>
19
-        <a class="content-link" href="{{ url_for('main.about') }}">
20
-            {% include 'svg/titles/title_about.svg' %}</a>
21
-        <a class="content-link" href="{{ url_for('main.contribute') }}">
22
-            {% include 'svg/titles/title_contribute.svg' %}</a>
23
-    </div>
24
-</nav>
1
+%nav
2
+    %a#logo.content-link href={{ url_for('main.index') }}
3
+        -include 'svg/logo.svg'
4
+    %div#live-autocheck.disabled href={{ url_for('main.get_live') }}
5
+        %a#live-play.content-link href=''
6
+            Play
7
+    %div
8
+        %a.content-link href='{{ url_for('main.podcasts') }}'
9
+            -include 'svg/titles/title_podcasts.svg'
10
+        %a.content-link href='{{ url_for('main.contributors') }}'
11
+            -include 'svg/titles/title_contributors.svg'
12
+        %a.content-link href='{{ url_for('main.blogs') }}'
13
+            -include 'svg/titles/title_blog.svg'
14
+        %a.content-link href='{{ url_for('main.agendas') }}'
15
+            -include 'svg/titles/title_agenda.svg'
16
+    %div
17
+        %a.content-link href='{{ url_for('main.about') }}'
18
+            -include 'svg/titles/title_about.svg'
19
+        %a.content-link href='{{ url_for('main.contribute') }}'
20
+            -include 'svg/titles/title_contribute.svg'

+ 37
- 87
app/templates/player.haml View File

@@ -1,90 +1,40 @@
1
-<div id="player">
2
-    <div id="slider-bar">
3
-        <div id="time" class="box-text">
4
-            <span id="current-time">0:00</span>
5
-            <span class="separator">/</span>
6
-            <span id="total-time">0:00</span>
7
-        </div>
8
-        <div id="track" class="sliders">
9
-            <div id="track-loading">
10
-            </div>
11
-            <div id="track-progress">
12
-            </div>
13
-        </div>
14
-        <div id="mute" class="box-text">
15
-            <span>mute</span>
16
-        </div>
17
-        <div id="volume" class="sliders">
18
-            <div id="volume-active">
19
-            </div>
20
-        </div>
21
-    </div>
1
+%div#player
2
+    %div#slider-bar
3
+        %div#time.box-text
4
+            %span#current-time << 0:00
5
+            %span.separator << /
6
+            %span#total-time << 0:00
7
+        %div#track.sliders
8
+            %div#track-loading
9
+            %div#track-progress
10
+        %div#mute.box-text
11
+            %span << mute
12
+        %div#volume.sliders
13
+            %div#volume-active
22 14
 
23
-    <div id="controls">
24
-        <div id="play-pan" class="pan">
25
-            <div id="play" class="button">
26
-                <svg xmlns="http://www.w3.org/2000/svg" width="36.48" height="40" viewBox="0 0 36.48 40">
27
-                    <g class="line main-width black" id="playBtn" display="">
28
-                        <polygon points="7.745,2.5 28.735,20 7.745,37.5"/>
29
-                    </g>
30
-                    <g class="line main-width black" id="pauseBtn" display="none">
31
-                        <line x1="12.993" y1="2.5" x2="12.993" y2="37.5"/>
32
-                        <line x1="23.487" y1="2.5" x2="23.487" y2="37.5"/>
33
-                    </g>
34
-                </svg>
35
-            </div>
36
-            <div id="play-infos" class="text">
37
-                <h3 id="track-title">TITRE</h3>
38
-                <p>CHANNEL</p>
39
-            </div>
40
-        </div>
15
+    %div#controls
16
+        %div#play-pan.pan
17
+            %div#play.button
18
+                -include 'svg/player/playpause.svg'
19
+            %div#play-infos.text
20
+                %h3#track-title << TITRE
21
+                %p << CHANNEL
22
+        %div#nextPrev-pan.pan
23
+            %div#previous.button
24
+                -include 'svg/player/previous.svg'
25
+            %div#next.button
26
+                -include 'svg/player/next.svg'
27
+            %div#side-infos.text
28
+                %h3 << TITRE
29
+                %p << DATE
30
+                %p << INFOS
31
+        %div#playlist-pan.pan
32
+            %div#playlist.button
33
+                -include 'svg/player/playlist.svg'
34
+            %div#playlist-infos.text
35
+                %h3 << PLAYLIST
36
+                %p << active :
41 37
 
42
-        <div id="nextPrev-pan" class="pan">
43
-            <div id="previous" class="button">
44
-                <svg xmlns="http://www.w3.org/2000/svg" width="36.48" height="40" viewBox="0 0 36.48 40">
45
-                    <g class="line main-width black">
46
-                        <polygon points="23.487,37.5 2.498,20 23.487,2.5"/>
47
-                        <polygon points="33.982,37.5 12.993,20 33.982,2.5"/>
48
-                        <line x1="2.498" y1="2.5" x2="2.498" y2="37.5"/>
49
-                    </g>
50
-                </svg>
51
-            </div>
52
-            <div id="next" class="button">
53
-                <svg xmlns="http://www.w3.org/2000/svg" width="36.48" height="40" viewBox="0 0 36.48 40">
54
-                    <g class="line main-width black">
55
-                        <polygon points="12.993,2.5 33.982,20 12.993,37.5 "/>
56
-                        <polygon points="2.498,2.5 23.487,20 2.498,37.5 "/>
57
-                        <line x1="33.982" y1="37.5" x2="33.982" y2="2.5"/>
58
-                    </g>
59
-                </svg>
60
-            </div>
61
-            <div id="side-infos" class="text">
62
-                <!-- <h3>TITRE</h3>
63
-                <p>date</p>
64
-                <p>infos</p> -->
65
-            </div>
66
-        </div>
67
-
68
-        <div id="playlist-pan" class="pan">
69
-            <div id="playlist" class="button">
70
-                <svg xmlns="http://www.w3.org/2000/svg" width="36.48" height="40" viewBox="0 0 36.48 40">
71
-                    <g class="line main-width black">
72
-                        <line x1="33.98" y1="12.994" x2="2.5" y2="12.994"/>
73
-        				<line x1="33.98" y1="23.488" x2="2.5" y2="23.488"/>
74
-        				<line x1="33.98" y1="33.982" x2="2.5" y2="33.982"/>
75
-        				<polygon points="2.5,2.5 15.087,12.994 2.5,23.488"/>
76
-                    </g>
77
-                </svg>
78
-            </div>
79
-            <div id="playlist-infos" class="text">
80
-                <h3>PLAYLIST</h3>
81
-                <p>active :</p>
82
-            </div>
83
-        </div>
84
-    </div>
85
-
86
-    <audio id="audio">
87
-        <source class="mp3_src" src="" type="audio/mp3" />
38
+    %audio#audio
39
+        %source.mp3_src(src='' type='audio/mp3')
88 40
         Your browser does not support the audio element.
89
-    </audio>
90
-</div>

Loading…
Cancel
Save