diff --git a/assets/css/style.css b/assets/css/style.css index 5ed4b47..1741022 100644 --- 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,6 +270,12 @@ label { display: block; } +.alloy-input-flex { + display: flex; + justify-content: center; + gap: 10px; +} + .alloy-input-group { grid-column: 1/span 1; margin-bottom: 15px; @@ -276,12 +283,9 @@ label { } .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 */ \ No newline at end of file diff --git a/assets/css/style.css.map b/assets/css/style.css.map index 601fdf7..89b60e5 100644 --- a/assets/css/style.css.map +++ b/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["_reset.scss","style.css","style.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["_reset.scss","style.css","style.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index 842b4a4..8c3bd34 100755 --- 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; } \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 1733a77..d131ab7 100755 --- 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 //--------------------------------// diff --git a/dist/drawsomething.html b/dist/drawsomething.html index 2d1111e..456fc15 100644 --- a/dist/drawsomething.html +++ b/dist/drawsomething.html @@ -241,15 +241,16 @@ 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; } @@ -274,6 +275,12 @@ display: block; } +.alloy-input-flex { + display: flex; + justify-content: center; + gap: 10px; +} + .alloy-input-group { grid-column: 1/span 1; margin-bottom: 15px; @@ -281,12 +288,9 @@ } .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; @@ -305,6 +309,18 @@ 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; @@ -336,6 +352,10 @@ transform: scale(1.4); } +.description { + font-size: 0.8rem; +} + select { padding: 10px 15px; } @@ -359,6 +379,10 @@ flex-direction: row; } } +#app > * { + overflow-y: auto; +} + .view { width: 100vw; display: flex; @@ -375,7 +399,7 @@ @media screen and (min-width: 999px) { aside { flex-shrink: 0; - flex-grow: 1; + flex-grow: 0; flex-basis: 300px; } } @@ -394,7 +418,7 @@ } @media screen and (min-width: 999px) { aside > .inner { - gap: 30px; + gap: 20px; overflow-y: auto; height: 100%; } @@ -407,7 +431,6 @@ } @media screen and (max-width: 999px) { aside .controls { - justify-content: center; flex-direction: row; gap: 3%; flex-basis: 100%; @@ -426,7 +449,7 @@ text-align: left; } aside .title { - margin-bottom: 30px; + margin-bottom: 10px; } aside .title h1 { opacity: 0.7; @@ -489,7 +512,6 @@ } .input label.description { display: inline; - font-weight: 40; } .input button { width: 49%; @@ -547,7 +569,6 @@ font-weight: 700; border: 0; margin-bottom: 20px; - padding: 30px; } .btn-alt { @@ -573,6 +594,15 @@ 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 */ @@ -602,28 +632,53 @@

Version {{version}}

-
- +
+ +
+ -
- - +
+ +
+ + +
+
+
+ +
-
- - + +
+ + +
+ +

Set a nightlight timer to {{timer}} + mintues. If zero no timer + would be set

+ +
+
+ +

Save preset manually

+ 
{{json}}
+ +
- - -