Merge pull request #311 from whitzhu/folder_listview

Updated Explore Topic Card into lists

kolibri/plugins/learn/assets/src/vue/card/index.vue → kolibri/plugins/learn/assets/src/vue/card-grid/grid-item/index.vue

@@ -29,7 +29,7 @@
 <style lang="stylus" scoped>
 
   @require '~core-theme.styl'
-  @require '../learn.styl'
+  @require '../../learn.styl'
 
   $thumb-width = $card-height * 3.0 / 2.5;
 

kolibri/plugins/learn/assets/src/vue/card-grid/index.vue

@@ -60,9 +60,6 @@
 
   @require 'jeet'
 
-  h2
-    margin-top: 0
-
   .card-grid
     cf()
 

kolibri/plugins/learn/assets/src/vue/card-list/index.vue

@@ -0,0 +1,36 @@
+<template>
+
+  <section>
+    <h3>{{header}}</h3>
+    <div class="card-list">
+      <slot></slot>
+    </div>
+  </section>
+
+</template>
+
+
+<script>
+
+  module.exports = {
+    props: [
+      'header',
+    ],
+  };
+
+</script>
+
+
+<style lang="stylus">
+
+  @require '../learn.styl'
+
+  // @stylint off
+  .card-list > *
+  // @stylint on
+    margin-bottom: $card-gutter
+
+</style>
+
+
+<style lang="stylus" scoped></style>

kolibri/plugins/learn/assets/src/vue/card-list/list-item/index.vue

