From b838f9f5716fadd5d2963239ba9462526becc15c Mon Sep 17 00:00:00 2001 From: Max G Date: Thu, 27 Feb 2020 07:14:29 +0000 Subject: [PATCH] Testing new note display cards that use flexbox Testing new simplified text processes, for smaller notes, it just sends all the text --- client/src/assets/semantic-helper.css | 6 +- .../src/components/NoteTitleDisplayCard.vue | 159 +++++++++--------- client/src/stores/mainStore.js | 6 +- server/helpers/ProcessText.js | 28 ++- 4 files changed, 117 insertions(+), 82 deletions(-) diff --git a/client/src/assets/semantic-helper.css b/client/src/assets/semantic-helper.css index 6570dc4..f13e2d5 100644 --- a/client/src/assets/semantic-helper.css +++ b/client/src/assets/semantic-helper.css @@ -229,17 +229,18 @@ a:hover { .squire-box a { cursor: pointer; } - .note-card-text i, +/* .note-card-text i, .squire-box i { padding: 0.5em 0.99em; border: 1px solid #CCC; margin: 1px; border-radius: 9px; display: inline-block; - } + }*/ .squire-box p { margin-bottom: 0; } + .note-card-text blockquote, .squire-box blockquote { margin: 0; padding: 0.8em; @@ -249,6 +250,7 @@ a:hover { max-width:100%; height: auto; max-height: 200px; + margin: 10px 0 0; } .squire-box img { max-width:100%; diff --git a/client/src/components/NoteTitleDisplayCard.vue b/client/src/components/NoteTitleDisplayCard.vue index 120eb20..dbc9ebd 100644 --- a/client/src/components/NoteTitleDisplayCard.vue +++ b/client/src/components/NoteTitleDisplayCard.vue @@ -3,96 +3,87 @@ :style="{'background-color':color, 'color':fontColor, 'border-color':color }" :class="{'currently-open':currentlyOpen}" > - -
- -
- -
+ -
+
-
+ + Shared by {{ note.shareUsername }} - - Shared by {{ note.shareUsername }} - - - New - - - Updated - + + New - - - You Shared - - Updated - + + Updated + -
- Empty Note -
+ + You Shared + + Updated + + + + Empty Note + - -
+ + + - -
+ + - -
-
-
+ + + + + + + -
-
+ -
-
-
+
-
- - - {{ tag }} - - - - - - - -
-
- -
+
+ + + {{ tag }} + + + + + + + -
-
- -
-
+ +
+
+
+
+ +
@@ -209,7 +200,7 @@ } .big-text, .big-text > p, .big-text > h1, .big-text > h2 { /*font-size: 1.3em !important;*/ - font-size: 16px !important; + font-size: 17px !important; font-weight: bold; } .big-text > p, .big-text > h1, .big-text > h2 { @@ -245,7 +236,7 @@ /*box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);*/ box-shadow: 0 0px 5px 1px rgba(34,36,38,0); margin: 5px; - padding: 0.7em 1em; + /*padding: 0.7em 1em;*/ border-radius: .28571429rem; border: 1px solid; border-color: var(--border_color); @@ -257,13 +248,18 @@ line-height: 1.8rem; letter-spacing: 0.02rem; + display: flex; + flex-direction: column; } .note-title-display-card:hover { /*box-shadow: 0 3px 6px -0 rgba(34,36,38,.50);*/ box-shadow: 0 0px 5px 1px rgba(34,36,38,0.3); } .icon-bar { - opacity: 0.8; + display: inline-block; + padding: 0 10px 0; + opacity: 1; + width: 100%; /*margin-top: -2.2rem;*/ } .hover-hide { @@ -307,6 +303,20 @@ .note-title-display-card:hover .hover-hide { opacity: 1; } + + .note-card-text { + width: 100%; + display: inline-block; + align-self: flex-start; + flex-grow: 1; + padding: 10px 10px 0; + } + .tool-bar { + width: 100%; + display: inline-block; + align-self: flex-end; + flex-grow: 0; + } .one-column .note-title-display-card { @@ -342,9 +352,8 @@ } .badge { - position: absolute; - top: 7px; - right: 6px; + display: inline-block; + float: right; } /* Tweak mobile display to show only one column */ diff --git a/client/src/stores/mainStore.js b/client/src/stores/mainStore.js index b070577..a36932a 100644 --- a/client/src/stores/mainStore.js +++ b/client/src/stores/mainStore.js @@ -51,8 +51,8 @@ export default new Vuex.Store({ let themeColors = { 'background_color': '#fff', 'text_color': '#3d3d3d', - 'outline_color': 'rgba(34,36,38,.15)', - 'border_color': 'rgba(34,36,38,.20)', + 'outline_color': 'rgba(34,36,38,0.15)', + 'border_color': 'rgba(34,36,38,0.20)', } //Night mode colors if(state.nightMode){ @@ -60,7 +60,7 @@ export default new Vuex.Store({ 'background_color': '#000', 'text_color': '#a98457', 'outline_color': '#a98457', - 'border_color': '#a98457', + 'border_color': 'rgba(255, 255, 255, 0.31)', } } diff --git a/server/helpers/ProcessText.js b/server/helpers/ProcessText.js index d41d6d9..88f012e 100644 --- a/server/helpers/ProcessText.js +++ b/server/helpers/ProcessText.js @@ -14,6 +14,18 @@ ProcessText.removeHtml = (string) => { .trim() } + +//Remove Empty HTML lines from a string +ProcessText.stripBlankHtmlLines = (string) => { + + if(string == undefined || string == null || string.length == 0){ + return '' + } + + //Blank lines look like this ->


+ return string.replace(/\\\<\/p\>/g,'') +} + ProcessText.getUrlsFromString = (string) => { const urlPattern = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/igm return string.match(urlPattern) @@ -40,7 +52,19 @@ ProcessText.deduceNoteTitle = (inString) => { //Remove inline styles that may be added by editor inString = inString.replace(/style=".*?"/g,'') - // inString = inString.replace('','') + + const tagFreeLength = ProcessText.removeHtml(inString).length + + if(tagFreeLength < 100){ + title = ProcessText.stripBlankHtmlLines(inString) + return {title, sub} + } + + //Primare Case - Short notes + if(tagFreeLength < 300){ + sub = ProcessText.stripBlankHtmlLines(inString) + return {title, sub} + } //Emergency ending tag if truncated. This will help regex find all the lines inString += '' @@ -60,7 +84,7 @@ ProcessText.deduceNoteTitle = (inString) => { const endTags = ['