even more mobile friendly

This commit is contained in:
Adam 2024-09-12 22:30:37 -04:00
parent 08d094fd4a
commit 8fecd58d06
3 changed files with 30 additions and 27 deletions

View file

@ -6,7 +6,7 @@ pub fn BlackCard() -> impl IntoView {
let game_meta = expect_context::<ReadSignal<Option<GameStateMeta>>>(); let game_meta = expect_context::<ReadSignal<Option<GameStateMeta>>>();
view! { view! {
<Show when=move || { game_meta().is_some() }> <Show when=move || { game_meta().is_some() }>
<div class="relative m-2 w-40 h-60 text-white bg-black rounded-lg shadow-black shadow-md"> <div class="relative m-2 w-36 h-56 shrink-0 text-white bg-black rounded-lg shadow-black shadow-md">
<p class="p-4">{game_meta().unwrap().black.0}</p> <p class="p-4">{game_meta().unwrap().black.0}</p>
<p class="absolute right-4 bottom-4">Pick: {game_meta().unwrap().black.1}</p> <p class="absolute right-4 bottom-4">Pick: {game_meta().unwrap().black.1}</p>
</div> </div>
@ -19,7 +19,7 @@ pub fn WhiteCard(card_data: WhiteCardMeta) -> impl IntoView {
let set_card_clicked = expect_context::<WriteSignal<String>>(); let set_card_clicked = expect_context::<WriteSignal<String>>();
view! { view! {
<div class="relative m-2 w-40 h-60 text-black bg-white rounded-lg shadow-black drop-shadow-lg"> <div class="relative m-2 w-36 h-56 shrink-0 text-black bg-white rounded-lg shadow-black drop-shadow-lg">
<p class="p-4">{card_data.text}</p> <p class="p-4">{card_data.text}</p>
<button <button
class="absolute w-full h-full opacity-10 left-0 top-0" class="absolute w-full h-full opacity-10 left-0 top-0"

View file

@ -119,6 +119,8 @@ pub fn JudgingView() -> impl IntoView {
} }
} }
> >
// Judge hand
<div class="flex flex-nowrap overflow-scroll lg:inline-flex lg:flex-wrap lg:justify-center lg:overflow-none">
{judge_round() {judge_round()
.unwrap() .unwrap()
.cards_to_judge .cards_to_judge
@ -143,6 +145,7 @@ pub fn JudgingView() -> impl IntoView {
} }
}) })
.collect_view()} .collect_view()}
</div>
</Show> </Show>
} }
} }

View file

@ -131,7 +131,7 @@ pub fn PlayingView() -> impl IntoView {
</div> </div>
// Player hand // Player hand
<div class="inline-flex flex-wrap justify-center"> <div class="flex flex-nowrap overflow-scroll lg:inline-flex lg:flex-wrap lg:justify-center lg:overflow-none">
<Show when=move || { <Show when=move || {
game_state().is_some() game_state().is_some()
}> }>