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

Big Update:

Browse Source 
* Menus open and close based on URL, allowing for back button on note menus to close

Minor Updates:
* Made night mode buttons green
* Widend the global menu
* Added a version display
* Made the create note button real big
* Made the creane note button more visible on mobile
* Hide the note button if there are no notes
* Changed quick menu item to "Quick Note"
* Added reload option if version is clicked
* Moved around menu buttons at the bottom of the note
* Moved tags back into the main footer on note
* Disabled hiding of toolbar on mobile when editor focused
* Updated locked note display on main title card
* Put last edit on note display
* Tweaked display styles to be more minimal, added fade-in on hover
* Added solid scribe to all title displays on the site
* Reactivated help page and put some good help on it...decent help
* Increased max upload size for files to 5MB
* Shortened text on title display cards to make them all the same size
This commit is contained in:
Max G
2020-04-10 03:47:15 +00:00
parent 0b5675e000
commit c11f1b1b6f
12 changed files with 246 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,13 +19,6 @@
</span>
</span>
<span class="subtext" v-if="note.shared == 2">
You Shared
<span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span>
<span v-if="note.title == '' && note.subtext == '' && note.encrypted == 0">
Empty Note
</span>
@@ -46,10 +39,17 @@
v-html="note.subtext"></span>
<p v-if="note.encrypted == 1">
<div class="ui fluid basic button" v-if="note.encrypted == 1">
<i class="green lock icon"></i>
Locked
</p>
</div>
<span class="subtext" v-if="note.shared == 2">
You Shared this note
<span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span>
<!-- Display highlights from solr results -->
<span v-if="note.note_highlights.length > 0" class="term-usage">
@@ -67,7 +67,6 @@
<!-- Toolbar on the bottom -->
<div class="tool-bar" @click.self="cardClicked">
<div class="icon-bar">
<!-- {{$helpers.timeAgo(note.updated)}} -->
<span v-if="note.pinned == 1" data-position="top left" data-tooltip="Pinned" data-inverted>
<i class="green pin icon"></i>
@@ -80,7 +79,10 @@
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
</span>
<!-- :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" -->
<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
Last Edit {{$helpers.timeAgo(note.updated)}}
</span>
<span class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
<i class="teeny-button" data-tooltip="Tags" data-inverted v-on:click="toggleTags(true)">
@@ -100,7 +102,7 @@
<i class="pin icon"></i>
</i>
<delete-button class="teeny-button" :note-id="note.id" />
<delete-button class="teeny-button" :note-id="note.id" />
</span>
</div>
@@ -113,7 +115,7 @@
</div>
<side-slide-menu v-if="showTagSlideMenu" v-on:close="toggleTags(false)" :full-shadow="true">
<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"/>
</div>
@@ -210,7 +212,7 @@
this.triggerClosedAnimation = true
setTimeout(()=>{
//After 3 seconds, hide it
this.justClosed = false
this.triggerClosedAnimation = false
}, 3000)
}, 500)
@@ -298,6 +300,11 @@
}
/*Strict font sizes for card display*/
.small-text {
max-height: 261px;
overflow: hidden;
display: inline-block;
}
.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
/*font-size: 1.0em !important;*/
font-size: 15px !important;
@@ -342,16 +349,21 @@
.note-title-display-card {
position: relative;
/*box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);*/
/*box-shadow: 0 1px 3px 0 rgba(34,36,38,.15);*/
/*box-shadow: 0 0px 5px 1px rgba(34,36,38,0);*/
box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
/*box-shadow: 0 1px 3px 0 rgba(34,36,38,.15);*/
box-shadow: 0px 1px 2px 1px rgba(210, 211, 211, 0.46);
transition: box-shadow ease 0.3s;
margin: 5px;
/*padding: 0.7em 1em;*/
border-radius: .28571429rem;
border: 1px solid;
border-color: var(--border_color);
border: 1px solid transparent;
/*border-color: var(--border_color);*/
/*width: calc(33.333% - 10px);*/
width: calc(25% - 10px);
max-width: 300px;
min-width: 190px;
min-height: 130px;
/*transition: box-shadow 0.3s;*/
box-sizing: border-box;
cursor: pointer;
@@ -360,20 +372,20 @@
letter-spacing: 0.02rem;
display: flex;
flex-direction: column;
text-align: left;
}
.note-title-display-card:hover {
/*box-shadow: 0 3px 6px -0 rgba(34,36,38,.50);*/
/*box-shadow: 0 0px 5px 1px rgba(34,36,38,0.3);*/
box-shadow: 0px 2px 2px 1px rgba(210, 211, 211, 0.8);
}
.icon-bar {
display: inline-block;
padding: 0 10px 0;
opacity: 1;
width: 100%;
/*margin-top: -2.2rem;*/
}
.hover-hide {
opacity: 0.0;
transition: opacity ease 0.6s;
}
.little-tag {
font-size: 0.7em;
@@ -428,12 +440,16 @@
align-self: flex-end;
flex-grow: 0;
}
.time-ago-display {
display: inline-block;
width: 100%;
text-align: right;
}
.one-column .note-title-display-card {
/*margin-right: 65%;*/
/*width: 33%;*/
width: 100%;
max-width: none;
}
.overflow-hidden {
overflow: hidden;
@@ -472,6 +488,7 @@
.note-title-display-card {
width: calc(100% + 10px);
margin: 0px -5px 10px -5px;
max-width: none;
}
}
@@ -484,18 +501,18 @@
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/
linear-gradient(to bottom, #21BA45 50%, #21BA45 100%); /* TopLeft to Bottom */
/*Initial state, no BG*/
background-size: 0 2px, 2px 0, 0 2px, 2px 0;
background-size: 0 3px, 3px 0, 0 3px, 3px 0;
}
15% {
/*Middre state, some filled */
background-size: 100% 2px, 2px 0, 100% 2px, 2px 0;
background-size: 100% 3px, 3px 0, 100% 3px, 3px 0;
}
30% {
/*final state, all filled */
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}
45% {
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
background-image:
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* TopLeft to Right */
linear-gradient(to bottom, #21BA45 50%, #21BA45 100%), /* TopRight to Bottom */