Skip to content

Commit 5fcfe35

Browse files
davidhoelzeldavidhoelzel
committed
styling and layout update
1 parent fa71220 commit 5fcfe35

4 files changed

Lines changed: 199 additions & 112 deletions

File tree

‎templates/component/_item.html.twig‎

Lines changed: 59 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,68 @@
11
<div class="twig-doc-component">
2-
<h3>{{ component.title }} ({{ component.name ~ '.html.twig' }})</h3>
3-
<p>Description: {{ component.description }}</p>
4-
<p>Category: <a href="{{ path('_documentation_home', {'filterQuery': component.mainCategory.name, 'filterType': 'category'}) }}">{{ component.mainCategory.name }}</a></p>
5-
<p>Sub-Category:
6-
{% if component.category.parent %}
7-
<a href="{{ path('_documentation_home', {'filterQuery': component.category.name, 'filterType': 'sub_category' }) }}">
8-
{{ component.category.name }}
9-
</a>
10-
{% else %}
11-
NONE
12-
{% endif %}
13-
</p>
14-
<div class="twig-doc-component-configuration">
15-
<h5>Parameters</h5>
16-
<ul>
17-
{% for key, type in component.parameters %}
18-
<li>
19-
{{ key }}: {% include '@TwigDoc/component/_parameter.html.twig' with {parameter: type} %}
20-
</li>
21-
{% endfor %}
22-
</ul>
23-
<h5>Tags</h5>
24-
<ul>
25-
{% for tag in component.tags %}
26-
<li><a href="{{ path('_documentation_home', {'filterQuery': tag, 'filterType': 'tag'}) }}">{{ tag }}</a></li>
27-
{% endfor %}
28-
</ul>
29-
</div>
30-
<div class="twig-doc-component-examples">
31-
<h5>Examples</h5>
32-
{% for variation in component.variations %}
33-
<div class="twig-doc-component-variation">
34-
{{ renderComponent(component, variation)|raw }}
2+
<div class="twig-doc-component-description">
3+
<h3>{{ component.title }} ({{ component.name ~ '.html.twig' }})</h3>
4+
<div class="twig-doc-component-configuration">
5+
<div>
6+
<h4>Description</h4>
7+
<p>{{ component.description }}</p>
8+
</div>
9+
<div>
10+
<h4>Parameters</h4>
3511
<ul>
36-
{% for key, value in variation %}
12+
{% for key, type in component.parameters %}
3713
<li>
38-
{{ key }}: {% include '@TwigDoc/component/_parameter.html.twig' with {parameter: value} %}
14+
<b>{{ key }}:</b>
15+
{% include '@TwigDoc/component/_parameter.html.twig' with {parameter: type} %}
3916
</li>
4017
{% endfor %}
4118
</ul>
4219
</div>
43-
{% endfor %}
20+
<div>
21+
<h4>Category</h4>
22+
<p>
23+
<a href="{{ path('_documentation_home', {'filterQuery': component.mainCategory.name, 'filterType': 'category'}) }}">{{ component.mainCategory.name }}</a>
24+
</p>
25+
</div>
26+
<div>
27+
<h4>Sub-Category</h4>
28+
{% if component.category.parent %}
29+
<p>
30+
<a href="{{ path('_documentation_home', {'filterQuery': component.category.name, 'filterType': 'sub_category' }) }}">
31+
{{ component.category.name }}
32+
</a>
33+
</p>
34+
{% else %}
35+
<p>NONE</p>
36+
{% endif %}
37+
</div>
38+
<div>
39+
<h4>Tags</h4>
40+
{% for tag in component.tags %}
41+
<p>
42+
<a href="{{ path('_documentation_home', {'filterQuery': tag, 'filterType': 'tag'}) }}">{{ tag }}</a>
43+
</p>
44+
{% endfor %}
45+
</div>
46+
</div>
47+
<div class="twig-doc-component-examples">
48+
<h4>Variations</h4>
49+
{% for variation in component.variations %}
50+
<div class="twig-doc-variation">
51+
<div class="twig-doc-component-variation">
52+
{{ renderComponent(component, variation)|raw }}
53+
</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 %}
66+
</div>
4467
</div>
4568
</div>

‎templates/component/_parameter.html.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% if parameter is iterable %}
22
<ul>
3-
{% for key, value in parameter %}
4-
<li>{{ key }}: {{ value }}</li>
5-
{% endfor %}
3+
{% for key, value in parameter %}
4+
<li><b>{{ key }}:</b> {% include '@TwigDoc/component/_parameter.html.twig' with {parameter: value} %}</li>
5+
{% endfor %}
66
</ul>
77
{% else %}
88
{{ parameter }}

