Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update channel topic browsing #8535

Closed
Changes from 1 commit
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
546ab45
Refactor bookmarks card view, update responsiveness and layout
marcellamaki Sep 22, 2021
6582bec
Re-add 'remove from bookmarks' and finish mobile styling
marcellamaki Sep 23, 2021
55e9fb2
Use theme tokens instead of hex values
marcellamaki Sep 23, 2021
e3a78d1
Add basic tests for Bookmark Page
marcellamaki Sep 23, 2021
f98c10c
Refactor bookmarks and library to use new HybridLearningCardGrid and …
marcellamaki Sep 30, 2021
6b253c3
Attempt to fix tests
marcellamaki Oct 5, 2021
4d24e3b
Switch from created to updated lifecycle method for displaying curren…
marcellamaki Oct 11, 2021
2d5eb9a
Fix button styling and bookmark removal front end
marcellamaki Oct 15, 2021
473ead3
Resolve merge error - add HybridLearningCardGrid back to LibraryPage …
marcellamaki Oct 22, 2021
d2036da
Refactor bookmarks card view, update responsiveness and layout
marcellamaki Sep 22, 2021
ed99954
Re-add 'remove from bookmarks' and finish mobile styling
marcellamaki Sep 23, 2021
fe04ebc
Refactor bookmarks and library to use new HybridLearningCardGrid and …
marcellamaki Sep 30, 2021
99e7106
Responsiveness adjustments to library page card layout - updating whi…
marcellamaki Sep 24, 2021
849c907
(WIP) refactor library page layout
marcellamaki Oct 11, 2021
5dd618d
Resolving merge conflicts, continued
marcellamaki Oct 19, 2021
447572b
Conditional rendering of side panel filters based on available metadata
marcellamaki Oct 19, 2021
1c70c3a
Card styling adjustments
marcellamaki Oct 19, 2021
2853c0e
Refine responsive sidebar functionality for smallest mobile devices (…
marcellamaki Oct 20, 2021
c2a50e5
Finalize responsive filtering
marcellamaki Oct 20, 2021
647abab
Fix cursor on search modal
marcellamaki Oct 21, 2021
a046325
(WIP) Chips matching search query and basic clearing functionality wo…
marcellamaki Oct 21, 2021
ea6e3a4
Swap out header labeled icon for LearningActivityLabel component
marcellamaki Oct 21, 2021
2aff129
Update results header buttons. Code cleanup
marcellamaki Oct 21, 2021
dcdabe9
CSS tweaks to modal and filter button
marcellamaki Oct 22, 2021
347e23d
Resolve merge conflicts in FullScreenSidePanel, and fix merge errors
marcellamaki Oct 22, 2021
87f2b29
Fix linting errors from rebase
marcellamaki Oct 22, 2021
b463d0b
Remove stray logs. Re-add accidental code deletions
marcellamaki Oct 22, 2021
8a1d4e9
Fix CategorySearchModal file structure and naming confusion
marcellamaki Oct 22, 2021
c3bffa6
Switch page breadcrumbs from a negative to a positive conditional sta…
marcellamaki Oct 22, 2021
6bb673b
Remove unused content card view file
marcellamaki Oct 25, 2021
743574e
Add channel title and thumbnail data to normalizeContentNode.
rtibbles Oct 25, 2021
f0c58c2
Add list/filter toggle option to search results
marcellamaki Oct 25, 2021
4673e38
Conditionalize duration display in LearningActivityLabel for flexibil…
marcellamaki Oct 25, 2021
c70530a
Fix KSelect alignments to match Figma
marcellamaki Oct 25, 2021
7b02f98
Merge pull request #1 from rtibbles/channel_thumbnails
marcellamaki Oct 25, 2021
af3eee4
Fix reference to TextTruncator which was unintentionally deleted
marcellamaki Oct 25, 2021
ead240d
Fix channel logo placement
marcellamaki Oct 26, 2021
d65576a
Refactor in-channel-browsing
marcellamaki Oct 23, 2021
5a22edf
CSS fixes for mobile side panel overlay spacing and position
marcellamaki Oct 25, 2021
616b8bc
(WIP) Mobile header tabs and layout updates
marcellamaki Oct 25, 2021
bcdb023
Add ability to select folder from dropdown, or navigate back using br…
marcellamaki Oct 25, 2021
fb3fbeb
Update mobile carousel limit
marcellamaki Oct 25, 2021
f717bcb
Add content thumbnails with normalizeContentNode on Topics Page
marcellamaki Oct 26, 2021
83bb347
Add folders header
marcellamaki Oct 26, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Refine responsive sidebar functionality for smallest mobile devices (…
…WIP)
marcellamaki committed Oct 22, 2021
commit 2853c0e014a2a6db52d1508b2d297614d9b4a2a3
37 changes: 4 additions & 33 deletions kolibri/core/assets/src/views/FullScreenSidePanel/index.vue
Original file line number Diff line number Diff line change
@@ -15,36 +15,7 @@
backgroundColor: $themeTokens.surface,
}"
>
<KIconButton
icon="close"
class="close-button"
@click="closePanel"
/>
<slot></slot>

