Skip to content
This repository was archived by the owner on Mar 20, 2024. It is now read-only.

Commit a660d2b

Browse files
gillerrgillerr
committed
fix(focus): use most recent markup
Closes #630
1 parent 2b2bb9b commit a660d2b

File tree

3 files changed

+135
-130
lines changed

3 files changed

+135
-130
lines changed

‎src/example-pages/01.homepage-global-nav.twig‎

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,60 +21,62 @@
2121
</div>
2222
</div>
2323
<div class="col-md-9">
24+
<div class="focus">
2425

25-
<!-- focus panes -->
26-
<div class="tab-content tab-border tab-focus">
27-
<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
26+
<!-- focus tabs -->
27+
<ul class="nav nav-tabs nav-tabs-focus nav-justified">
28+
<li class="active"><a href="#home" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, similique</a></li>
29+
<li><a href="#profile" data-toggle="tab">Nam voluptate minima</a></li>
30+
<li><a href="#messages" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
31+
<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
32+
</ul>
2833

29-
<div class="tab-pane active in" id="home">
30-
<div class="row">
31-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
32-
<div class="col-sm-5 nopadding-left">
33-
<h2>Lorem ispum title 1</h2>
34-
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
35-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
34+
<div class="tab-content tab-border tab-focus">
35+
<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
36+
37+
<!-- focus panes -->
38+
<div class="tab-pane active in" id="home">
39+
<div class="row">
40+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
41+
<div class="col-sm-5">
42+
<h4>Voluptates mollitia, consequuntur dignissimos maiores quasi?</h4>
43+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam mollitia modi porro, libero totam. Vero ipsum iste labore, tempora optio, modi dolores.</p>
44+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
45+
</div>
3646
</div>
3747
</div>
38-
</div>
39-
<div class="tab-pane" id="profile">
40-
<div class="row">
41-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
42-
<div class="col-sm-5 nopadding-left">
43-
<h2>Lorem ispum title 2</h2>
44-
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
45-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
48+
<div class="tab-pane" id="profile">
49+
<div class="row">
50+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
51+
<div class="col-sm-5">
52+
<h4>Nam voluptate minima libero cumque.</h4>
53+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore commodi fugiat dolorum porro.</p>
54+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
55+
</div>
4656
</div>
4757
</div>
48-
</div>
49-
<div class="tab-pane" id="messages">
50-
<div class="row">
51-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
52-
<div class="col-sm-5 nopadding-left">
53-
<h2>Lorem ispum title 3</h2>
54-
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
55-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
58+
<div class="tab-pane" id="messages">
59+
<div class="row">
60+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
61+
<div class="col-sm-5">
62+
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
63+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque non asperiores itaque illo maxime, voluptatibus deserunt natus assumenda. In rem iste error cupiditate adipisci, qui quaerat! Magni quis reiciendis laborum dolores provident voluptatibus sequi, architecto necessitatibus assumenda delectus incidunt itaque expedita minima deserunt at, soluta ratione hic error ipsam fugit ducimus.</p>
64+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
65+
</div>
5666
</div>
5767
</div>
58-
</div>
59-
<div class="tab-pane" id="settings">
60-
<div class="row">
61-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
62-
<div class="col-sm-5 nopadding-left">
63-
<h2>Lorem ispum title 4</h2>
64-
<p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
65-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
68+
<div class="tab-pane" id="settings">
69+
<div class="row">
70+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
71+
<div class="col-sm-5">
72+
<h4>Lorem ipsum dolor sit.</h4>
73+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto! Reprehenderit, similique itaque, dolorem quam veritatis eaque ab consequatur tempore ullam deleniti explicabo.</p>
74+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
75+
</div>
6676
</div>
6777
</div>
6878
</div>
6979
</div>
70-
71-
<!-- focus tabs -->
72-
<ul class="nav nav-tabs nav-tabs-focus nav-justified">
73-
<li class="active"><a href="#home" data-toggle="tab">Title longer than usual</a></li>
74-
<li><a href="#profile" data-toggle="tab">Title 2</a></li>
75-
<li><a href="#messages" data-toggle="tab">Das ist der Megateaser</a></li>
76-
<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
77-
</ul>
7880
</div>
7981

