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

I need to get back into using git. The hell is wrong with me!?

Browse Source
This commit is contained in:
Max G
2019-12-20 05:50:50 +00:00
parent 7b77bd37f3
commit 8d07a8e11a
135 changed files with 53273 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
client/src/components/AttachmentDisplayCard.vue Normal file
View File

@@ -0,0 +1,123 @@
<style type="text/css" scoped>
.attachment-display-card {
width: 100%;
padding: 0 0 20px;
display: inline-block;
}
.attachment-image {
width: 100%;
max-width: 150px;
float: left;
margin: 0 15px 0 0;
}
.image-placeholder {
width: 150px;
height: 60px;
border: 1px solid #DDD;
float: left;
margin: 0 15px 0 0;
}
.text {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid;
font-size: 1.4em;
margin: 0 0 10px;
line-height: 1.4em;
}
.link {
font-size: 1.4em;
margin: 0 0 5px;
display: inline-block;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
width: calc(100% - 180px);
line-height: 1.4em;
}
</style>
<template>
<div class="attachment-display-card">
<input class="text" v-on:blur="saveIt()" v-model="text"></input>
<div v-if="item.attachment_type == 1">
<div class="image-holder" v-if="item.file_location">
<a v-if="item.file_location" :href="item.url" target="_blank">
<img class="attachment-image" :src="`/api/static/${item.file_location}`">
</a>
</div>
<div v-else class="image-placeholder"></div>
<a class="link" v-if="item.url" :href="item.url" target="_blank">{{item.url}}</a>
</div>
<div v-if="item.attachment_type == 2">
<div class="image-holder" v-if="item.file_location">
<a v-if="item.file_location && item.type != 1" :href="`/api/static/${item.file_location}`" target="_blank">
<img class="attachment-image" :src="`/api/static/${item.file_location}`">
</a>
</div>
<div v-else class="image-placeholder"></div>
<a class="link" v-if="item.file_location && item.type != 1" :href="`/api/static/${item.file_location}`" target="_blank">Download</a>
</div>
<div class="ui small compact basic button" v-on:click="openNote">
Open Note
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: [ 'item' ],
data: function(){
return {
things: [],
text: '',
}
},
beforeCreate: function(){
},
mounted: function(){
this.text = this.item.text
},
methods: {
openNote(){
const noteId = this.item.note_id
this.$router.push('/notes/open/'+noteId)
},
saveIt(){
//Don't save text if it didn'th change
if(this.item.text == this.text){
return
}
const data = {
'attachmentId': this.item.id,
'updatedText': this.text,
'noteId': this.item.note_id
}
//Save it, and don't think about it.
axios.post('/api/attachment/update', data)
},
}
}
</script>

110
client/src/components/AttachmentEditor.vue Normal file
View File

@@ -0,0 +1,110 @@
<style scoped>
.shade {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.7);
z-index: 1200;
cursor: pointer;
}
.editor {
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
z-index: 1300;
overflow-y: scroll;
background-color: var(--background_color);
border: 3px solid;
border-color: var(--border_color);
}
.attachment-image {
width: 100%;
}
</style>
<template>
<div>
<div class="shade" v-on:click="closeAttachmentEditor"></div>
<div class="editor">
<div class="ui basic segment">
<h2>Edit Attachments</h2>
<div class="ui vertically divided grid">
<div v-for="item in attachments" class="row">
<div class="ui sixteen wide column">
<div class="ui form">
<div class="field">
<textarea v-on:blur="saveIt(item)" v-model="item.text" :key="item.id + 'text'"></textarea>
</div>
</div>
</div>
<div class="ui sixteen wide column">
<a v-if="item.url" :href="item.url" target="_blank">{{item.url}}</a>
<!-- Display image -->
<div v-if="item.file_location && item.attachment_type == 2">
<img class="attachment-image" :src="`/api/static/${item.file_location}`">
</div>
<!-- provide link -->
<a v-if="item.file_location" :href="`/api/static/${item.file_location}`" target="_blank">Download</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'AttachmentEditor',
props: [ 'noteId' ],
data: function(){
return {
attachments: []
}
},
beforeCreate: function(){
},
mounted: function(){
this.fetchAttachments()
},
methods: {
fetchAttachments(){
axios.post('/api/attachment/get', {'noteId':this.noteId})
.then(results => {
this.attachments = results.data
})
},
closeAttachmentEditor(){
this.$bus.$emit('close_edit_attachment')
},
saveIt(attachment){
const data = {
'attachmentId': attachment.id,
'updatedText': attachment.text,
'noteId': this.noteId
}
axios.post('/api/attachment/update', data)
.then(results => {})
},
}
}
</script>

