Merge pull request #1923 from indirectlylit/style-guide-updates

Style guide updates 1

Author: christianmemije

kolibri/plugins/style_guide/assets/src/views/content/components/k-breadcrumbs-example.html

@@ -32,6 +32,3 @@
   };
 
 </script>
-
-
-<style lang="stylus" scoped></style>

kolibri/plugins/style_guide/assets/src/views/content/components/k-button-example.html

@@ -19,6 +19,3 @@
   module.exports = {};
 
 </script>
-
-
-<style lang="stylus" scoped></style>

kolibri/plugins/style_guide/assets/src/views/content/components/k-navbar-example.html

@@ -29,6 +29,3 @@
   module.exports = {};
 
 </script>
-
-
-<style lang="stylus" scoped></style>

kolibri/plugins/style_guide/assets/src/views/content/home/home-page.vue

@@ -15,15 +15,4 @@
 </script>
 
 
-<style lang="stylus" scoped>
-
-  @require '../../../styles/style-guide.styl'
-
-  // TODO: dry up this shared styling
-  .intro
-    margin-left: $sidenav-width
-    padding: 32px
-    h1
-      line-height: 1.7em
-
-</style>
+<style lang="stylus" scoped></style>

kolibri/plugins/style_guide/assets/src/views/index.vue

@@ -2,7 +2,7 @@
 
   <div>
     <sidenav/>
-    <router-view/>
+    <router-view class="content"/>
   </div>
 
 </template>
@@ -30,6 +30,17 @@
 </script>
 
 
+<style lang="stylus" scoped>
+
+  @require '../styles/style-guide.styl'
+
+  .content
+    margin-left: $sidenav-width + 32
+    margin-top: 24px
+
+</style>
+
+
 <style lang="stylus">
 
   // NOT SCOPED
@@ -45,4 +56,19 @@
   html
     overflow: initial
 
+  @require '~vuep/dist/vuep.css'
+
+  .vuep
+    // TODO: vuep pullutes the font-family
+    font-family: NotoSans
+    display: initial
+    height: initial
+
+    .vuep-preview, .vuep-editor
+      width: 100%
+
+    .vuep-preview
+      padding: 8px
+
 </style>
+

kolibri/plugins/style_guide/assets/src/views/shell/component-template.vue

@@ -7,12 +7,11 @@
 
     <p>{{ api.description }}</p>
 
-
+    <!--
     <h2>Status</h2>
-
     <p v-if="status === 'complete'" class="status-complete">Fully implemented</p>
     <p v-else class="status-incomplete">Not fully implemented</p>
-
+    -->
 
     <h2 id="api">API</h2>
 
@@ -159,82 +158,56 @@
 </script>
 
 
-<style lang="stylus">
-
-  // NOT SCOPED
-
-  @require '~vuep/dist/vuep.css'
-
-  .vuep
-    // TODO: vuep pullutes the font-family
-    font-family: NotoSans
-    display: initial
-    height: initial
-
-    .vuep-preview, .vuep-editor
-      width: 100%
-
-    .vuep-preview
-      padding: 8px
-
-</style>
-
-
 <style lang="stylus" scoped>
 
   @require '~kolibri.styles.definitions'
   @require '../../styles/style-guide.styl'
 
-  .component-template
-    margin-left: $sidenav-width
-    padding: 32px
-    line-height: 1.3em
-
-    h1
-      line-height: 1.7em
+  h1
+    line-height: 1.7em
 
-    h1, h2, h3
-      color: #333
+  h1, h2, h3
+    color: #333
 
-    h2, h3
-      margin-top: 2em
-      margin-bottom: 0.5em
+  h2, h3
+    margin-top: 2em
+    margin-bottom: 0.5em
 
-    h4
-      margin-bottom: 0.5em
+  h4
+    margin-bottom: 0.5em
 
-    p
-      margin-top: 0
-      max-width: 50em
+  p
+    margin-top: 0
+    max-width: 50em
 
-    ul
-      margin-top: 0.5em
+  ul
+    margin-top: 0.5em
 
-      li
-        margin-bottom: 0.3em
+    li
+      margin-bottom: 0.3em
 
 
-    table, th, td
-      border: 1px solid darkgray
-      border-collapse: collapse
+  table, th, td
+    border: 1px solid darkgray
+    border-collapse: collapse
 
