Merge pull request #695 from nlubisch/feature/menu

Base Structure/Layout & Kitchensink

htdocs/app/AppKernel.php

@@ -39,7 +39,9 @@ public function registerBundles()
             new Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle(),
             new Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle(),
             new JMS\TranslationBundle\JMSTranslationBundle(),
-            new BestIt\KitchensinkBundle\BestItKitchensinkBundle()
+            new BestIt\KitchensinkBundle\BestItKitchensinkBundle(),
+            new Knp\Bundle\MenuBundle\KnpMenuBundle(),
+            new Symfony\Cmf\Bundle\MenuBundle\CmfMenuBundle()
         ];
 
         if (in_array($this->getEnvironment(), ['dev', 'test'], true)) {

htdocs/app/Resources/assets/scss/_mixins/_position.scss

@@ -5,3 +5,11 @@
     left: 0;
     z-index: $zindex-fixed;
 }
+
+%fixed-left {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: $zindex-fixed;
+}

htdocs/app/Resources/assets/scss/_settings.scss

@@ -1,15 +1,12 @@
 @import '~bootstrap/scss/variables';
 
+//==========COLORS==========//
 $gray-lighter: $gray-500;
 $gray-light: $gray-600;
 $gray: $gray-700;
 $gray-dark: $gray-800;
 $gray-darker: $gray-900;
 
-$header-height: 3rem;
-$header-bg-color: $gray;
-$header-color: $white;
-
 $color__error-text: $white;
 $color__error-background: lighten($red, 10%);
 $color__error-border: $red;
@@ -21,3 +18,17 @@ $color__info-border: $blue;
 $color__success-text: $white;
 $color__success-background: lighten($green, 10%);
 $color__success-border: $green;
+
+//==========BLOCK STYLING==========//
+$sidebar---width: 15rem;
+$sidebar---color-background: #1c1d22;
+$sidebar---color-text: $white;
+$sidebar---margin-top: 1rem;
+
+$navigation--level-0---color-background: #121317;
+$navigation--level-1---color-background: #31302b;
+
+$navigation-item__text---padding-vertical: 0.25;
+$navigation-item__text---padding-left: 0.75;
+$navigation-item--current---border-left-width: 0.4;
+$navigation-item--current---border-left-color: #f4941b;

htdocs/app/Resources/assets/scss/all.scss

@@ -3,14 +3,14 @@
 //==========BLOCKS==========//
 @import 'blocks/flash-messages/flash-messages';
 
-@import 'blocks/header/header';
-@import 'blocks/header/header-items';
-
 @import 'blocks/main/main';
 
-
 @import 'blocks/navigation/navigation';
-@import 'blocks/navigation/navigation-items';
+@import 'blocks/navigation/navigation-item';
+
+@import 'blocks/sidebar/sidebar';
+@import 'blocks/site/site';
 
 //==========BOOTSTRAP==========//
 @import '~bootstrap/scss/reboot';
+@import 'common';

htdocs/app/Resources/assets/scss/blocks/main/main.scss