131
client/src/components/ColorPicker.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<div class="color-picker" :style="{ 'background-color':allStyles['noteBackground'], 'color':allStyles['noteText']}">
<div class="ui grid">
<div class="five wide column">
<p>Note Color</p>
<div v-for="color in colors"
class="color-button"
:style="{ backgroundColor:color }"
v-on:click="chosenColor(color)"
></div>
</div>
<div class="six wide column">
<p>Note Icon
<span v-if="allStyles.noteIcon" >
<i :class="`large ${allStyles.noteIcon} icon`" :style="{ 'color':allStyles.iconColor }"></i>
</span>
</p>
<div v-for="icon in icons" class="icon-button" v-on:click="chosenIcon(icon)" >
<i :class="`large ${icon} icon`" :style="{ 'color':allStyles.iconColor }"></i>
</div>
<div class="ui compact fluid button" v-on:click="clearStyles">Clear All Styles</div>
</div>
<div class="five wide column">
<p>Icon Color</p>
<div v-for="color in colors"
class="color-button"
:style="{ backgroundColor:color }"
v-on:click="chooseIconColor(color)"
></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ColorPicker',
props: [ 'location', 'styleObject' ],
data () {
return {
allStyles:{ 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null },
blankStyle:{ 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null },
colors: [
"#ffebee","#ffcdd2","#ef9a9a","#e57373","#ef5350","#f44336","#e53935","#d32f2f","#c62828","#b71c1c","#fce4ec","#f8bbd0","#f48fb1","#f06292","#ec407a","#e91e63","#d81b60","#c2185b","#ad1457","#880e4f","#f3e5f5","#e1bee7","#ce93d8","#ba68c8","#ab47bc","#9c27b0","#8e24aa","#7b1fa2","#6a1b9a","#4a148c","#ede7f6","#d1c4e9","#b39ddb","#9575cd","#7e57c2","#673ab7","#5e35b1","#512da8","#4527a0","#311b92","#e8eaf6","#c5cae9","#9fa8da","#7986cb","#5c6bc0","#3f51b5","#3949ab","#303f9f","#283593","#1a237e","#e3f2fd","#bbdefb","#90caf9","#64b5f6","#42a5f5","#2196f3","#1e88e5","#1976d2","#1565c0","#0d47a1","#e1f5fe","#b3e5fc","#81d4fa","#4fc3f7","#29b6f6","#03a9f4","#039be5","#0288d1","#0277bd","#01579b","#e0f7fa","#b2ebf2","#80deea","#4dd0e1","#26c6da","#00bcd4","#00acc1","#0097a7","#00838f","#006064","#e0f2f1","#b2dfdb","#80cbc4","#4db6ac","#26a69a","#009688","#00897b","#00796b","#00695c","#004d40","#e8f5e9","#c8e6c9","#a5d6a7","#81c784","#66bb6a","#4caf50","#43a047","#388e3c","#2e7d32","#1b5e20","#f1f8e9","#dcedc8","#c5e1a5","#aed581","#9ccc65","#8bc34a","#7cb342","#689f38","#558b2f","#33691e","#f9fbe7","#f0f4c3","#e6ee9c","#dce775","#d4e157","#cddc39","#c0ca33","#afb42b","#9e9d24","#827717","#fffde7","#fff9c4","#fff59d","#fff176","#ffee58","#ffeb3b","#fdd835","#fbc02d","#f9a825","#f57f17","#fff8e1","#ffecb3","#ffe082","#ffd54f","#ffca28","#ffc107","#ffb300","#ffa000","#ff8f00","#ff6f00","#fff3e0","#ffe0b2","#ffcc80","#ffb74d","#ffa726","#ff9800","#fb8c00","#f57c00","#ef6c00","#e65100","#fbe9e7","#ffccbc","#ffab91","#ff8a65","#ff7043","#ff5722","#f4511e","#e64a19","#d84315","#bf360c","#efebe9","#d7ccc8","#bcaaa4","#a1887f","#8d6e63","#795548","#6d4c41","#5d4037","#4e342e","#3e2723","#fafafa","#f5f5f5","#eeeeee","#e0e0e0","#bdbdbd","#9e9e9e","#757575","#616161","#424242","#212121","#eceff1","#cfd8dc","#b0bec5","#90a4ae","#78909c","#607d8b","#546e7a","#455a64","#37474f","#263238","#ffffff","#000000"],
icons: ['ambulance','anchor','balance scale','bath','bed','beer','bell','bell slash','bell slash outline','bicycle','binoculars','birthday cake','blind','bomb','book','bookmark','briefcase','building','car','coffee','crosshairs','dollar sign','eye','eye slash','fighter jet','fire','fire extinguisher','flag','flag checkered','flask','gamepad','gavel','gift','glass martini','globe','graduation cap','h square','heart','heart outline','heartbeat','home','hospital','hospital outline','image','image outline','images','images outline','industry','info','info circle','key','leaf','lemon','lemon outline','life ring','life ring outline','lightbulb','lightbulb outline','location arrow','low vision','magnet','male','map','map outline','map marker','map marker alternate','map pin','map signs','medkit','money bill alternate','money bill alternate outline','motorcycle','music','newspaper','newspaper outline','paw','phone','phone square','phone volume','plane','plug','plus','plus square','plus square outline','print','recycle','road','rocket','search','search minus','search plus','ship','shopping bag','shopping basket','shopping cart','shower','street view','subway','suitcase','tag','tags','taxi','thumbtack','ticket alternate','tint','train','tree','trophy','truck','tty','umbrella','university','utensil spoon','utensils','wheelchair','wifi','wrench']
}
},
watch:{
styleObject: function(updatedStyles){
this.allStyles = updatedStyles
}
},
mounted(){
this.allStyles = this.styleObject
},
methods: {
clearStyles(){
this.$emit('changeColor', this.blankStyle)
},
chosenColor(inColor){
//Set not background to color that was chosen
this.allStyles.noteBackground = inColor
//Automatically select note text color
// Convert hex color to RGB - http://gist.github.com/983661
let color = +("0x" + inColor.slice(1).replace(inColor.length < 5 && /./g, '$&$&'));
let r = color >> 16;
let g = color >> 8 & 255;
let b = color & 255;
//Convert RGB to HSP
const hsp = Math.sqrt( 0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b) );
//If it has a BG color, default to sold black text
this.allStyles.noteText = '#000'
if(hsp < 127.5){
this.allStyles.noteText = '#FFF' //If color is dark, we need brighter text
}
this.$emit('changeColor', this.allStyles)
},
chosenIcon(inIcon){
this.allStyles.noteIcon = inIcon
this.$emit('changeColor', this.allStyles)
},
chooseIconColor(inColor){
this.allStyles.iconColor = inColor
this.$emit('changeColor', this.allStyles)
}
}
}
</script>
<style type="text/css" scoped>
.color-picker {
color: var(--text_color);
background-color: var(--background_color);
position: absolute;
/*height: 100px;*/
top: 37px;
padding: 10px;
border-radius: 5px;
left: -63px;
z-index: 300;
border: 1px solid;
border-color: var(--border_color) !important;
width: 750px;
}
.icon-button {
height: 30px;
width: 30px;
display: inline-block;
cursor: pointer;
}
.color-button {
height: 20px;
width: 20px;
display: inline-block;
cursor: pointer;
}
</style>

