125 lines
3.2 KiB
Vue
125 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('@/components/NoteDeleteButtonComponent.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;
|
|
}
|
|
.overflow-hidden p, .overflow-hidden h3 {
|
|
word-break: break-word;
|
|
}
|
|
.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> |