Major Update: Changed Text Input View

* Created new toolbar that moves on mobile
This commit is contained in:
Max G
2020-05-02 19:10:20 +00:00
parent 29845e2294
commit a545ced98f
11 changed files with 795 additions and 260 deletions

View File

@@ -1,14 +1,15 @@
<template>
<div class="ui basic segment no-fluf-segment">
<div class="ui grid" :class="{ 'mush-it-up':showOneColumn() }" ref="content">
<div class="ui grid" ref="content">
<div class="sixteen wide column">
<!-- :class="{ 'sixteen wide column':showOneColumn(), 'sixteen wide column':!showOneColumn() }" -->
<div class="ui stackable grid">
<div class="ten wide column" :class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
<div class="ten wide column"
:class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
<div class="ui basic button shrinking"
v-on:click="updateFastFilters(3)"
@@ -75,10 +76,7 @@
</h3>
<!-- Go to one wide column, do not do this on mobile interface -->
<div :class="{'one-column':(
(activeNoteId1 != null || activeNoteId2 != null) &&
!$store.getters.getIsUserOnMobile
)}">
<div :class="{'one-column':( showOneColumn() )}">
<!-- render each section based on notes in set -->
<div v-for="section,index in noteSections" v-if="section.length > 0" class="note-card-section">
@@ -136,7 +134,9 @@
export default {
name: 'SearchBar',
components: {
'input-notes': require('@/components/NoteInputPanel.vue').default,
'input-notes': () => import(/* webpackChunkName: "NoteInputPanel" */ '@/components/NoteInputPanel.vue'),
'note-title-display-card': require('@/components/NoteTitleDisplayCard.vue').default,
'fast-filters': require('@/components/FastFilters.vue').default,
'search-input': require('@/components/SearchInput.vue').default,
@@ -308,6 +308,9 @@
},
methods: {
showOneColumn(){
return this.$store.getters.getIsUserOnMobile
//If note 1 or 2 is open, show one column. Or if the user is on mobile
return (this.activeNoteId1 != null || this.activeNoteId2 != null) &&
!this.$store.getters.getIsUserOnMobile
@@ -729,9 +732,7 @@
}
</script>
<style type="text/css" scoped>
.mush-it-up {
width: calc(50% - 130px);
}
.detail {
float: right;
}