--- /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 *