43
client/src/components/CrunchMenu.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div>
<p>Crunch Menu</p>
<div v-for="(item, index) in items">
<slot :name="index"></slot>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'CrunchMenu',
data () {
return {
items: []
}
},
beforeMount(){
},
mounted(){
console.log(this)
// console.log(this.$slots.default)
this.$slots.default.forEach( vnode => {
if(vnode.tag && vnode.tag.length > 0){
this.items.push(vnode)
}
})
console.log(this.items)
},
methods: {
onClickTag(index){
console.log('yup')
},
}
}
</script>
<style type="text/css" scoped>
</style>

15
client/src/components/FastFilters.vue
View File

@@ -20,9 +20,6 @@
'Order by Last Edited' :'lastEdited',
'Order by Last Opened' :'lastOpened',
'Order by Last Created' :'lastCreated',
'Only Show Notes with Links' :'withLinks',
'Only Show Notes with Tags' :'withTags',
'Only Show Archived Notes' :'onlyArchived',
}
}
},
@@ -32,9 +29,6 @@
})
},
methods:{
confirmDelete(){
this.click++
},
displayString(){
return this.orderString.replace('Order by','').replace('Only Show','')
},
@@ -54,7 +48,7 @@
<style type="text/css" scoped>
.filter-header {
width: 270px;
width: 200px;
padding: 0 0 0 10px;
border: 1px solid rgba(0,0,0,0);
border-bottom: none;
@@ -62,24 +56,27 @@
box-sizing: border-box;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
margin: 0 0 0 -11px;
float: right;
}
.filter-menu {
color: var(--text_color);
background-color: var(--background_color);
border-color: var(--border_color);
border: 1px solid;
border-top: none;
position: absolute;
top: 100%;
width: 270px;
width: 200px;
left: -1px;
z-index: 10;
padding-top: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-color: var(--border_color);
}
.filter-active {
border: 1px solid;

96
client/src/components/FileUploadButton.vue Normal file
View File

@@ -0,0 +1,96 @@
<style type="text/css" scoped>
.hidden-up {
opacity: 0;
position: absolute;
top: -500px;
}
</style>
<template>
<div class="ui clickable basic button">
<form>
<label :for="`upfile-${noteId}`" class="clickable">File Yeet {{uploadPercentage}}</label>
<input class="hidden-up" type="file" :id="`upfile-${noteId}`" ref="file" v-on:change="handleFileUpload()" />
</form>
<!-- <button v-if="file" v-on:click="uploadFileToServer()">Submit</button> -->
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'FileUploadButton',
props: [ 'noteId' ],
data () {
return {
file: null,
uploadPercentage: 0,
}
},
mounted(){
// console.log(this.noteId)
},
methods: {
uploadFileToServer() {
let formData = new FormData();
formData.append('file', this.file);
formData.append('noteId', this.noteId)
console.log('>> formData >> ', formData);
// You should have a server side REST API
axios.post('/api/attachment/upload',
formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: ( progressEvent ) => {
this.uploadPercentage = parseInt(
Math.round( ( progressEvent.loaded * 100 ) / progressEvent.total ) )
}
}
).then(results => {
this.uploadPercentage = 'DONE'
this.file = null
console.log('SUCCESS!!');
console.log('File upload results')
console.log(results.data)
const name = results.data.fileName
const location = results.data.fileLocation
if(name && location){
const imageCode = `<img alt="yup" height="200px" src="/api/static/${location}">`
//put cursor at the bottom of the window
tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody(), true);
tinyMCE.activeEditor.selection.collapse(false);
tinymce.activeEditor.execCommand('mceInsertContent', false, imageCode)
}
//try and stick that file into the active editor
// tinyMCE.execCommand(
// 'mceInsertContent',
// false,
// '<img alt="Smiley face" height="42" width="42" src="' + src + '"/>'
// );
})
.catch(results => {
this.uploadPercentage = 'FAIL'
console.log('FAILURE!!');
})
},
handleFileUpload() {
//Grab file and push note id to into data
this.file = this.$refs.file.files[0]
console.log('>>>> 1st element in files array >>>> ')
console.log(this.file)
if(this.file){
this.uploadFileToServer()
}
}
}
}
</script>

253
client/src/components/GlobalSiteMenu.vue Normal file
View File