‎templates/pages/index.html.twig‎

Lines changed: 54 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,36 @@
22

33
{% block body %}
44
<div id="twig-doc-container">
5-
{% include '@TwigDoc/component/_search.html.twig' %}
65

7-
{% set currentTab = 2 %}
6+
<div class="breakpoints">
7+
<div id="screenwidth"></div>
8+
<div class="one"></div>
9+
<div class="two"></div>
10+
<div class="three"></div>
11+
<div class="four"></div>
12+
<div class="five"></div>
13+
<div class="six"></div>
14+
<div class="seven"></div>
15+
<div class="eight"></div>
16+
</div>
17+
<!-- find better solution -->
18+
<script>
19+
function widthResizer(){
20+
var width = window.innerWidth
21+
if(document.getElementById("screenwidth")) {
22+
document.getElementById("screenwidth").innerHTML = "Width: " + width + "px"
23+
}
24+
console.log(width)
25+
}
26+
27+
// Getting the width of the browser on load
28+
widthResizer()
29+
30+
// Getting the width of the browser whenever the screen resolution changes.
31+
window.addEventListener('resize', widthResizer)
32+
</script>
33+
34+
{% include '@TwigDoc/component/_search.html.twig' %}
835

936
{% if not components %}
1037
<div class="twig-doc-error">
@@ -13,22 +40,34 @@
1340
{% endif %}
1441
<div class="twig-doc-body">
1542

16-
<button onClick="setScreenwidth('small');">S</button>
43+
{# <button onClick="setScreenwidth('small');">S</button>
1744
<button onClick="setScreenwidth('medium');">M</button>
1845
<button onClick="setScreenwidth('large');">L</button>
19-
<button onClick="setScreenwidth('default');">Default</button>
20-
<div class="tabs">
21-
{% for categoryName, items in components %}
22-
23-
<input class="radiotab" name="tabs" tabindex="{{ loop.index }}" type="radio" id="tab_{{ loop.index }}" {{ loop.index == currentTab ? "checked='checked'" : ""}}>
24-
<label class="label" for="tab_{{ loop.index }}">{{ categoryName}}</label>
25-
<div class="panel" tabindex="{{ loop.index }}">
26-
{% for item in items %}
27-
{% include '@TwigDoc/component/_item.html.twig' with { component: item }%}
28-
{% endfor %}
29-
</div>
30-
{% endfor %}
46+
<button onClick="setScreenwidth('default');">Default</button> #}
47+
48+
<div class="navigation">
49+
<ul>
50+
<li>
51+
<a href="?filterQuery=Atoms&filterType=category">Atoms</a>
52+
<ul>
53+
<li><a href="?filterQuery=Buttons&filterType=sub_category">Buttons</a></li>
54+
<li><a href="?filterQuery=Typography&filterType=sub_category">Typography</a></li>
55+
</ul>
56+
</li>
57+
<li><a href="?filterQuery=Commons&filterType=category">Commons</a></li>
58+
<li><a href="?filterQuery=Snippets&filterType=category">Snippets</a></li>
59+
<li><a href="?filterQuery=Blocks&filterType=category">Blocks</a></li>
60+
<li><a href="?filterQuery=Templates&filterType=category">Templates</a></li>
61+
</ul>
3162
</div>
63+
64+
{% for items in components %}
65+
<div>
66+
{% for item in items %}
67+
{% include '@TwigDoc/component/_item.html.twig' with { component: item }%}
68+
{% endfor %}
69+
</div>
70+
{% endfor %}
3271
</div>
3372
</div>
3473
{% endblock %}

‎templates/style/style.css.twig‎

Lines changed: 83 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,116 @@
1-
#twig-doc-container .twig-doc-component {
2-
background-color: #efefef;
3-
margin-bottom: 10px;
1+
#twig-doc-container {
2+
margin-top: 50px;
43
}
5-
#twig-doc-container .twig-doc-component-description {
6-
padding: 10px;
4+
#twig-doc-container .breakpoints {
5+
position: fixed;
6+
left: 0;
7+
bottom: 0;
8+
width: 100%;
9+
display: flex;
10+
flex-direction: row;
11+
align-content: stretch;
12+
gap: 5px;
13+
background-color: white;
14+
padding-top: 5px;
715
}
816

9-
#twig-doc-container .twig-doc-component-variation {
10-
background-color: white;
11-
margin-bottom: 10px;
12-
border: 1px solid #000000;
17+
#twig-doc-container #screenwidth {
18+
text-align: center;
19+
background: lightgray;
20+
padding: 7px 20px;
1321
}
1422

