From f93d0f246607093de1cd59dae1dc4327378b07bc Mon Sep 17 00:00:00 2001
From: Thomas <dev.csnova@gmail.com>
Date: Sat, 9 Apr 2022 18:07:31 -0500
Subject: [PATCH] fixed grid and

---
 src/App.vue                      |  2 +-
 src/assets/grid.svg              | 10 +++++-----
 src/components/RichTextModal.vue |  0
 src/components/TextBox.vue       |  2 +-
 src/pages/Editor.vue             | 10 +++++-----
 5 files changed, 12 insertions(+), 12 deletions(-)
 create mode 100644 src/components/RichTextModal.vue

diff --git a/src/App.vue b/src/App.vue
index 0d84cf4..07e4a36 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,7 @@ import { ref } from "vue";
       </q-tabs>
     </q-header>
 
-    <q-page-container>
+    <q-page-container style="display: flex;padding-top: 20px;">
       <router-view />
     </q-page-container>
   </q-layout>
diff --git a/src/assets/grid.svg b/src/assets/grid.svg
index 70917da..7b35c2d 100644
--- a/src/assets/grid.svg
+++ b/src/assets/grid.svg
@@ -1,11 +1,11 @@
 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
-      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
+    <pattern id="smallGrid" width="25" height="25" patternUnits="userSpaceOnUse">
+      <path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/>
     </pattern>
-    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
-      <rect width="80" height="80" fill="url(#smallGrid)"/>
-      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
+    <pattern id="grid" width="250" height="250" patternUnits="userSpaceOnUse">
+      <rect width="250" height="250" fill="url(#smallGrid)"/>
+      <path d="M 250 0 L 0 0 0 250" fill="none" stroke="gray" stroke-width="1"/>
     </pattern>
   </defs>
       
diff --git a/src/components/RichTextModal.vue b/src/components/RichTextModal.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
index bd61a0f..7d7a2d9 100644
--- a/src/components/TextBox.vue
+++ b/src/components/TextBox.vue
@@ -10,7 +10,7 @@ const props = defineProps({
   <Draggable :grid="[25, 25]">
     <div style="display: flex">
       <q-card flat bordered>
-        <q-card-section>
+        <q-card-section style="padding:0">
           <div class="row items-center no-wrap">
             <q-card-section v-html="props.statement" />
             <div class="col-auto">
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 66ad1a0..9e97186 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -13,7 +13,7 @@ function toggleLeftDrawer() {
   Rich Text Stuff
 */
 
-const richTextStatments = ref([
+const richTextStatements = ref([
   { text: "test" },
   { text: "test2" },
   { text: "test3" },
@@ -23,15 +23,15 @@ const richEditModal = ref(false);
 const richEditExpression = ref("");
 const richEditID = ref(0);
 
-const richEditStatement = (id: int) => {
+const richEditStatement = (id: number) => {
   console.log("editing statement", id, richEditModal);
   richEditModal.value = true;
   richEditID.value = id;
-  richEditExpression.value = richTextStatments.value[richEditID.value].text;
+  richEditExpression.value = richTextStatements.value[richEditID.value].text;
 };
 
 function richUpdateValue() {
-  richTextStatments.value[richEditID.value].text = richEditExpression.value;
+  richTextStatements.value[richEditID.value].text = richEditExpression.value;
 }
 </script>
 
@@ -76,7 +76,7 @@ function richUpdateValue() {
           </q-card-actions>
         </q-card>
       </q-dialog>
-      <span v-for="(item, index) in richTextStatments">
+      <span v-for="(item, index) in richTextStatements">
         <TextBox
           :statement="item.text"
           v-on:edit="() => (item.text ? richEditStatement(index) : {})"