Minor Style Tweaks

* Changed the way the note menus display
* Added a blank note indicator text
* Added date created and date updated text to bottom of note

fixes #18
fixes #5

client/src/assets/semantic-helper.css

@@ -199,12 +199,16 @@ a:hover {
 /* squire text styles */
 	.squire-box {
 		border: none;
-		height: calc(100% - 69px);
+		/*height: calc(100% - 69px);*/
+
+		min-height: calc(100% - 0px);
+		background-color: rgba(255,200,0,0.0);
+		/*margin-bottom: 15px;*/
+
 		box-sizing: border-box;
 		padding: 10px 15px 10px;
-		background: transparent;
+		/*background: transparent;*/
 		overflow-x: scroll; 
-		/*color: var(--text_color);*/
 		font-size: 1.2em;
 		line-height: 1.5em;
 		word-wrap: break-word;

client/src/components/NoteInputPanel.vue

@@ -4,10 +4,12 @@
 		id="InputNotes" 
 		class="master-note-edit" 
 		@keyup.esc="close" 
-		:class="[{'size-down':(sizeDown == true), 'padded-bottom':extraToolbarsVisible },  'position-'+position ]" 
+		:class="[{ 'size-down':(sizeDown == true) },  'position-'+position ]" 
 		:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
 	>
 
+	<div class="input-container-wrapper">
+
 		<!-- Loading indicator  -->
 		<div v-if="loading" class="loading-note">
 			<div class="ui active dimmer">
@@ -34,10 +36,27 @@
 			<nm-button v-if="usersOnNote > 1" icon="green user circle" />
 
 			<nm-button icon="ellipsis horizontal" v-on:click.native="showNoteOptions = !showNoteOptions" />
-
 		</div>
 
-		<div id="squire-id" class="squire-box" ref="squirebox"></div>
+		<!-- Squire box grows -->
+		<div class="note-wrapper">
+
+			<div id="squire-id" class="squire-box" ref="squirebox"></div>
+
+			<!-- bottom stats -->
+			<div class="ui basic segment">
+				<div class="ui grid">
+					<div class="sixteen wide column">
+						<div class="ui basic compact button">
+							Status: {{ statusText }}
+						</div>
+						<div class="ui basic compact button" :data-tooltip="`Created: ${$helpers.timeAgo(created)}`">
+							Last Change: {{ $helpers.timeAgo(updated) }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 
 		<!-- && this.$store.getters.getIsUserOnMobile -->
 		<span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile">
@@ -108,7 +127,9 @@
 			</div>
 		</div>
 
-		<!-- Side slide menus for colors, tags and images -->
+	</div>
+
+		<!-- Side slide menus for colors, tags, images and other options -->
 	
 		<side-slide-menu v-if="colorPickerVisible" v-on:close="colorPickerVisible = false" name="colors">
 			<color-picker
@@ -211,6 +232,8 @@
 				modified: false,
 				noteText: '',
 				rawTextId: 0,
+				created: '',
+				updated: '',
 				shareUsername: null,
 				diffNoteText: '',
 				statusText: 'Saved',
@@ -299,6 +322,11 @@
 				this.editor = new Squire( this.$refs.squirebox, {blockTag: 'p' })
 				this.setText(this.noteText)
 
+				//focus on open, not on mobile, thats annoying
+				if(!this.$store.getters.getIsUserOnMobile){
+					this.editor.focus()
+				}
+
 				//Click Event - Open links when clicked in editor or toggle checks
 				this.editor.addEventListener('click', e => {
 
@@ -693,10 +721,12 @@
 						this.rawTextId = response.data.rawTextId
 						this.shareUsername = response.data.shareUsername
 
+						this.created = response.data.created
+						this.updated = response.data.updated
+
 						vm.noteText = response.data.text
 						vm.diffNoteText = response.data.text
 
-						vm.updated = response.data.updated
 						vm.lastNoteHash = vm.hashString(response.data.text)
 						//Set up note colors
 						if(response.data.color){
@@ -1031,23 +1061,52 @@
 <style type="text/css" scoped>
 
 	/* squire styles */
+	.input-container-wrapper {
+
+		display: block;
+		height: 100%;
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		overflow: hidden;
+
+		display: flex;
+		flex-direction: column;
+	}
+	/*Three main elements nested in panel */
+		.note-menu {
+			/*position: absolute;*/
+			top: 0;/*
+			left: 0;
+			right: 0;*/
+
+			flex-grow: 0;
+		}
+		.note-wrapper {
+			flex-grow: 1;
+			overflow: scroll;
+		}
+
+
+
 
 	/*Settings manager styles */
 	.all-settings {
 		/*border-top: 1px solid #534c68;*/
 		background: #221f2b;
-		position: absolute;
+		/*position: absolute;*/
-		bottom: 0;
+		/*bottom: 40px;*/
-		right: 0;
+		/*right: 0;*/
-		left: 0;
+		/*left: 0;*/
 		z-index: 99;
 		/*border: 1px solid;*/
 		/*background-color: var(--background_color);*/
 		/*border-color: var(--border_color);*/
-		box-sizing: border-box;
+		/*box-sizing: border-box;*/
 		/*border-radius: 7px;*/
 		/*box-shadow: 0px 3px 7px 0px rgba(140,140,140,1);*/
 		/*padding: 1.2em 0 0;*/
+		flex-grow: 0;
 	}
 	.low-settings {
 		bottom: 0px;
@@ -1060,6 +1119,7 @@
 	/*End Settings manager styles */
 
 
+
 	/* container styles change based on mobile and number of open screens */
 	.master-note-edit {
 		position: fixed;
@@ -1070,9 +1130,9 @@
 		box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
 		z-index: 1001;
 		/*overflow-x: scroll;*/
-	}
+
-	.padded-bottom {
+		overflow-y: scroll;
-		padding-bottom: 20px;
+		overflow-x: hidden;
 	}
 	.loading-note {
 		position: absolute;
@@ -1104,6 +1164,14 @@
 		left: 0%;
 		right: 50%;
 	}
+	.master-note-edit.position-3 {
+		display: inline-block;
+		position: inherit;
+		width: 100%;
+		min-height: 200px;
+		height: auto;
+		box-shadow: none;
+	}
 
 	.size-down {
 		animation: size-down 0.5s ease;

client/src/components/NoteTitleDisplayCard.vue

@@ -33,6 +33,10 @@
 						</span>
 					</span>
 
+					<div v-if="note.title == '' && note.subtext == ''">
+						Empty Note
+					</div>
+
 
 					<!-- Title display  -->
 					<div v-if="note.title.length > 0" 
@@ -105,6 +109,7 @@
 		},
 		methods:{
 			cardClicked(){
+				// console.log(this.note)
 				this.beenClicked = true
 				this.onClick(this.note.id)
 			},

client/src/pages/NotesPage.vue

@@ -44,6 +44,12 @@
 
 			</div>
 
+<!-- 			<div class="one wide column"></div>
+				<div class="fourteen wide column">
+					<input-notes :noteid="3153" :position="3" ref="note3" />
+				</div>
+			<div class="one wide column"></div> -->
+
 			<h2 v-if="fastFilters['withLinks'] == 1">Notes with Links</h2>
 			<h2 v-if="fastFilters['withTags'] == 1">Notes with Tags</h2>
 			<h2 v-if="fastFilters['onlyArchived'] == 1">Archived Notes</h2>

server/models/Note.js

@@ -331,6 +331,7 @@ Note.get = (userId, noteId) => {
 			SELECT 
 				note_raw_text.text, 
 				note_raw_text.updated as updated,
+				note.created,
 				note.pinned,
 				note.archived,
 				note.color,