Menu: show addons count in square, added highlighted attribute

contributte · Feb 11, 2016 · 1c15a2f · 1c15a2f
1 parent c3fb13a
commit 1c15a2f
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 13 deletions.
diff --git a/app/config/config.neon b/app/config/config.neon
@@ -29,6 +29,9 @@ http:
         X-XSS-Protection: "1; mode=block"
         X-Powered-By: "componette"
 
+routing:
+    debugger: yes
+
 di:
     debugger: yes
 

diff --git a/app/model/orm/tag/Tag.php b/app/model/orm/tag/Tag.php
@@ -11,6 +11,7 @@
  * @property string $name
  * @property string|NULL $color
  * @property int $priority
+ * @property bool $highlighted
  *
  * @property ManyHasMany|Addon[] $addons    {m:n Addon::$tags}
  */

diff --git a/app/modules/front/controls/SideMenu/SideMenu.php b/app/modules/front/controls/SideMenu/SideMenu.php
@@ -44,7 +44,7 @@ private function ensure(ICollection $tags)
 
     public function render()
     {
-        $this->template->categories = $this->ensure($this->tagRepository->findWithHighPriority());
+        $this->template->categories = $this->tagRepository->findWithHighPriority();
         $this->template->tags = $this->ensure($this->tagRepository->findWithLowPriority());
 
         $this->template->setFile(__DIR__ . '/templates/menu.latte');

diff --git a/app/modules/front/controls/SideMenu/templates/menu.latte b/app/modules/front/controls/SideMenu/templates/menu.latte
@@ -3,9 +3,10 @@
 <div class="side-menu">
 	<ul class="nav">
 		<li n:foreach="$categories as $category">
+		    {continueIf $category->addons->count() <= 0}
 			<a href="{plink List:tag $category->name}">
-				<span class="square" style="background: {$category->color|noescape}"></span>
-				<span class="name">{$category->name}</span>
+				<span class="square" style="background: {$category->color|noescape}">{$category->addons->count()}</span>
+				<span n:class="$category->highlighted ? highlighted, name">{$category->name}</span>
 			</a>
 		</li>
 	</ul>

diff --git a/www/assets/css/theme.less b/www/assets/css/theme.less
@@ -234,27 +234,43 @@ a[href*="://"]:after {
     background: #fff;
     border-radius: 6px;
     padding: 10px 0;
-    box-shadow: 0 2px 2px rgba(0,0,0,.3);
+    box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
 
     .btn-wrapper {
       padding: 0 10px;
     }
 
     .nav > li > a {
-      padding: 5px 15px;
+      padding: 0 15px;
       font-size: 1.2em;
 
       span.square {
         border-radius: 2px;
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
         display: inline-block;
-        position: absolute;
-        top: 10px;
+        margin: 4px 0;
+        vertical-align: middle;
+        color: #fff;
+        padding: 0;
+        font-size: 12px;
+        text-align: center;
+        font-weight: bold;
+        text-shadow: #000 1px 1px 0;
       }
 
       span.name {
-        margin-left: 25px;
+        margin: 4px 0 4px 10px;
+        height: 28px;
+        vertical-align: middle;
+        display: inline-block;
+      }
+
+      span.highlighted {
+        font-weight: bold;
+        text-decoration: underline;
+        font-size: 1.1em;
+        margin-bottom: 6px;
       }
     }
   }
@@ -783,9 +799,17 @@ a[href*="://"]:after {
     margin-left: -20px;
   }
 
-  .side-menu {
-    ul li {
-      float: left;
+  .content {
+    .side-menu {
+      .nav > li {
+        float: left;
+
+        & > a {
+          span.highlighted {
+            margin-bottom: 4px;
+          }
+        }
+      }
     }
   }