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

Tweaked display of note cards, again

Browse Source 
* Added an option to pin notes, on the main screen
This commit is contained in:
Max G
2020-03-02 05:33:49 +00:00
parent 984ac6ccff
commit 98f4695739
6 changed files with 96 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,11 +62,13 @@
<!-- Toolbar on the bottom -->
<div class="tool-bar" @click.self="cardClicked">
<div class="icon-bar" @click="cardClicked">
<div class="icon-bar">
<!-- {{$helpers.timeAgo(note.updated)}} -->
<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 v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted="">
<i class="green pin icon"></i>
</span>
@@ -74,7 +76,23 @@
<i class="green archive icon"></i>
</span>
<delete-button class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
<!-- :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" -->
<span class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
<!-- <span class="teeny-button" data-tooltip="Archive" data-inverted>
<i class="archive icon"></i>
</span> -->
<i class="teeny-button" data-tooltip="Pin" data-inverted v-on:click="pinNote">
<i class="pin icon"></i>
</i>
<delete-button class="teeny-button" :note-id="note.id" />
</span>
</div>
<div v-if="getThumbs.length > 0">
@@ -92,6 +110,8 @@
<script>
import axios from 'axios'
export default {
name: 'NoteTitleDisplayCard',
props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults' ],
@@ -123,6 +143,14 @@
openEditAttachment(){
this.$router.push('/attachments/note/'+this.note.id)
},
pinNote(){
let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id}
axios.post('/api/note/setpinned', postData)
.then(data => {
this.$bus.$emit('update_single_note', this.note.id)
})
},
},
data () {
return {
@@ -190,6 +218,18 @@
</script>
<style type="text/css">
.teeny-button {
border: 1px solid var(--border_color);
border-radius: 5px;
padding: 0px 0px 0px 4px;
text-align: center;
margin: 0 0 0 5px;
display: inline-block;
min-width: 30px;
color: var(--text_color);
background-color: var(--background_color);
}
/*Strict font sizes for card display*/
.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
/*font-size: 1.0em !important;*/
@@ -198,10 +238,12 @@
.small-text > p, , .small-text > h1, .small-text > h2 {
margin-bottom: 0.5em;
}
.big-text, .big-text > p, .big-text > h1, .big-text > h2 {
.big-text > p:first-child,
.big-text > h1, .big-text > h2 {
/*font-size: 1.3em !important;*/
font-size: 17px !important;
font-weight: bold;
margin-bottom: 0.5em;
}
.big-text > p, .big-text > h1, .big-text > h2 {
margin-bottom: 0.3em;
@@ -269,14 +311,15 @@
font-size: 0.7em;
padding: 5px 5px;
border: 1px solid var(--border_color);
margin: 5px 3px 0 0;
margin: 0 3px 5px 0;
border-radius: 3px;
white-space: nowrap;
max-width: 100px;
max-width: 175px;
overflow: hidden;
display: inline-block;
line-height: 0.8em;
text-overflow: ellipsis;
float: left;
}
.tiny-thumb-box {
max-height: 70px;