From 7c07be37e85676e7ee8bea9b09912163d615c1aa Mon Sep 17 00:00:00 2001
From: Daniela Berger <danielaKay@nordlicht-development.de>
Date: Thu, 25 Apr 2024 08:25:12 +0200
Subject: [PATCH] Feature/design basics (#29)

* better design

* nicer search bar
---
 templates/component/_item.html.twig           | 149 +++++++++---------
 templates/component/_search.html.twig         |  34 ++--
 templates/style/style.css.twig                | 108 +++++++++----
 .../Controller/TwigDocControllerTest.php      |   4 +-
 4 files changed, 174 insertions(+), 121 deletions(-)

diff --git a/templates/component/_item.html.twig b/templates/component/_item.html.twig
index 665b053..77973ba 100644
--- a/templates/component/_item.html.twig
+++ b/templates/component/_item.html.twig
@@ -1,74 +1,79 @@
 <div class="twig-doc-component">
-    <div class="twig-doc-component-description">
-        <h3>{{ component.title }} ({{ component.projectPath ?? (component.name ~ '.html.twig') }})</h3>
-        <div class="twig-doc-component-configuration">
-            <div>
-                <h4>Description</h4>
-                <p>{{ component.description }}</p>
-            </div>
-            <div>
-                <h4>Parameters</h4>
-                <ul>
-                    {% for key, type in component.parameters %}
-                        <li>
-                            <b>{{ key }}:</b>
-                            {% include '@TwigDoc/component/_parameter.html.twig' with {parameter: type} %}
-                        </li>
-                    {% endfor %}
-                </ul>
-            </div>
-            <div>
-                <h4>Category</h4>
-                <p>
-                    <a href="{{ path('twig_doc_home', {'filterQuery': component.mainCategory.name, 'filterType': 'category'}) }}">{{ component.mainCategory.name }}</a>
-                </p>
-            </div>
-            <div>
-                <h4>Sub-Category</h4>
-                {% if component.category.parent %}
-                    <p>
-                        <a href="{{ path('twig_doc_home', {'filterQuery': component.category.name, 'filterType': 'sub_category' }) }}">
-                            {{ component.category.name }}
-                        </a>
-                    </p>
-                {% else %}
-                    <p>NONE</p>
-                {% endif %}
-            </div>
-            <div>
-                <h4>Tags</h4>
-                {% for tag in component.tags %}
-                    <p>
-                        <a href="{{ path('twig_doc_home', {'filterQuery': tag, 'filterType': 'tag'}) }}">{{ tag }}</a>
-                    </p>
-                {% endfor %}
-            </div>
-        </div>
-        <div class="twig-doc-component-examples">
-            <h4>Previews</h4>
-            <div class="twig-doc-variation">
-                {% for name, variation in component.variations %}
-                    <h5{% if loop.first %} class="active"{% endif %} data-variation="{{ name }}">{{ name }}</h5>
-                {% endfor %}
-                {% for name, variation in component.variations %}
-                    <div class="twig-doc-variation-body{% if loop.first %} active{% endif %}" data-variation="{{ name }}">
-                        <div class="twig-doc-viewport-width-display">Viewport size: <span class="twig-doc-viewport-width-value"></span>px</div>
-                        <div class="twig-doc-viewport-container">
-                            {% include '@TwigDoc/component/_viewport.html.twig' with {component: component, componentData: variation ?? []} %}
-                        </div>
-                        <div class="twig-doc-variation-description">
-                            <ul>
-                                {% for name, value in variation %}
-                                    <li>
-                                        <b>{{ name }}:</b>
-                                        {% include '@TwigDoc/component/_parameter.html.twig' with {parameter: value} %}
-                                    </li>
-                                {% endfor %}
-                            </ul>
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
+	<div class="twig-doc-component-description">
+		<h3>{{ component.title }}
+			({{ component.projectPath ?? (component.name ~ '.html.twig') }})</h3>
+		<div class="twig-doc-component-configuration">
+			<div>
+				<h4>Description</h4>
+				<p>{{ component.description }}</p>
+			</div>
+			<div>
+				<h4>Parameters</h4>
+				<ul>
+					{% for key, type in component.parameters %}
+						<li>
+							<b>{{ key }}:</b>
+							{% include '@TwigDoc/component/_parameter.html.twig' with {parameter: type} %}
+						</li>
+					{% endfor %}
+				</ul>
+			</div>
+			<div>
+				<h4>Category</h4>
+				<p>
+					<a href="{{ path('twig_doc_home', {'filterQuery': component.mainCategory.name, 'filterType': 'category'}) }}">{{ component.mainCategory.name }}</a>
+				</p>
+			</div>
+			<div>
+				<h4>Sub-Category</h4>
+				{% if component.category.parent %}
+					<p>
+						<a href="{{ path('twig_doc_home', {'filterQuery': component.category.name, 'filterType': 'sub_category' }) }}">
+							{{ component.category.name }}
+						</a>
+					</p>
+				{% else %}
+					<p>NONE</p>
+				{% endif %}
+			</div>
+			<div>
+				<h4>Tags</h4>
+				{% for tag in component.tags %}
+					<p>
+						<a href="{{ path('twig_doc_home', {'filterQuery': tag, 'filterType': 'tag'}) }}">{{ tag }}</a>
+					</p>
+				{% endfor %}
+			</div>
+		</div>
+		<div class="twig-doc-component-examples">
+			<h4>Previews</h4>
+			<div class="twig-doc-variations">
+				{% for name, variation in component.variations %}
+					<div class="twig-doc-variation">
+						<h5 class="active" data-variation="{{ name }}">{{ component.title }}-Variation:
+							{{ name }}</h5>
+						{# {% endfor %}
+						                {% for name, variation in component.variations %} #}
+						<div class="twig-doc-variation-body active" data-variation="{{ name }}">
+							<div class="twig-doc-viewport-width-display">Viewport size:
+								<span class="twig-doc-viewport-width-value"></span>px</div>
+							<div class="twig-doc-viewport-container">
+								{% include '@TwigDoc/component/_viewport.html.twig' with {component: component, componentData: variation ?? []} %}
+							</div>
+							<div class="twig-doc-variation-description">
+								<ul>
+									{% for name, value in variation %}
+										<li>
+											<b>{{ name }}:</b>
+											{% include '@TwigDoc/component/_parameter.html.twig' with {parameter: value} %}
+										</li>
+									{% endfor %}
+								</ul>
+							</div>
+						</div>
+					</div>
+				{% endfor %}
+			</div>
+		</div>
+	</div>
 </div>
diff --git a/templates/component/_search.html.twig b/templates/component/_search.html.twig
index f4f1148..827cd46 100644
--- a/templates/component/_search.html.twig
+++ b/templates/component/_search.html.twig
@@ -1,16 +1,18 @@
-<form action="{{ path('twig_doc_home') }}" method="get" name="twig_doc_search_form">
-    <label for="twig_doc_search_form_filterQuery">Search</label>
-    <input name="filterQuery" id="twig_doc_search_form_filterQuery" value="{{ filterQuery }}" autocomplete="off"/>
-    <label for="twig_doc_search_form_filterType">What</label>
-    <select name="filterType" id="twig_doc_search_form_filterType">
-        <option {{ filterType ? null : 'selected' }} value="">Everything</option>
-        <option {{ filterType == 'category' ? 'selected' : null }} value="category">Category</option>
-        <option {{ filterType == 'name' ? 'selected=selected' : null }} value="name">Component Name</option>
-        <option {{ filterType == 'tags' ? 'selected' : null }} value="tags">Tags</option>
-        <option {{ filterType == 'sub_category' ? 'selected' : null }} value="sub_category">Sub-Category</option>
-    </select>
-    <button type="submit" class="btn btn-primary">Search</button>
-    {% if filterQuery %}
-        <a href="{{ path('twig_doc_home') }}">Show all</a>
-    {% endif %}
-</form>
+<div class="twig-doc-search-container">
+    <form action="{{ path('twig_doc_home') }}" method="get" name="twig_doc_search_form">
+        <label for="twig_doc_search_form_filterQuery">Search</label>
+        <input name="filterQuery" id="twig_doc_search_form_filterQuery" value="{{ filterQuery }}" autocomplete="off"/>
+        <label for="twig_doc_search_form_filterType">What</label>
+        <select name="filterType" id="twig_doc_search_form_filterType">
+            <option {{ filterType ? null : 'selected' }} value="">Everything</option>
+            <option {{ filterType == 'category' ? 'selected' : null }} value="category">Category</option>
+            <option {{ filterType == 'name' ? 'selected=selected' : null }} value="name">Component Name</option>
+            <option {{ filterType == 'tags' ? 'selected' : null }} value="tags">Tags</option>
+            <option {{ filterType == 'sub_category' ? 'selected' : null }} value="sub_category">Sub-Category</option>
+        </select>
+        <button type="submit" class="btn btn-primary">Search</button>
+        {% if filterQuery %}
+            <a href="{{ path('twig_doc_home') }}">Show all</a>
+        {% endif %}
+    </form>
+</div>
diff --git a/templates/style/style.css.twig b/templates/style/style.css.twig
index a82ebe2..9a78dbc 100644
--- a/templates/style/style.css.twig
+++ b/templates/style/style.css.twig
@@ -1,6 +1,12 @@
+body {
+    padding: 0;
+    margin: 0;
+}
+
 #twig-doc-container {
-    margin-top: 60px;
+    margin-top: 27px;
 }
+
 #twig-doc-container .breakpoints {
     position: fixed;
     left: 0;
@@ -26,7 +32,7 @@
     flex-grow: 1;
 }
 
