fix lots of GUI bugs + styling a lil

frontend/src/App.vue

@@ -1,8 +1,9 @@
 <template>
     <nav>
         <router-link to="/">Home</router-link> |
-        <router-link to="/about">About</router-link> | 
-        <router-link to="/settings">Settings</router-link>
+        <router-link to="/about">About</router-link>
+         <!-- | 
+        <router-link to="/settings">Settings</router-link> -->
     </nav>
     <router-view v-slot="{ Component, route }">
         <transition :name="route.meta.transition || 'scale'" mode="out-in">

frontend/src/upscalingHandler.js

@@ -32,15 +32,25 @@ class UpscalingHandler {
         
         let args = []
         args.push( '-i' + options.InputFile );
-        args.push( '-o ' + options.OutputFile );
-        
-        args.push( '-s ' + options.scale )
+        args.push( '-o' + options.OutputFile );
         
+        if ( options.scale != 0 ) {
+            args.push( '-s' + options.scale );
+        }
+
+        if ( options.sharpening != 0 ) {
+            args.push( '-S' + options.sharpening );
+        }
+
+        args.push( '-M' + options.algorithm );
+        args.push( '-E' + options.engine );
         // add additional options
         // baseCommand +=  + ' -S ' + options.sharpening
         // baseCommand += ' -E ' + options.engine + ' -M ' + options.algorithm
 
         console.log( 'upscaling' );
+
+        console.log( args );
         
         let child = child_process.spawn( baseCommand, args );
         

frontend/src/views/AboutView.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="about">
-        <img src="@/assets/logo.png">
+        <img src="@/assets/logo.png" style="height: 30vh;">
         <h1>About SimpleMediaUpscalerLite</h1>
         <p>SimpleMediaUpscalerLite is an application that allows you to upscale your videos and / or images. It uses an Electron GUI (Graphical User Interface) and a Python CLI (Command Line Interface).</p>
         <div class="version-info">

frontend/src/views/HomeView.vue

@@ -34,9 +34,21 @@
                 <tr id="group3" class="group">
                     <td>
                         <button @click="runCommand( 'InputFile' )">Input file</button><br>
+                        <div v-if="upscaleSettings.InputFile[ 0 ]" id="inputCheck" @mouseenter="showElement( 'inputfile' )" @mouseleave="hideElement( 'inputfile' )">&#10004;</div>
+                        <div class="info-container">
+                            <div class="info" id="inputfile">
+                                {{ upscaleSettings.InputFile[ 0 ] }}
+                            </div>
+                        </div>
                     </td>
                     <td>
                         <button @click="runCommand( 'OutputFile' )">Output file</button><br>
+                        <div v-if="upscaleSettings.OutputFile" id="outputCheck" @mouseenter="showElement( 'outputfile' )" @mouseleave="hideElement( 'outputfile' )">&#10004;</div>
+                        <div class="info-container">
+                            <div class="info" id="outputfile">
+                                {{ upscaleSettings.OutputFile }}
+                            </div>
+                        </div>
                     </td>
                 </tr>
             </table>
@@ -176,12 +188,35 @@ export default {
             let fileExtension = this.upscaleSettings.InputFile[ 0 ].substring( this.upscaleSettings.InputFile[ 0 ].length - 4 );
             this.upscaleSettings.OutputFile = this.upscaleSettings.OutputFile.slice( 0, this.upscaleSettings.OutputFile[ 0 ].length - 5 ) + fileExtension;
             this.fixed = true;
+        },
+        showElement( element ) {
+            document.getElementById( element ).classList.add( 'shown' );
+        },
+        hideElement( element ) {
+            document.getElementById( element ).classList.remove( 'shown' );
         }
     },
 }
 </script>
 
 <style scoped>
+    .info-container {
+        position: relative;
+    }
+
+    .info {
+        display: none;
+        position: absolute;
+        background-color: var( --dialog-color );
+        padding: 2vw;
+        width: 20vw;
+        height: 20vh;
+        word-wrap: break-word;
+    }
+
+    .shown {
+        display: block;
+    }
     .table-container {
         width: 100%;
         display: flex;
@@ -198,6 +233,7 @@ export default {
         margin-top: 5vh;
         padding: 1vw 2vw;
         margin-bottom: 0;
+        cursor: pointer;
     }
 
     button {

frontend/src/views/SettingsView.vue

@@ -1,9 +1,7 @@
 <template>
     <div class="about">
         <h1>Settings</h1>
-        <h3>Engines</h3>
         <p>WIP!</p>
-        <p>{{ engines }}</p>
     </div>
 </template>