Ready for version 1.1

mvaneijgen · Jan 22, 2024 · 90b04a0 · 90b04a0
1 parent 4e4783e
commit 90b04a0
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 98 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -236,15 +236,16 @@ html {
 body {
   background-color: #19233b;
   color: #fff;
+  touch-action: manipulation;
 }
 
 svg {
-  width: 80vmin;
+  height: 90%;
+  width: 90%;
   cursor: pointer;
 }
 @media screen and (min-width: 999px) {
   svg {
-    width: 50vmin;
     justify-content: space-between;
     align-items: center;
   }
@@ -269,19 +270,22 @@ label {
   display: block;
 }
 
+.alloy-input-flex {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
 .alloy-input-group {
   grid-column: 1/span 1;
   margin-bottom: 15px;
   width: 100%;
 }
 .alloy-input-group label {
   display: block;
-  margin-bottom: 15px;
 }
-.alloy-input-group input {
-  width: 100%;
-  margin-bottom: 30px;
-  padding: 7.5px;
+.alloy-input-group p {
+  font-size: 0.8rem;
 }
 .alloy-input-group [type=color] {
   padding: 0;
@@ -300,6 +304,18 @@ label {
   border: none;
 }
 
+textarea {
+  font-size: 0.8rem;
+}
+
+textarea,
+input {
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 7.5px;
+}
+
 select {
   width: 100%;
   -webkit-appearance: none;
@@ -331,6 +347,10 @@ select {
   transform: scale(1.4);
 }
 
+.description {
+  font-size: 0.8rem;
+}
+
 select {
   padding: 10px 15px;
 }
@@ -354,6 +374,10 @@ ul li {
     flex-direction: row;
   }
 }
+#app > * {
+  overflow-y: auto;
+}
+
 .view {
   width: 100vw;
   display: flex;
@@ -370,7 +394,7 @@ aside {
 @media screen and (min-width: 999px) {
   aside {
     flex-shrink: 0;
-    flex-grow: 1;
+    flex-grow: 0;
     flex-basis: 300px;
   }
 }
@@ -389,7 +413,7 @@ aside > .inner {
 }
 @media screen and (min-width: 999px) {
   aside > .inner {
-    gap: 30px;
+    gap: 20px;
     overflow-y: auto;
     height: 100%;
   }
@@ -402,7 +426,6 @@ aside .controls {
 }
 @media screen and (max-width: 999px) {
   aside .controls {
-    justify-content: center;
     flex-direction: row;
     gap: 3%;
     flex-basis: 100%;
@@ -421,7 +444,7 @@ aside .optionsToggle {
   text-align: left;
 }
 aside .title {
-  margin-bottom: 30px;
+  margin-bottom: 10px;
 }
 aside .title h1 {
   opacity: 0.7;
@@ -484,7 +507,6 @@ form {
 }
 .input label.description {
   display: inline;
-  font-weight: 40;
 }
 .input button {
   width: 49%;
@@ -542,7 +564,6 @@ button {
   font-weight: 700;
   border: 0;
   margin-bottom: 20px;
-  padding: 30px;
 }
 
 .btn-alt {
@@ -568,4 +589,13 @@ button[disabled] {
   background-color: #f53;
   padding: 30px;
   max-width: 500px;
+}
+
+pre {
+  overflow-x: auto;
+  background-color: #19233b;
+  padding: 10px;
+  font-size: 0.8rem;
+  max-width: 100%;
+  width: 240px;
 }/*# sourceMappingURL=style.css.map */
diff --git a/assets/css/style.css.map b/assets/css/style.css.map
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -8,7 +8,6 @@ $brand-two: #f53;
 $brand-light: #fff;
 $brand-dark: #0c162d;
 $brand-dark-light: #19233b;
-
 $brake-point: 999px;
 
 body,
@@ -18,24 +17,23 @@ html {
   @media screen and (max-width: $brake-point) {
     font-size: 24px;
   }
-
-
 }
 
 body {
   background-color: $brand-dark-light;
   color: #fff;
+  touch-action: manipulation;
 }
 
 svg {
-  width: 80vmin;
+  height: 90%;
+  width: 90%;
   cursor: pointer;
 
   @media screen and (min-width: $brake-point) {
-    width: 50vmin;
+    // width: 60vmin;
     justify-content: space-between;
     align-items: center;
-
   }
 }
 
@@ -59,21 +57,26 @@ label {
   display: block;
 }
 
+.alloy-input-flex {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
 .alloy-input-group {
   grid-column: 1 / span 1;
   // padding: $base-margin;
   margin-bottom: $base-margin;
   width: 100%;
 
+
   label {
     display: block;
-    margin-bottom: $base-margin;
+    // margin-bottom: $base-margin;
   }
 
-  input {
-    width: 100%;
-    margin-bottom: $base-margin * 2;
-    padding: $base-margin/2;
+  p {
+    font-size: 0.8rem;
   }
 
   [type="color"] {
@@ -96,6 +99,18 @@ label {
   }
 }
 
+textarea {
+  font-size: 0.8rem;
+}
+
+textarea,
+input {
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: $base-margin/2;
+}
+
 select {
   width: 100%;
   -webkit-appearance: none;
@@ -130,6 +145,11 @@ select {
   }
 }
 
+.description {
+  // font-weight: 40;
+  font-size: 0.8rem;
+}
+
 select {
   padding: 10px 15px;
 }
@@ -154,7 +174,7 @@ ul {
   }
 
   >* {
-    // overflow-y: scroll;
+    overflow-y: auto;
   }
 }
 
@@ -173,7 +193,7 @@ aside {
 
   @media screen and (min-width: $brake-point) {
     flex-shrink: 0;
-    flex-grow: 1;
+    flex-grow: 0;
     flex-basis: 300px;
   }
 
@@ -191,7 +211,7 @@ aside {
     }
 
     @media screen and (min-width: $brake-point) {
-      gap: 30px;
+      gap: 20px;
       overflow-y: auto;
       height: 100%;
     }
@@ -201,12 +221,11 @@ aside {
     position: relative;
     display: flex;
     flex-direction: column;
-
     flex-flow: row wrap;
 
 
     @media screen and (max-width: $brake-point) {
-      justify-content: center;
+      // justify-content: center;
       flex-direction: row;
       gap: 3%;
       flex-basis: 100%;
@@ -230,7 +249,7 @@ aside {
   }
 
   .title {
-    margin-bottom: 30px;
+    margin-bottom: 10px;
 
     // @media screen and (max-width: $brake-point) {
     //   order: 10;
@@ -312,7 +331,6 @@ form {
 
     &.description {
       display: inline;
-      font-weight: 40;
     }
   }
 
@@ -378,7 +396,7 @@ button {
   font-weight: 700;
   border: 0;
   margin-bottom: 20px;
-  padding: 30px;
+  // padding: 30px;
 }
 
 .btn-alt {
@@ -404,4 +422,14 @@ button[disabled] {
   background-color: $brand-two;
   padding: 30px;
   max-width: 500px;
+}
+
+pre {
+  overflow-x: auto;
+  // max-width: 300px;
+  background-color: $brand-dark-light;
+  padding: 10px;
+  font-size: 0.8rem;
+  max-width: 100%;
+  width: 240px;
 }
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -6,7 +6,7 @@ const App = {
     return {
       loading: true,
       title: "Draw something",
-      version: "1.0",
+      version: "1.1",
       url: "",
       size: 10,
       x: 1,
@@ -61,14 +61,7 @@ const App = {
     // Create JSON body for POST
     //--------------------------------//
     json: function () {
-      return `{
-   "on": true,
-   "bri": 128, ${this.setTimer}
-   "v": true,
-   "seg": {
-      "i":[${this.seg}]
-   }
-}`;
+      return `{"on": true,"bri": 128,${this.setTimer} "v": true, "seg": {"i":[${this.seg}]}}`;
     }
     // END Create JSON body for POST --------------//
   },
@@ -171,13 +164,27 @@ const App = {
           this.options = true;
           console.error("Fetch Error:", error);
         });
-    }
+    },
     // END 🐵 Send API request --------------//
+    copy() {
+      const copyText = this.$refs.copy.value;
+      navigator.clipboard.writeText(copyText).then(function () {
+        console.log("Text copied to clipboard: " + copyText);
+      }, function (err) {
+        console.error("Failed to copy text: ", err);
+      });
+    }
   },
   watch: {
     url: function (newData) {
       this.get();
     },
+    x: function (newData) {
+      this.loading = false;
+    },
+    y: function (newData) {
+      this.loading = false;
+    },
     //--------------------------------//
     // 💾 Save everything to local storage
     //--------------------------------//