Updated dioxus version and lots of css changes
parent
6fff9e4450
commit
c8b87b88b5
|
|
@ -7,7 +7,7 @@ edition = "2021"
|
|||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
dioxus = { version = "0.6.0", features = [] }
|
||||
dioxus = { version = "0.6.3", features = [] }
|
||||
toml = { version = "0.8" }
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
rand = { version = "0.9" }
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 130 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 23 KiB |
130
assets/main.css
130
assets/main.css
|
|
@ -3,88 +3,70 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: #0f1116;
|
||||
color: #ffffff;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #0f1116;
|
||||
color: #ffffff;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 24px;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 24px;
|
||||
user-select: none;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
box-sizing: border-box;
|
||||
border: solid 2px unset;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
box-sizing: border-box;
|
||||
border: solid 2px unset;
|
||||
|
||||
&.selected {
|
||||
border: solid 2px goldenrod;
|
||||
}
|
||||
&.selected {
|
||||
border: solid 2px goldenrod;
|
||||
}
|
||||
|
||||
&:hover:not(.selected) {
|
||||
border: solid 1px gray;
|
||||
}
|
||||
&:hover:not(.selected) {
|
||||
border: solid 1px gray;
|
||||
}
|
||||
|
||||
> input[type="checkbox"] {
|
||||
display: none;
|
||||
scale: 1.5;
|
||||
margin-right: 10px;
|
||||
}
|
||||
> input[type="checkbox"] {
|
||||
display: none;
|
||||
scale: 1.5;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> label {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
> label {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
> input[type="submit"] {
|
||||
margin-top: 40px;
|
||||
height: 70px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 42px;
|
||||
&:hover,
|
||||
> *:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
font-size: 48px;
|
||||
color: goldenrod;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#links {
|
||||
width: 400px;
|
||||
text-align: left;
|
||||
font-size: x-large;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#links a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin-top: 20px;
|
||||
margin: 10px 0px;
|
||||
border: white 1px solid;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#links a:hover {
|
||||
background-color: #1f1f1f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#header {
|
||||
max-width: 1200px;
|
||||
> input[type="submit"] {
|
||||
margin-top: 40px;
|
||||
height: 70px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 42px;
|
||||
|
||||
&:hover {
|
||||
font-size: 48px;
|
||||
color: goldenrod;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
39
src/main.rs
39
src/main.rs
|
|
@ -1,19 +1,21 @@
|
|||
use std::{
|
||||
collections::HashMap,
|
||||
ops::{Deref, DerefMut},
|
||||
sync::LazyLock,
|
||||
};
|
||||
|
||||
use dioxus::prelude::*;
|
||||
use dioxus::{
|
||||
desktop::{Config, WindowBuilder},
|
||||
prelude::*,
|
||||
};
|
||||
use rand::seq::SliceRandom;
|
||||
use serde::Deserialize;
|
||||
|
||||
const FAVICON: Asset = asset!("/assets/favicon.ico");
|
||||
// const FAVICON: Asset = asset!("/assets/favicon.ico");
|
||||
const MAIN_CSS: Asset = asset!("/assets/main.css");
|
||||
const HEADER_SVG: Asset = asset!("/assets/header.svg");
|
||||
// const HEADER_SVG: Asset = asset!("/assets/header.svg");
|
||||
|
||||
#[derive(Debug, Deserialize)]
|
||||
struct Questions {
|
||||
pub struct Questions {
|
||||
questions: Vec<Question>,
|
||||
}
|
||||
|
||||
|
|
@ -32,13 +34,13 @@ impl DerefMut for Questions {
|
|||
}
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Deserialize)]
|
||||
struct Question {
|
||||
pub struct Question {
|
||||
message: String,
|
||||
answers: Vec<Answer>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Deserialize)]
|
||||
struct Answer {
|
||||
pub struct Answer {
|
||||
message: String,
|
||||
|
||||
#[serde(default)]
|
||||
|
|
@ -75,13 +77,21 @@ fn get_questions() -> Vec<Question> {
|
|||
}
|
||||
|
||||
fn main() {
|
||||
dioxus::launch(App);
|
||||
dioxus::LaunchBuilder::new()
|
||||
.with_cfg(
|
||||
Config::default().with_menu(None).with_window(
|
||||
WindowBuilder::new()
|
||||
.with_maximized(true)
|
||||
.with_title("Flashcards"),
|
||||
),
|
||||
)
|
||||
.launch(App)
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "icon", href: FAVICON }
|
||||
// document::Link { rel: "icon", href: FAVICON }
|
||||
document::Link { rel: "stylesheet", href: MAIN_CSS }
|
||||
QuestionPrompt {}
|
||||
}
|
||||
|
|
@ -139,15 +149,12 @@ pub fn QuestionPrompt() -> Element {
|
|||
}
|
||||
}
|
||||
},
|
||||
onkeydown: move |event| {
|
||||
dbg!(event.key());
|
||||
if event.key() == Key::Enter {
|
||||
dbg!("enter pressed");
|
||||
}
|
||||
},
|
||||
|
||||
h1 { "{current().message}" }
|
||||
{ answer_buttons }
|
||||
input { type: "submit" }
|
||||
input {
|
||||
type: "submit",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue