Compare commits

...

2 Commits

Author SHA1 Message Date
Lukáš Kucharczyk e3d6d0c379 Fix assigning note IDs. 2020-08-25 22:46:25 +02:00
Lukáš Kucharczyk 41c0cbf7d2 Improve styles. 2020-08-25 22:45:44 +02:00
2 changed files with 66 additions and 18 deletions

View File

@ -22,8 +22,52 @@ export default {
</script> </script>
<style> <style>
:root {
--text-color: #003049;
--secondary-text-color: #eae2b7;
--theme-color: #003049;
--background-color: #eae2b7;
--secondary-background: #d62828;
background-color: var(--background-color);
color: var(--text-color);
}
* { * {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
} }
.shortcuthelp {
position: absolute;
right: 0;
top: 0;
color: var(--background-color);
background-color: var(--theme-color);
padding: 0.5rem;
margin: 1rem 1rem 0 0;
}
@media (max-width: 450px) {
.shortcuthelp {
display: none;
}
}
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
color: var(--background-color);
}
kbd {
background-color: var(--secondary-background);
color: var(--secondary-text-color);
display: inline-block;
padding: 0.1rem;
margin: 0.1rem 0.5rem;
}
</style> </style>

View File

@ -32,7 +32,7 @@ export default {
}, },
methods: { methods: {
addNote() { addNote() {
this.notes.push({ id: this.notes.length + 1, text: this.content }) this.notes.push({ id: this.notes.length, text: this.content })
this.content = '' this.content = ''
} }
}, },
@ -86,34 +86,38 @@ export default {
</script> </script>
<style scoped> <style scoped>
@media (min-width: 575px) {
.note {
width: 550px;
}
}
textarea { textarea {
width: 100%; width: 100%;
border-width: 0 0 1px 0; border-width: 0 0 0.1rem 0;
border-color: black; border-color: var(--theme-color);
resize: none; resize: none;
background-color: var(--background-color);
margin-bottom: 1rem;
} }
.note { .note {
border-width: 1px; padding: 0.5rem;
padding: 5px; margin-bottom: 0.5rem;
margin-bottom: 5px; border: 0.1rem solid transparent;
max-width: 550px;
} }
.selected { .selected {
border-style: dashed; border: 0.1rem dashed var(--theme-color);
border-width: 1px;
} }
.noteid { .noteid {
background-color: slateblue; background-color: var(--theme-color);
color: white; color: var(--secondary-text-color);
border-radius: 5px; padding: 0 0.5rem;
margin-right: 5px; display: inline-block;
margin-bottom: 2px; width: 5rem;
padding: 1px 15px; margin-right: 0.5rem;
font-size: 0.7rem;
display: block;
width: 15px;
font-family: monospace;
} }
</style> </style>