savanni/monorepo
1
0
Fork 0
Code Issues 102 Pull Requests Actions Projects 6 Releases Wiki Activity

Clean up the inline CSS
All checks were successful
Monorepo build / build-flake (push) Successful in 3s
Details

Browse Source
This commit was merged in pull request #331.
This commit is contained in:
Savanni D'Gerinel
2025-07-11 16:59:39 -04:00
parent 15850ddf6b
commit a52b49edc0
11 changed files with 73 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
visions/ui/src/components/background.rs
View File

@@ -10,14 +10,13 @@ pub struct BackgroundImageProps {
#[function_component]
pub fn BackgroundImage(BackgroundImageProps { url }: &BackgroundImageProps) -> Html {
let styles = Style::new(css!(
let styles = css!(
r#"
width: 100vw;
height: 100vh;
filter: brightness(50%);
"#
))
.unwrap();
);
if let Some(ref url) = *url {
html! {

5
visions/ui/src/components/card.rs
View File

@@ -26,7 +26,7 @@ pub fn Card(
children,
}: &CardProps,
) -> Html {
let styles = Style::new(css!(
let styles = css!(
display: flex;
margin: ${design::SPACING_M};
flex-direction: column;
@@ -44,8 +44,7 @@ pub fn Card(
.card_clickable:hover {
border: ${design::BORDER_HOVER_SHALLOW};
}
))
.unwrap();
);
let title_element = match title {
Some(ref title) => html! { <h1 class="card__title">{title.clone()}</h1> },

11
visions/ui/src/components/image.rs
View File

@@ -14,16 +14,13 @@ pub struct ImageProps {
#[function_component]
pub fn Image(ImageProps { classes, url }: &ImageProps) -> Html {
let styles = Style::new(css!(
r#"
let styles = css!(
object-fit: cover;
transition: opacity 0.5s ease-in-out;
"#
))
.unwrap();
);
let fade_out = Style::new(css!(r#"opacity: 0;"#)).unwrap();
let fade_in = Style::new(css!(r#"opacity: 1;"#)).unwrap();
let fade_out = css!(opacity: 0;);
let fade_in = css!(opacity: 1;);
let is_loaded: UseStateHandle<bool> = use_state(|| true);
let animation_class: UseStateHandle<Classes> = use_state(|| classes!());

5
visions/ui/src/components/label.rs
View File

@@ -27,7 +27,7 @@ pub fn Label(
class,
}: &LabelProps,
) -> Html {
let styles = Style::new(css!(
let styles = css!(
padding: ${design::SPACING_M};
padding-left: ${design::SPACING_L};
padding-right: ${design::SPACING_L};
@@ -42,8 +42,7 @@ pub fn Label(
.label > .cta {
margin-left: ${design::SPACING_L};
}
))
.unwrap();
);
let body_text = if text.is_empty() {
html! { <span class="label__placeholder">{placeholder.clone()}</span> }

8
visions/ui/src/components/simple_guage.rs
View File

@@ -16,14 +16,12 @@ pub fn SimpleGuage(
max,
}: &SimpleGuageProperties,
) -> Html {
let style = Style::new(css!(
r#"
let style = css!(
display: flex;
justify-content: space-between;
width: 100%;
"#,
))
.unwrap();
);
html! {
<div class={style}>
<div>{label}</div>

7
visions/ui/src/components/stack.rs
View File

@@ -8,8 +8,7 @@ pub struct StackProps {
#[function_component]
pub fn Stack(StackProps { layers }: &StackProps) -> Html {
let styles = Style::new(css!(
r#"
let styles = css!(
.stack {
position: absolute;
top: 0;
@@ -40,9 +39,7 @@ pub fn Stack(StackProps { layers }: &StackProps) -> Html {
width: 100%;
height: 100%;
}
"#
))
.unwrap();
);
html! {
<div class={styles}>

5
visions/ui/src/systems/candela.rs
View File

@@ -151,7 +151,6 @@ pub struct SidebarProperties {
#[function_component]
pub fn Sidebar(SidebarProperties { character }: &SidebarProperties) -> Html {
let style = css!(
r#"
margin: 2px;
.candela-sidebar__action-header {
display: flex;
@@ -186,9 +185,7 @@ pub fn Sidebar(SidebarProperties { character }: &SidebarProperties) -> Html {
}
.candela-sidebar__abilities {
}
"#
);
let sheet = &character.data;
@@ -249,6 +246,6 @@ pub struct GmSidebarProps {
#[function_component]
pub fn GmSidebar(GmSidebarProps { pc }: &GmSidebarProps) -> Html {
html! {
<div>{pc.data.name.clone()}</div>
<Card title={Some(pc.data.name.clone())}>{""}</Card>
}
}

13
visions/ui/src/views/game_view.rs
View File

@@ -57,19 +57,6 @@ pub fn GameView(PlayerViewProps { game_id }: &PlayerViewProps) -> Html {
if game_overview.gm.id == user_overview.id {
html! {
<GmView game={game_overview.clone()} session_id={session_id} />
/*
<WebsocketProvider
session_id={session_id.clone()}
game_id={game_id.clone()}
on_message={on_message}>
<GmView game_id={game_id.clone()}
title={(*scene_title).clone()}
background_url={(*background_url).clone()}
available_scenes={(*available_scenes).clone()}
current_scene={(*current_scene).clone()}
available_images={(*available_images).clone()} />
</WebsocketProvider>
*/
}
} else {
html! {

73
visions/ui/src/views/gm_view.rs
View File

@@ -21,6 +21,7 @@ struct ViewProps {
pcs: Vec<Charsheet>,
on_change_scene: Callback<SceneId>,
on_change_image: Callback<String>,
}
impl ListItem for (SceneId, String) {
@@ -33,6 +34,21 @@ impl ListItem for (SceneId, String) {
}
}
#[derive(PartialEq, Clone)]
struct ImageUrl(String);
impl ListItem for ImageUrl {
fn id(&self) -> &str {
&self.0
}
fn as_html(&self) -> Html {
html! {
<img src={self.0.clone()} />
}
}
}
#[function_component]
fn View(
ViewProps {
@@ -42,12 +58,13 @@ fn View(
current_scene,
available_scenes,
available_images,
on_change_scene,
pcs,
on_change_scene,
on_change_image,
}: &ViewProps,
) -> Html {
let styles = Style::new(css!(
r#"
let styles = css!(
.gm-view {
display: grid;
height: 100vh;
@@ -100,9 +117,7 @@ fn View(
grid-column: 3;
border: var(--border-light);
}
"#
))
.unwrap();
);
let scene = current_scene
.as_ref()
@@ -115,9 +130,16 @@ fn View(
.map(|pc| decode_charsheet(&system, (*pc).clone()).unwrap())
.collect::<Vec<System>>();
let backgrounds: Vec<ImageUrl> = available_images
.into_iter()
.map(|url| ImageUrl(url.clone()))
.collect();
let current_background_url = background_url.as_ref().map(|url| ImageUrl(url.clone()));
let foreground = html! {
<div class="gm-view">
<div class="gm-view__title">{title.clone().unwrap_or("unnamed".to_owned())}</div>
<Card class="gm-view__title">{title.clone().unwrap_or("unnamed".to_owned())}</Card>
<ListSelector<(SceneId, String)> class="gm-view__scenes"
elements={available_scenes.clone()}
@@ -137,7 +159,19 @@ fn View(
</div>
<div class="gm-view__available-images">
{available_images.iter().map(|url| html! { <Image url={url.clone()} classes={classes!("gm-view__available-image")} /> }).collect::<Vec<Html>>()}
{
if let Some(ref current_background_url) = current_background_url {
html! {
<ListSelector<ImageUrl>
elements={backgrounds}
enabled_item={current_background_url.clone()}
on_select={Callback::from(|_| {})}
/>
}
} else {
html! {}
}
}
</div>
</div>
};
@@ -152,17 +186,6 @@ fn View(
<Stack layers={layers} />
</div>
}
/*
html! {
<div class="overlay">
{background_image}
<div class="overlay_content">
</div>
</div>
}
*/
}
/*
@@ -211,6 +234,15 @@ fn StateHandler(
}),
);
let on_change_background = use_callback(
(socket.clone(), game.id.clone()),
clone!((game_id, socket), {
move |url: String, _| {
socket.send(GameRequest::SetBackground(url.clone()));
}
}),
);
html! {
<View system={game.system.clone()}
title={game.name.clone()}
@@ -220,7 +252,8 @@ fn StateHandler(
available_images={available_images.clone()}
pcs={pcs.clone()}
on_change_scene={on_change_scene} />
on_change_scene={on_change_scene}
on_change_image={on_change_background} />
}
}

5
visions/ui/src/views/login.rs
View File

@@ -15,7 +15,7 @@ pub struct LoginProps {}
#[function_component]
pub fn Login(LoginProps {}: &LoginProps) -> Html {
let styles = Style::new(css!(
let styles = css!(
display: flex;
justify-content: center;
align-items: center;
@@ -26,8 +26,7 @@ pub fn Login(LoginProps {}: &LoginProps) -> Html {
margin-top: ${design::SPACING_S};
margin-bottom: ${design::SPACING_S};
}
))
.unwrap();
);
let app_state = use_context::<UseReducerHandle<AppState>>().expect("app state not found");

7
visions/ui/src/views/player_view.rs
View File

@@ -22,8 +22,7 @@ pub fn PlayerView_(
charsheet,
}: &PlayerViewProps_,
) -> Html {
let styles = Style::new(css!(
r#"
let styles = css!(
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 1fr 20%;
@@ -49,9 +48,7 @@ pub fn PlayerView_(
grid-row: 2;
grid-column: 2;
}
"#
))
.unwrap();
);
let sidebar = match charsheet {
Some(charsheet) => html! { <CharacterSidebar character={charsheet.clone()} /> },