* Small hack to fix images not closing window on mobile

* Made note active text modifier buttons better
* Fixed Colored notes being to big on mobile

client/src/assets/semantic-helper.css

@@ -68,6 +68,15 @@ body {
 	background-color: var(--background_color);
 	border-color: var(--border_color);
 }
+.button-sub {
+	display: inline-block;
+	width: 100%;
+	font-size: 0.9em;
+	color: white;
+	opacity: 0.8;
+	padding: 4px 0 0 0;
+	text-align: center;
+}
 
 .ui.form input:not([type]), 
 .ui.form input:not([type]):focus,
@@ -342,6 +351,10 @@ a:hover {
 	/* adjust checkboxes for mobile. Make them a little bigger, easier to click */
 	@media only screen and (max-width: 740px) {
 
+		.squire-box {
+			min-height: calc(100vh - 120px);
+		}
+
 		.ui.button.shrinking {
 			font-size: 0.85714286rem;
 			margin: 0 3px;

client/src/components/GlobalSiteMenu.vue

@@ -257,7 +257,7 @@
 		},
 		data: function(){ 
 			return {
-				version: '2.2.2',
+				version: '2.2.3',
 				username: '',
 				collapsed: false,
 				mobile: false,

client/src/components/NoteInputPanel.vue

@@ -113,7 +113,7 @@
 
 		<div class="bottom-edit-menu"></div>
 
-		<div class="input-container-wrapper" :class="{ 'side-menu-open':sideMenuOpen, 'size-down':(sizeDown == true),}" :style="{ 'background-color':styleObject['noteBackground'] }">
+		<div class="input-container-wrapper" :class="{ 'side-menu-open':sideMenuOpen, 'size-down':(sizeDown == true),}">
 
 			<!-- Squire box grows -->
 			<div class="note-wrapper" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
@@ -170,7 +170,6 @@
 		<side-slide-menu v-if="images" v-on:close="images = false" name="images" :style-object="styleObject">
 			<div class="ui basic segment">
 				<simple-attachment-note
-					v-on:close="images = false"
 					:note-id="noteid" 
 					:squire-editor="editor">
 				</simple-attachment-note>
@@ -407,27 +406,27 @@
 					this.activeToDo = false
 					this.activeColor = null
 
-					let colors = e.path.match(/\d+/g)
+					if(e.path.indexOf('>B') > -1){
-					if(colors && colors.length == 3){
+						this.activeBold = true
+					}
+					if(e.path.indexOf('>I') > -1){
+						this.activeQuote = true
+					}
+					if(e.path.indexOf('fontSize') > -1){
+						this.activeTitle = true
+					}
+					if(e.path.indexOf('OL>LI') > -1){
+						this.activeList = true
+					}
+					if(e.path.indexOf('UL>LI') > -1){
+						this.activeToDo = true
+					}
+					const colorIndex = e.path.indexOf('color=')
+					if(colorIndex > -1){
+						//Get all digigs after color index, then limit to 3
+						let colors = e.path.substring(colorIndex).match(/\d+/g).slice(0,3)
 						this.activeColor=`rgb(${colors.join(',')})`
 					}
-
-					//@ TODO - Update this to match all elements, like color and bold
-					// index of and then the specific thing might more indexOf('B'), indexOf('I'), etc
-
-					let element = e.path.split('>').pop()
-					switch (element) {
-						case 'B': this.activeBold = true; break;
-						case 'I': this.activeQuote = true; break;
-						case 'SPAN.size[fontSize=1.4em]': this.activeTitle = true; break;
-					}
-
-					let parent = e.path.split('>').shift()
-					switch (parent) {
-						case 'OL': this.activeList = true; break;
-						case 'UL': this.activeToDo = true; break;
-					}
-
 				})
 
 				//Click Event - Open links when clicked in editor or toggle checks

client/src/components/SearchInput.vue

@@ -9,7 +9,7 @@
 	.floating-button {
 		position: absolute;
 		right: 7px;
-		top: 4px;
+		top: 5px;
 		z-index: 2;
 	}
 	.floating-note-options {
@@ -26,40 +26,48 @@
 	}
 </style>
 <template>
-	<span v-on:mouseenter="extraMenuHover = true" v-on:mouseleave="extraMenuHover = false">
+	<span>
 
-		<div class="ui form">
+		<div class="ui form" v-on:mouseenter="extraMenuHover = true" v-on:mouseleave="extraMenuHover = false">
 			<!-- normal search menu  -->
 			<div class="ui left icon fluid input">
 				<input ref="desktopSearch" v-on:blur="focused = false" v-on:focus="focused = true" v-model="searchTerm" @keydown="onKeyDown" @keyup="onKeyUp" placeholder="Search or Start Typing New Note" />
 				<i class="search icon"></i>
 			</div>
 
-			<div class="floating-button" v-if="searchTerm.length > 0 && !searched && searchTerm.indexOf(' ') == -1">
+
-				<div class="ui green compact button" v-on:click="search()">Search</div>
+			<div class="floating-button" v-if="searchTerm.length > 0">
+				<i class="big link grey close icon" v-on:click="clear()"></i>
 			</div>
 
-			<div class="floating-button" v-if="searchTerm.length > 0 && searched">
-				<div class="ui grey compact button" v-on:click="clear()">Clear</div>
-			</div>
-
-			<div class="floating-button" v-if="!searched && searchTerm.length > 0 && searchTerm.indexOf(' ') != -1">
-				<div class="ui grey compact button" v-on:click="searchTerm = ''">Clear</div>
-			</div>
 
 			<div class="floating-note-options"
-				v-if="(searchTerm.indexOf(' ') != -1 || tagSuggestions.length > 0) && (extraMenuHover)">
+				v-if="(searchTerm.length > 0 || tagSuggestions.length > 0) && (extraMenuHover)">
 				<div class="ui segment">
-					<div class="ui very compact grid" v-if="searchTerm.indexOf(' ') != -1">
+					<div class="ui very compact grid">
-							<div class="eight wide column">
+							<div class="five wide column">
-								<div class="ui green compact shrinking button" v-on:click="pushToNewNote()">
+								<div class="ui mini green fluid compact shrinking button" v-on:click="search()">
+									<i class="search icon"></i>Search
+								</div>
+								<span class="button-sub">
+									( Enter )
+								</span>
+							</div>
+							<div class="five wide middle aligned column">
+								<div class="ui mini green fluid compact shrinking button" v-on:click="pushToNewNote()">
 									<i class="plus icon"></i>A New Note
 								</div>
+								<span class="button-sub">
+									( Tab )
+								</span>
 							</div>
-							<div class="eight wide right aligned column">
+							<div class="six wide right aligned column">
-								<div class="ui green compact shrinking button" v-on:click="pushToQuickNote()">
+								<div class="ui mini green fluid compact shrinking button" v-on:click="pushToQuickNote()">
 									<i class="sticky note outline icon"></i>The Scratch Pad
 								</div>
+								<span class="button-sub">
+									( CTRL + ENTER )
+								</span>
 							</div>
 						</div>
 
@@ -182,18 +190,34 @@
 			},
 			onKeyDown(event){
 
-      			//Commant + Enter
+				//Tab
-				if((event.metaKey || event.ctrlKey) && event.keyCode == 13 ){
+				if(event.keyCode == 9){
-					this.pushToQuickNote()	
+					this.pushToNewNote()
-					return 
+					event.preventDefault()
+					return false
 				}
 
+      			//Commant + Enter
+				if((event.metaKey || event.ctrlKey) && event.keyCode == 13 ){
+					this.pushToQuickNote()
+					event.preventDefault()
+					return false
+				}
+
+				//Enter
 				if(event.keyCode == 13){
 					this.search()
-					return
+					event.preventDefault()
+					return false
 				}
 			},
 			search(){
+
+				if(this.searchTerm.length == 0){
+					this.clear()
+					return
+				}
+
 				this.searched = true
 
 				this.$refs.desktopSearch.focus()

client/src/components/SideSlideMenuComponent.vue

@@ -83,7 +83,7 @@
 </style>
 
 <template>
-	<transition name="fade">
+	<!-- <transition name="fade"> -->
 		<div>
 
 			<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">
@@ -103,7 +103,7 @@
 			<div class="slide-shadow" :class="{'full-shadow':fullShadow}" v-on:click="close"></div>
 			
 		</div>
-	</transition>
+	<!-- </transition> -->
 </template>
 
 <script>

client/src/components/SimpleAttachmentNoteComponent.vue

@@ -112,7 +112,7 @@
 				this.$bus.$emit('new_file_upload', {noteId: this.noteId, imageCode})
 
 				if(this.$store.getters.getIsUserOnMobile){
-					this.close()
+					window.history.back();
 				}
 			},
 			close() {