Skip to content

Commit 0b2600e

Browse files
authored
Merge pull request #1898 from DXCanas/mobile-cards
Mobile Content Cards
2 parents 0570b57 + 81407cf commit 0b2600e

File tree

5 files changed

+55
-62
lines changed

5 files changed

+55
-62
lines changed

kolibri/plugins/learn/assets/src/views/content-card-carousel/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
8484
export default {
8585
mixins: [responsiveElement],
86-
$trNameSpace: 'contentCardCarousel',
86+
name: 'contentCardCarousel',
8787
$trs: { viewAllButtonLabel: 'View all' },
8888
props: {
8989
contents: {

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

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,19 @@
1414
class="filter"
1515
/>
1616

17-
<span
18-
v-for="content in contents" class="content-card"
17+
<template
18+
v-for="content in contents"
1919
v-show="selectedFilter.value === 'all' || selectedFilter.value === content.kind">
20-
<slot
20+
21+
<content-card
2122
:title="content.title"
2223
:thumbnail="content.thumbnail"
24+
:class="{'grid-item': true, 'mobile': isMobile}"
2325
:kind="content.kind"
2426
:progress="content.progress"
25-
:id="content.id">
26-
27-
<content-card
28-
:title="content.title"
29-
:thumbnail="content.thumbnail"
30-
:kind="content.kind"
31-
:progress="content.progress"
32-
:link="genLink(content.id, content.kind)"/>
27+
:link="genLink(content.id, content.kind)"/>
3328

34-
</slot>
35-
</span>
29+
</template>
3630

3731
</div>
3832

@@ -47,9 +41,11 @@
4741
import forEach from 'lodash/forEach';
4842
import uiSelect from 'keen-ui/src/UiSelect';
4943
import contentCard from '../content-card';
44+
import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
5045
5146
export default {
52-
$trNameSpace: 'contentCardGrid',
47+
mixins: [responsiveWindow],
48+
name: 'contentCardGrid',
5349
$trs: {
5450
display: 'Display',
5551
all: 'All content ({ num, number })',
@@ -92,6 +88,9 @@
9288
},
9389
data: () => ({ selectedFilter: '' }),
9490
computed: {
91+
isMobile() {
92+
return this.windowSize.breakpoint <= 1;
93+
},
9594
topics() {
9695
return this.contents.filter(content => content.kind === ContentNodeKinds.TOPIC);
9796
},
@@ -154,9 +153,13 @@
154153
155154
@require '~kolibri.styles.definitions'
156155
157-
.content-card
158-
display: inline-block
159-
margin: 10px
156+
$gutters = 16px
157+
158+
.grid-item
159+
margin-right: $gutters
160+
margin-bottom: $gutters
161+
&.mobile
162+
width: 100%
160163
161164
.filter
162165
width: 200px

kolibri/plugins/learn/assets/src/views/content-card/index.vue

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22

3-
<router-link :to="link" class="card">
3+
<router-link :to="link" class="card" :style="cardHeight">
44

55
<div class="card-thumbnail" :style="backgroundImg">
6-
<content-icon v-if="!thumbnail" :kind="kind" class="card-thumbnail-backup"/>
6+
<content-icon v-if="!thumbnail" :kind="kind" :style="iconSize" class="card-thumbnail-backup"/>
77
<div v-show="progress > 0" class="card-progress-icon-wrapper">
88
<progress-icon :progress="progress"/>
99
</div>
@@ -34,13 +34,15 @@
3434

3535
<script>
3636
37-
import * as CoreConstants from 'kolibri.coreVue.vuex.constants';
37+
import responsiveElement from 'kolibri.coreVue.mixins.responsiveElement';
38+
import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
3839
import values from 'lodash/values';
3940
import validateLinkObject from 'kolibri.utils.validateLinkObject';
40-
import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
4141
import contentIcon from 'kolibri.coreVue.components.contentIcon';
4242
import progressIcon from 'kolibri.coreVue.components.progressIcon';
43+
4344
export default {
45+
mixins: [responsiveElement],
4446
props: {
4547
title: {
4648
type: String,
@@ -58,7 +60,7 @@
5860
type: String,
5961
required: true,
6062
validator(value) {
61-
return values(CoreConstants.ContentNodeKinds).includes(value);
63+
return values(ContentNodeKinds).includes(value);
6264
},
6365
},
6466
progress: {
@@ -83,6 +85,20 @@
8385
mastered() {
8486
return this.progress === 1;
8587
},
88+
cardHeight() {
89+
// set here so that parent component can set width and have height dynamically calculated
90+
return {
91+
height: `${this.elSize.width}px`,
92+
};
93+
},
94+
iconSize() {
95+
const cardHeight = this.elSize.width; // can use height or width because it's a square
96+
// maintain the thumbnail 16:9 ratio
97+
const thumbnailHeight = this.elSize.width * (9 / 16);
98+
return {
99+
'font-size': `${thumbnailHeight / 2}px`,
100+
};
101+
},
86102
inProgress() {
87103
return this.progress > 0 && this.progress < 1;
88104
},
@@ -121,10 +137,9 @@
121137
@require '~kolibri.styles.definitions'
122138
123139
$card-width = 210px
124-
$card-height = $card-width
125140
$card-thumbnail-ratio = (9 / 16)
126-
$card-thumbnail-height = $card-width * $card-thumbnail-ratio
127-
$card-text-height = $card-height - $card-thumbnail-height
141+
$card-thumbnail-height = 100% * $card-thumbnail-ratio
142+
$card-text-height = $card-width - $card-thumbnail-height
128143
$card-text-padding = ($card-width / (320 / 24))
129144
$card-elevation-resting = 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
130145
$card-elevation-raised = 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)
@@ -136,7 +151,6 @@
136151
.card
137152
display: inline-block
138153
width: $card-width
139-
height: $card-height
140154
border-radius: 2px
141155
background-color: $core-bg-light
142156
box-shadow: $card-elevation-resting
@@ -146,7 +160,7 @@
146160
147161
.card-thumbnail
148162
position: relative
149-
width: $card-width
163+
width: 100%
150164
height: $card-thumbnail-height
151165
background-size: cover
152166
background-position: center
@@ -158,7 +172,6 @@
158172
left: 50%
159173
transform: translate(-50%, -50%)
160174
color: $core-text-annotation
161-
font-size: ($card-thumbnail-height / 2)
162175
163176
.card-progress-icon-wrapper
164177
position: absolute

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

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,7 @@
1313
{{ topic.description }}
1414
</p>
1515

16-
<content-card-grid :contents="contents" v-if="contents.length">
17-
18-
<template scope="content">
19-
<content-card
20-
:key="content.id"
21-
:title="content.title"
22-
:thumbnail="content.thumbnail"
23-
:kind="content.kind"
24-
:progress="content.progress"
25-
:link="genLink(content)"/>
26-
</template>
27-
28-
</content-card-grid>
16+
<content-card-grid :contents="contents" :gen-link="genLink" v-if="contents.length" />
2917

3018
</div>
3119

@@ -59,16 +47,16 @@
5947
},
6048
},
6149
methods: {
62-
genLink(node) {
63-
if (node.kind === ContentNodeKinds.TOPIC) {
50+
genLink(id, kind) {
51+
if (kind === ContentNodeKinds.TOPIC) {
6452
return {
6553
name: PageNames.EXPLORE_TOPIC,
66-
params: { channel_id: this.channelId, id: node.id },
54+
params: { channel_id: this.channelId, id },
6755
};
6856
}
6957
return {
7058
name: PageNames.EXPLORE_CONTENT,
71-
params: { channel_id: this.channelId, id: node.id },
59+
params: { channel_id: this.channelId, id },
7260
};
7361
},
7462
},

kolibri/plugins/learn/assets/src/views/search-page/index.vue

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,7 @@
1414

1515
<p v-if="contents.length === 0">{{ $tr('noResultsMsg', { searchTerm }) }}</p>
1616

17-
<content-card-grid v-else :contents="contents">
18-
<template scope="content">
19-
<content-card
20-
:key="content.id"
21-
:title="content.title"
22-
:thumbnail="content.thumbnail"
23-
:progress="content.progress"
24-
:kind="content.kind"
25-
:link="genLink(content)"
26-
/>
27-
</template>
28-
</content-card-grid>
17+
<content-card-grid v-else :gen-link="genLink" :contents="contents" />
2918

3019
</template>
3120

@@ -56,21 +45,21 @@
5645
searchBox,
5746
},
5847
methods: {
59-
genLink(content) {
60-
if (content.kind === ContentNodeKinds.TOPIC) {
48+
genLink(id, kind) {
49+
if (kind === ContentNodeKinds.TOPIC) {
6150
return {
6251
name: PageNames.EXPLORE_TOPIC,
6352
params: {
53+
id,
6454
channel_id: this.channelId,
65-
id: content.id,
6655
},
6756
};
6857
}
6958
return {
7059
name: PageNames.EXPLORE_CONTENT,
7160
params: {
61+
id,
7262
channel_id: this.channelId,
73-
id: content.id,
7463
},
7564
};
7665
},

0 commit comments

Comments
 (0)