Skip to content

Commit 7c07be3

Browse files
danielaKaydanielaKay
authored
Feature/design basics (#29)
* better design * nicer search bar
1 parent eccfd1c commit 7c07be3

File tree

4 files changed

+174
-121
lines changed

4 files changed

+174
-121
lines changed

‎templates/component/_item.html.twig‎

Lines changed: 77 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,79 @@
11
<div class="twig-doc-component">
2-
<div class="twig-doc-component-description">
3-
<h3>{{ component.title }} ({{ component.projectPath ?? (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>
11-
<ul>
12-
{% for key, type in component.parameters %}
13-
<li>
14-
<b>{{ key }}:</b>
15-
{% include '@TwigDoc/component/_parameter.html.twig' with {parameter: type} %}
16-
</li>
17-
{% endfor %}
18-
</ul>
19-
</div>
20-
<div>
21-
<h4>Category</h4>
22-
<p>
23-
<a href="{{ path('twig_doc_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('twig_doc_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('twig_doc_home', {'filterQuery': tag, 'filterType': 'tag'}) }}">{{ tag }}</a>
43-
</p>
44-
{% endfor %}
45-
</div>
46-
</div>
47-
<div class="twig-doc-component-examples">
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-
<div class="twig-doc-viewport-width-display">Viewport size: <span class="twig-doc-viewport-width-value"></span>px</div>
56-
<div class="twig-doc-viewport-container">
57-
{% include '@TwigDoc/component/_viewport.html.twig' with {component: component, componentData: variation ?? []} %}
58-
</div>
59-
<div class="twig-doc-variation-description">
60-
<ul>
61-
{% for name, value in variation %}
62-
<li>
63-
<b>{{ name }}:</b>
64-
{% include '@TwigDoc/component/_parameter.html.twig' with {parameter: value} %}
65-
</li>
66-
{% endfor %}
67-
</ul>
68-
</div>
69-
</div>
70-
{% endfor %}
71-
</div>
72-
</div>
73-
</div>
2+
<div class="twig-doc-component-description">
3+
<h3>{{ component.title }}
4+
({{ component.projectPath ?? (component.name ~ '.html.twig') }})</h3>
5+
<div class="twig-doc-component-configuration">
6+
<div>
7+
<h4>Description</h4>
8+
<p>{{ component.description }}</p>
9+
</div>
10+
<div>
11+
<h4>Parameters</h4>
12+
<ul>
13+
{% for key, type in component.parameters %}
14+
<li>
15+
<b>{{ key }}:</b>
16+
{% include '@TwigDoc/component/_parameter.html.twig' with {parameter: type} %}
17+
</li>
18+
{% endfor %}
19+
</ul>
20+
</div>
21+
<div>
22+
<h4>Category</h4>
23+
<p>
24+
<a href="{{ path('twig_doc_home', {'filterQuery': component.mainCategory.name, 'filterType': 'category'}) }}">{{ component.mainCategory.name }}</a>
25+
</p>
26+
</div>
27+
<div>
28+
<h4>Sub-Category</h4>
29+
{% if component.category.parent %}
30+
<p>
31+
<a href="{{ path('twig_doc_home', {'filterQuery': component.category.name, 'filterType': 'sub_category' }) }}">
32+
{{ component.category.name }}
33+
</a>
34+
</p>
35+
{% else %}
36+
<p>NONE</p>
37+
{% endif %}
38+
</div>
39+
<div>
40+
<h4>Tags</h4>
41+
{% for tag in component.tags %}
42+
<p>
43+
<a href="{{ path('twig_doc_home', {'filterQuery': tag, 'filterType': 'tag'}) }}">{{ tag }}</a>
44+
</p>
45+
{% endfor %}
46+
</div>
47+
</div>
48+
<div class="twig-doc-component-examples">
49+
<h4>Previews</h4>
50+
<div class="twig-doc-variations">
51+
{% for name, variation in component.variations %}
52+
<div class="twig-doc-variation">
53+
<h5 class="active" data-variation="{{ name }}">{{ component.title }}-Variation:
54+
{{ name }}</h5>
55+
{# {% endfor %}
56+
{% for name, variation in component.variations %} #}
57+
<div class="twig-doc-variation-body active" data-variation="{{ name }}">
58+
<div class="twig-doc-viewport-width-display">Viewport size:
59+
<span class="twig-doc-viewport-width-value"></span>px</div>
60+
<div class="twig-doc-viewport-container">
61+
{% include '@TwigDoc/component/_viewport.html.twig' with {component: component, componentData: variation ?? []} %}
62+
</div>
63+
<div class="twig-doc-variation-description">
64+
<ul>
65+
{% for name, value in variation %}
66+
<li>
67+
<b>{{ name }}:</b>
68+
{% include '@TwigDoc/component/_parameter.html.twig' with {parameter: value} %}
69+
</li>
70+
{% endfor %}
71+
</ul>
72+
</div>
73+
</div>
74+
</div>
75+
{% endfor %}
76+
</div>
77+
</div>
78+
</div>
7479
</div>

‎templates/component/_search.html.twig‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1-
<form action="{{ path('twig_doc_home') }}" method="get" name="twig_doc_search_form">
2-
<label for="twig_doc_search_form_filterQuery">Search</label>
3-
<input name="filterQuery" id="twig_doc_search_form_filterQuery" value="{{ filterQuery }}" autocomplete="off"/>
4-
<label for="twig_doc_search_form_filterType">What</label>
5-
<select name="filterType" id="twig_doc_search_form_filterType">
6-
<option {{ filterType ? null : 'selected' }} value="">Everything</option>
7-
<option {{ filterType == 'category' ? 'selected' : null }} value="category">Category</option>
8-
<option {{ filterType == 'name' ? 'selected=selected' : null }} value="name">Component Name</option>
9-
<option {{ filterType == 'tags' ? 'selected' : null }} value="tags">Tags</option>
10-
<option {{ filterType == 'sub_category' ? 'selected' : null }} value="sub_category">Sub-Category</option>
11-
</select>
12-
<button type="submit" class="btn btn-primary">Search</button>
13-
{% if filterQuery %}
14-
<a href="{{ path('twig_doc_home') }}">Show all</a>
15-
{% endif %}
16-
</form>
1+
<div class="twig-doc-search-container">
2+
<form action="{{ path('twig_doc_home') }}" method="get" name="twig_doc_search_form">
3+
<label for="twig_doc_search_form_filterQuery">Search</label>
4+
<input name="filterQuery" id="twig_doc_search_form_filterQuery" value="{{ filterQuery }}" autocomplete="off"/>
5+
<label for="twig_doc_search_form_filterType">What</label>
6+
<select name="filterType" id="twig_doc_search_form_filterType">
7+
<option {{ filterType ? null : 'selected' }} value="">Everything</option>
8+
<option {{ filterType == 'category' ? 'selected' : null }} value="category">Category</option>
9+
<option {{ filterType == 'name' ? 'selected=selected' : null }} value="name">Component Name</option>
10+
<option {{ filterType == 'tags' ? 'selected' : null }} value="tags">Tags</option>
11+
<option {{ filterType == 'sub_category' ? 'selected' : null }} value="sub_category">Sub-Category</option>
12+
</select>
13+
<button type="submit" class="btn btn-primary">Search</button>
14+
{% if filterQuery %}
15+
<a href="{{ path('twig_doc_home') }}">Show all</a>
16+
{% endif %}
17+
</form>
18+
</div>

0 commit comments

Comments
 (0)