[Update] Finishing touches for 1.0.0

Author: TacoConKvass

src/app.rs

@@ -174,28 +174,30 @@ pub fn Content() -> impl IntoView {
                     if let Ok(serde_json::Value::Object(mod_obj)) = serde_json::from_str(&element) {
                         if let (Some(name), Some(author), Some(version)) = (mod_obj["Name"].as_str(), mod_obj["Author"].as_str(), mod_obj["Version"].as_str()) {
                             let id = name.to_string();
+                            let id2 = name.to_string();
                             out.push(view! {
-                                <article>
+                                <button
+                                    on:click=move |_| {
+                                        if disabled.get_untracked().contains(&id2){
+                                            set_disabled.write().remove(&id2);
+                                            set_enabled.write().insert(id2.clone());
+                                        }
+                                        else {
+                                            set_disabled.write().insert(id2.clone());
+                                            set_enabled.write().remove(&id2);
+                                        }
+                                    }
+                                >
                                     <p class="mod_name"> { name.to_string() } </p>
                                     <p class="mod_version"> v{ version.to_string() } </p>
                                     <p class="mod_author"> { author.to_string() } </p>
-                                    <div class="mod_enabled">
+                                    <div class="mod_enabled" >
                                         <input 
                                             type="checkbox" 
                                             checked={ enabled.get().contains(&id) }
-                                            on:click=move |_| {
-                                                if disabled.get_untracked().contains(&id){
-                                                    set_disabled.write().remove(&id);
-                                                    set_enabled.write().insert(id.clone());
-                                                }
-                                                else {
-                                                    set_disabled.write().insert(id.clone());
-                                                    set_enabled.write().remove(&id);
-                                                }
-                                            }
                                         />
                                     </div>
-                                </article>
+                                </button>
                             });
                         }
                     }

styles.css

@@ -19,6 +19,8 @@ html {
     height: auto;
 
     padding: 0px;
+
+    overflow: hidden;
 }
 
 body {
@@ -45,6 +47,9 @@ body {
     justify-content: space-between;
     align-items: center;
 
+    height: 30px;
+    position: sticky;
+
     button {
         color: var(--text);
         background-color: transparent;
@@ -70,40 +75,41 @@ body {
 .container {
     display: flex;
     flex-direction: column;
-    height: 100%;
-    justify-content: flex-end;
+    height: calc(100% - 50px);
 }
 
 #modlist_header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    width: 100%;
-    min-width: 475px;
+    min-width: 450px;
     padding: 8px 0px 8px 10px;
+    color: var(--text);
 
     p:not(.mod_enabled):not(.mod_version) { 
         margin: 0; 
         width: 20%; 
         min-width: 150px;
-        color: var(--text);
     }
 }
 
 #modlist {
-    color: var(--text);
+    display: flex;
+    flex-direction: column;
     overflow: auto;
     overflow-x: clip;
-    flex-grow: 1;
+    height: calc(100% - 45px);
 
-    article {
+    button {
         background-color: var(--background-quarter);
+        color: var(--text);
+        text-align: left;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         margin: 2px 0px;
-        width: 100%;
-        min-width: 475px;
+        min-width: 450px;
+        border-width: 0px;
         border-radius: 5px;
         padding: 8px 0px 8px 10px;
 
@@ -113,6 +119,10 @@ body {
             min-width: 150px;
         }
     }
+
+    button:hover {
+        background-color: var(--background-light);
+    }
 }
 
 .mod_enabled, .mod_version {
@@ -123,13 +133,21 @@ body {
     display: flex;
 }
 
+.mod_enabled > input[type="checkbox"] {
+    accent-color: blue;
+}
+
 #launchbar {
     width: 100%;
     background-color: var(--background-semi);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-evenly;
+    height: 30px;
+    position: fixed;
+    top: calc(100% - 40px);
+    left: 0px;
 }
 
 #rl2_path {