<!--
<h2 class="title">
{{ title }}
<span>
<KIconButton
icon="close"
class="close-button"
@click="togglePanel"
/>
</span>
</h2>
<SidePanelResourceMetadata
v-if="panelType === 'resourceMetadata'"
:togglePanel="togglePanel"
/>
<SidePanelResourcesList
v-if="panelType === 'resourcesList'"
:contents="siblingNodes"
:currentContent="content"
:togglePanel="togglePanel"
:nextTopic="nextTopic"
/>
-->
</div>
</transition>
<Backdrop
@@ -147,12 +118,12 @@
z-index: 12;
width: 472px;
height: 100vh;
padding: 32px;
overflow: auto;
padding: 24px;
overflow: scroll;
font-size: 14px;

.is-mobile & {
width: 100vw;
@media (min-width: 436px) {
width: 346px;
}
}

23 changes: 10 additions & 13 deletions kolibri/plugins/learn/assets/src/views/EmbeddedSidePanel/index.vue
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
backgroundColor: $themeTokens.surface,
width: width,
}"
class="side-panel"
:class="position === 'embedded' ? 'side-panel' : ''"
>
<div v-if="topics && topicsListDisplayed">
<div v-for="t in topics" :key="t.id">
@@ -15,7 +15,7 @@
</h3>
</div>
</div>
<div v-else :style="sidePanelStyle">
<div v-else>
<!-- search by keyword -->
<h2 class="title">
{{ $tr('keywords') }}
@@ -26,7 +26,7 @@
:value="value.keywords || ''"
@change="val => $emit('input', { ...value, keywords: val })"
/>
<div v-if="value.categories && value.categories.length">
<div>
<h2 class="section title">
{{ $tr('categories') }}
</h2>
@@ -200,14 +200,17 @@
type: [Number, String],
required: true,
},
topicPage: {
type: Boolean,
required: false,
},
topicsListDisplayed: {
type: Boolean,
required: false,
},
position: {
type: String,
required: true,
validator(val) {
return ['embedded', 'overlay'].includes(val);
},
},
},
computed: {
inputValue: {
@@ -244,12 +247,6 @@
},
};
},
sidePanelStyle() {
if (this.topicPage) {
return { position: 'relative' };
}
return null;
},
availableRootCategories() {
if (this.availableLabels) {
const roots = {};
Original file line number Diff line number Diff line change
@@ -70,13 +70,6 @@
:tooltip="coreString('moreOptions')"
@click="$emit('toggleOptions')"
/>
<UiSelect
:value="selection"
:options="options"
:label="label"
:floatingLabel="floatingLabel"
@blur="$emit('blur')"
/>
<KButton
v-if="copiesCount > 1"
appearance="basic-link"
38 changes: 33 additions & 5 deletions kolibri/plugins/learn/assets/src/views/LibraryPage.vue
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@
:contents="channels"
:genContentLink="genChannelLink"
/>
<div class="toggle-view-buttons">
<div v-if="!(windowBreakpoint < 1)" class="toggle-view-buttons">
<KIconButton
icon="menu"
:ariaLabel="$tr('viewAsList')"
@@ -106,12 +106,30 @@
v-model="searchTerms"
:width="`${sidePanelWidth}px`"
:availableLabels="labels"
position="embedded"
@currentCategory="handleShowSearchModal"
/>
<!-- <FullScreenSidePanel
<FullScreenSidePanel
v-if="!windowIsLarge && sidePanelIsOpen"
@togglePanel="toggleSidePanelVisibility"
/> -->
>
<KIconButton
v-if="windowIsSmall"
class="overlay-close-button"
icon="close"
:ariaLabel="coreString('close')"
:color="$themeTokens.text"
:tooltip="coreString('close')"
@click="toggleSidePanelVisibility"
/>
<EmbeddedSidePanel
v-model="searchTerms"
:width="`${sidePanelOverlayWidth}px`"
:availableLabels="labels"
position="overlay"
@currentCategory="handleShowSearchModal"
/>
</FullScreenSidePanel>
<CategorySearchModal
v-if="currentCategory"
:selectedCategory="currentCategory"
@@ -229,7 +247,7 @@
import { ContentNodeProgressResource, ContentNodeResource } from 'kolibri.resources';
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
import { AllCategories, NoCategories } from 'kolibri.coreVue.vuex.constants';
// import FullScreenSidePanel from '../../../../../core/assets/src/views/FullScreenSidePanel';
import FullScreenSidePanel from '../../../../../core/assets/src/views/FullScreenSidePanel';
import { PageNames } from '../constants';
import BrowseResourceMetadata from './BrowseResourceMetadata';
import commonLearnStrings from './commonLearnStrings';
@@ -279,7 +297,7 @@
labels: null,
sidePanelContent: null,
showSearchModal: false,
// sidePanelIsOpen: false,
sidePanelIsOpen: false,
};
},
computed: {
@@ -347,6 +365,9 @@
return 346;
}
},
sidePanelOverlayWidth() {
return 300;
},
numCols() {
if (this.currentViewStyle === 'list' || this.windowBreakpoint < 1) {
return 1;
@@ -392,6 +413,7 @@
handleShowSearchModal(value) {
this.currentCategory = value;
this.showSearchModal = true;
this.sidePanelIsOpen = false;
},
// hideSearchModal() {
// this.showSearchModal = false;
@@ -510,4 +532,10 @@
float: right;
}

.overlay-close-button {
position: fixed;
top: 8px;
right: 8px;
}

</style>