@@ -0,0 +1,69 @@
+<template>
+
+  <a class='root'>
+    <div class='thumb-wrapper'>
+      <slot></slot>
+    </div>
+    <div class='text'>
+      <span class="title">{{ title }}</span>
+    </div>
+  </a>
+
+</template>
+
+
+<script>
+
+  module.exports = {
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  @require '~core-theme.styl'
+  @require '../../learn.styl'
+  @require 'jeet'
+
+  $min-height = 60px         // min card height
+
+  .root
+    position: relative
+    display: block
+    min-height: 60px
+    background-color: $core-bg-light
+    border-radius: $radius
+    display: table
+    width: 100%
+
+  .thumb-wrapper
+    position: absolute
+    left: 0.4em
+    width: $min-height
+    height: $min-height
+    border-radius: $radius 0 0 $radius
+
+  .text
+    position: relative
+    width: 100%
+    font-size: 0.9rem
+    font-weight: bold
+    color: $core-text-default
+    display: table-row
+
+  .title
+    display: table-cell
+    width: 100%
+    height: 100%
+    padding: 0.8em
+    padding-left: $min-height
+    vertical-align: middle
+
+</style>

kolibri/plugins/learn/assets/src/vue/content-card/index.vue → kolibri/plugins/learn/assets/src/vue/content-grid-item/index.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div>
-    <card v-link="link" :title="title">
+    <grid-item v-link="link" :title="title">
       <div class='thumbnail' :class="{ 'thumbnail-center' : !thumb }" :style='{ "background-image": thumb }'>
         <content-icon
           :class='thumb ? "content-icon" : "content-icon-center" '
@@ -11,7 +11,7 @@
           :progress="progress">
         </content-icon>
       </div>
-    </card>
+    </grid-item>
   </div>
 
 </template>
@@ -27,7 +27,7 @@
   module.exports = {
     components: {
       'content-icon': require('../content-icon'),
-      'card': require('../card'),
+      'grid-item': require('../card-grid/grid-item'),
     },
     props: {
       id: {

kolibri/plugins/learn/assets/src/vue/expandable-content-grid/index.vue

@@ -2,14 +2,14 @@
 
   <div>
     <card-grid :header="title" v-if="slicedContents.length">
-      <content-card
+      <content-grid-item
         v-for="content in slicedContents"
         :title="content.title"
         :thumbnail="content.thumbnail"
         :kind="content.kind"
         :progress="content.progress"
         :id="content.id">
-      </content-card>
+      </content-grid-item>
     </card-grid>
 
     <div class='button-wrapper' v-if="contents.length > nCollapsed">
@@ -49,7 +49,7 @@
       },
     },
     components: {
-      'content-card': require('../content-card'),
+      'content-grid-item': require('../content-grid-item'),
       'card-grid': require('../card-grid'),
     },
     data() {

kolibri/plugins/learn/assets/src/vue/explore-page/index.vue

@@ -21,26 +21,26 @@
 
     <span class="visuallyhidden" v-if="subtopics.length">You can navigate groups of content through headings.</span>
 
-    <card-grid v-if="subtopics.length">
-      <topic-card
+    <card-list v-if="subtopics.length">
+      <topic-list-item
         v-for="topic in subtopics"
         :id="topic.id"
         :title="topic.title"
         :ntotal="topic.n_total"
         :ncomplete="topic.n_complete">
-      </topic-card>
-    </card-grid>
+      </topic-list-item>
+    </card-list>
 
     <card-grid v-if="contents.length">
-      <content-card
+      <content-grid-item
         v-for="content in contents"
         class="card"
         :title="content.title"
         :thumbnail="content.thumbnail"
         :kind="content.kind"
         :progress="content.progress"
         :id="content.id">
-      </content-card>
+      </content-grid-item>
     </card-grid>
 
   </div>
@@ -54,9 +54,10 @@
     components: {
       'breadcrumbs': require('../breadcrumbs'),
       'page-header': require('../page-header'),
-      'topic-card': require('../topic-card'),
-      'content-card': require('../content-card'),
+      'topic-list-item': require('../topic-list-item'),
+      'content-grid-item': require('../content-grid-item'),
       'card-grid': require('../card-grid'),
+      'card-list': require('../card-list'),
     },
     computed: {
       title() {

kolibri/plugins/learn/assets/src/vue/learn.styl

@@ -11,6 +11,7 @@ $n-cols-array = 1 2 3 4 5     // possible numbers of columns
 $left-margin = 100px
 $right-margin = 25px
 
+
 // compute the target grid width based on the number of columns
 grid-width($n-cols)
   ($card-width * $n-cols) + ($card-gutter * ($n-cols + 1))

kolibri/plugins/learn/assets/src/vue/search-widget/index.vue

@@ -31,26 +31,26 @@
       </h4>
 
       <card-grid v-if="topics.length && showTopics">
-        <topic-card
+        <topic-list-item
           v-for="topic in topics"
           class="card"
           :id="topic.id"
           :title="topic.title"
           :ntotal="topic.n_total"
           :ncomplete="topic.n_complete">
-        </topic-card>
+        </topic-list-item>
       </card-grid>
 
       <card-grid v-if="contents.length">
-        <content-card
+        <content-grid-item
           v-for="content in contents"
           class="card"
           :title="content.title"
           :thumbnail="content.thumbnail"
           :kind="content.kind"
           :progress="content.progress"
           :id="content.id">
-        </content-card>
+        </content-grid-item>
       </card-grid>
     </div>
 
@@ -103,8 +103,8 @@
       },
     },
     components: {
-      'topic-card': require('../topic-card'),
-      'content-card': require('../content-card'),
+      'topic-list-item': require('../topic-list-item'),
+      'content-grid-item': require('../content-grid-item'),
       'card-grid': require('../card-grid'),
     },
     vuex: {

kolibri/plugins/learn/assets/src/vue/topic-card/index.vue → kolibri/plugins/learn/assets/src/vue/topic-list-item/index.vue

@@ -1,9 +1,9 @@
 <template>
 
   <div>
-    <card v-link="link" :title="title">
+    <list-item v-link="link" :title="title">
       <div class='thumbnail'></div>
-    </card>
+    </list-item>
   </div>
 
 </template>
@@ -15,7 +15,7 @@
 
   module.exports = {
     components: {
-      card: require('../card'),
+      'list-item': require('../card-list/list-item'),
     },
     props: {
       id: {
@@ -43,12 +43,14 @@
 <style lang="stylus" scoped>
 
   .thumbnail
-    width: 100%
+    position: relative
+    width: 60%
     height: 100%
     background-position: center
     background-image: url(../icons/folder.svg)
     background-repeat: no-repeat
     // chosen to approximage ~0.5em - the card's internal padding
     background-size: 78%
+    margin-left: 10%
 
 </style>