@@ -3,45 +3,7 @@
 .main {
     @include make-container();
 
-    &__inner {
-        @include make-row;
-
-        margin-top: $header-height;
-        min-height: 500px;
-
-        &-navigation {
-            @include make-col(12);
-
-            @include media-breakpoint-up(sm) {
-                @include make-col(4);
-            }
-
-            @include media-breakpoint-up(md) {
-                @include make-col(3);
-            }
-
-            @include media-breakpoint-up(lg) {
-                @include make-col(2);
-            }
-        }
-
-        &-content {
-            @include make-col(12);
-
-            margin-top: 0.5rem;
-
-            @include media-breakpoint-up(sm) {
-                @include make-col(8);
-            }
-
-            @include media-breakpoint-up(md) {
-                @include make-col(9);
-            }
-
-
-            @include media-breakpoint-up(lg) {
-                @include make-col(10);
-            }
-        }
+    &__content {
+        padding: .5rem;
     }
 }

htdocs/app/Resources/assets/scss/blocks/navigation/navigation-item.scss

@@ -0,0 +1,22 @@
+@import 'global';
+
+.navigation-item {
+    border-top: .05rem solid $gray;
+
+    &__text,
+    &__link {
+        color: $white;
+        display: block;
+        padding: #{$navigation-item__text---padding-vertical}rem 0 #{$navigation-item__text---padding-vertical}rem #{$navigation-item__text---padding-left}rem;
+    }
+
+    &--current {
+        > span,
+        > a {
+            border-left: #{$navigation-item--current---border-left-width}rem solid $navigation-item--current---border-left-color;
+            padding-left: #{$navigation-item__text---padding-left - $navigation-item--current---border-left-width}rem;
+            background-color: $gray;
+        }
+
+    }
+}

htdocs/app/Resources/assets/scss/blocks/navigation/navigation.scss

@@ -1,5 +1,31 @@
 @import 'global';
 
 .navigation {
-    margin: 0 1rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &__item {
+        padding-left: 0;
+
+        > &:hover {
+            background-color: lighten($navigation--level-0---color-background, 5%);
+        }
+    }
+
+    &--level-0 {
+        background-color: $navigation--level-0---color-background;
+
+        .navigation__item {
+            padding-left: 0;
+        }
+    }
+
+    &--level-1 {
+        background-color: $navigation--level-1---color-background;
+
+        .navigation__item {
+            padding-left: 1rem;
+        }
+    }
 }

htdocs/app/Resources/assets/scss/blocks/sidebar/sidebar.scss

@@ -0,0 +1,43 @@
+@import 'global';
+
+.sidebar {
+    background-color: $sidebar---color-background;
+    height: 100vh;
+    color: $sidebar---color-text;
+
+    &__brand {
+        height: 3.5rem;
+        display: flex;
+        align-items: center;
+        padding: .5rem .5rem 0;
+
+        &-logo {
+            width: 2rem;
+        }
+
+        &-text {
+            padding-left: .5rem;
+            padding-top: .75rem;
+            font-size: 1.5rem;
+        }
+    }
+
+    &__profile {
+        margin-top: $sidebar---margin-top;
+        text-align: center;
+
+        &-image {
+            width: 8rem;
+            border-radius: 50%;
+        }
+
+        &-text {
+            font-size: 1.5rem;
+        }
+    }
+
+    &__navigation {
+        margin-top: $sidebar---margin-top;
+        font-size: 0.9rem;
+    }
+}

htdocs/app/Resources/assets/scss/blocks/site/site.scss

@@ -0,0 +1,20 @@
+@import 'global';
+
+.site {
+    @include make-container();
+
+    &__inner {
+        @include make-row();
+
+        &-sidebar {
+            @extend %fixed-left;
+            width: $sidebar---width;
+        }
+
+        &-main {
+            @include make-col(9);
+
+            margin-left: $sidebar---width;
+        }
+    }
+}

htdocs/app/Resources/views/_components/header/header.html.twig

@@ -1,18 +1,7 @@
 {% block headerPrepend %}{% endblock %}
-<header class="header">
+<div class="header">
     {% block header %}
-        <div class="header__brand">Opencaching.de</div>
-        <ul class="header__items header-items">
-            <li class="header-items__item">Startseite</li>
-            <li class="header-items__item">Mein Profil</li>
-            <li class="header-items__item">Caches</li>
-            <li class="header-items__item">Karte</li>
-            <li class="header-items__item">Hilfe</li>
-            <li class="header-items__item">Teamblog</li>
-            <li class="header-items__item">Forum</li>
-            <li class="header-items__item">Geokrety</li>
-            <li class="header-items__item">Api</li>
-        </ul>
+
     {% endblock %}
-</header>
+</div>
 {% block headerAppend %}{% endblock %}

htdocs/app/Resources/views/_components/navigation/navigation.html.twig

@@ -1,18 +1,3 @@
 {% block navigation %}
-<nav class="navigation">
-    <ul class="navigation__items navigation-items">
-        <li class="navigation-items__item">
-            <div class="navigation-items__item-text">Neueste Caches</div>
-        </li>
-        <li class="navigation-items__item">
-            <div class="navigation-items__item-text">Neueste Logs</div>
-        </li>
-        <li class="navigation-items__item">
-            <div class="navigation-items__item-text">Neue Wikiartikel</div>
-        </li>
-        <li class="navigation-items__item navigation-items__item--last">
-            <div class="navigation-items__item-text">Neue Features</div>
-        </li>
-    </ul>
-</nav>
+    {{ knp_menu_render('main', {'depth': 2}, 'main') }}
 {% endblock %}

htdocs/app/Resources/views/_components/sidebar/sidebar.html.twig

@@ -0,0 +1,13 @@
+<div class="sidebar">
+    <div class="sidebar__brand">
+        <img alt="" class="sidebar__brand-logo" src="{{ asset('assets/images/logo_white.png') }}">
+        <div class="sidebar__brand-text">Opencaching</div>
+    </div>
+    <div class="sidebar__profile">
+        <img alt="" class="sidebar__profile-image" src="{{ asset('assets/images/profile_unknown.png') }}">
+        <div class="sidebar__profile-text">Anonymous</div>
+    </div>
+    <div class="sidebar__navigation">
+        {% include '_components/navigation/navigation.html.twig' %}
+    </div>
+</div>

htdocs/app/Resources/views/base.html.twig

@@ -12,28 +12,32 @@
         {% endblock %}
     </head>
     <body>
-        {% include '_components/header/header.html.twig' %}
-
-        <main class="main">
-            <div class="main__inner">
-
-                <div class="main__inner-navigation">
-                    {% include '_components/navigation/navigation.html.twig' %}
-                </div>
-
-                <div class="main__inner-content main-inner-content">
-                    {% block flash_messages %}
-                        <div class="main-inner-content__flash-messages">
-                            {% include '_components/flash-messages/flash-messages.html.twig' %}
-                        </div>
-                    {% endblock %}
-
-                    {% block body %}{% endblock %}
-                </div>
+        <div class="site">
+            <div class="site__inner">
+                <nav class="site__inner-sidebar">
+                    {% include '_components/sidebar/sidebar.html.twig' %}
+                </nav>
+                <main class="site__inner-main main">
+                    <header class="main__header">
+                        {% include '_components/header/header.html.twig' %}
+                    </header>
+                    <div class="main__content main-content">
+                        {% block flash_messages %}
+                            <div class="main-content__flash-messages">
+                                {% include '_components/flash-messages/flash-messages.html.twig' %}
+                            </div>
+                        {% endblock %}
+
+                        {% block body %}{% endblock %}
+                    </div>
+                    <footer class="main__footer">
+                        <h1>Footer</h1>
+                    </footer>
+                </main>
             </div>
-        </main>
+        </div>
 
-        {% include '_components/footer/footer.html.twig' %}
+        {#{% include '_components/footer/footer.html.twig' %}#}
 
         {% block javascripts %}
             <script src="{{ asset('assets/js/main.js') }}"></script>

htdocs/app/Resources/views/field-notes/index.html.twig

@@ -8,7 +8,7 @@
 {% block body %}
     {% if fieldNotes %}
         <font size="2">
-            <form method="post" action="{{ path('field-notes.delete-multiple') }}">
+            <form method="post" action="{{ path('field_notes.delete_multiple') }}">
                 <table class="searchtable field-notes-table" border="0" cellspacing="0" cellpadding="0">
                     <thead>
                         <tr>
@@ -29,7 +29,7 @@
                                 <td class="{{ cycle(['search_listcolor1', 'search_listcolor2'], loop.index) }}"><a href="/viewcache.php?cacheid={{ fieldNote.geoCache.cacheId }}">{{ fieldNote.geoCache.name }}</a><br />{{ fieldNote.text | raw}}</td>
                                 <td class="nowrap {{ cycle(['search_listcolor1', 'search_listcolor2'], loop.index) }}">{{ fieldNote.date | date('field_notes.date_format' | trans | desc('Y-m-d H:i')) }}</td>
                                 <td class="nowrap {{ cycle(['search_listcolor1', 'search_listcolor2'], loop.index) }}">{{ ('field_notes.log_type.' ~ fieldNote.type) | trans({}, 'constants') }}</td>
-                                <td class="nowrap {{ cycle(['search_listcolor1', 'search_listcolor2'], loop.index) }}"><a href="/log.php?fieldnoteid={{ fieldNote.id }}">{{ 'field_notes.btn.log_it' | trans }}</a>&nbsp;|&nbsp;<a href="{{ path('field-notes.delete', {id: fieldNote.id}) }}">{{ 'field_notes.btn.delete' | trans }}</a></td>
+                                <td class="nowrap {{ cycle(['search_listcolor1', 'search_listcolor2'], loop.index) }}"><a href="/log.php?fieldnoteid={{ fieldNote.id }}">{{ 'field_notes.btn.log_it' | trans }}</a>&nbsp;|&nbsp;<a href="{{ path('field_notes.delete', {id: fieldNote.id}) }}">{{ 'field_notes.btn.delete' | trans }}</a></td>
                             </tr>
                         {% endfor %}
                     </tbody>

htdocs/app/config/routing.yml

@@ -6,5 +6,7 @@ oc_dev:
     resource: "../../src/OcDev/"
     type:     annotation
 
-best_it_kitchensink:
-    resource: "@BestItKitchensinkBundle/resources/config/routing.yml"
+kitchensink.index:
+    path:      /kitchensink
+    defaults:  { _controller: BestItKitchensinkBundle:Kitchensink:index }
+