Initial changes testing and running vue3
This commit is contained in:
Max committed
1 parent
68f71c9d6c
commit
9f37d3faf1
68 files changed
+23452
-12
No files matched your search
@@ -0,0 +1,768 @@
|
||||
<template>
|
||||
<div class="note-title-display-card"
|
||||
:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
|
||||
:class="{
|
||||
'currently-open':(currentlyOpen || showWorking),
|
||||
'ring':triggerClosedAnimation,
|
||||
'title-view':titleView
|
||||
}">
|
||||
|
||||
|
||||
<!-- Show title and snippet below it -->
|
||||
<div class="overflow-hidden note-card-text" @click.stop="cardClicked" v-if="!titleView">
|
||||
|
||||
<span v-if="note.title == '' && note.subtext == ''">
|
||||
Empty Note
|
||||
</span>
|
||||
|
||||
<span v-if="noteIcon" class="badge">
|
||||
<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
|
||||
</span>
|
||||
|
||||
<!-- Title display -->
|
||||
<span v-if="note.title.length > 0"
|
||||
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.stop="$emit('tagClick', tag.split(':')[1] )">#{{ tag.split(':')[0] }}</span>
|
||||
<br>
|
||||
</span>
|
||||
|
||||
<!-- Shared Details -->
|
||||
<span class="subtext" v-if="note.shared == 2">
|
||||
<i class="green paper plane outline icon"></i> Shared
|
||||
<span v-if="note.updated/1000 > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
|
||||
Updated
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="subtext" v-if="note.shareUsername">
|
||||
<i class="green paper plane outline icon"></i> Shared by {{ note.shareUsername }}
|
||||
|
||||
<span v-if="note.opened == null && !beenClicked" class="ui tiny green compact right floated button">
|
||||
New
|
||||
</span>
|
||||
<span v-else-if="note.updated/1000 > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
|
||||
Updated
|
||||
</span>
|
||||
</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> -->
|
||||
|
||||
</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="thick-sub" v-if="note.subtext.length > 0 && note.title.length == 0">
|
||||
{{ removeHtml(note.subtext) }}
|
||||
</span>
|
||||
<span class="thin-sub" v-else-if="note.subtext.length > 0">
|
||||
{{ removeHtml(note.subtext) }}
|
||||
</span>
|
||||
<span v-else-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 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}`"
|
||||
onerror="
|
||||
this.onerror=null;
|
||||
this.src='/api/static/assets/marketing/void.svg';
|
||||
"
|
||||
/>
|
||||
</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">
|
||||
|
||||
<span v-if="!note.trashed">
|
||||
|
||||
<i class="teeny-button" data-tooltip="Tags" data-inverted v-on:click="toggleTags(true)">
|
||||
<i class="tags icon"></i>
|
||||
</i>
|
||||
|
||||
<i class="teeny-button"
|
||||
data-tooltip="Archive"
|
||||
:data-tooltip="note.archived ? 'Un-Archive':'Archive' "
|
||||
data-inverted v-on:click="archiveNote">
|
||||
<i class="archive icon" :class="{'green':note.archived}"></i>
|
||||
</i>
|
||||
|
||||
<i class="teeny-button"
|
||||
:data-tooltip="note.pinned ? 'Un-Pin':'Pin' "
|
||||
data-inverted v-on:click="pinNote">
|
||||
<i class="pin icon" :class="{'green':note.pinned}"></i>
|
||||
</i>
|
||||
|
||||
<i class="teeny-button"
|
||||
data-tooltip="Move to Trash"
|
||||
data-inverted v-on:click="trashNote()">
|
||||
<i class="trash icon"></i>
|
||||
</i>
|
||||
</span>
|
||||
|
||||
<!-- Trash note options -->
|
||||
<span v-if="note.trashed">
|
||||
<i class="teeny-button"
|
||||
data-tooltip="Un-Trash"
|
||||
data-inverted v-on:click="trashNote()">
|
||||
<i class="reply icon"></i>
|
||||
</i>
|
||||
<delete-button class="teeny-button" :note-id="note.id" />
|
||||
</span>
|
||||
</span>
|
||||
</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"/>
|
||||
</div>
|
||||
</side-slide-menu>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'NoteTitleDisplayCard',
|
||||
props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults', 'titleView' ],
|
||||
components: {
|
||||
'delete-button': defineAsyncComponent(() => import('@/components/NoteDeleteButtonComponent.vue')),
|
||||
'note-tag-edit': defineAsyncComponent(() => import('@/components/NoteTagEdit.vue')),
|
||||
'side-slide-menu': defineAsyncComponent(() => import('@/components/SideSlideMenuComponent.vue')),
|
||||
},
|
||||
methods:{
|
||||
cardClicked(){
|
||||
// console.log(this.note)
|
||||
this.beenClicked = true
|
||||
this.onClick(this.note.id)
|
||||
},
|
||||
removeHtml(string){
|
||||
if(string == undefined || string == null || string.length == 0){
|
||||
return ''
|
||||
}
|
||||
|
||||
return string
|
||||
.replace(/&[[#A-Za-z0-9]+A-Za-z0-9]+;/g,' ') //Rip out all HTML entities
|
||||
.replace(/<[^>]+>/g, ' ') //Rip out all HTML tags
|
||||
.replace(/\s+/g, ' ') //Remove all whitespace
|
||||
.trim()
|
||||
},
|
||||
cleanHighlight(text){
|
||||
//Basically just remove whitespace
|
||||
let updated = text.replace(/ /g, '').replace(/<br>/g,'')
|
||||
.replace(/<p><\/p>/g,'').replace(/<p> <\/p>/g,'')
|
||||
|
||||
return updated
|
||||
},
|
||||
splitTags(text){
|
||||
return text.split(',')
|
||||
},
|
||||
openEditAttachment(){
|
||||
this.$router.push('/attachments/note/'+this.note.id)
|
||||
},
|
||||
pinNote(){ //togglePinned() <- old name
|
||||
this.showWorking = true
|
||||
this.note.pinned = this.note.pinned == 1 ? 0:1
|
||||
let postData = {'pinned': this.note.pinned, 'noteId':this.note.id}
|
||||
axios.post('/api/note/setpinned', postData)
|
||||
.then(data => {
|
||||
this.showWorking = false
|
||||
// this event is triggered by the server after note is saved
|
||||
// this.$bus.$emit('update_single_note', this.note.id)
|
||||
})
|
||||
.catch(error => { this.$bus.$emit('notification', 'Failed to Pin Note') })
|
||||
},
|
||||
archiveNote(){ //toggleArchived() <- old name
|
||||
|
||||
this.showWorking = true
|
||||
|
||||
let postData = {'archived': !this.note.archived, 'noteId':this.note.id}
|
||||
axios.post('/api/note/setarchived', postData)
|
||||
.then(data => {
|
||||
|
||||
//Show message so no one worries where note went
|
||||
let message = 'Moved to Archive'
|
||||
if(postData.archived != 1){
|
||||
message = 'Moved out of Archive'
|
||||
}
|
||||
this.$bus.$emit('notification', message)
|
||||
this.$bus.$emit('update_single_note', this.note.id)
|
||||
})
|
||||
.catch(error => { this.$bus.$emit('notification', 'Failed to Archive Note') })
|
||||
},
|
||||
trashNote(){ //toggleArchived() <- old name
|
||||
|
||||
this.showWorking = true
|
||||
|
||||
let postData = {'trashed': !this.note.trashed, 'noteId':this.note.id}
|
||||
axios.post('/api/note/settrashed', postData)
|
||||
.then(data => {
|
||||
|
||||
//Show message so no one worries where note went
|
||||
let message = 'Moved to Trash'
|
||||
if(postData.trashed == 0){
|
||||
message = 'Moved out of Trash'
|
||||
}
|
||||
this.$bus.$emit('notification', message)
|
||||
this.$bus.$emit('update_single_note', this.note.id)
|
||||
|
||||
})
|
||||
.catch(error => { this.$bus.$emit('notification', 'Failed to Trash Note') })
|
||||
},
|
||||
toggleTags(state){
|
||||
|
||||
this.showTagSlideMenu = state
|
||||
|
||||
if(state == false){
|
||||
this.$bus.$emit('update_single_note', this.note.id)
|
||||
}
|
||||
|
||||
},
|
||||
justClosed(){
|
||||
|
||||
// Dont do anything when not is closed.
|
||||
// Its already saved, this will make interface feel snappy
|
||||
|
||||
// Scroll note into view
|
||||
// this.$el.scrollIntoView({
|
||||
// behavior: 'smooth',
|
||||
// block: 'center',
|
||||
// inline: 'center'
|
||||
// })
|
||||
|
||||
// this.$bus.$emit('notification','Note Saved')
|
||||
|
||||
// //After scroll, trigger green outline animation
|
||||
// setTimeout(() => {
|
||||
|
||||
// this.triggerClosedAnimation = true
|
||||
// setTimeout(()=>{
|
||||
// //After 3 seconds, hide it
|
||||
// this.triggerClosedAnimation = false
|
||||
// }, 1500)
|
||||
|
||||
// }, 500)
|
||||
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
note: null,
|
||||
color: null,
|
||||
fontColor: null,
|
||||
noteIcon: null,
|
||||
iconColor: null,
|
||||
beenClicked: false,
|
||||
showTagSlideMenu: false,
|
||||
triggerClosedAnimation: false, //Show just closed animation
|
||||
showWorking: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getThumbs(){
|
||||
if(!this.note.thumbs){
|
||||
return []
|
||||
}
|
||||
|
||||
let notDisplaying = []
|
||||
|
||||
//Remove images displaying in text from the thumbnails
|
||||
this.note.thumbs.forEach( path => {
|
||||
|
||||
const titleLocation = String(this.note.title).indexOf(path)
|
||||
const subtextLocation = String(this.note.subtext).indexOf(path)
|
||||
|
||||
if(titleLocation != -1 || subtextLocation != -1){
|
||||
return
|
||||
}
|
||||
|
||||
notDisplaying.push(path)
|
||||
})
|
||||
|
||||
return notDisplaying
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
|
||||
this.note = this.data
|
||||
|
||||
if(this.note.color != null){
|
||||
|
||||
const styles = JSON.parse(this.note.color)
|
||||
|
||||
//Set background color
|
||||
if(styles.noteBackground){
|
||||
this.color = styles.noteBackground
|
||||
}
|
||||
|
||||
//set text color
|
||||
if(styles.noteText){
|
||||
this.fontColor = styles.noteText
|
||||
}
|
||||
|
||||
if(styles.noteIcon){
|
||||
this.noteIcon = styles.noteIcon
|
||||
}
|
||||
|
||||
if(styles.iconColor){
|
||||
this.iconColor = styles.iconColor
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
|
||||
.teeny-buttons {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.time-ago-display {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tags {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.teeny-button {
|
||||
border: 1px solid var(--border_color);
|
||||
border-radius: 5px;
|
||||
padding: 0px 0px 0px 4px;
|
||||
text-align: center;
|
||||
margin: 0 0 3px 5px;
|
||||
display: inline-block;
|
||||
min-width: 30px;
|
||||
color: var(--text_color);
|
||||
background-color: var(--small_element_bg_color);
|
||||
}
|
||||
.subtext {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*Strict font sizes for card display*/
|
||||
.small-text {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
|
||||
/*font-size: 1.0em !important;*/
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.small-text > p, , .small-text > h1, .small-text > h2 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.big-text > p:first-child,
|
||||
.big-text > h1, .big-text > h2 {
|
||||
/*font-size: 1.3em !important;*/
|
||||
font-size: 20px !important;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.big-text > p, .big-text > h1, .big-text > h2 {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.note-title-display-card h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.term-usage {
|
||||
/*border-bottom: 1px solid #DDD;*/
|
||||
/*padding-bottom: 10px;*/
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
.term-usage em {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
font-style: normal;
|
||||
}
|
||||
.usage-row + .usage-row {
|
||||
padding: 8px 0 0;
|
||||
border-top: 1px solid #DDD;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.note-title-display-card {
|
||||
position: relative;
|
||||
background-color: var(--small_element_bg_color);
|
||||
|
||||
/*The subtle shadow*/
|
||||
box-shadow: 2px 2px 6px 0 rgba(0,0,0,.15);
|
||||
transition: box-shadow, border-color ease 0.5s, transform linear 0.5s;
|
||||
margin: 5px;
|
||||
/*padding: 0.7em 1em;*/
|
||||
border-radius: .28571429rem;
|
||||
border: 1px solid transparent;
|
||||
border-color: var(--border_color);
|
||||
/*width: calc(33.333% - 10px);*/
|
||||
width: calc(25% - 10px);
|
||||
/*min-width: 190px;*/
|
||||
/*min-height: 130px;*/
|
||||
/*transition: box-shadow 0.3s;*/
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
line-height: 1.8rem;
|
||||
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: 0 8px 15px rgba(0,0,0,0.3);
|
||||
border-color: var(--main-accent);
|
||||
}
|
||||
.note-title-display-card.title-view {
|
||||
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);*/
|
||||
}
|
||||
.title-view + .title-view {
|
||||
border-top: 1px solid var(--border_color);
|
||||
}
|
||||
|
||||
.thin-container.single-line-text {
|
||||
width: calc(100% - 25px);
|
||||
/*margin: 5px 10px;*/
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.thin-container .thin-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.thin-container .thin-sub {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.thin-container .thick-sub {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-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 {
|
||||
display: inline-block;
|
||||
padding: 5px 10px 0;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
background-color: rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
.hover-hide {
|
||||
opacity: 0.0;
|
||||
transition: opacity ease 0.6s;
|
||||
}
|
||||
.little-tag {
|
||||
font-size: 0.7em;
|
||||
padding: 5px 5px;
|
||||
margin: 0 3px 5px 0;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
max-width: 175px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
line-height: 0.8em;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
color: var(--main-accent);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.note-title-display-card:hover .hover-hide {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.note-card-text {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
align-self: flex-start;
|
||||
flex-grow: 1;
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
.tool-bar {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
align-self: flex-end;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
|
||||
.one-column .note-title-display-card {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
/*margin: 0px -5px 10px -5px;*/
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-hidden p, .overflow-hidden h3 {
|
||||
word-break: break-word;
|
||||
}
|
||||
.max-height {
|
||||
height: calc(100% + 30px);
|
||||
}
|
||||
.currently-open:after {
|
||||
content: '...';
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000b0;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #cecece;
|
||||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Break points determine when display cards shrink */
|
||||
@media only screen and (max-width: 700px) {
|
||||
.note-title-display-card {
|
||||
width: calc(100% + 10px);
|
||||
/*margin: 0px -5px 10px -5px;*/
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 700px) and (max-width: 900px) {
|
||||
.note-title-display-card {
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 900px) and (max-width: 1100px) {
|
||||
.note-title-display-card {
|
||||
width: calc(33.33333% - 10px);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1100px) and (max-width: 1300px) {
|
||||
.note-title-display-card {
|
||||
width: calc(25% - 10px);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1300px) and (max-width: 1800px) {
|
||||
.note-title-display-card {
|
||||
width: calc(20% - 10px);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.note-title-display-card {
|
||||
width: calc(16.66666% - 10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*Animations for cool border effects*/
|
||||
@keyframes bgin {
|
||||
0% {
|
||||
background-image:
|
||||
linear-gradient(to right, var(--main-accent) 50%, var(--main-accent) 100%), /* TopLeft to Right */
|
||||
linear-gradient(to bottom, var(--main-accent) 50%, var(--main-accent) 100%), /* TopRight to Bottom */
|
||||
linear-gradient(to right, var(--main-accent) 50%, var(--main-accent) 100%), /* BottomLeft to Right*/
|
||||
linear-gradient(to bottom, var(--main-accent) 50%, var(--main-accent) 100%); /* TopLeft to Bottom */
|
||||
/*Initial state, no BG*/
|
||||
background-size: 0 4px, 4px 0, 0 4px, 4px 0;
|
||||
}
|
||||
10% {
|
||||
/*Middre state, some filled */
|
||||
background-size: 100% 4px, 4px 0, 100% 4px, 4px 0;
|
||||
}
|
||||
20% {
|
||||
/*final state, all filled */
|
||||
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
|
||||
}
|
||||
30% {
|
||||
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
|
||||
background-image:
|
||||
linear-gradient(to right, var(--main-accent) 50%, var(--main-accent) 100%), /* TopLeft to Right */
|
||||
linear-gradient(to bottom, var(--main-accent) 50%, var(--main-accent) 100%), /* TopRight to Bottom */
|
||||
linear-gradient(to right, var(--main-accent) 50%, var(--main-accent) 100%), /* BottomLeft to Right*/
|
||||
linear-gradient(to bottom, var(--main-accent) 50%, var(--main-accent) 100%); /* TopLeft to Bottom */
|
||||
}
|
||||
100% {
|
||||
background-image:
|
||||
linear-gradient(to right, transparent 50%, transparent 100%), /* TopLeft to Right */
|
||||
linear-gradient(to bottom, transparent 50%, transparent 100%), /* TopRight to Bottom */
|
||||
linear-gradient(to right, transparent 50%, transparent 100%), /* BottomLeft to Right*/
|
||||
linear-gradient(to bottom, transparent 50%, transparent 100%); /* TopLeft to Bottom */
|
||||
}
|
||||
}
|
||||
|
||||
.bgboy {
|
||||
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 0, 0 100%, 100% 0, 0 100%;
|
||||
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
||||
animation: bgin 4s cubic-bezier(0.19, 1, 0.22, 1) 1;
|
||||
}
|
||||
|
||||
/*switch between ring or BG boy to change save animation*/
|
||||
|
||||
.ring {
|
||||
position: relative;
|
||||
}
|
||||
.ring::after {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
border: 6px solid #00FFCB;
|
||||
position: absolute;
|
||||
z-index: 800;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: ring 1.5s 1;
|
||||
}
|
||||
|
||||
@keyframes ring {
|
||||
0% {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in new issue
Block a user