Add back to wled button

mvaneijgen · Jan 24, 2024 · bdfb3cd · bdfb3cd
1 parent 858662d
commit bdfb3cd
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 4 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -569,6 +569,7 @@ input[type=checkbox] {
   transform: translateY(6px);
 }
 
+.btn,
 button {
   width: 100%;
   padding: 10px;
@@ -581,15 +582,24 @@ button {
   transition-duration: 300ms;
   transition-timing-function: ease;
 }
+.btn:hover,
 button:hover {
   background-color: #0ba;
   color: #0c162d;
 }
 
+.btn {
+  background-color: #0ba;
+  color: #0c162d;
+}
+.btn:hover {
+  background-color: #f53;
+  color: #fff;
+}
+
 .btn-alt {
   background-color: #ccc;
   color: #0c162d;
-  padding: 10px;
 }
 
 button[disabled] {
@@ -618,4 +628,13 @@ pre {
   font-size: 0.8rem;
   max-width: 100%;
   width: 240px;
+}
+
+.back-to-wled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: auto;
+  text-decoration: none;
+  font-size: 14px;
 }/*# 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
@@ -395,6 +395,7 @@ input[type="checkbox"] {
   transform: translateY(6px);
 }
 
+.btn,
 button {
   width: 100%;
   padding: 10px;
@@ -414,10 +415,20 @@ button {
   }
 }
 
+.btn {
+  background-color: $brand-one;
+  color: $brand-dark;
+
+  &:hover {
+    background-color: $brand-two;
+    color: $brand-light;
+  }
+}
+
 .btn-alt {
   background-color: #ccc;
   color: $brand-dark;
-  padding: 10px;
+
 }
 
 button[disabled] {
@@ -447,4 +458,13 @@ pre {
   font-size: 0.8rem;
   max-width: 100%;
   width: 240px;
+}
+
+.back-to-wled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: auto;
+  text-decoration: none;
+  font-size: 14px;
 }
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -9,6 +9,7 @@ const App = {
       version: "1.2",
       // WLED JSON
       url: "",
+      wledUrl: "",
       size: 10,
       x: 16,
       y: 16,
@@ -170,6 +171,9 @@ const App = {
         })
         .then((data) => {
           console.log(data);
+          const url = new URL(this.url);
+          const domain = `${url.protocol}//${url.hostname}`;
+          this.wledUrl = domain;
           this.x = data.info.leds.matrix.w;
           this.y = data.info.leds.matrix.h;
           localStorage.x = this.x;

diff --git a/dist/drawsomething.html b/dist/drawsomething.html
@@ -574,6 +574,7 @@
   transform: translateY(6px);
 }
 
+.btn,
 button {
   width: 100%;
   padding: 10px;
@@ -586,15 +587,24 @@
   transition-duration: 300ms;
   transition-timing-function: ease;
 }
+.btn:hover,
 button:hover {
   background-color: #0ba;
   color: #0c162d;
 }
 
+.btn {
+  background-color: #0ba;
+  color: #0c162d;
+}
+.btn:hover {
+  background-color: #f53;
+  color: #fff;
+}
+
 .btn-alt {
   background-color: #ccc;
   color: #0c162d;
-  padding: 10px;
 }
 
 button[disabled] {
@@ -623,6 +633,15 @@
   font-size: 0.8rem;
   max-width: 100%;
   width: 240px;
+}
+
+.back-to-wled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: auto;
+  text-decoration: none;
+  font-size: 14px;
 }/*# sourceMappingURL=style.css.map */</style>
 	<!-- HTML Meta Tags -->
 <title>WLED Draw Something</title>
@@ -660,6 +679,7 @@ <h1>{{ title }}</h1>
             <h3>Version {{version}}</h3>
             <p v-if="demo" class="description">Demo mode is activated. For the best use of this tool install it in to your WLED controller, see <a href="https://github.com/mvaneijgen/wled-draw-something#use-the-tool">install guide on Github!</a></p>
           </div>
+          <a class="btn btn-two back-to-wled" v-if="wledUrl" :href="wledUrl">⬅ Go back to WLED</a>
           <!-- 🎛️ Controls -->
           <div class="controls">
             <div class="alloy-input-group">
@@ -780,6 +800,7 @@ <h3>We could not fetch your settings at <i>{{url}}</i></h3>
       version: "1.2",
       // WLED JSON
       url: "",
+      wledUrl: "",
       size: 10,
       x: 16,
       y: 16,
@@ -941,6 +962,9 @@ <h3>We could not fetch your settings at <i>{{url}}</i></h3>
         })
         .then((data) => {
           console.log(data);
+          const url = new URL(this.url);
+          const domain = `${url.protocol}//${url.hostname}`;
+          this.wledUrl = domain;
           this.x = data.info.leds.matrix.w;
           this.y = data.info.leds.matrix.h;
           localStorage.x = this.x;

diff --git a/index.html b/index.html
@@ -40,6 +40,7 @@ <h1>{{ title }}</h1>
             <h3>Version {{version}}</h3>
             <p v-if="demo" class="description">Demo mode is activated. For the best use of this tool install it in to your WLED controller, see <a href="https://github.com/mvaneijgen/wled-draw-something#use-the-tool">install guide on Github!</a></p>
           </div>
+          <a class="btn btn-two back-to-wled" v-if="wledUrl" :href="wledUrl">⬅ Go back to WLED</a>
           <!-- 🎛️ Controls -->
           <div class="controls">
             <div class="alloy-input-group">