-    th, td
-      padding: 0.5em
+  th, td
+    padding: 0.5em
 
-    th
-      background: #e0e0e0
-      text-align: left
+  th
+    background: #e0e0e0
+    text-align: left
 
-    code
-      background: #fdf6e3
-      color: #268bd2
-      font-size: smaller
-      padding: 4px
+  code
+    background: #fdf6e3
+    color: #268bd2
+    font-size: smaller
+    padding: 4px
 
-    .status-complete
-      color: $core-status-correct
+  .status-complete
+    color: $core-status-correct
 
-    .status-incomplete
-      color: $core-status-wrong
+  .status-incomplete
+    color: $core-status-wrong
 
 </style>

kolibri/plugins/style_guide/assets/src/views/shell/nav-menu.js

@@ -22,12 +22,6 @@ const homeRoute = [
   },
 ];
 
-const componentsMap = {
-  kButton: 'k-button',
-  kBreadcrumbs: 'k-breadcrumbs',
-  kNavbar: 'k-navbar',
-};
-
 // This data structure contains the navigational links pointing to all the
 // content pages in the style guide.
 // Notes: This is view-agnostic; it doesn't make assumption on how it will be
@@ -51,23 +45,23 @@ const navMenu = [
     sectionName: 'Components',
     sectionItems: sortSectionItems([
       {
-        itemName: componentsMap.kButton,
+        itemName: 'Buttons',
         itemRoute: {
-          path: `/components/${componentsMap.kButton}`,
+          path: `/components/buttons`,
           component: kButton,
         },
       },
       {
-        itemName: componentsMap.kBreadcrumbs,
+        itemName: 'Breadcrumbs',
         itemRoute: {
-          path: `/components/${componentsMap.kBreadcrumbs}`,
+          path: `/components/breadcrumbs`,
           component: kBreadcrumbs,
         },
       },
       {
-        itemName: componentsMap.kNavbar,
+        itemName: 'Horizontal Navbar',
         itemRoute: {
-          path: `/components/${componentsMap.kNavbar}`,
+          path: `/components/navbar`,
           component: kNavbar,
         },
       },

kolibri/plugins/style_guide/assets/src/views/shell/sidenav.vue

@@ -1,23 +1,23 @@
 <template>
 
-  <div class="sidenav">
+  <nav class="sidenav">
     <router-link :to="'/'" class="sidenav-heading">
-      <h1>Kolibri Style Guide</h1>
+      Kolibri Style Guide
     </router-link>
 
-    <nav class="sidenav-menu">
+    <div>
       <template v-for="section in navMenu">
-        <h2>{{ section.sectionName }}</h2>
+        <div class="section-heading">{{ section.sectionName }}</div>
         <ul>
           <li v-for="sectionItem in section.sectionItems">
-            <router-link :to="sectionItem.itemRoute">
+            <router-link :to="sectionItem.itemRoute" class="link">
               {{ sectionItem.itemName }}
             </router-link>
           </li>
         </ul>
       </template>
-    </nav>
-  </div>
+    </div>
+  </nav>
 
 </template>
 
@@ -53,34 +53,29 @@
 
   .sidenav-heading
     display: block
-    padding: 16px 24px
+    padding: 32px 24px
     text-decoration: none
-    h1
-      margin: 0
-      font-size: 1.25em
+    font-size: 1.25em
 
+  .section-heading
+    font-weight: bold
+    margin-right: 24px
+    margin-left: 24px
+    margin-top: 24px
+    margin-bottom: 12px
 
-  .sidenav-menu
-    h2
-      margin-right: 24px
-      margin-left: 24px
-      margin-top: 24px
-      margin-bottom: 12px
+  ul
+    margin: 0
+    padding: 0
+    list-style-type: none
 
-    ul
-      margin: 0
-      padding: 0
-      list-style-type: none
-
-      li
-
-        a
-          display: block
-          padding: 12px 24px
-          text-decoration: none
+  .link
+    display: block
+    padding: 12px 24px
+    text-decoration: none
 
-          &.router-link-active
-            font-weight: bold
-            background-color: #E0E0E0
+    &.router-link-active
+      font-weight: bold
+      background-color: #E0E0E0
 
 </style>