Testing new note display cards that use flexbox

Testing new simplified text processes, for smaller notes, it just sends all the text
This commit is contained in:
Max G 2020-02-27 07:14:29 +00:00
parent 72b7f8946a
commit b838f9f571
4 changed files with 117 additions and 82 deletions

View File

@ -229,17 +229,18 @@ a:hover {
.squire-box a { .squire-box a {
cursor: pointer; cursor: pointer;
} }
.note-card-text i, /* .note-card-text i,
.squire-box i { .squire-box i {
padding: 0.5em 0.99em; padding: 0.5em 0.99em;
border: 1px solid #CCC; border: 1px solid #CCC;
margin: 1px; margin: 1px;
border-radius: 9px; border-radius: 9px;
display: inline-block; display: inline-block;
} }*/
.squire-box p { .squire-box p {
margin-bottom: 0; margin-bottom: 0;
} }
.note-card-text blockquote,
.squire-box blockquote { .squire-box blockquote {
margin: 0; margin: 0;
padding: 0.8em; padding: 0.8em;
@ -249,6 +250,7 @@ a:hover {
max-width:100%; max-width:100%;
height: auto; height: auto;
max-height: 200px; max-height: 200px;
margin: 10px 0 0;
} }
.squire-box img { .squire-box img {
max-width:100%; max-width:100%;

View File

@ -3,96 +3,87 @@
:style="{'background-color':color, 'color':fontColor, 'border-color':color }" :style="{'background-color':color, 'color':fontColor, 'border-color':color }"
:class="{'currently-open':currentlyOpen}" :class="{'currently-open':currentlyOpen}"
> >
<!-- fade-in-fwd -->
<div v-if="noteIcon" class="badge">
<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
</div>
<div class="ui grid max-height">
<!-- Show title and snippet below it --> <!-- Show title and snippet below it -->
<div class="top aligned row" @click.self="cardClicked"> <div class="overflow-hidden note-card-text" @click="cardClicked">
<div class="sixteen wide column overflow-hidden note-card-text" @click="cardClicked"> <span class="subtext" v-if="note.shareUsername">
Shared by {{ note.shareUsername }}
<span class="subtext" v-if="note.shareUsername"> <span v-if="note.opened == null && !beenClicked" class="ui tiny green compact right floated button">
Shared by {{ note.shareUsername }} New
<span v-if="note.opened == null && !beenClicked" class="ui tiny green compact right floated button">
New
</span>
<span v-else-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span> </span>
<span v-else-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
<span class="subtext" v-if="note.shared == 2"> Updated
You Shared
<span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span> </span>
</span>
<div v-if="note.title == '' && note.subtext == ''"> <span class="subtext" v-if="note.shared == 2">
Empty Note You Shared
</div> <span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span>
<span v-if="note.title == '' && note.subtext == ''">
Empty Note
</span>
<!-- Title display --> <span v-if="noteIcon" class="badge">
<div v-if="note.title.length > 0" <i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
data-test-id="title" </span>
:class="{ 'big-text':(note.titleLength <= 100), 'small-text-title':(note.titleLength >= 100) }"
v-html="note.title"></div>
<!-- Sub text display --> <!-- Title display -->
<div v-if="note.subtext.length > 0 && !isShowingSearchResults()" <span v-if="note.title.length > 0"
data-test-id="subtext" data-test-id="title"
:class="{ 'big-text':(note.subtextLength <= 100 && note.titleLength <= 100), 'small-text':(note.subtextLength >= 100) }" class="big-text"
v-html="note.subtext"></div> v-html="note.title"></span>
<!-- Display highlights from solr results --> <!-- Sub text display -->
<div v-if="note.note_highlights.length > 0" class="term-usage"> <span v-if="note.subtext.length > 0 && !isShowingSearchResults()"
<div data-test-id="subtext"
class="usage-row" class="small-text"
v-for="highlight in note.note_highlights" v-html="note.subtext"></span>
:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
v-html="cleanHighlight(highlight)"></div>
</div>
</div> <!-- Display highlights from solr results -->
<span v-if="note.note_highlights.length > 0" class="term-usage">
<span
class="usage-row"
v-for="highlight in note.note_highlights"
:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
v-html="cleanHighlight(highlight)"></span>
</span>
</div> </div>
<!-- Toolbar on the bottom --> <!-- Toolbar on the bottom -->
<div class="bottom aligned row" @click.self="cardClicked"> <div class="tool-bar" @click.self="cardClicked">
<div class="sixteen wide column">
<div class="ui grid reduced-padding">
<div class="thirteen wide column clickable icon-bar" @click="cardClicked"> <div class="icon-bar" @click="cardClicked">
<!-- {{$helpers.timeAgo(note.updated)}} --> <!-- {{$helpers.timeAgo(note.updated)}} -->
<span v-if="note.tags"> <span v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span> <span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
</span> </span>
<span v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted=""> <span v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted="">
<i class="green pin icon"></i> <i class="green pin icon"></i>
</span> </span>
<span v-if="note.archived == 1" data-position="top right" data-tooltip="Archived" data-inverted=""> <span v-if="note.archived == 1" data-position="top right" data-tooltip="Archived" data-inverted="">
<i class="green archive icon"></i> <i class="green archive icon"></i>
</span> </span>
</div>
<div class="three wide right aligned column">
<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
</div>
<div class="row" v-if="getThumbs.length > 0"> <delete-button class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
<div class="tiny-thumb-box" v-on:click="openEditAttachment"> </div>
<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
</div>
</div>
<div v-if="getThumbs.length > 0">
<div class="tiny-thumb-box" v-on:click="openEditAttachment">
<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -209,7 +200,7 @@
} }
.big-text, .big-text > p, .big-text > h1, .big-text > h2 { .big-text, .big-text > p, .big-text > h1, .big-text > h2 {
/*font-size: 1.3em !important;*/ /*font-size: 1.3em !important;*/
font-size: 16px !important; font-size: 17px !important;
font-weight: bold; font-weight: bold;
} }
.big-text > p, .big-text > h1, .big-text > h2 { .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 1px 2px 0 rgba(34,36,38,.15);*/
box-shadow: 0 0px 5px 1px rgba(34,36,38,0); box-shadow: 0 0px 5px 1px rgba(34,36,38,0);
margin: 5px; margin: 5px;
padding: 0.7em 1em; /*padding: 0.7em 1em;*/
border-radius: .28571429rem; border-radius: .28571429rem;
border: 1px solid; border: 1px solid;
border-color: var(--border_color); border-color: var(--border_color);
@ -257,13 +248,18 @@
line-height: 1.8rem; line-height: 1.8rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
display: flex;
flex-direction: column;
} }
.note-title-display-card:hover { .note-title-display-card:hover {
/*box-shadow: 0 3px 6px -0 rgba(34,36,38,.50);*/ /*box-shadow: 0 3px 6px -0 rgba(34,36,38,.50);*/
box-shadow: 0 0px 5px 1px rgba(34,36,38,0.3); box-shadow: 0 0px 5px 1px rgba(34,36,38,0.3);
} }
.icon-bar { .icon-bar {
opacity: 0.8; display: inline-block;
padding: 0 10px 0;
opacity: 1;
width: 100%;
/*margin-top: -2.2rem;*/ /*margin-top: -2.2rem;*/
} }
.hover-hide { .hover-hide {
@ -308,6 +304,20 @@
opacity: 1; 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 { .one-column .note-title-display-card {
/*margin-right: 65%;*/ /*margin-right: 65%;*/
@ -342,9 +352,8 @@
} }
.badge { .badge {
position: absolute; display: inline-block;
top: 7px; float: right;
right: 6px;
} }
/* Tweak mobile display to show only one column */ /* Tweak mobile display to show only one column */

View File

@ -51,8 +51,8 @@ export default new Vuex.Store({
let themeColors = { let themeColors = {
'background_color': '#fff', 'background_color': '#fff',
'text_color': '#3d3d3d', 'text_color': '#3d3d3d',
'outline_color': 'rgba(34,36,38,.15)', 'outline_color': 'rgba(34,36,38,0.15)',
'border_color': 'rgba(34,36,38,.20)', 'border_color': 'rgba(34,36,38,0.20)',
} }
//Night mode colors //Night mode colors
if(state.nightMode){ if(state.nightMode){
@ -60,7 +60,7 @@ export default new Vuex.Store({
'background_color': '#000', 'background_color': '#000',
'text_color': '#a98457', 'text_color': '#a98457',
'outline_color': '#a98457', 'outline_color': '#a98457',
'border_color': '#a98457', 'border_color': 'rgba(255, 255, 255, 0.31)',
} }
} }

View File

@ -14,6 +14,18 @@ ProcessText.removeHtml = (string) => {
.trim() .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 -> <p><br></p>
return string.replace(/\<p\>\<br\>\<\/p\>/g,'')
}
ProcessText.getUrlsFromString = (string) => { ProcessText.getUrlsFromString = (string) => {
const urlPattern = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/igm const urlPattern = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/igm
return string.match(urlPattern) return string.match(urlPattern)
@ -40,7 +52,19 @@ ProcessText.deduceNoteTitle = (inString) => {
//Remove inline styles that may be added by editor //Remove inline styles that may be added by editor
inString = inString.replace(/style=".*?"/g,'') inString = inString.replace(/style=".*?"/g,'')
// inString = inString.replace('</a>','')
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 //Emergency ending tag if truncated. This will help regex find all the lines
inString += '</end>' inString += '</end>'
@ -60,7 +84,7 @@ ProcessText.deduceNoteTitle = (inString) => {
const endTags = ['</o','</l','</u'] const endTags = ['</o','</l','</u']
let totalLines = Math.min(lines.length, 6) let totalLines = Math.min(lines.length, 6)
let charLimit = 250 let charLimit = 400
let listStart = false let listStart = false
let noTitleJustList = false let noTitleJustList = false