Skip to content

Commit f49b4e8

Browse files
author
Thomas Hanke
committed
add Tabs for variations
1 parent 7d2f47e commit f49b4e8

3 files changed

Lines changed: 124 additions & 78 deletions

File tree

‎templates/component/_item.html.twig‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -45,24 +45,30 @@
4545
</div>
4646
</div>
4747
<div class="twig-doc-component-examples">
48-
<h4>Variations</h4>
49-
{% for variation in component.variations %}
50-
<div class="twig-doc-variation">
48+
<h4>Previews</h4>
49+
<div class="twig-doc-variation">
50+
{% for name, variation in component.variations %}
51+
<h5{% if loop.first %} class="active"{% endif %} data-variation="{{ name }}">{{ name }}</h5>
52+
{% endfor %}
53+
{% for name, variation in component.variations %}
54+
<div class="twig-doc-variation-body{% if loop.first %} active{% endif %}" data-variation="{{ name }}">
55+
5156
<div class="twig-doc-viewport-container">
5257
{% include '@TwigDoc/component/_viewport.html.twig' with {component: component, componentData: variation ?? [], width: '1280px'} %}
58+
</div>
59+
<div class="twig-doc-variation-description">
60+
<ul>
61+
{% for key, value in variation %}
62+
<li>
63+
<b>{{ key }}:</b>
64+
{% include '@TwigDoc/component/_parameter.html.twig' with {parameter: value} %}
65+
</li>
66+
{% endfor %}
67+
</ul>
68+
</div>
5369
</div>
54-
<div class="twig-doc-variation-description">
55-
<ul>
56-
{% for key, value in variation %}
57-
<li>
58-
<b>{{ key }}:</b>
59-
{% include '@TwigDoc/component/_parameter.html.twig' with {parameter: value} %}
60-
</li>
61-
{% endfor %}
62-
</ul>
63-
</div>
64-
</div>
65-
{% endfor %}
70+
{% endfor %}
71+
</div>
6672
</div>
6773
</div>
6874
</div>

‎templates/documentation.html.twig‎

Lines changed: 81 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,104 @@
11
<html lang="en">
22
{% block head %}
3-
{% block stylesheets %}
4-
<style>
5-
{{ include('@TwigDoc/style/style.css.twig') }}
6-
</style>
7-
{% endblock %}
3+
{% block stylesheets %}
4+
<style>
5+
{{ include('@TwigDoc/style/style.css.twig') }}
6+
</style>
7+
{% endblock %}
88
<title>{% block title %}Twig Component Documentation{% endblock %}</title>
9-
{% block javascripts %}
10-
{% endblock %}
9+
{% block javascripts %}
10+
<script type="application/javascript">
11+
window.addEventListener('load', () => {
12+
document.querySelectorAll('.twig-doc-variation h5').forEach(
13+
function (element) {
14+
element.addEventListener('click', function () {
15+
console.log(element);
16+
let variation = element.getAttribute('data-variation');
17+
element.parentNode.querySelectorAll('.twig-doc-variation-body, h5').forEach(
18+
function (e) {
19+
e.classList.remove('active');
20+
});
21+
element.classList.add('active');
22+
element.parentNode.querySelector(`.twig-doc-variation-body[data-variation="${variation}"]`).classList.add('active');
23+
})
24+
}
25+
)
26+
});
27+
</script>
28+
{% endblock %}
1129
{% endblock %}
1230
</html>
1331

1432
<body>
1533
{% block body %}
16-
<div id="twig-doc-container">
34+
<div id="twig-doc-container">
1735

