Max/SolidScribe
Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

Testing new note display cards that use flexbox

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/assets/semantic-helper.css
View File

@ -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%;

83
client/src/components/NoteTitleDisplayCard.vue
View File

@ -3,17 +3,10 @@
:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
: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 -->
<div class="top aligned row" @click.self="cardClicked">
<div class="sixteen wide column overflow-hidden note-card-text" @click="cardClicked">
<div class="overflow-hidden note-card-text" @click="cardClicked">
<span class="subtext" v-if="note.shareUsername">
Shared by {{ note.shareUsername }}
@ -33,43 +26,43 @@
</span>
</span>
<div v-if="note.title == '' && note.subtext == ''">
<span v-if="note.title == '' && note.subtext == ''">
Empty Note
</div>
</span>
<span v-if="noteIcon" class="badge">
<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
</span>
<!-- Title display -->
<div v-if="note.title.length > 0"
<span v-if="note.title.length > 0"
data-test-id="title"
:class="{ 'big-text':(note.titleLength <= 100), 'small-text-title':(note.titleLength >= 100) }"
v-html="note.title"></div>
class="big-text"
v-html="note.title"></span>
<!-- Sub text display -->
<div v-if="note.subtext.length > 0 && !isShowingSearchResults()"
<span v-if="note.subtext.length > 0 && !isShowingSearchResults()"
data-test-id="subtext"
:class="{ 'big-text':(note.subtextLength <= 100 && note.titleLength <= 100), 'small-text':(note.subtextLength >= 100) }"
v-html="note.subtext"></div>
class="small-text"
v-html="note.subtext"></span>
<!-- Display highlights from solr results -->
<div v-if="note.note_highlights.length > 0" class="term-usage">
<div
<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)"></div>
</div>
v-html="cleanHighlight(highlight)"></span>
</span>
</div>
</div>
<!-- Toolbar on the bottom -->
<div class="bottom aligned row" @click.self="cardClicked">
<div class="sixteen wide column">
<div class="ui grid reduced-padding">
<div class="tool-bar" @click.self="cardClicked">
<div class="thirteen wide column clickable icon-bar" @click="cardClicked">
<div class="icon-bar" @click="cardClicked">
<!-- {{$helpers.timeAgo(note.updated)}} -->
<span v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
@ -80,19 +73,17 @@
<span v-if="note.archived == 1" data-position="top right" data-tooltip="Archived" data-inverted="">
<i class="green archive icon"></i>
</span>
</div>
<div class="three wide right aligned column">
<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
<delete-button class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
</div>
<div class="row" v-if="getThumbs.length > 0">
<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>
@ -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 {
@ -308,6 +304,20 @@
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 {
/*margin-right: 65%;*/
@ -342,9 +352,8 @@
}
.badge {
position: absolute;
top: 7px;
right: 6px;
display: inline-block;
float: right;
}
/* Tweak mobile display to show only one column */

6
client/src/stores/mainStore.js
View File

@ -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)',
}
}

28
server/helpers/ProcessText.js
View File

@ -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 -> <p><br></p>
return string.replace(/\<p\>\<br\>\<\/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('</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
inString += '</end>'
@ -60,7 +84,7 @@ ProcessText.deduceNoteTitle = (inString) => {
const endTags = ['</o','</l','</u']
let totalLines = Math.min(lines.length, 6)
let charLimit = 250
let charLimit = 400
let listStart = false
let noTitleJustList = false