jinya_ui/listing/card/
card_view.rs

1use yew::Children;
2use yew::prelude::*;
3
4use crate::listing::card::*;
5
6pub fn get_css<'a>() -> &'a str {
7    //language=CSS
8    "
9.jinya-card {
10    border-radius: 5px;
11    min-width: 18rem;
12    max-width: 100%;
13    position: relative;
14    height: 20rem;
15    max-height: 20rem;
16    display: inline-block;
17    transition: all 0.3s;
18    flex: 1 1 auto;
19    overflow-y: hidden;
20}
21
22.jinya-card:hover {
23    box-shadow: 0 0 8px var(--menu-bar-box-shadown);
24}
25
26.jinya-card:hover .jinya-card__header {
27    border-color: var(--white);
28}
29
30.jinya-card:hover .jinya-card__button-row {
31    opacity: 1;
32}
33
34.jinya-card__image {
35    width: 100%;
36    height: 100%;
37    border-bottom-left-radius: 5px;
38    border-bottom-right-radius: 5px;
39    object-fit: cover;
40}
41"
42}
43
44pub struct Card {
45    title: String,
46    buttons: Children,
47    src: String,
48}
49
50#[derive(Properties, PartialEq, Clone)]
51pub struct Props {
52   pub title: String,
53   pub children: Children,
54   pub src: String,
55}
56
57impl Component for Card {
58    type Message = ();
59    type Properties = Props;
60
61    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
62        Card {
63            title: props.title,
64            buttons: props.children,
65            src: props.src,
66        }
67    }
68
69    fn update(&mut self, _msg: Self::Message) -> bool {
70        false
71    }
72
73    fn change(&mut self, _props: Self::Properties) -> bool {
74        self.title = _props.title;
75        self.buttons = _props.children;
76        self.src = _props.src;
77
78        true
79    }
80
81    fn view(&self) -> Html {
82        html! {
83            <div class="jinya-card">
84                <CardHeader title=&self.title />
85                <img class="jinya-card__image" src=&self.src alt=&self.title />
86                <CardButtonRow>
87                    {for self.buttons.iter().enumerate().map(|(_, mut button)| {
88                        button
89                    })}
90                </CardButtonRow>
91            </div>
92        }
93    }
94}
95
jinya_ui/listing/card/card_view.rs

jinya_ui/listing/card/
card_view.rs