18-
<div class="breakpoints">
19-
<div id="screenwidth"></div>
20-
<div class="one"></div>
21-
<div class="two"></div>
22-
<div class="three"></div>
23-
<div class="four"></div>
24-
<div class="five"></div>
25-
<div class="six"></div>
26-
<div class="seven"></div>
27-
<div class="eight"></div>
28-
</div>
29-
<!-- find better solution -->
30-
<script>
31-
function widthResizer(){
32-
var width = window.innerWidth
33-
if(document.getElementById("screenwidth")) {
34-
document.getElementById("screenwidth").innerHTML = "Width: " + width + "px"
36+
<div class="breakpoints">
37+
<div id="screenwidth"></div>
38+
<div class="one"></div>
39+
<div class="two"></div>
40+
<div class="three"></div>
41+
<div class="four"></div>
42+
<div class="five"></div>
43+
<div class="six"></div>
44+
<div class="seven"></div>
45+
<div class="eight"></div>
46+
</div>
47+
<!-- find better solution -->
48+
<script>
49+
function widthResizer() {
50+
var width = window.innerWidth
51+
if (document.getElementById("screenwidth")) {
52+
document.getElementById("screenwidth").innerHTML = "Width: " + width + "px"
53+
}
54+
console.log(width)
3555
}
36-
console.log(width)
37-
}
3856
39-
// Getting the width of the browser on load
40-
widthResizer()
57+
// Getting the width of the browser on load
58+
widthResizer()
4159
42-
// Getting the width of the browser whenever the screen resolution changes.
43-
window.addEventListener('resize', widthResizer)
44-
</script>
60+
// Getting the width of the browser whenever the screen resolution changes.
61+
window.addEventListener('resize', widthResizer)
62+
</script>
4563

46-
{% include '@TwigDoc/component/_search.html.twig' %}
64+
{% include '@TwigDoc/component/_search.html.twig' %}
4765

48-
{% if not components %}
49-
<div class="twig-doc-error">
50-
No components found
51-
</div>
52-
{% endif %}
53-
<div class="twig-doc-body">
66+
{% if not components %}
67+
<div class="twig-doc-error">
68+
No components found
69+
</div>
70+
{% endif %}
71+
<div class="twig-doc-body">
5472

55-
{# <button onClick="setScreenwidth('small');">S</button>
73+
{# <button onClick="setScreenwidth('small');">S</button>
5674
<button onClick="setScreenwidth('medium');">M</button>
5775
<button onClick="setScreenwidth('large');">L</button>
5876
<button onClick="setScreenwidth('default');">Default</button> #}
5977

60-
<div class="navigation">
61-
<ul>
62-
<li>
63-
<a href="?filterQuery=Atoms&filterType=category">Atoms</a>
64-
<ul>
65-
<li><a href="?filterQuery=Buttons&filterType=sub_category">Buttons</a></li>
66-
<li><a href="?filterQuery=Typography&filterType=sub_category">Typography</a></li>
67-
</ul>
68-
</li>
69-
<li><a href="?filterQuery=Commons&filterType=category">Commons</a></li>
70-
<li><a href="?filterQuery=Snippets&filterType=category">Snippets</a></li>
71-
<li><a href="?filterQuery=Blocks&filterType=category">Blocks</a></li>
72-
<li><a href="?filterQuery=Templates&filterType=category">Templates</a></li>
73-
</ul>
74-
</div>
75-
76-
{% for items in components %}
77-
<div>
78-
{% for item in items %}
79-
{% include '@TwigDoc/component/_item.html.twig' with { component: item }%}
80-
{% endfor %}
78+
<div class="navigation">
79+
<ul>
80+
<li>
81+
<a href="?filterQuery=Atoms&filterType=category">Atoms</a>
82+
<ul>
83+
<li><a href="?filterQuery=Buttons&filterType=sub_category">Buttons</a></li>
84+
<li><a href="?filterQuery=Typography&filterType=sub_category">Typography</a></li>
85+
</ul>
86+
</li>
87+
<li><a href="?filterQuery=Commons&filterType=category">Commons</a></li>
88+
<li><a href="?filterQuery=Snippets&filterType=category">Snippets</a></li>
89+
<li><a href="?filterQuery=Blocks&filterType=category">Blocks</a></li>
90+
<li><a href="?filterQuery=Templates&filterType=category">Templates</a></li>
91+
</ul>
8192
</div>
82-
{% endfor %}
93+
94+
{% for items in components %}
95+
<div>
96+
{% for item in items %}
97+
{% include '@TwigDoc/component/_item.html.twig' with { component: item } %}
98+
{% endfor %}
99+
</div>
100+
{% endfor %}
101+
</div>
83102
</div>
84-
</div>
85103
{% endblock %}
86104
</body>

‎templates/style/style.css.twig‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
gap: 5px;
1313
background-color: white;
1414
padding-top: 5px;
15+
z-index:100;
1516
}
1617

1718
#twig-doc-container #screenwidth {
@@ -33,6 +34,7 @@
3334
background: white;
3435
text-align: center;
3536
border-bottom: 1px darkgray solid;
37+
z-index: 100;
3638
}
3739

3840
#twig-doc-container .navigation ul {
@@ -119,6 +121,26 @@
119121
padding: 15px;
120122
}
121123

124+
.twig-doc-variation h5 {
125+
margin: 0;
126+
padding: 10px 20px;
127+
display: inline-block;
128+
}
129+
130+
.twig-doc-variation h5:hover, .twig-doc-variation h5.active {
131+
background-color: #000000;
132+
color: #ffffff;
133+
cursor: pointer;
134+
}
135+
136+
.twig-doc-variation-body {
137+
display: none;
138+
}
139+
140+
.twig-doc-variation-body.active {
141+
display: block;
142+
}
143+
122144
.twig-doc-viewport-container {
123145
display: flex;
124146
flex-direction: column;

0 commit comments

Comments
 (0)