Skip to content

Commit 95d7ca9

Browse files
committed
[Update] Finishing touches for 1.0.0
1 parent f596e26 commit 95d7ca9

File tree

2 files changed

+43
-23
lines changed

2 files changed

+43
-23
lines changed

src/app.rs

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -174,28 +174,30 @@ pub fn Content() -> impl IntoView {
174174
if let Ok(serde_json::Value::Object(mod_obj)) = serde_json::from_str(&element) {
175175
if let (Some(name), Some(author), Some(version)) = (mod_obj["Name"].as_str(), mod_obj["Author"].as_str(), mod_obj["Version"].as_str()) {
176176
let id = name.to_string();
177+
let id2 = name.to_string();
177178
out.push(view! {
178-
<article>
179+
<button
180+
on:click=move |_| {
181+
if disabled.get_untracked().contains(&id2){
182+
set_disabled.write().remove(&id2);
183+
set_enabled.write().insert(id2.clone());
184+
}
185+
else {
186+
set_disabled.write().insert(id2.clone());
187+
set_enabled.write().remove(&id2);
188+
}
189+
}
190+
>
179191
<p class="mod_name"> { name.to_string() } </p>
180192
<p class="mod_version"> v{ version.to_string() } </p>
181193
<p class="mod_author"> { author.to_string() } </p>
182-
<div class="mod_enabled">
194+
<div class="mod_enabled" >
183195
<input
184196
type="checkbox"
185197
checked={ enabled.get().contains(&id) }
186-
on:click=move |_| {
187-
if disabled.get_untracked().contains(&id){
188-
set_disabled.write().remove(&id);
189-
set_enabled.write().insert(id.clone());
190-
}
191-
else {
192-
set_disabled.write().insert(id.clone());
193-
set_enabled.write().remove(&id);
194-
}
195-
}
196198
/>
197199
</div>
198-
</article>
200+
</button>
199201
});
200202
}
201203
}

styles.css

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ html {
1919
height: auto;
2020

2121
padding: 0px;
22+
23+
overflow: hidden;
2224
}
2325

2426
body {
@@ -45,6 +47,9 @@ body {
4547
justify-content: space-between;
4648
align-items: center;
4749

50+
height: 30px;
51+
position: sticky;
52+
4853
button {
4954
color: var(--text);
5055
background-color: transparent;
@@ -70,40 +75,41 @@ body {
7075
.container {
7176
display: flex;
7277
flex-direction: column;
73-
height: 100%;
74-
justify-content: flex-end;
78+
height: calc(100% - 50px);
7579
}
7680

7781
#modlist_header {
7882
display: flex;
7983
flex-direction: row;
8084
justify-content: space-between;
81-
width: 100%;
82-
min-width: 475px;
85+
min-width: 450px;
8386
padding: 8px 0px 8px 10px;
87+
color: var(--text);
8488

8589
p:not(.mod_enabled):not(.mod_version) {
8690
margin: 0;
8791
width: 20%;
8892
min-width: 150px;
89-
color: var(--text);
9093
}
9194
}
9295

9396
#modlist {
94-
color: var(--text);
97+
display: flex;
98+
flex-direction: column;
9599
overflow: auto;
96100
overflow-x: clip;
97-
flex-grow: 1;
101+
height: calc(100% - 45px);
98102

99-
article {
103+
button {
100104
background-color: var(--background-quarter);
105+
color: var(--text);
106+
text-align: left;
101107
display: flex;
102108
flex-direction: row;
103109
justify-content: space-between;
104110
margin: 2px 0px;
105-
width: 100%;
106-
min-width: 475px;
111+
min-width: 450px;
112+
border-width: 0px;
107113
border-radius: 5px;
108114
padding: 8px 0px 8px 10px;
109115

@@ -113,6 +119,10 @@ body {
113119
min-width: 150px;
114120
}
115121
}
122+
123+
button:hover {
124+
background-color: var(--background-light);
125+
}
116126
}
117127

118128
.mod_enabled, .mod_version {
@@ -123,13 +133,21 @@ body {
123133
display: flex;
124134
}
125135

136+
.mod_enabled > input[type="checkbox"] {
137+
accent-color: blue;
138+
}
139+
126140
#launchbar {
127141
width: 100%;
128142
background-color: var(--background-semi);
129143
display: flex;
130144
flex-direction: row;
131145
align-items: center;
132146
justify-content: space-evenly;
147+
height: 30px;
148+
position: fixed;
149+
top: calc(100% - 40px);
150+
left: 0px;
133151
}
134152

135153
#rl2_path {

0 commit comments

Comments
 (0)