8082
<div class="col-md-3">

‎src/example-pages/02.home-without-nav.twig‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -54,59 +54,63 @@
5454

5555
{% block content %}
5656
<div class="col-sm-12">
57-
<!-- focus panes -->
58-
<div class="tab-content tab-border tab-focus">
59-
<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
6057

61-
<div class="tab-pane active in" id="home">
62-
<div class="row">
63-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
64-
<div class="col-sm-5 nopadding-left">
65-
<h2>Lorem ispum title 1</h2>
66-
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
67-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
58+
<div class="focus">
59+
60+
<!-- focus tabs -->
61+
<ul class="nav nav-tabs nav-tabs-focus nav-justified">
62+
<li class="active"><a href="#home" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, similique</a></li>
63+
<li><a href="#profile" data-toggle="tab">Nam voluptate minima</a></li>
64+
<li><a href="#messages" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
65+
<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
66+
</ul>
67+
68+
<div class="tab-content tab-border tab-focus">
69+
<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
70+
71+
<!-- focus panes -->
72+
<div class="tab-pane active in" id="home">
73+
<div class="row">
74+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
75+
<div class="col-sm-5">
76+
<h4>Voluptates mollitia, consequuntur dignissimos maiores quasi?</h4>
77+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam mollitia modi porro, libero totam. Vero ipsum iste labore, tempora optio, modi dolores.</p>
78+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
79+
</div>
6880
</div>
6981
</div>
70-
</div>
71-
<div class="tab-pane" id="profile">
72-
<div class="row">
73-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
74-
<div class="col-sm-5 nopadding-left">
75-
<h2>Lorem ispum title 2</h2>
76-
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
77-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
82+
<div class="tab-pane" id="profile">
83+
<div class="row">
84+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
85+
<div class="col-sm-5">
86+
<h4>Nam voluptate minima libero cumque.</h4>
87+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore commodi fugiat dolorum porro.</p>
88+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
89+
</div>
7890
</div>
7991
</div>
80-
</div>
81-
<div class="tab-pane" id="messages">
82-
<div class="row">
83-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
84-
<div class="col-sm-5 nopadding-left">
85-
<h2>Lorem ispum title 3</h2>
86-
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
87-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
92+
<div class="tab-pane" id="messages">
93+
<div class="row">
94+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
95+
<div class="col-sm-5">
96+
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
97+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque non asperiores itaque illo maxime, voluptatibus deserunt natus assumenda. In rem iste error cupiditate adipisci, qui quaerat! Magni quis reiciendis laborum dolores provident voluptatibus sequi, architecto necessitatibus assumenda delectus incidunt itaque expedita minima deserunt at, soluta ratione hic error ipsam fugit ducimus.</p>
98+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
99+
</div>
88100
</div>
89101
</div>
90-
</div>
91-
<div class="tab-pane" id="settings">
92-
<div class="row">
93-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
94-
<div class="col-sm-5 nopadding-left">
95-
<h2>Lorem ispum title 4</h2>
96-
<p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
97-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
102+
<div class="tab-pane" id="settings">
103+
<div class="row">
104+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
105+
<div class="col-sm-5">
106+
<h4>Lorem ipsum dolor sit.</h4>
107+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto! Reprehenderit, similique itaque, dolorem quam veritatis eaque ab consequatur tempore ullam deleniti explicabo.</p>
108+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
109+
</div>
98110
</div>
99111
</div>
100112
</div>
101113
</div>
102-
103-
<!-- focus tabs -->
104-
<ul class="nav nav-tabs nav-tabs-focus nav-justified">
105-
<li class="active"><a href="#home" data-toggle="tab">Title longer than usual</a></li>
106-
<li><a href="#profile" data-toggle="tab">Title 2</a></li>
107-
<li><a href="#messages" data-toggle="tab">Das ist der Megateaser</a></li>
108-
<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
109-
</ul>
110114
</div>
111115

112116
<br>

‎src/example-pages/09.subpage.twig‎

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,69 +11,69 @@
1111

1212
{% block content %}
1313
<div class="col-sm-12">
14-
<!-- focus panes -->
15-
<div class="tab-content tab-border tab-focus">
16-
<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
14+
<div class="focus">
1715

