Mercurial > libervia-templates
changeset 252:a0e889d73bad
bulma (photo): slideshow
CSS + template for slideshow and the comments panel used inside.
author | Goffi <goffi@goffi.org> |
---|---|
date | Thu, 16 Jul 2020 09:08:34 +0200 |
parents | 80cfec962b1e |
children | 7397d81dd633 |
files | sat_templates/templates/bulma/blog/comments_panel.html sat_templates/templates/bulma/photo/album.html sat_templates/templates/bulma/photo/item.html sat_templates/templates/bulma/photo/slideshow.html sat_templates/templates/bulma/static/styles.css |
diffstat | 5 files changed, 131 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/blog/comments_panel.html Thu Jul 16 09:08:34 2020 +0200 @@ -0,0 +1,15 @@ +{% import 'input/textbox.html' as textbox with context %} +{% import 'blog/macros.html' as blog with context %} + +<div class="wrapper"> + <div class="panel_wrapper click_to_close"> + <div class="comments_side_panel"> + <section class="section"> + {{ blog.show_items(comments, expanded=true, dates_fmt='relative') }} + <div class="comment_post mt-4"> + {{- textbox.comment_or_login(service=comments_service, node=comments_node) -}} + </div> + </section> + </div> + </div> +</div>
--- a/sat_templates/templates/bulma/photo/album.html Thu Jul 16 09:08:34 2020 +0200 +++ b/sat_templates/templates/bulma/photo/album.html Thu Jul 16 09:08:34 2020 +0200 @@ -1,3 +1,5 @@ +{# FIXME: Q&D way to add a CSS from node_modules, it should be imported directly with the python module #} +{{ css_files.append(build_path+"node_modules/swiper/css/swiper.min.css") or "" }} {% extends 'base/base.html' %} {% import 'components/avatar.html' as avatar with context %} {% import 'input/textbox.html' as textbox with context %}
--- a/sat_templates/templates/bulma/photo/item.html Thu Jul 16 09:08:34 2020 +0200 +++ b/sat_templates/templates/bulma/photo/item.html Thu Jul 16 09:08:34 2020 +0200 @@ -1,7 +1,7 @@ <div class="column is-4 item" data-item='{{file|tojson}}'> <div class="card x-is-hoverable"> <div class="card-image is-photo-thumbnail-container is-flex has-items-centered has-background-light"> - <a href="{{file.url}}" class="is-wrapping"> + <a href="{{file.url}}" class="is-wrapping photo_thumb_click"> <img class="is-photo-thumbnail" src="{{file.thumb_url}}" alt="{{file.name}}"> </a> </div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/photo/slideshow.html Thu Jul 16 09:08:34 2020 +0200 @@ -0,0 +1,14 @@ +<div class="slideshow"> + <button class="delete is-large click_to_close"></button> + <div class="click_to_comment"> + <span class='comments__count'></span> + <i class="icon-comment-empty is-size-3"></i> + </div> + <div class="swiper-container"> + <div class="swiper-wrapper"></div> + <div class="swiper-pagination"></div> + <div class="swiper-button-prev"></div> + <div class="swiper-button-next"></div> + <div class="swiper-scrollbar"></div> + </div> +</div>
--- a/sat_templates/templates/bulma/static/styles.css Thu Jul 16 09:08:34 2020 +0200 +++ b/sat_templates/templates/bulma/static/styles.css Thu Jul 16 09:08:34 2020 +0200 @@ -132,6 +132,105 @@ transition: transform 0.15s ease-in; } +.click_to_close { + cursor: pointer; +} + +/********** + * panels * + **********/ + +.panel_wrapper { + position: absolute; + top: 0; + right: 0; + height: 100vh; + width: 100vw; + z-index: 150; +} + +.comments_side_panel { + position: absolute; + top: 0; + right: 0; + height: 100vh; + width: 0; + max-width: 80%; + z-index: 200; + background: white; + transition: width 0.3s ease-out; +} + +.comments_side_panel.open { + width: 55rem; + transition: width 0.3s ease-out; +} + +/************* + * slideshow * + *************/ + +.slideshow { + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: black; + color: white; + z-index: 100; + /* color: white; */ +} + +div.slideshow>button.delete { + z-index: 100; + background-color: var(--grey-light); + position: absolute; + top: 1rem; + right: 2rem; +} + +div.slideshow>div.click_to_comment { + z-index: 100; + position: absolute; + right: 1.7rem; + bottom: 2rem; + cursor: pointer; +} + +div.slideshow>div.comments__count { + z-index: 100; + position: absolute; + right: 1.7rem; + bottom: 0.5rem; + font-weight: bold; +} + +.swiper-slide { + display: flex; + align-items: center; + justify-content: center; +} + +.swiper-container { + height: 100%; + width: 100%; +} + +.swiper-button-prev { + left: 2.1rem !important; + color: #f1f1f1 !important; +} + +.swiper-button-next { + right: 2.1rem !important; + color: #f1f1f1 !important; +} + +.slide_img { + max-height: 100%; + max-width: 100%; +} /*************** * progression *