-.twig-doc-navigation {
+#twig-doc-container .navigation {
     position: fixed;
     left: 0;
     top: 0;
@@ -37,67 +43,70 @@
     z-index: 100;
 }
 
-.twig-doc-navigation ul {
+#twig-doc-container .navigation ul {
     display: flex;
     position: relative;
     flex-direction: row;
-{# margin-bottom: 25px; #}
 }
 
-.twig-doc-navigation ul ul {
+#twig-doc-container .navigation ul ul {
     display: none;
     position: absolute;
 }
 
-.twig-doc-navigation li {
+#twig-doc-container .navigation li {
     list-style: none;
 }
 
-.twig-doc-navigation li a {
+#twig-doc-container .navigation li a {
     padding: 5px 15px;
 }
 
-
-.twig-doc-navigation li:hover ul {
+#twig-doc-container .navigation li:hover ul {
     display: flex;
 }
 
-
 #twig-doc-container .twig-doc-component {
     background-color: #efefef;
     margin-bottom: 10px;
     padding: 20px 0;
     border-radius: 20px;
 }
-#twig-doc-container .twig-doc-component-description {
-    padding: 20px;
-}
 
 #twig-doc-container .twig-doc-component-description h3 {
     text-transform: none;
+    padding: 0 20px;
+    margin: 0;
 }