@@ -0,0 +1,253 @@
<style scoped>
.slotholder {
height: 100vh;
width: 140px;
display: block;
float: left;
}
.global-menu {
width: 140px;
background: #221f2b;
margin: 0;
padding: 0;
box-sizing: border-box;
display: block;
position: fixed;
z-index: 111;
top: 0;
left: 0;
bottom: 0;
}
.menu-item {
color: #fff;
padding: 10px 0px 10px 10px;
display: inline-block;
width: 100%;
font-size: 1.1rem;
box-sizing: border-box;
}
.sub {
padding-left: 20px;
}
.menu-section {}
.menu-section + .menu-section {
border-top: 1px solid #534c68;
}
.menu-button {
cursor: pointer;
}
.menu-button:hover {
background-color: #534c68;
}
.router-link-active i {
/*color: #16ab39;*/
}
.router-link-active {
background-color: #534c68;
}
.shade {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 100;
cursor: pointer;
}
.top-menu-bar {
color: var(--text_color);
width: calc(100% - 20px);
}
.top-menu-bar img {
width: 20px;
height: 20px;
}
</style>
<template>
<div>
<!-- collapsed menu, appears as a bar -->
<div class="top-menu-bar menu-item" v-if="collapsed || mobile" v-on:click="collapseMenu">
<div class="ui grid">
<div class="five wide column">
<i class="bars icon"></i> Menu
</div>
<div class="six wide center aligned column">
<img src="/api/static/assets/favicon.ico" alt="logo" />
</div>
<div class="five wide right aligned column"></div>
</div>
</div>
<div class="shade" v-if="mobile && !collapsed" v-on:click="collapseMenu"></div>
<div class="slotholder" v-if="!collapsed && !mobile">
</div>
<div class="global-menu" v-if="!collapsed" v-on:click="menuClicked">
<div class="menu-section">
<div class="menu-item menu-button" v-on:click="collapseMenu">
<i class="caret square left icon"></i>
</div>
</div>
<div class="menu-section" v-if="loggedIn">
<div v-if="!disableNewNote" @click="createNote" class="menu-item menu-item menu-button">
<i class="green plus icon"></i>New Note
</div>
<div v-if="disableNewNote" class="menu-item menu-item menu-button">
<i class="purple plus icon"></i>Creating
</div>
</div>
<div class="menu-section" v-if="loggedIn">
<router-link exact-active-class="active" class="menu-item menu-button" to="/notes">
<i class="file icon"></i>Notes
</router-link>
<div>
<div class="menu-item sub">Show Only <i class="caret down icon"></i></div>
<div v-on:click="updateFastFilters(0)" class="menu-item menu-button sub"><i class="grey linkify icon"></i>Links</div>
<div v-on:click="updateFastFilters(1)" class="menu-item menu-button sub"><i class="grey tags icon"></i>Tags</div>
<div v-on:click="updateFastFilters(2)" class="menu-item menu-button sub"><i class="grey archive icon"></i>Archived</div>
</div>
</div>
<div class="menu-section" v-if="loggedIn">
<router-link class="menu-item menu-button" exact-active-class="active" to="/attachments">
<i class="folder icon"></i>Attachments
</router-link>
</div>
<div class="menu-section" v-if="loggedIn">
<router-link v-if="loggedIn" exact-active-class="active" class="menu-item menu-button" to="/quick">
<i class="coffee icon"></i>Quick
</router-link>
</div>
<div class="menu-section" v-if="!loggedIn">
<router-link v-if="!loggedIn" class="menu-item menu-button" exact-active-class="active" to="/">
<i class="home icon"></i>Welcome
</router-link>
<router-link exact-active-class="active" class="menu-item menu-button" to="/login">
<i class="plug icon"></i>Login
</router-link>
</div>
<div class="menu-section">
<div v-on:click="toggleNightMode" class="menu-item menu-button">
<span v-if="$store.getters.getIsNightMode">
<i class="toggle on icon"></i>Dark Theme</span>
<span v-else>
<i class="toggle off icon"></i>Dark Theme</span>
</div>
</div>
<div class="menu-section" v-if="loggedIn">
<div v-if="loggedIn" v-on:click="destroyLoginToken" class="menu-item menu-button">
<i class="user icon"></i>{{ucWords($store.getters.getUsername)}}
</div>
</div>
<!-- <router-link class="ui basic compact button" exact-active-class="active" to="/help">
<i class="question mark icon"></i>Help
</router-link> -->
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data: function(){
return {
username: '',
collapsed: false,
mobile: false,
disableNewNote: false
}
},
beforeCreate: function(){
},
mounted: function(){
this.mobile = this.$store.getters.getIsUserOnMobile
this.collapsed = this.$store.getters.getIsUserOnMobile
},
computed: {
loggedIn () {
//Map logged in from state
return this.$store.getters.getLoggedIn
}
},
methods: {
menuClicked(){
//Collapse menu when item is clicked in mobile
if(this.mobile && !this.collapsed){
this.collapsed = true
}
},
collapseMenu(){
this.collapsed = !this.collapsed
},
createNote(event){
const title = ''
this.disableNewNote = true
axios.post('/api/note/create', {title})
.then(response => {
if(response.data && response.data.id){
this.$router.push('/notes/open/'+response.data.id)
this.$bus.$emit('open_note', response.data.id)
this.disableNewNote = false
}
})
},
destroyLoginToken() {
this.$store.commit('destroyLoginToken')
this.$router.push('/')
},
toggleNightMode(){
this.$store.commit('toggleNightMode')
this.$bus.$emit('toggle_night_mode')
},
ucWords(str){
return (str + '')
.replace(/^(.)|\s+(.)/g, function ($1) {
return $1.toUpperCase()
})
},
updateFastFilters(index){
//A little hacky, brings user to notes page then filters on click
if(this.$route.name != 'NotesPage'){
this.$router.push('/notes')
setTimeout( () => {
this.updateFastFilters(index)
}, 500 )
}
const options = [
'withLinks', // 'Only Show Notes with Links'
'withTags', // 'Only Show Notes with Tags'
'onlyArchived', //'Only Show Archived Notes'
]
let filter = {}
filter[options[index]] = 1
this.$bus.$emit('update_fast_filters', filter)
}
}
}
</script>

4
client/src/components/NoteDeleteButtonComponent.vue
View File

@@ -1,9 +1,9 @@
<template>
<span>
<span class="clickable" @click="confirmDelete()" v-if="click == 0" data-tooltip="Delete">
<span class="clickable" @click="confirmDelete()" v-if="click == 0" data-tooltip="Delete" data-inverted="" data-position="top right">
<i class="grey trash alternate icon"></i>
</span>
<span class="clickable" @click="actuallyDelete()" @mouseleave="reset" v-if="click == 1" data-tooltip="Click again to delete." data-position="left center">
<span class="clickable" @click="actuallyDelete()" @mouseleave="reset" v-if="click == 1" data-tooltip="Click again to delete." data-position="left center" data-inverted="">
<i class="red trash alternate icon"></i>
</span>
</span>

398
client/src/components/NoteInputPanel.vue
View File

