Sync styles and template with TwigExpress

kaliop · Oct 3, 2016 · 284387d · 284387d
1 parent 2812bdc
commit 284387d
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 77 deletions.
diff --git a/Resources/public/css/styles.css b/Resources/public/css/styles.css
@@ -1,8 +1,3 @@
-/**
- * Styles from the TwigExpress project:
- * https://github.com/gradientz/twig-express
- */
-
 :root {
     /* spacing */
     --pad: 2.4rem;
@@ -75,15 +70,30 @@ body {
     }
 }
 
+h1 {
+    margin: 1.25rem 0;
+    font-size: 150%;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--lighter-black);
+}
+
+h2 {
+    margin: 1rem 0;
+    font-size: 125%;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--lighter-black);
+}
+
 a {
     color: #07a;
     color: var(--vibrant-blue);
 }
 
 header {
+    margin-bottom: .5rem;
     line-height: 1.2;
-    margin-bottom: 1rem;
-    margin-bottom: calc(var(--pad) * .85);
 }
 
 nav {
@@ -134,14 +144,6 @@ nav a:focus {
     text-decoration: underline;
 }
 
-header h1 {
-    margin: 1.25rem 0;
-    font-size: 150%;
-    font-weight: 600;
-    line-height: 1.3;
-    color: var(--lighter-black);
-}
-
 header blockquote {
     margin: 0;
     padding-left: 1rem;
@@ -162,6 +164,14 @@ header .error {
     color: var(--red);
 }
 
+main {
+    margin-top: 1rem;
+    margin-top: calc(var(--pad) * .85);
+}
+main:empty {
+    display: none;
+}
+
 footer {
     max-width: 38em;
     margin-top: 1rem;
@@ -435,7 +445,6 @@ pre mark {
 
 /* Special modifications for Twig tags and vars (vibrant look) */
 
-
 .hljs-template-comment {
     color: var(--light-purple);
 }

diff --git a/Resources/views/dir.html.twig b/Resources/views/dir.html.twig
@@ -4,28 +4,3 @@
 {% if crumbs|length > 1 %}
     {% set metaTitle = (crumbs|last).name ~ ' - ' ~ metaTitle %}
 {% endif %}
-{% set icon = {
-    dir: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-folder"/></svg>',
-    file: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-file"/></svg>'
-} %}
-
-{% block main %}
-
-    {% if dirList|length > 0 %}
-        <ul class="Links Links--folders">
-        {% for dir in dirList %}
-            <li><a class="Links-link" href="{{ dir }}/">{{ icon.dir|raw }}{{ dir }}</a></li>
-        {%- endfor %}
-        </ul>
-    {% endif %}
-    {% if fileList|length > 0 %}
-        <ul class="Links Links--files{% if fileList|length > 3 %} Links--cols{% endif %}">
-        {% for file in fileList %}
-            <li><a href="{{ file }}">{{ icon.file|raw }}{{
-                file|replace({'.html':'<span>.html</span>'}) | raw
-            }}</a></li>
-        {% endfor %}
-        </ul>
-    {% endif %}
-
-{% endblock %}
diff --git a/Resources/views/page.html.twig b/Resources/views/page.html.twig
@@ -4,13 +4,23 @@
     {% set title = title|default('') %}
     {% set message = message|default('') %}
     {% set code = code|default('') %}
+    {% set assets = '@GradientzTwigExpressBundle/Resources/public/' %}
 
     {# Breadcrumbs #}
-    {% set showCrumbs = showCrumbs|default(1) %}
     {% set crumbs = crumbs|default([]) %}
     {# By default we're on the last item #}
     {% set activeCrumb = activeCrumb|default(crumbs|length) %}
 
+    {# File listing #}
+    {% set dirList = dirList|default([]) %}
+    {% set fileList = fileList|default([]) %}
+
+    {# Other #}
+    {% set icon = {
+        dir: '<svg class="icon" aria-label="Folder"><use xlink:href="#icon-folder"/></svg>',
+        file: '<svg class="icon" aria-label="File"><use xlink:href="#icon-file"/></svg>'
+    } %}
+
 {% endspaceless %}
 <!DOCTYPE html>
 <html lang="en">
@@ -19,19 +29,18 @@
     <meta name="robots" content="noindex">
     <meta name="viewport" content="width=device-width">
     {% if metaTitle|default('') %}
-    <title>{{ metaTitle }}</title>
+        <title>{{ metaTitle }}</title>
     {% endif %}
     <style>
-        {{- source('@GradientzTwigExpressBundle/Resources/public/css/styles.css')|raw -}}
+        {{- source(assets~'css/styles.css')|raw -}}
     </style>
 </head>
 <body>
 
-{{ source('@GradientzTwigExpressBundle/Resources/public/svg/sprite.svg')|raw }}
+{{ source(assets~'svg/sprite.svg')|raw }}
 
 <header>
-{% if showCrumbs %}
-    {% set lastItem = crumbs|last %}
+    {% if crumbs|length > 0 %}
     <nav class="border">
         {% for item in crumbs %}
             {%- spaceless %}
@@ -46,37 +55,52 @@
             {% endspaceless -%}
         {% endfor %}
     </nav>
-{% endif %}
-{% if title %}
-    <h1>{{ title|raw }}</h1>
-{% endif %}
-{% if message %}
-    <blockquote>{{ message|raw }}</blockquote>
-{% endif %}
+    {% endif %}
+    {% if title %}
+        <h1>{{ title|raw }}</h1>
+    {% endif %}
+    {% if message %}
+        <blockquote>{{ message|raw }}</blockquote>
+    {% endif %}
 </header>
 
-<main>
-{% block main %}
-    {% if code %}
+<main>{% block main %}
+    {%- if dirList|length > 0 %}
+        <ul class="Links Links--folders">
+            {% for dir in dirList -%}
+                <li><a class="Links-link" href="{{ dir }}/">{{ icon.dir|raw }}{{ dir }}</a></li>
+            {%- endfor %}
+        </ul>
+    {%- endif %}
+    {%- if fileList|length > 0 %}
+        <ul class="Links Links--files{% if fileList|length > 3 %} Links--cols{% endif %}">
+            {% for file in fileList -%}
+                <li><a href="{{ file }}">{{ icon.file|raw }}{{
+                    file|replace({'.html':'<span>.html</span>'}) | raw
+                }}</a></li>
+            {%- endfor %}
+        </ul>
+    {%- endif %}
+    {%- if code %}
         <pre class="Code
-            {%- if ' data-num=' in code %} Code--numbers{% endif -%}
-            {%- if '<mark>' in code %} Code--mark{% endif -%}
-        "><code class="twig">
-            {{- code|raw -}}
-        </code></pre>
-    {% endif %}
-{% endblock %}
-</main>
+        {%- if ' data-num=' in code %} Code--numbers{% endif -%}
+        {%- if '<mark>' in code %} Code--mark{% endif -%}
+    "><code class="twig">
+        {{- code|raw -}}
+    </code></pre>
+    {%- endif %}
+{% endblock %}</main>
+
+{% block footer %}{% endblock %}
 
 {% if code %}
-<script>
-{% if codeLang|default('') %}
-window.twigSubLanguage = '{{ codeLang }}';
-{% endif %}
-{{ source('@GradientzTwigExpressBundle/Resources/public/js/highlight.min.js')
-   |replace({'</script': '<\\/script'})
-   |raw }};hljs.initHighlighting();
-</script>
+    <script>
+        {% if codeLang|default('') %}
+        window.twigSubLanguage = '{{ codeLang }}';
+        {% endif %}
+        {{ source(assets~'js/highlight.min.js')|replace({'</script': '<\\/script'})|raw }}
+        ;hljs.initHighlighting();
+    </script>
 {% endif %}
 
 </body>

diff --git a/Resources/views/root.html.twig b/Resources/views/root.html.twig
@@ -16,19 +16,21 @@
 {% endif %}
 
 {% block main %}
-    {% if bundles %}
+    {%- if bundles -%}
         <ul class="Links Links--folders">
         {% for slug,bundle in bundles %}
             <li>
                 <a href="{{ slug }}/">
-                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-folder"/></svg>
+                    <svg class="icon"><use xlink:href="#icon-folder"/></svg>
                     {{ bundle.name }}
                 </a>
             </li>
         {% endfor %}
         </ul>
-    {% endif %}
+    {%- endif -%}
+{% endblock %}
 
+{% block footer %}
     <footer>
         <h2>About:</h2>
         <p>To add to this list of bundles, add to the <code>twig_express.bundles</code> config key:</p>
@@ -41,5 +43,4 @@
             slug: super-nice
             root: Resources/views/custom-dir</pre>
     </footer>
-
 {% endblock %}