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

Tons of littele interface changes and cleanups

Browse Source 
Massive update to image scraper with much better image getter
Lots of little ui updates for mobile
This commit is contained in:
Max G
2022-01-27 04:48:19 +00:00
parent d4be0d6471
commit 848c86327a
17 changed files with 400 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,27 +21,9 @@
class="big-text"><p>{{ note.title }}</p></span>
<span class="tags" v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">#{{ tag.split(':')[0] }}</span>
<br>
</span>
<!-- Sub text display -->
<span v-if="note.subtext.length > 0"
class="small-text"
v-html="note.subtext"></span>
<!-- Not indexed warning -->
<!-- <span v-if="note.indexed != 1">
<span class="green label">Not Indexed</span>
</span> -->
<div class="ui fluid basic button" v-if="note.encrypted == 1">
<i class="green lock icon"></i>
Locked
</div>
<span v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">#{{ tag.split(':')[0] }}</span>
<br>
</span>
<!-- Shared Details -->
<span class="subtext" v-if="note.shared == 2">
@@ -62,23 +44,71 @@
</span>
</span>
</div>
<!-- Sub text display -->
<span v-if="note.subtext.length > 0"
class="small-text"
v-html="note.subtext"></span>
<!-- Not indexed warning -->
<!-- <span v-if="note.indexed != 1">
<span class="green label">Not Indexed</span>
</span> -->
<div v-if="titleView" class="single-line-text" @click="cardClicked">
<span class="title-line" v-if="note.title.length > 0">{{ note.title }}<br></span>
<span class="sub-line" v-if="note.subtext.length > 0">{{ removeHtml(note.subtext) }}</span>
<span v-if="note.title.length == 0 && note.title.length == 0">Empty Note</span>
<!-- <div class="ui fluid basic button" v-if="note.encrypted == 1">
<i class="green lock icon"></i>
Locked
</div> -->
</div>
<!-- slim card view -->
<div v-if="titleView" class="thin-container" @click="cardClicked">
<!-- icon -->
<span v-if="noteIcon" class="thin-icon">
<i :class="`${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
</span>
<!-- title -->
<span class="thin-title" v-if="note.title.length > 0">{{ note.title }}</span>
<!-- snippet -->
<span class="thin-sub" v-if="note.subtext.length > 0">{{ removeHtml(note.subtext) }}</span>
<span v-if="note.title.length == 0 && removeHtml(note.subtext).length == 0">Empty Note</span>
<!-- tags -->
<span v-if="note.tags" class="thin-tags" >
<span v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">#{{ tag.split(':')[0] }}
</span>
</span>
<!-- edited -->
<span class="thin-right">
{{$helpers.timeAgo( note.updated )}}
<i class="green link ellipsis vertical icon"></i>
</span>
</div>
<!-- Toolbar on the bottom -->
<div class="tool-bar" @click.self="cardClicked" v-if="!titleView">
<div class="icon-bar">
<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
<div v-if="getThumbs.length > 0">
<div class="tiny-thumb-box" v-on:click="openEditAttachment">
<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
</div>
</div>
<div class="icon-bar" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
<span class="time-ago-display">
{{$helpers.timeAgo( note.updated )}}
</span>
<span class="teeny-buttons" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
<span class="teeny-buttons">
<span v-if="!note.trashed">
@@ -115,19 +145,13 @@
</i>
<delete-button class="teeny-button" :note-id="note.id" />
</span>
</span>
</div>
<div v-if="getThumbs.length > 0">
<div class="tiny-thumb-box" v-on:click="openEditAttachment">
<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
</div>
</div>
</div>
<!-- tag edit menu -->
<side-slide-menu v-if="showTagSlideMenu" v-on:close="toggleTags(false)" :full-shadow="true" :skip-history="true">
<div class="ui basic segment">
<note-tag-edit :noteId="note.id" :key="'display-tags-for-note-'+note.id"/>
@@ -333,13 +357,11 @@
.teeny-buttons {
float: right;
width: 65%;
text-align: right;
}
.time-ago-display {
width: 35%;
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
}
.tags {
width: 100%;
@@ -364,9 +386,7 @@
/*Strict font sizes for card display*/
.small-text {
max-height: 267px;
width: 100%;
overflow: hidden;
display: inline-block;
}
.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
@@ -426,7 +446,7 @@
/*width: calc(33.333% - 10px);*/
width: calc(25% - 10px);
/*min-width: 190px;*/
min-height: 130px;
/*min-height: 130px;*/
/*transition: box-shadow 0.3s;*/
box-sizing: border-box;
cursor: pointer;
@@ -435,7 +455,11 @@
letter-spacing: 0.05rem;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: left;
min-height: 100px;
max-height: 450px;
}
.note-title-display-card:hover {
/*box-shadow: 0px 2px 2px 1px rgba(210, 211, 211, 0.8);*/
@@ -446,21 +470,49 @@
width: 100%;
min-height: 20px;
max-width: none;
padding: 10px;
margin: 0;
overflow: hidden;
border-radius: 0;
border: none;
/*box-shadow: 0px 0px 1px 1px rgba(210, 211, 211, 0.46);*/
}
.single-line-text {
.title-view + .title-view {
border-top: 1px solid var(--border_color);
}
.thin-container.single-line-text {
width: calc(100% - 25px);
margin: 5px 10px;
/*margin: 5px 10px;*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
}
.title-line {
.thin-container .thin-title {
font-weight: bold;
font-size: 1.2em;
padding: 0 20px 0 0;
}
.thin-container .thin-sub {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
opacity: 0.85;
}
.thin-container .thin-tags {
float: left;
margin-top: 3px;
}
.thin-container .thin-right {
float: right;
color: var(--dark_border_color);
}
.thin-container .thin-icon {
float: right;
}
.icon-bar {
@@ -468,6 +520,7 @@
padding: 5px 10px 0;
opacity: 1;
width: 100%;
background-color: rgba(200, 200, 200, 0.2);
}
.hover-hide {
opacity: 0.0;