18-
<div class="tab-pane active in" id="home">
19-
<div class="row">
20-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
21-
<div class="col-sm-5 nopadding-left">
22-
<h2>Lorem ispum title 1</h2>
23-
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
24-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
16+
<!-- focus tabs -->
17+
<ul class="nav nav-tabs nav-tabs-focus nav-justified">
18+
<li class="active"><a href="#home" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, similique</a></li>
19+
<li><a href="#profile" data-toggle="tab">Nam voluptate minima</a></li>
20+
<li><a href="#messages" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
21+
<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
22+
</ul>
23+
24+
<div class="tab-content tab-border tab-focus">
25+
<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
26+
27+
<!-- focus panes -->
28+
<div class="tab-pane active in" id="home">
29+
<div class="row">
30+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
31+
<div class="col-sm-5">
32+
<h4>Voluptates mollitia, consequuntur dignissimos maiores quasi?</h4>
33+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam mollitia modi porro, libero totam. Vero ipsum iste labore, tempora optio, modi dolores.</p>
34+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
35+
</div>
2536
</div>
2637
</div>
27-
</div>
28-
<div class="tab-pane" id="profile">
29-
<div class="row">
30-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
31-
<div class="col-sm-5 nopadding-left">
32-
<h2>Lorem ispum title 2</h2>
33-
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
34-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
38+
<div class="tab-pane" id="profile">
39+
<div class="row">
40+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
41+
<div class="col-sm-5">
42+
<h4>Nam voluptate minima libero cumque.</h4>
43+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore commodi fugiat dolorum porro.</p>
44+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
45+
</div>
3546
</div>
3647
</div>
37-
</div>
38-
<div class="tab-pane" id="messages">
39-
<div class="row">
40-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
41-
<div class="col-sm-5 nopadding-left">
42-
<h2>Lorem ispum title 3</h2>
43-
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
44-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
48+
<div class="tab-pane" id="messages">
49+
<div class="row">
50+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
51+
<div class="col-sm-5">
52+
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
53+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque non asperiores itaque illo maxime, voluptatibus deserunt natus assumenda. In rem iste error cupiditate adipisci, qui quaerat! Magni quis reiciendis laborum dolores provident voluptatibus sequi, architecto necessitatibus assumenda delectus incidunt itaque expedita minima deserunt at, soluta ratione hic error ipsam fugit ducimus.</p>
54+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
55+
</div>
4556
</div>
4657
</div>
47-
</div>
48-
<div class="tab-pane" id="settings">
49-
<div class="row">
50-
<div class="col-sm-7"><img src="http://placehold.it/588x368" alt="image description"></div>
51-
<div class="col-sm-5 nopadding-left">
52-
<h2>Lorem ispum title 4</h2>
53-
<p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Occultum facinus esse potuerit.</p>
54-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
58+
<div class="tab-pane" id="settings">
59+
<div class="row">
60+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
61+
<div class="col-sm-5">
62+
<h4>Lorem ipsum dolor sit.</h4>
63+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto! Reprehenderit, similique itaque, dolorem quam veritatis eaque ab consequatur tempore ullam deleniti explicabo.</p>
64+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
65+
</div>
5566
</div>
5667
</div>
5768
</div>
5869
</div>
59-
60-
<!-- focus tabs -->
61-
<ul class="nav nav-tabs nav-tabs-focus nav-justified">
62-
<li class="active"><a href="#home" data-toggle="tab">Title in H2 uns extra lang, weil es eigentlich</a></li>
63-
<li><a href="#profile" data-toggle="tab">Title 2</a></li>
64-
<li><a href="#messages" data-toggle="tab">Das ist der Megateaser</a></li>
65-
<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
66-
</ul>
6770
</div>
68-
</div>
6971

7072
<br>
7173

7274
<div class="row">
7375
<div class="col-sm-12">
74-
7576
<div class="list-group">
76-
7777
<div class="list-group-header">
7878
<h2 class="pull-left">Themes</h2>
7979
<a href="#" class="pull-right icon icon--before icon--list">all</a>
@@ -115,6 +115,5 @@
115115
</div>
116116
</div>
117117
</div>
118-
119118
</div>
120119
{% endblock %}

0 commit comments

Comments
 (0)