15-
#twig-doc-container .twig-doc-component-examples h5 {
16-
padding: 10px;
23+
#twig-doc-container .breakpoints div {
24+
padding: 7px 20px;
25+
flex-grow: 1;
1726
}
1827

19-
#twig-doc-container .twig-doc-variation {
20-
margin-bottom: 20px;
28+
#twig-doc-container .navigation {
29+
position: fixed;
30+
left: 0;
31+
top: 0;
32+
width: 100%;
33+
background: white;
34+
text-align: center;
35+
border-bottom: 1px darkgray solid;
2136
}
2237

38+
#twig-doc-container .navigation ul {
39+
display: flex;
40+
position: relative;
41+
flex-direction: row;
42+
{# margin-bottom: 25px; #}
43+
}
2344

24-
h2 a {
25-
color: pink;
26-
@media (min-width: 768px) {
27-
color: aqua;
28-
}
45+
#twig-doc-container .navigation ul ul {
46+
display: none;
47+
position: absolute;
48+
}
2949

50+
#twig-doc-container .navigation li {
51+
list-style: none;
3052
}
3153

54+
#twig-doc-container .navigation li a {
55+
padding: 5px 15px;
56+
}
3257

33-
/* TABS */
3458

35-
#twig-doc-container .tabs {
59+
#twig-doc-container .navigation li:hover ul {
3660
display: flex;
37-
flex-wrap: wrap;
38-
margin: 20px auto 20px;
3961
}
4062

41-
#twig-doc-container .radiotab {
42-
position: absolute;
43-
opacity: 0;
44-
}
4563

46-
#twig-doc-container .label {
47-
padding: 10px 10px;
48-
margin: 0;
64+
#twig-doc-container .twig-doc-component {
65+
background-color: #efefef;
66+
margin-bottom: 10px;
67+
padding: 20px 0;
68+
border-radius: 20px;
4969
}
50-
51-
#twig-doc-container .label:hover {
52-
background: #d8d8d8;
70+
#twig-doc-container .twig-doc-component-description {
71+
padding: 20px;
5372
}
5473

55-
#twig-doc-container .label:active {
56-
background: #ccc;
74+
#twig-doc-container .twig-doc-component-description h3 {
75+
text-transform: none;
76+
}
77+
#twig-doc-container .twig-doc-component-description p,
78+
#twig-doc-container .twig-doc-variation-description p {
79+
line-height: 1.2em;
80+
margin: 5px 0 0 0;
81+
}
82+
#twig-doc-container .twig-doc-component-description h4 {
83+
margin-top: 15px;
5784
}
5885

59-
#twig-doc-container .radiotab:checked+.label {
60-
background-color: #efefef;
61-
border-bottom: 1px solid darkgray;
62-
/* background: #fff;
63-
color: #000;
64-
border-top: solid 2px #000;
65-
border-left: solid 2px #000;
66-
border-right: solid 2px #000;
67-
border-bottom: none; */
86+
#twig-doc-container .twig-doc-component-description h4:first-child {
87+
margin-top: 0;
6888
}
6989

70-
#twig-doc-container .panel {
71-
display: none;
72-
padding: 0;
73-
width: 100%;
90+
#twig-doc-container .twig-doc-component-configuration {
91+
display: flex;
92+
flex-direction: row;
93+
padding-top: 20px;
94+
gap: 50px;
95+
}
96+
#twig-doc-container .twig-doc-component-configuration div {
97+
{# padding: 20px; #}
7498
}
7599

76-
#twig-doc-container .radiotab:checked+.label+.panel {
77-
display: block;
100+
#twig-doc-container .twig-doc-component-variation {
101+
background-color: white;
102+
margin-top: 10px;
103+
border: 1px solid #000000;
78104
}
79105

80-
@media (min-width: 600px) {
81-
#twig-doc-container .panel {
82-
order: 99;
83-
}
106+
#twig-doc-container .twig-doc-component-examples h4 {
107+
padding-left: 20px;
108+
}
84109

85-
#twig-doc-container .label {
86-
width: auto;
87-
/* border-radius: 10px 10px 0 0; */
88-
/* border-bottom: solid 2px #000; */
89-
}
110+
#twig-doc-container .twig-doc-variation {
111+
margin-bottom: 20px;
112+
}
90113

114+
#twig-doc-container .twig-doc-variation .twig-doc-variation-description {
115+
padding-left: 20px;
91116
}

0 commit comments

Comments
 (0)