@@ -1,71 +1,62 @@
<template>
<!-- change class to .master-note-edit to have it popup on the screen -->
<div
id="InputNotes" class="master-note-edit"
id="InputNotes"
class="master-note-edit"
@keyup.esc="close"
:class="[{'size-down':(sizeDown == true)}, 'position-'+position ]"
:style="{'background-color':color, 'color':fontColor}"
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
>
<!-- Loading indicator -->
<div v-if="loading" class="loading-note">
<div class="ui active dimmer">
<div class="ui text loader">{{loadingMessage}}...</div>
<div class="ui text loader">{{loadingMessage}}</div>
</div>
</div>
<!-- Menu -->
<div class="note-top-menu">
<div @click="close" class="ui button"><i class="green close icon"></i>Close (ESC)</div>
<div @click="onToggleFancyInput" class="ui button">
Fancy ({{fancyInput?'On':'Off'}})
<div @click="close" class="ui basic icon button" data-tooltip="Close" data-position="right center" data-inverted="">
<i class="close icon"></i>
</div>
<div @click="onTogglePinned" class="ui button">
<i class="pin icon" :class="{green:(pinned == 1)}"></i> {{(pinned == 1)?'pinned':'not pinned'}}
<div @click="onTogglePinned" class="ui basic icon button" data-tooltip="Pin to Top" data-position="right center" data-inverted="">
<i class="pin icon" :class="{green:(pinned == 1)}"></i> {{(pinned == 1)?'Pinned':''}}
</div>
<div @click="onToggleArchived" class="ui button">
<i class="archive icon" :class="{green:(archived == 1)}"></i> {{(archived == 1)?'archived':'not archived'}}
<div @click="onToggleArchived" class="ui basic icon button" data-tooltip="Hide on main" data-position="right center" data-inverted="">
<i class="archive icon" :class="{green:(archived == 1)}"></i> {{(archived == 1)?'Archived':''}}
</div>
<span class="relative" v-on:mouseover="showColorPicker = true" v-on:mouseleave="showColorPicker = false">
<span class="ui icon button">
<!-- <file-upload-button :noteId="noteid" /> -->
<span class="relative" v-on:click="showColorPicker">
<span class="ui basic icon button">
<i class="paint brush icon"></i>
</span>
<span v-if="showColorPicker" class="color-picker">
<button @click="onChangeColor" class="ui icon white button"></button>
<button @click="onChangeColor" class="ui icon red button"></button>
<button @click="onChangeColor" class="ui icon orange button"></button>
<button @click="onChangeColor" class="ui icon yellow button"></button>
<button @click="onChangeColor" class="ui icon olive button"></button>
<button @click="onChangeColor" class="ui icon green button"></button>
<button @click="onChangeColor" class="ui icon teal button"></button>
<button @click="onChangeColor" class="ui icon blue button"></button>
<button @click="onChangeColor" class="ui icon violet button"></button>
<button @click="onChangeColor" class="ui icon purple button"></button>
<button @click="onChangeColor" class="ui icon pink button"></button>
<button @click="onChangeColor" class="ui icon brown button"></button>
<button @click="onChangeColor" class="ui icon grey button"></button>
<button @click="onChangeColor" class="ui icon black button"></button>
</span>
</span>
<div v-if="attachmentCount > 0" class="ui basic icon button" v-on:click="openEditAttachment" data-tooltip="View Links/Images" data-position="right center" data-inverted="">
<i class="folder icon"></i>
</div>
<span class="note-status-indicator">{{statusText}}</span>
</div>
<div v-if="fancyInput == 1" class="textarea-height no-flow">
<ckeditor ref="main-edit"
:editor="editor" @ready="onReady" v-model="noteText" :config="editorConfig" v-on:blur="save" />
</div>
<textarea
class="textarea-height raw-edit"
v-if="fancyInput == 0"
v-model="noteText"
v-on:blur="save"
v-on:keyup="onKeyup"
<textarea :id="noteid+'-tinymce-editor'">{{noteText}}</textarea>
<note-tag-edit v-if="!$store.getters.getIsUserOnMobile" :noteId="noteid" :key="'tags-for-note-'+noteid"/>
<color-picker
v-if="colorPickerVisible"
:location="colorPickerLocation"
@changeColor="onChangeColor"
:style-object="styleObject"
/>
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
</div>
</template>
@@ -73,21 +64,14 @@
<script>
import axios from 'axios'
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
//Start working on some plugin, tag plugin, link to other note, interactive checkbox
class InsertImage extends Plugin {
init() {
console.log( 'InsertImage was initialized' );
}
}
export default {
name: 'InputNotes',
props: [ 'noteid', 'position' ],
components:{
'note-tag-edit': require('@/components/NoteTagEdit.vue').default
'note-tag-edit': require('@/components/NoteTagEdit.vue').default,
'color-picker': require('@/components/ColorPicker.vue').default,
'file-upload-button': require('@/components/FileUploadButton.vue').default,
},
data(){
return {
@@ -98,23 +82,19 @@
statusText: 'Saved',
lastNoteHash: null,
saveDebounce: null, //Prevent save from being called numerous times quickly
lastSaved: 0,
updated: 'Never',
editDebounce: null,
keyPressesCounter: 0,
fancyInput: 0, //Default to basic text edit. Upgrade if set to 1
keyPressesCounter: 0, //Determen keys pressed between saves
pinned: 0,
archived: 0,
color: '#fff',
fontColor: '#000',
sizeDown: false,
showColorPicker: false,
attachmentCount: 0,
styleObject: { 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null }, //Style object. Determines colors and badges
editor: DecoupledEditor,
editorConfig: {
startupFocus: 'end',
toolbar: ["alignment", "fontSize", "removeHighlight", "highlight", "bold", "italic", "strikethrough", "underline", "blockQuote", "heading", "link", "numberedList", "bulletedList", "insertTable", "|", "undo", "redo"]
}
sizeDown: false, //Used to animate close state
colorPickerVisible: false,
colorPickerLocation: null,
tinymce: null, //Initialized editor instance
}
},
watch: {
@@ -134,24 +114,102 @@
}
},
beforeMount(){
},
beforeDestroy(){
this.$bus.$off('toggle_night_mode', this.listener)
//Trash editor instance on close
this.tinymce.remove()
},
mounted: function() {
this.loadNote(this.noteid)
//Change TinyMce styles on nightmored change
this.$bus.$on('toggle_night_mode', this.setEditorTextColor )
this.$nextTick(() => {
this.loadNote(this.noteid)
})
},
methods: {
onToggleFancyInput(){
if(this.fancyInput == 0){
this.fancyInput = 1
} else {
this.fancyInput = 0;
initTinyMce(){
// image_list: [
// {title: 'My image 1', value: 'https://www.tinymce.com/my1.gif'},
// {title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif'}
// ]
//Tweak doc height for mobile
let docHeight = 'calc(100vh - 90px)'
if(this.$store.getters.getIsUserOnMobile){
docHeight = 'calc(100vh - 37px)'
}
//Update last note hash, this will tell note to save next update
this.lastNoteHash = 0
//setup skin as dark if night mode is enabled
let skin = 'oxide'
if(this.$store.getters.getIsNightMode){
skin = 'oxide-dark'
}
const editorId = '#'+this.noteid+'-tinymce-editor'
//Globally defined included in index HTML
tinymce.init({
selector: editorId,
toolbar: 'forecolor backcolor styleselect | bold italic underline | link image | code | undo redo | bullist numlist | outdent indent table, hr, searchreplace | removeformat',
plugins: 'paste, link, code, lists, table, hr, searchreplace, image',
browser_spellcheck: true,
menubar: false,
branding: false,
statusbar: false,
height: docHeight,
skin: skin,
contextmenu: false,
init_instance_callback: this.editorInitCallback,
imagetools_toolbar: "imageoptions",
})
},
editorInitCallback(editor){
this.loading = false //Turn off loading screed when editor is loaded
this.tinymce = editor
this.setEditorTextColor()
editor
.on('Change', this.onKeyup )
.on('keyup', this.onKeyup )
.on('blur', this.save )
},
setEditorTextColor(){
//Only Set editor text color, background is transparent and set on parent element
//There may be scenarios where editor has not been set up
if(this.tinymce){
//Set editor color to color from app, change with night mode
this.tinymce.getBody().style.color = getComputedStyle(document.documentElement)
.getPropertyValue('--text_color');
//Overwrite set color if theme is set for note.
if(this.styleObject && this.styleObject.noteText){
this.tinymce.getBody().style.color = this.styleObject.noteText
}
}
},
getText(){
//Return text from tinyMce Editor
return this.tinymce.getContent()
},
showColorPicker(event){
this.colorPickerVisible = !this.colorPickerVisible
this.colorPickerLocation = {'x':event.clientX, 'y':event.clientY}
},
openEditAttachment(){
// this.$bus.$emit('open_edit_attachment', this.currentNoteId)
this.$router.push('/attachments/note/'+this.currentNoteId)
},
onTogglePinned(){
if(this.pinned == 0){
@@ -161,6 +219,7 @@
}
//Update last note hash, this will tell note to save next update
this.lastNoteHash = 0
this.save()
},
onToggleArchived(){
if(this.archived == 0){
@@ -170,18 +229,14 @@
}
//Update last note hash, this will tell note to save next update
this.lastNoteHash = 0
this.save()
},
onChangeColor(event){
//Grab the color of the button clicked
const style = getComputedStyle(event.target)
this.color = style['background-color']
this.fontColor = '#FFF'
onChangeColor(newStyleObject){
//If background is white, default to colors in CSS
if(this.color == "rgb(255, 255, 255)" || this.color == '#FFF'){
this.color = null
this.fontColor = null
}
//Set new style object for note, page will use some styles, styles will be saved to database
this.styleObject = newStyleObject
this.setEditorTextColor()
this.lastNoteHash = 0 //Update hash to force note update on next save
this.save()
@@ -190,45 +245,34 @@
let vm = this
let doing = ['Loading','Loading','Getting','Fetching','Grabbing','Sequencing','Organizing','Untangling','Processing','Refining','Extracting','Fusing','Pruning','Expanding','Enlarging','Transfiguring','Quantizing','Ingratiating']
let doing = ['Loading','Loading','Getting','Fetching','Grabbing','Sequencing','Organizing','Untangling','Processing','Refining','Extracting','Fusing','Pruning','Expanding','Enlarging','Transfiguring','Quantizing','Ingratiating','Lumping']
let thing = ['Note','Note','Note','Note','Data','Text','Document','Algorithm','Buffer','Client','Download','File','Frame','Graphics','Hardware','HTML','Interface','Logic','Mainframe','Memory','Media','Nodes','Network','Chaos']
let p1 = doing[Math.floor(Math.random() * doing.length)]
let p2 = thing[Math.floor(Math.random() * thing.length)]
vm.loadingMessage = p1 + ' ' + p2
//Component is activated with NoteId in place, lookup text with associated ID
if(this.$store.getters.getLoggedIn){
axios.post('/api/note/get', {'noteId': noteId})
.then(response => {
vm.loading = false
//Set up local data
vm.currentNoteId = noteId
vm.noteText = response.data.text
vm.updated = response.data.updated
vm.lastNoteHash = vm.hashString(response.data.text)
vm.color = response.data.color
if(response.data.color){
vm.styleObject = JSON.parse(response.data.color) //Load styles json from DB
}
if(response.data.pinned != null){
vm.pinned = response.data.pinned
}
vm.archived = response.data.archived
vm.attachmentCount = response.data.attachment_count
this.fontColor = '#FFF'
if(this.color == "rgb(255, 255, 255)" || this.color == '#FFF' || this.color == null){
this.color = null
this.fontColor = null
}
if(response.data.raw_input == 1){
this.fancyInput = 1
}
//Put focus on note, at the end of the note text
vm.$nextTick(() => {
// vm.$refs['custom-input'].focus()
this.initTinyMce()
})
})
@@ -236,79 +280,53 @@
console.log('Could not fetch note')
}
},
onReady(editor){
let vm = this
// Insert the toolbar before the editable area.
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
editor.editing.view.focus()
// const editor = this.editor;
const view = editor.editing.view;
const viewDocument = view.document;
//Insert 5 spaces when tab is pressed
viewDocument.on( 'keyup', ( evt, data ) => {
vm.onKeyup(event)
//Optional data bindings for tab key
if( (data.keyCode == 9) && viewDocument.isFocused ){
//Insert 5 spaces to simulate tab
//editor.execute( 'input', { text: " " } );
evt.stop(); // Prevent executing the default handler.
data.preventDefault();
view.scrollToTheSelection();
}
} );
},
//Used by simple editor
onKeyup(){
let vm = this
vm.statusText = 'Modified'
this.statusText = 'Modified'
//Each note, save after 5 seconds, focus lost or 30 characters typed.
clearTimeout(vm.editDebounce)
vm.editDebounce = setTimeout(() => {
vm.save()
clearTimeout(this.editDebounce)
this.editDebounce = setTimeout(() => {
this.save()
}, 5000)
//Save after 30 keystrokes
vm.keyPressesCounter = (vm.keyPressesCounter + 1)
if(vm.keyPressesCounter > 30){
vm.keyPressesCounter = 0
vm.save()
this.keyPressesCounter = (this.keyPressesCounter + 1)
if(this.keyPressesCounter > 30){
this.keyPressesCounter = 0
this.save()
}
},
save(){
return new Promise((resolve, reject) => {
//Clear other debounced events to prevent double calling of save
clearTimeout(this.editDebounce)
//Don't save note if its hash doesn't change
if( this.lastNoteHash == this.hashString(this.noteText) ){
resolve(false)
return
const currentNoteText = this.getText()
if( this.lastNoteHash == this.hashString( currentNoteText )){
return resolve(true)
}
//If user accidentally clears note, it won't delete it
if(currentNoteText == ''){
this.statusText = 'Empty'
console.log('Prevented from saving empty note.')
return resolve(true)
}
const postData = {
'noteId':this.currentNoteId,
'text': this.noteText,
'fancyInput': this.fancyInput,
'color': this.color,
'text': currentNoteText,
'color': JSON.stringify(this.styleObject), //Save little json color object
'pinned': this.pinned,
'archived':this.archived,
}
let vm = this
//Only save every 1 second
clearTimeout(this.saveDebounce)
this.saveDebounce = setTimeout(() => {
//Debounce save to prevent spamming
// clearTimeout(this.saveDebounce)
// this.saveDebounce = setTimeout(() => {
//Only notify user if saving - may help with debugging in the future
vm.statusText = 'Saving'
axios.post('/api/note/update', postData).then( response => {
@@ -316,39 +334,44 @@
vm.updated = Math.round((+new Date)/1000)
//Update last saved note hash
vm.lastNoteHash = vm.hashString(vm.noteText)
resolve(true)
return
vm.lastNoteHash = vm.hashString( currentNoteText )
return resolve(true)
})
}, 300)
// }, 300)
})
},
hashString(text){
var hash = 0;
if (text.length == 0) {
return hash;
}
//Simplified for speed
return text.length
for (let i = 0; i < text.length; i++) {
let char = text.charCodeAt(i);
hash = ((hash<<5)-hash)+char;
hash = hash & hash; // Convert to 32bit integer
}
return hash;
},
close(){
this.sizeDown = true
// this.loading = true
// this.loadingMessage = 'Save and Close'
this.save().then( result => {
//Save has a 300 ms timeout, if it saves animation will complete
if(result){
this.sizeDown = true
//This timeout allows animation to play before closing
setTimeout(() => {
this.$bus.$emit('close_active_note', this.position)
return
} else {
//If save is not called, set timeout manually and then close after animation
setTimeout(() => {
this.$bus.$emit('close_active_note', this.position)
}, 300)
}
}, 300)
})
}
@@ -357,24 +380,20 @@
</script>
<style type="text/css" scoped>
.no-flow {
overflow: hidden;
}
.raw-edit {
font-family: 'Open Sans' !important;
font-size: 1.3rem !important;
background: rgba(0,0,0,0);
width: 100%;
resize: none;
padding: 15px;
border: 1px solid;
}
.note-top-menu {
width: 100%;
display: inline-block;
height: 37px;
border-left: 3px solid var(--border_color);
}
.note-top-menu .ui.basic.button {
border-radius: 0;
border: none;
border-right: 1px solid var(--border_color);
margin: 0px -2px;
padding-left: 15px;
padding-right: 15px;
}
/* container styles change based on mobile and number of open screens */
@@ -386,17 +405,18 @@
height: 100vh;
box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
z-index: 1001;
/*overflow-x: scroll;*/
}
.loading-note {
position: absolute;
top: 38px;
top: 0;
left: 0;
right: 0;
bottom: 50px;
bottom: 0;
}
/* One note open, in the middle of the screen */
.master-note-edit.position-0 {
left: 30%;
left: 50%;
right: 0;
}
@media only screen and (max-width: 740px) {
@@ -424,12 +444,14 @@
@keyframes size-down {
0% {
opacity: 1;
/*opacity: 1;*/
/*top: 0;*/
top: 0;
}
100% {
opacity: 0;
top: 30vh;
/*opacity: 0;*/
/*top: 30vh;*/
top: 150vh;
}
}

2
client/src/components/NoteTagEdit.vue
View File

@@ -162,7 +162,7 @@
}
let postData = {
'tagText':this.newTagInput,
'tagText':this.newTagInput.trim(),
'noteId':this.noteId
}
let vm = this

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

@@ -1,67 +1,59 @@
<template>
<div class="note-title-display-card fade-in-fwd"
:style="{'background-color':color, 'color':fontColor}"
<div class="note-title-display-card"
:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
:class="{'currently-open':currentlyOpen}"
>
<!-- fade-in-fwd -->
<div v-if="noteIcon" class="badge">
<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
</div>
<div class="ui grid max-height">
<!-- Show title and snippet below it -->
<div class="top aligned row" @click.stop="onClick(note.id)">
<div class="sixteen wide column overflow-hidden" v-if="isShowingSearchResults()">
<!-- Display highlights from solr results -->
<div v-if="note.note_highlights.length > 0" class="term-usage">
<h4><i class="paragraph icon"></i> Found in Text</h4>
<div class="usage-row" v-for="highlight in note.note_highlights" v-html="cleanHighlight(highlight)"></div>
</div>
<div v-if="note.attachment_highlights.length > 0" class="term-usage">
<h4><i class="linkify icon"></i> Found in URL</h4>
<div class="usage-row" v-for="highlight in note.attachment_highlights" v-html="cleanHighlight(highlight)"></div>
</div>
<div v-if="note.tag_highlights.length > 0" class="term-usage">
<h4><i class="tags icon"></i> Found in Tags</h4>
<div class="usage-row" v-for="highlight in note.tag_highlights">
<span
v-for="tag in splitTags(highlight)"
class="ui label"
>
<span v-html="tag"></span>
</span>
</div>
</div>
</div>
<div class="sixteen wide column overflow-hidden">
<h3 class="clickable">{{note.title}}</h3>
<p v-if="!isShowingSearchResults()" class="clickable">{{note.subtext}}</p>
<!-- Display highlights from solr results -->
<div v-if="note.note_highlights.length > 0 && textResults" class="term-usage">
<div class="usage-row" v-for="highlight in note.note_highlights" v-html="cleanHighlight(highlight)"></div>
</div>
</div>
<div class="sixteen wide column overflow-hidden">
<p class="clickable">{{note.subtext}}</p>
</div>
<!-- <div class="sixteen wide column overflow-hidden" v-if="isShowingSearchResults()">
</div> -->
</div>
<div class="bottom aligned row" @click.self.stop="onClick(note.id)">
<!-- Toolbar on the bottom -->
<div class="bottom aligned row icon-bar" @click.self.stop="onClick(note.id)">
<div class="six wide column clickable" @click.stop="onClick(note.id)">
{{$helpers.timeAgo(note.updated)}}
{{$helpers.timeAgo(note.updated)}}
<!-- {{(note.chars.toLocaleString())}} -->
</div>
<div class="ten wide right aligned column split-spans">
<span v-if="note.pinned == 1" data-tooltip="Pinned">
<delete-button class="hover-hide" :note-id="note.id" />
<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-tooltip="Archived">
<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">
<span v-if="note.attachment_count > 0" v-on:click.stop="openEditAttachment">
<i class="linkify icon"></i> {{note.attachment_count}}
</span>
<span v-if="note.tag_count == 1" data-tooltip="Note has 1 tag">
<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`">
<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>
<delete-button :note-id="note.id" />
</div>
</div>
@@ -73,7 +65,7 @@
export default {
name: 'NoteTitleDisplayCard',
props: [ 'onClick', 'data', 'currentlyOpen' ],
props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults' ],
components: {
'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
},
@@ -93,37 +85,70 @@
},
splitTags(text){
return text.split(',')
}
},
openEditAttachment(){
this.$router.push('/attachments/note/'+this.note.id)
// this.$bus.$emit('open_edit_attachment', this.note.id)
},
},
data () {
return {
note: null,
color: null, //'#FFF',
fontColor: null, //'#000'
color: null,
fontColor: null,
noteIcon: null,
iconColor: null,
}
},
beforeMount(){
this.note = this.data
if(this.note.color != null && this.note.color != '#FFF'){
this.color = this.note.color
this.fontColor = '#FFF'
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">
.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-bottom: 10px;
/*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;
@@ -133,22 +158,44 @@
.note-title-display-card {
position: relative;
box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
margin: 0 15px 15px 0;
padding: 1em;
/*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;
border-radius: .28571429rem;
border: 1px solid;
border-color: var(--border_color);
width: calc(33.333% - 15px);
width: calc(33.333% - 10px);
transition: box-shadow 0.3s;
box-sizing: border-box;
cursor: pointer;
line-height: 1.8rem;
letter-spacing: 0.02rem;
}
.note-title-display-card:hover {
box-shadow: 0 1px 2px -0 rgba(34,36,38,.50);
/*box-shadow: 0 3px 6px -0 rgba(34,36,38,.50);*/
box-shadow: 0 0px 5px 1px rgba(34,36,38,0.3);
}
.icon-bar {
opacity: 0.8;
}
.hover-hide {
opacity: 0.0;
}
.note-title-display-card:hover .icon-bar {
opacity: 1;
}
.note-title-display-card:hover .hover-hide {
opacity: 1;
}
.one-column .note-title-display-card {
margin-right: 65%;
width: 33%;
/*margin-right: 65%;*/
/*width: 33%;*/
width: 100%;
}
.overflow-hidden {
overflow: hidden;
@@ -162,6 +209,7 @@
.currently-open:after {
content: 'Open';
position: absolute;
cursor: default;
top: 0;
bottom: 0;
left: 0;
@@ -176,10 +224,18 @@
font-size: 3rem;
}
.badge {
position: absolute;
top: 7px;
right: 6px;
}
/* Tweak mobile display to show only one column */
@media only screen and (max-width: 740px) {
.note-title-display-card {
width: 100%;
margin: 15px 0 0 0;
width: calc(100% + 10px);
margin: 0px -5px 10px -5px;
padding: 15px;
}
}
</style>