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

Added a night mode and no way to toggle it!

Browse Source 
Tweaked a lot of styles and added some cool animations
Added a little to the help text
Quickly adding a note, saving and closing no longer causes half formed or empty notes to appear
Close Editor animation
Display cards text show at the bottom of card
Added a delete function, and it works
Added browser title attributes
More debugging and error checking on scraped links
Updated not search to display title and text below the title
This commit is contained in:
Max G
2019-07-29 07:22:47 +00:00
parent b0a8071b41
commit fcee24a61d
13 changed files with 387 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,35 @@
<template>
<div class="ui clickable segment" @click="onClick(note.id)" :style="{'background-color':color, 'color':fontColor}">
<h3>{{note.text}}</h3>
<p>Edited: {{$helpers.timeAgo(note.updated)}}</p>
<div class="note-title-display-card fade-in-fwd" :style="{'background-color':color, 'color':fontColor}">
<div class="ui grid max-height">
<div class="top aligned row">
<div class="sixteen wide column overflow-hidden">
<h3 @click="onClick(note.id)" class="clickable">{{note.title}}</h3>
</div>
<div class="sixteen wide column overflow-hidden">
<p @click="onClick(note.id)" class="clickable">{{note.subtext}}</p>
</div>
</div>
<div class="bottom aligned row">
<div class="ten wide column clickable" @click="onClick(note.id)">Edited: {{$helpers.timeAgo(note.updated)}}</div>
<div class="six wide right aligned column">
<span v-if="note.attachment_count > 0" class>
<i class="grey linkify icon"></i> {{note.attachment_count}}
</span>
<span v-if="note.tag_count == 1" data-tooltip="Note has 1 tag">
<i class="grey tags icon"></i> {{note.tag_count}}
</span>
<span v-if="note.tag_count > 1" :data-tooltip="`Note has ${note.tag_count} tags`">
<i class="grey tags icon"></i> {{note.tag_count}}
</span>
<delete-button :note-id="note.id" />
</div>
</div>
</div>
<!-- Display highlights from solr results -->
<div v-if="note.note_highlights.length > 0" class="term-usage">
@@ -9,13 +37,14 @@
<div class="usage-row" v-for="highlight in note.note_highlights" v-html="highlight"></div>
</div>
<div v-if="note.attachment_highlights.length > 0" class="term-usage">
<p>Note URL Text</p>
<p><i class="linkify icon"></i> Note URL Text</p>
<div class="usage-row" v-for="highlight in note.attachment_highlights" v-html="highlight"></div>
</div>
<div v-if="note.tag_highlights.length > 0" class="term-usage">
Tag
<i class="tags icon"></i> Tag
<div class="ui icon large label" v-for="highlight in note.tag_highlights" v-html="highlight"></div>
</div>
</div>
</template>
@@ -24,11 +53,14 @@
export default {
name: 'NoteTitleDisplayCard',
props: [ 'onClick', 'data' ],
components: {
'delete-button': require('./DeleteButtonComponent.vue').default,
},
data () {
return {
note: null,
color: '#FFF',
fontColor: '#000'
color: null, //'#FFF',
fontColor: null, //'#000'
}
},
beforeMount(){
@@ -43,6 +75,7 @@
}
</script>
<style type="text/css">
.term-usage {
border: 1px solid #DDD;
padding: 10px;
@@ -57,4 +90,34 @@
border-top: 1px solid #DDD;
margin: 8px 0 0;
}
.note-title-display-card {
position: relative;
box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
margin: 0 15px 15px 0;
padding: 1em;
border-radius: .28571429rem;
border: 1px solid;
border-color: var(--border_color);
width: 31.5%;
/*transition: width 0.2s;*/
}
.one-column .note-title-display-card {
margin-right: 65%;
width: 18%;
}
.overflow-hidden {
overflow: hidden;
word-break: break-all;
}
.max-height {
height: calc(100% + 30px);
}
@media only screen and (max-width: 740px) {
.note-title-display-card {
width: 100%;
margin: 15px 0 0 0;
}
}
</style>