fcee24a61d
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
123 lines
3.2 KiB
Vue
123 lines
3.2 KiB
Vue
<template>
|
|
<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">
|
|
<p>Note Text</p>
|
|
<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><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">
|
|
<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>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'NoteTitleDisplayCard',
|
|
props: [ 'onClick', 'data' ],
|
|
components: {
|
|
'delete-button': require('./DeleteButtonComponent.vue').default,
|
|
},
|
|
data () {
|
|
return {
|
|
note: null,
|
|
color: null, //'#FFF',
|
|
fontColor: null, //'#000'
|
|
}
|
|
},
|
|
beforeMount(){
|
|
|
|
this.note = this.data
|
|
|
|
if(this.note.color != null && this.note.color != '#FFF'){
|
|
this.color = this.note.color
|
|
this.fontColor = '#FFF'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/css">
|
|
|
|
.term-usage {
|
|
border: 1px solid #DDD;
|
|
padding: 10px;
|
|
}
|
|
.term-usage em {
|
|
color: green;
|
|
background-color: white;
|
|
font-weight: bold;
|
|
}
|
|
.usage-row + .usage-row {
|
|
padding: 8px 0 0;
|
|
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> |