also show shortcuts for example on repo home

css/styles.css

@@ -326,7 +326,7 @@ input {
   padding: 10px 0;
 }
 
-.cat-title {
+#menu-example .cat-title {
   text-transform: uppercase;
 }
 
@@ -432,3 +432,17 @@ input {
 .details-div button {
   margin-top: 3px;
 }
+#details-repo,
+#details-example,
+.details-div div.bold {
+  margin: 10px 0;
+}
+.details-div .left {
+  width: 270px;
+}
+.bold {
+  font-weight: bold;
+}
+.details-div .btn-form {
+  margin: 8px 0 10px 20px;
+}

html/index.mustache.html

@@ -50,42 +50,55 @@
         {{/errorMessage}}
 
             <div class="details-div">
-              <section id="details-repo" class="inline-block">
-              {{#repo}}
-                  <strong>{{_.collection}} </strong><span>{{title}}</span>
-              {{/repo}}
-              </section>
-              <section id="add-repo" class="inline-block">
-                <button class="add-btn inline-block h-collapsed light-gray fast in"><span class="icon-plus"></span> {{_.addCollection}}</button>
-                <form class="inline-block h-collapsed">
-                    <input type="text" name="title" class="input-sm" value="" placeholder="{{_.collectionName}}" required />
-                    <button type="button" class="icon-cross rounded"></button><!--
-                    --><button type="submit" class="icon-checkmark rounded"></button>
-                </form>
-              </section>
-              <section id="shortcut-repo"{{#repo}} class="hidden"{{/repo}}>
-                <h3>{{_.exampleCollections}}</h3><ul>{{#menuRepo}}
-                  <li><a href="/{{slug}}">{{title}}</a></li>{{/menuRepo}}
-                </ul>
-              </section>
+              <div class="inline-block left">
+                <section id="shortcut-repo"{{#repo}} class="hidden"{{/repo}}>
+                  <div class="bold">{{_.exampleCollections}}</div><ul>{{#menuRepo}}
+                    <li><a href="/{{slug}}">{{title}}</a></li>{{/menuRepo}}
+                  </ul>
+                </section>
+                <section id="details-repo" class="inline-block">
+                {{#repo}}
+                    <span class="bold">{{_.collection}} </span><span>{{title}}</span>
+                {{/repo}}
+                </section>
+              </div>
+
+              <div id="add-repo" class="btn-form inline-block">
+                  <button class="add-btn inline-block h-collapsed light-gray fast in"><span class="icon-plus"></span> {{_.addCollection}}</button>
+                  <form class="inline-block h-collapsed">
+                      <input type="text" name="title" class="input-sm" value="" placeholder="{{_.collectionName}}" required />
+                      <button type="button" class="icon-cross rounded"></button><!--
+                      --><button type="submit" class="icon-checkmark rounded"></button>
+                  </form>
+              </div>
             </div>
 
-            <div>
-              <section id="details-example" class="inline-block">
-              {{#example}}
-                  <strong>{{_.example}} </strong><span>{{title}}</span>
-              {{/example}}
-              </section>
-              <section id="add-example" class="inline-block">
-                <button class="add-btn inline-block h-collapsed light-gray fast{{#repo}} in{{/repo}}"><span class="icon-plus"> {{_.addExample}}</span></button>
+            <div class="details-div">
+              <div class="inline-block left">
+                <section id="shortcut-example"{{#example}} class="hidden"{{/example}}>
+                  <div class="bold">{{_.examplesInCollection}}</div>{{#menuExample}}
+                  <span class="cat-title">{{category.title}}</span>
+                  <ul data-id="{{category.slug}}">{{#examples}}
+                  <li><a href="/{{{slug}}}">{{title}}</a></li>{{/examples}}</ul>
+                {{/menuExample}}
+                </section>
+                <section id="details-example" class="inline-block">
+                {{#example}}
+                    <strong>{{_.example}} </strong><span>{{title}}</span>
+                {{/example}}
+                </section>
+              </div>
+              <div id="add-example" class="btn-form inline-block">
+                <button class="add-btn inline-block h-collapsed light-gray fast{{#repo}} in{{/repo}}"><span class="icon-plus"></span> {{_.addExample}}</button>
                 <form class="inline-block h-collapsed">
                     <input type="text" name="title" class="input-sm" value="" placeholder="{{_.exampleName}}" required />
                     <button type="button" id="add-example-cancel" class="icon-cross rounded"></button><!--
                     --><button type="submit" id="add-example-save" class="icon-checkmark rounded"></button>
                 </form>
-              </section>
+              </div>
             </div>
 
+
             <!-- <button id="save-changes" class="icon-cloud-upload green"></button> -->
 
         </div>
@@ -155,11 +168,18 @@
 </script>
 
 <script data-tmpl-for="shortcut-repo" type="text/x-mustache-tmpl">
-  <h3>{{_.exampleCollections}}</h3><ul>{{#repos}}
+  <div class="bold">{{_.exampleCollections}}</div><ul>{{#repos}}
     <li><a href="/{{slug}}">{{title}}</a></li>{{/repos}}
   </ul>
 </script>
 
+<script data-tmpl-for="shortcut-example" type="text/x-mustache-tmpl">
+  <div class="bold">{{_.examplesInCollection}}</div>{{#menuExample}}
+  <span class="cat-title">{{category.title}}</span>
+  <ul data-id="{{category.slug}}">{{#examples}}
+  <li><a href="/{{{slug}}}">{{title}}</a></li>{{/examples}}</ul>
+  {{/menuExample}}
+</script>
 <%={{ }}=%>
 
 <!-- Vendor scripts -->

js/ws-menu.js

@@ -65,6 +65,7 @@
           _ws.ui.addExample.hide();
           _ws.ui.menuExample.render({ examples: [] });
           _ws.ui.shortcutRepo.render({ repos: _ws.repos, _: _ws._ });
+          _ws.ui.shortcutExample.hide();
         }
         else {
           console.log('nav: repo changed');
@@ -77,6 +78,7 @@
             _ws.ui.addExample.show();
             _ws.ui.detailsRepo.render(parts);
             _ws.ui.menuExample.render(parts);
+            _ws.ui.shortcutExample.render(parts);
             _ws.ui.shortcutRepo.hide();
             _ws.events.emit('navToRepo', navState.repo);
           });
@@ -114,6 +116,11 @@
       _ws.navigateTo($link.prop('href'));
     }
 
+    function shortcutItemClicked(e) {
+      e.preventDefault();
+      var $link = $(e.target);
+      _ws.navigateTo($link.prop('href'));
+    }
 
     /**
      * Initialize menu-example view
@@ -126,7 +133,13 @@
 
     _ws.makeView('shortcut-repo', {
       events: {
-        'click a': menuItemClicked
+        'click a': shortcutItemClicked
+      }
+    });
+
+    _ws.makeView('shortcut-example', {
+      events: {
+        'click a': shortcutItemClicked
       }
     });
 

languages/en-US.json

@@ -9,5 +9,6 @@
   "collection": "Collection:",
   "example": "Example:",
   "fileNameWithExt": "File name",
-  "exampleCollections": "Exameple collections"
+  "exampleCollections": "Example collections",
+  "examplesInCollection": "Examples in this collection"
 }

languages/fr-FR.json

@@ -9,5 +9,6 @@
   "collection": "Collection :",
   "example": "Exemple :",
   "fileNameWithExt": "Nom de fichier",
-  "exampleCollections": "Collections d'exemples"
+  "exampleCollections": "Collections d'exemples",
+  "examplesInCollection": "Exemples dans cette collection"
 }