And then we make it look nice

fantasycalendar · Jul 19, 2024 · f0eb63a · f0eb63a
1 parent fde860c
commit f0eb63a
Show file tree

Hide file tree

Showing 7 changed files with 292 additions and 38 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -304,7 +304,10 @@ import Quill from 'quill';
 Alpine.data('rich_editor', () => ({
     value: '',
     init() {
-        let quill = new Quill(this.$refs.quill, { theme: 'snow' })
+        let quill = new Quill(this.$refs.quill, {
+            theme: 'snow',
+            placeholder: 'Compose an epic...',
+        })
 
         quill.root.innerHTML = this.value
 

diff --git a/resources/js/calendar-events-viewer.js b/resources/js/calendar-events-viewer.js
@@ -132,7 +132,13 @@ export default () => ({
         this.cancel_edit_comment();
         comment.editing = true;
 
-        this.event_editor = new Quill(document.querySelector(`#comment-editor-${comment.index} > div`), { theme: 'snow' });
+        this.event_editor = new Quill(
+            document.querySelector(`#comment-editor-${comment.index} > div`),
+            {
+                theme: 'snow',
+                placeholder: 'Compose an epic...',
+            },
+        );
 
         this.event_editor.root.innerHTML = comment.content;
 

diff --git a/resources/sass/calendar/_variables-dark.scss b/resources/sass/calendar/_variables-dark.scss
@@ -80,3 +80,11 @@ $m-current-day: #fdb44d;
 // SVG image data
 $disabled-crosshatch: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23111827' fill-opacity='0.3' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
 $warning-crosshatch: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e3342f' fill-opacity='0.3' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
+
+:root {
+    --stroke-colour: white;
+    --fill-colour: white;
+    --picker-label-colour: white;
+    --editor-placeholder-colour: rgb(107 114 128);
+    --border-color: rgb(31 41 55);
+}
diff --git a/resources/sass/calendar/_variables.scss b/resources/sass/calendar/_variables.scss
@@ -72,3 +72,11 @@ $m-current-day: #fdb44d;
 // SVG image data
 $disabled-crosshatch: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40L40 0H20L0 20m40 20V20L20 40' fill='%23f9f9fa' fill-rule='evenodd'/%3E%3C/svg%3E");
 $warning-crosshatch: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40L40 0H20L0 20m40 20V20L20 40' fill-opacity='0.3' fill='%23e3342f' fill-rule='evenodd'/%3E%3C/svg%3E");
+
+:root {
+    --stroke-colour: $modal-content-border-color;
+    --fill-colour: $modal-content-border-color;
+    --picker-label-colour: $modal-content-border-color;
+    --editor-placeholder-colour: $modal-content-border-color;
+    --border-color: rgb(31 41 55);
+}
diff --git a/resources/sass/calendar/inputs.scss b/resources/sass/calendar/inputs.scss
@@ -889,12 +889,26 @@ input[type="number"]:not(.spinner) {
     display: flex;
     flex-direction: column;
     width: 100%;
+    margin-bottom: 10px;
 }
 
 .event_comment {
-    margin-bottom: 0.5em;
-    padding: 1rem;
-    border: 1px solid $calendar-border-color;
+    padding: 8px;
+    border: 1px solid $modal-content-bg-color;
+}
+
+.event_comment:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.event_comment:last-child {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+
+.event_comment:not(:last-child) {
+    margin-bottom: -1px;
 }
 
 .event_comment.calendar_owner .username {
@@ -917,7 +931,7 @@ input[type="number"]:not(.spinner) {
     margin: 0;
     padding: 0;
     line-height: 1.2rem;
-    font-size: 1.1rem;
+    font-size: 0.9rem;
 }
 
 .event_comment .username {
@@ -931,7 +945,8 @@ input[type="number"]:not(.spinner) {
     font-size: 0.7rem;
 }
 
-body .event_comment .comment_context_btn:not(:hover) {
+body .event_comment .calendar_action {
+    padding: 0.2px !important;
     background-color: transparent !important;
     border: none !important;
 }