+
 #twig-doc-container .twig-doc-component-description p,
 #twig-doc-container .twig-doc-variation-description p {
     line-height: 1.2em;
     margin: 5px 0 0 0;
 }
+
 #twig-doc-container .twig-doc-component-description h4 {
     margin-top: 15px;
+    margin-bottom: 0px;
 }
 
 #twig-doc-container .twig-doc-component-description h4:first-child {
     margin-top: 0;
 }
 
+#twig-doc-container .twig-doc-component-description ul {
+    padding-top: 0;
+    margin-top: 0;
+    margin-left: 0;
+    padding-left: 15px;
+}
+
 #twig-doc-container .twig-doc-component-configuration {
     display: flex;
     flex-direction: row;
-    padding-top: 20px;
+    padding: 20px 20px 0 20px;
     gap: 50px;
 }
-#twig-doc-container .twig-doc-component-configuration div {
-{# padding: 20px; #}
-}
 
 #twig-doc-container .twig-doc-component-variation {
     background-color: white;
@@ -113,26 +122,17 @@
     margin-bottom: 20px;
 }
 
-#twig-doc-container .twig-doc-variation .twig-doc-variation-description {
+#twig-doc-container .twig-doc-variation .twig-doc-variation-description,
+#twig-doc-container .twig-doc-variation .twig-doc-viewport-width-display {
     padding-left: 20px;
 }
 
