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

Created a uniform menu for notes that works on mobile

Browse Source 
Added list sorting
Added shared notes
Fixed some little bugs here and there
This commit is contained in:
Max G
2020-02-10 17:44:43 +00:00
parent 2828cc9462
commit de646cf1de
23 changed files with 1395 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,36 +40,39 @@
</div>
<!-- Toolbar on the bottom -->
<div class="bottom aligned row icon-bar" @click.self="onClick(note.id)">
<div class="six wide column clickable" @click="onClick(note.id)">
{{$helpers.timeAgo(note.updated)}}
</div>
<div class="bottom aligned row" @click.self="onClick(note.id)">
<div class="sixteen wide column">
<div class="ui grid reduced-padding">
<div class="ten wide right aligned column">
<!-- ALways show delete button on mobile -->
<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
<div class="thirteen wide column clickable icon-bar" @click="onClick(note.id)">
<!-- {{$helpers.timeAgo(note.updated)}} -->
<span v-if="note.tags">
<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>
<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" />
</div>
<span v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted="">
<i class="green pin icon"></i>
</span>
<span v-if="note.archived == 1" data-position="top right" data-tooltip="Archived" data-inverted="">
<i class="green archive icon"></i>
</span>
<span v-if="note.attachment_count > 0" v-on:click.stop="openEditAttachment" class="clickable">
<i class="linkify icon"></i> {{note.attachment_count}}
</span>
<span v-if="note.tag_count == 1" data-position="top right" data-tooltip="Note has 1 tag" data-inverted="">
<i class="tags icon"></i> {{note.tag_count}}
</span>
<span v-if="note.tag_count > 1" :data-tooltip="`Note has ${note.tag_count} tags`" data-position="top right" data-inverted="">
<i class="tags icon"></i> {{note.tag_count}}
</span>
<div class="row" v-if="note.thumbs">
<div class="tiny-thumb-box" v-on:click="openEditAttachment">
<img v-for="thumb in note.thumbs.split(',').reverse()" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -145,13 +148,16 @@
/*Strict font sizes for card display*/
.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
font-size: 1.0em !important;
/*font-size: 1.0em !important;*/
font-size: 15px !important;
}
.small-text > p, , .small-text > h1, .small-text > h2 {
margin-bottom: 0.5em;
}
.big-text, .big-text > p, .big-text > h1, .big-text > h2 {
font-size: 1.3em !important;
/*font-size: 1.3em !important;*/
font-size: 16px !important;
font-weight: bold;
}
.big-text > p, .big-text > h1, .big-text > h2 {
margin-bottom: 0.3em;
@@ -186,7 +192,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: 1em 1.5em;
padding: 0.7em 1em;
border-radius: .28571429rem;
border: 1px solid;
border-color: var(--border_color);
@@ -205,11 +211,42 @@
}
.icon-bar {
opacity: 0.8;
margin-top: -2.2rem;
/*margin-top: -2.2rem;*/
}
.hover-hide {
opacity: 0.0;
}
.little-tag {
font-size: 0.7em;
padding: 5px 5px;
border: 1px solid var(--border_color);
margin: 5px 3px 0 0;
border-radius: 3px;
white-space: nowrap;
max-width: 100px;
overflow: hidden;
display: inline-block;
line-height: 0.8em;
text-overflow: ellipsis;
}
.tiny-thumb-box {
max-height: 70px;
overflow: hidden;
width: 100%;
display: inline-block;
background-color: rgba(200, 200, 200, 0.2);
white-space: nowrap;
overflow-x: scroll;
border: 1px solid var(--border_color);
border-left: none;
border-right: none;
text-align: center;
scrollbar-width: none;
}
.tiny-thumb {
max-height: 70px;
display: inline-block;
}
.note-title-display-card:hover .icon-bar {
opacity: 1;
@@ -262,7 +299,6 @@
.note-title-display-card {
width: calc(100% + 10px);
margin: 0px -5px 10px -5px;
padding: 15px;
}
}
</style>