💄 style: additional changes to workflow page

ImDarkTom · Jul 1, 2024 · a839195 · a839195
1 parent 31604fe
commit a839195
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/src/public/css/workflow.css b/src/public/css/workflow.css
@@ -44,15 +44,34 @@
     font-size: var(--input-font-size);
 }
 
-.run-workflow {
+.randomise-input:active {
+    filter: brightness(0.75);
+}
+
+.run-button-wrapper {
     margin-top: 1rem;
-    width: 100%;
     height: 3rem;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 1px;
+    background: linear-gradient(135deg, #910E92, #6962C3);
+    border-radius: 0.5rem;
+}
+
+.run-button-wrapper:active {
+    filter: brightness(0.75);
+}
+
+.run-workflow {
+    width: 100%;
+    height: 100%;
+    margin: 1;
     background-color: var(--background-secondary-color);
     color: var(--text-primary-color);
     border: 0;
     border-radius: 0.5rem;
     font-size: 1.5rem;
+    user-select: none;
 }
 
 .output-images-container {

diff --git a/src/public/js/workflow.js b/src/public/js/workflow.js
@@ -115,6 +115,8 @@ async function renderInput(inputOptions) {
 }
 
 function randomiseInput(inputId) {
+    //navigator.vibrate(10);
+    // implement later with proper settings page
     const input = document.getElementById(inputId);
 
     const min = parseFloat(input.getAttribute('min'));

diff --git a/src/views/pages/workflow.ejs b/src/views/pages/workflow.ejs
@@ -10,7 +10,9 @@
     <div class="main-container">
         <h2 class="category-title">Inputs</h2>
         <div class="inputs-container"></div>
-        <button class="run-workflow" onclick="runWorkflow()">Run workflow</button>
+        <div class="run-button-wrapper">
+            <button class="run-workflow" onclick="runWorkflow()">Run workflow</button>
+        </div>
         <h2 class="category-title">Output</h2>
         <div class="output-images-container"></div>
     </div>