diff --git a/css/components/loading.css b/css/components/loading.css new file mode 100644 index 0000000..4122984 --- /dev/null +++ b/css/components/loading.css @@ -0,0 +1,43 @@ +.loading-container{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 50vh; +}.lds-facebook { + display: inline-block; + position: relative; + width: 80px; + height: 80px; + } + .lds-facebook div { + display: inline-block; + position: absolute; + left: 8px; + width: 16px; + background: #5D6A73; + animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; + } + .lds-facebook div:nth-child(1) { + left: 8px; + animation-delay: -0.24s; + } + .lds-facebook div:nth-child(2) { + left: 32px; + animation-delay: -0.12s; + } + .lds-facebook div:nth-child(3) { + left: 56px; + animation-delay: 0; + } + @keyframes lds-facebook { + 0% { + top: 8px; + height: 64px; + } + 50%, 100% { + top: 24px; + height: 32px; + } + } + \ No newline at end of file diff --git a/css/components/media_slideshow.css b/css/components/media_slideshow.css new file mode 100644 index 0000000..690b39c --- /dev/null +++ b/css/components/media_slideshow.css @@ -0,0 +1,83 @@ + +.media-slideshow-frame { + height: 360px; + background-color: gray; + width: 100%; + position: relative; +} + +.media-slideshow-photo { + background-color: gray; + object-fit: cover; + width: 100%; + height: 100%; + display: none; +} + +.media-slideshow-video { + background-color: gray; + width: 100%; + height: 100%; + display: none; + object-fit: cover; +} + +.media-slideshow-arrow-left { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + margin-top: -22px; + padding: 16px; + color: white; + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + transition: 0.6s ease; +} +.media-slideshow-arrow-right { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + margin-top: -22px; + padding: 16px; + color: white; + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + right: 0; + border-radius: 3px 0 0 3px; + transition: 0.6s ease; +} + +.media-slideshow-arrow-left:hover, .media-slideshow-arrow-right:hover { + background-color: rgba(0,0,0,0.8); +} + +/* Number text (1/3 etc) */ +.media-slideshow-number-text { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; + background-color: rgba(0,0,0,0.8); + border-radius: 2px; + } + + +/* Fading animation */ +.fade { + animation-name: fade; + animation-duration: 1.5s; + } + + @keyframes fade { + from {opacity: .4} + to {opacity: 1} + } \ No newline at end of file diff --git a/css/details.css b/css/details.css index 6d08a4f..cfd8902 100644 --- a/css/details.css +++ b/css/details.css @@ -18,15 +18,10 @@ Divide the Details page into 3 main sections: justify-content: stretch; align-items: center; width: 100%; -} - -.details-head-image-frame { - display: flex; - height: 300px; - width: 100%; - background-color: gray; + gap: 10px; } .details-head-title { font-size: 25px; -} \ No newline at end of file +} + diff --git a/css/navbar.css b/css/navbar.css index f3a157d..d3f40a7 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -2,6 +2,7 @@ .navbar-background { border-top: 3px solid #04B2D9; position: fixed; + z-index: 1; width: 100%; display: flex; flex-direction: row; @@ -42,7 +43,7 @@ cursor: pointer; } -.navbar-closed{ +.navbar-closed { display: flex; flex-direction: column; justify-content: flex-start; diff --git a/index.html b/index.html index 739fc65..32cfd1a 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,8 @@ - + + diff --git a/src/components/media_slideshow.rs b/src/components/media_slideshow.rs new file mode 100644 index 0000000..08cd2c5 --- /dev/null +++ b/src/components/media_slideshow.rs @@ -0,0 +1,72 @@ +use jl_types::domain::media::Media; +use yew::prelude::*; + + +#[function_component(MediaSlideshow)] +pub fn media_slideshow(props: &MediaSlideshowProps) -> Html { + let current_media_index = use_state(|| 0); + let total_media_count = props.media_list.len(); + let previous_click_cb = { + let current_media_index = current_media_index.clone(); + let total_media_count = total_media_count.clone(); + Callback::from(move |_| { + if *current_media_index > 0 { + current_media_index.set(*current_media_index -1); + } else { + current_media_index.set(total_media_count - 1); + } + }) + }; + let next_click_cb = { + let current_media_index = current_media_index.clone(); + let total_media_count = total_media_count.clone(); + Callback::from(move |_| { + if *current_media_index >= total_media_count - 1 { + current_media_index.set(0); + } else { + current_media_index.set(*current_media_index + 1); + } + }) + }; + html! { +
+ } +} + +#[derive(Properties, PartialEq, PartialOrd)] +pub struct MediaSlideshowProps { + pub media_list: Vec