-.twig-doc-body {
-    padding: 15px;
-}
-
 .twig-doc-variation h5 {
     margin: 0;
     padding: 10px 20px;
     display: inline-block;
 }
 
-.twig-doc-variation h5:hover, .twig-doc-variation h5.active {
-    background-color: #000000;
-    color: #ffffff;
-    cursor: pointer;
-}
-
 .twig-doc-variation-body {
     display: none;
 }
@@ -146,27 +146,71 @@
     flex-direction: column;
     flex-grow: 1;
     border: none;
-    padding: 10px;
     position: relative;
     overflow-x: scroll;
 }
+
 .twig-doc-viewport {
     padding: 0;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    min-width: 240px;
-    margin: 0 auto;
+    width: 100%;
+    margin: 0;
     white-space: nowrap;
     text-align: center;
     position: relative;
     resize: horizontal;
     overflow-x: auto;
-    outline: 1px solid #000000;
 }
 
 .twig-doc-iframe {
     width: 100%;
     flex-grow: 1;
     border: 0;
+    background: white;
+    margin: 10px 0;
 }
+
+.twig-doc-navigation {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background: white;
+    text-align: center;
+    border-bottom: 1px darkgray solid;
+    z-index: 100;
+}
+
+.twig-doc-navigation ul {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+}
+
+.twig-doc-navigation ul ul {
+    display: none;
+    position: absolute;
+    border: 1px darkgray solid;
+    border-top: none;
+    background: white;
+
+}
+
+.twig-doc-navigation li {
+    list-style: none;
+}
+
+.twig-doc-navigation li a {
+    display: inline-block;
+    padding: 5px 15px;
+}
+
+.twig-doc-navigation li:hover ul {
+    display: flex;
+}
+
+.twig-doc-search-container {
+    padding: 20px 0 20px 15px;
+}
\ No newline at end of file
diff --git a/tests/Functional/Controller/TwigDocControllerTest.php b/tests/Functional/Controller/TwigDocControllerTest.php
index b87fbfe..1c5c7d8 100644
--- a/tests/Functional/Controller/TwigDocControllerTest.php
+++ b/tests/Functional/Controller/TwigDocControllerTest.php
@@ -48,9 +48,11 @@ public function testFilterComponents(): void
         $crawler = $this->client->request(Request::METHOD_GET, '/', ['filterQuery' => 'ButtonSubmit', 'filterType' => 'name']);
 
         $node = $crawler->filter('div.twig-doc-component');
+        $nodeContent = $node->filter('h3')->getNode(0)->nodeValue;
         static::assertResponseIsSuccessful();
         static::assertCount(1, $node);
-        static::assertEquals('Submit Button (tests/TestApp/templates/components/ButtonSubmit.html.twig)', $node->filter('h3')->getNode(0)->nodeValue);
+        static::assertStringEndsWith('(tests/TestApp/templates/components/ButtonSubmit.html.twig)', $nodeContent);
+        static::assertStringStartsWith('Submit Button', $nodeContent);
     }
 
     public function testInvalidComponentsRoute(): void