Add image carousel to multi-image posts

brutaldon/static/css/brutaldon-dark.css

@@ -116,9 +116,12 @@ emoji-link
     }
 }
 
-.level.attachments
+.slick-initialized
 {
-    overflow: auto;
+    flex: content;
+    max-width: 90%;
+    left: 25px;
+    right: 25px;
 }
 
 .file-cta

brutaldon/static/css/brutaldon.css

@@ -97,9 +97,12 @@ emoji-link
     font-size: 2em;
 }
 
-.level.attachments
+.slick-initialized
 {
-    overflow: auto;
+    flex: content;
+    max-width: 90%;
+    left: 25px;
+    right: 25px;
 }
 
 

brutaldon/static/css/slick-theme.css

@@ -0,0 +1,206 @@
+@charset 'UTF-8';
+/* Slider */
+.slick-loading .slick-list
+{
+    background: #fff url('./ajax-loader.gif') center center no-repeat;
+}
+
+/* Icons */
+@font-face
+{
+    font-family: 'slick';
+    font-weight: normal;
+    font-style: normal;
+
+    src: url('./fonts/slick.eot');
+    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
+}
+/* Arrows */
+.slick-prev,
+.slick-next
+{
+    font-size: 0;
+    line-height: 0;
+
+    position: absolute;
+    top: 50%;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+
+    cursor: pointer;
+
+    color: transparent;
+    border: none;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus
+{
+    color: transparent;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before
+{
+    opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before
+{
+    opacity: .25;
+}
+
+.slick-prev:before,
+.slick-next:before
+{
+    font-family: 'slick';
+    font-size: 20px;
+    line-height: 1;
+
+    opacity: .75;
+    color: white;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev
+{
+    left: -25px;
+}
+[dir='rtl'] .slick-prev
+{
+    right: -25px;
+    left: auto;
+}
+.slick-prev:before
+{
+    content: '←';
+    left: -25px;
+}
+[dir='rtl'] .slick-prev:before
+{
+    content: '→';
+}
+
+.slick-next
+{
+    right: -25px;
+}
+[dir='rtl'] .slick-next
+{
+    right: auto;
+    left: -25px;
+}
+.slick-next:before
+{
+    content: '→';
+    right: -25px;
+}
+[dir='rtl'] .slick-next:before
+{
+    content: '←';
+}
+
+/* Dots */
+.slick-dotted.slick-slider
+{
+    margin-bottom: 30px;
+}
+
+.slick-dots
+{
+    position: absolute;
+    bottom: -25px;
+
+    display: block;
+
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.slick-dots li
+{
+    position: relative;
+
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+
+    cursor: pointer;
+}
+.slick-dots li button
+{
+    font-size: 0;
+    line-height: 0;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+
+    cursor: pointer;
+
+    color: transparent;
+    border: 0;
+    outline: none;
+    background: transparent;
+}
+.slick-dots li button:hover,
+.slick-dots li button:focus
+{
+    outline: none;
+}
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before
+{
+    opacity: 1;
+}
+.slick-dots li button:before
+{
+    font-family: 'slick';
+    font-size: 6px;
+    line-height: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 20px;
+    height: 20px;
+
+    content: '•';
+    text-align: center;
+
+    opacity: .25;
+    color: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before
+{
+    opacity: .75;
+    color: black;
+}

brutaldon/static/css/slick.css

@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

brutaldon/static/fonts/slick.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="slick" horiz-adv-x="512">
+<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
+</font></defs></svg>

brutaldon/templates/base.html

@@ -26,10 +26,14 @@
                 {% if not preferences.theme.is_brutalist %}
                     <link rel="stylesheet"
                           href="{% static 'css/fork-awesome.min.css' %}">
+                    <link rel="stylesheet" href="{% static 'css/slick.css' %}">
+                    <link rel="stylesheet" href="{% static 'css/slick-theme.css' %}">
                     <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
-                    <script type="text/javascript" src="{% static 'js/intercooler.min.js' %}"></script>
                     <script type="text/javascript" src="{% static 'js/brutaldon-enhancements.js' %}"></script>
-                    {% block page_scripts %}
+                    <script type="text/javascript" src="{% static 'js/mousetrap.min.js' %}"></script>
+                    <script type="text/javascript" src="{% static 'js/slick.min.js' %}"></script>
+                    <script type="text/javascript" src="{% static 'js/intercooler.min.js' %}"></script>
+                        {% block page_scripts %}
                     {% endblock %}
                 {% endif %}
             {% endif %}
@@ -191,6 +195,14 @@
 
             <script type="application/javascript">
              document.addEventListener('DOMContentLoaded', menuPrepare);
+             Intercooler.ready(function () {$(".attachments").slick({
+                 infinite: true,
+                 dots: true,
+                 slidesToShow: 1,
+                 centerMode: true,
+                 variableWidth: true,
+                 //adaptiveHeight: true
+             });});
             </script>
             {% block page_scripts_inline %}
             {% endblock %}

brutaldon/templates/main/toot_partial.html

@@ -54,7 +54,6 @@
                 {% if toot.media_attachments %}
                 <br>
                 <div class="level attachments">
-                    <div class="level-left">
                         {% for media in toot.media_attachments %}
                         <a class="level-item" href="{{ media.url }}">
                             {% if toot.sensitive %}
@@ -75,84 +74,84 @@
                                  class="image is-max-256">
                         </a>
                         {% endfor %}
-                    </div>
                 </div>
                 {% endif %}
                 <br>
                 <p class="is-hidden"></p>
 
-                {% if not confirm_page %}
-                <nav class="level is-mobile">
-                    <div class="level-left">
-                        <a href="{% url "reply" toot.id %}" class="level-item">
-                            <span class="fa fa-reply">
-                                <span class="is-hidden-mobile">Reply</span>
-                            </span>
-                        </a>
-                        {% if toot.visibility != 'private' and toot.visibility != 'direct' %}
-                            <a href="{% url "boost" toot.id %}" class="level-item"
-                               ic-post-to="{% url "boost" toot.id %}"
-                               ic-indicator="#toot-spinner-{{toot.id}}">
-                            {% if toot.reblogged %}
-                            <span class="fa fa-retweet has-text-warning">
-                                <strong class="is-hidden-mobile" >Boosted</strong>
-                                {% else %}
-                                <span class="fa fa-retweet" >
-                                    <span class="is-hidden-mobile" >Boost</span>
-                                    {% endif %}
-                                </span>
-                            </span>
-                        </a>
-                        {% endif %}
-                        <a href="{% url "fav" toot.id %}" class="level-item"
-                           ic-post-to="{% url "fav" toot.id %}"
-                           ic-indicator="#toot-spinner-{{toot.id}}">
-                            {% if toot.favourited %}
-                            <span class="fa fa-heart has-text-warning">
-                                <strong class="is-hidden-mobile" >Favorited</strong>
-                                {% else %}
-                                <span class="fa fa-heart">
-                                    <span class="is-hidden-mobile" >Favorite</span>
-                                    {% endif %}
-                                </span>
-                            </span>
-                        </a>
-                        <i id="toot-spinner-{{toot.id}}" class="fa fa-spinner fa-spin" style="display:none"></i>
-                    </div>
-                    <div class="level-right">
-                        {% if toot.account.acct == own_acct.acct %}
-                        <a class="level-item" href="{% url "redraft" toot.id %}"
-                           ic-get-from="{% url "redraft" toot.id %}"
-                           ic-indicator="#page-load-indicator"
-                           ic-target="#main"
-                           ic-select-from-response="#main"
-                           ic-push-url="true">
-                            redraft
-                        </a>
-                        <a class="level-item" href="{% url "delete" toot.id %}"
-                           ic-delete-from="{% url "delete" toot.id %}"
-                           ic-indicator="#toot-spinner-{{toot.id}}"
-                           ic-confirm="Really delete that toot?"
-                           ic-success-action="fadeOut;remove"
-                           ic-action-target="#toot-{{ toot.id }}">
-                            delete
-                        </a>
-                        {% endif %}
-                        {{ toot.visibility }}
-                        &nbsp;&nbsp;
-                        <a class="level-item" href="{% url "thread" toot.id %}"
-                           ic-get-from="{% url "thread" toot.id %}"
-                           ic-target="#main"
-                           ic-select-from-response="#main"
-                           ic-push-url="true"
-                           ic-on-success="afterPage('{{ own_acct.username }}', 'thread')"
-                           ic-indicator="#page-load-indicator"">
-                            thread
-                        </a>
-                    </div>
-                </nav>
-                {% endif %}
             </div>
+            {% if not confirm_page %}
+            <nav class="level is-mobile">
+                <div class="level-left">
+                    <a href="{% url "reply" toot.id %}" class="level-item">
+                        <span class="fa fa-reply">
+                            <span class="is-hidden-mobile">Reply</span>
+                        </span>
+                    </a>
+                    {% if toot.visibility != 'private' and toot.visibility != 'direct' %}
+                    <a href="{% url "boost" toot.id %}" class="level-item"
+                       ic-post-to="{% url "boost" toot.id %}"
+                       ic-indicator="#toot-spinner-{{toot.id}}">
+                        {% if toot.reblogged %}
+                        <span class="fa fa-retweet has-text-warning">
+                            <strong class="is-hidden-mobile" >Boosted</strong>
+                            {% else %}
+                            <span class="fa fa-retweet" >
+                                <span class="is-hidden-mobile" >Boost</span>
+                                {% endif %}
+                            </span>
+                        </span>
+                    </a>
+                    {% endif %}
+                    <a href="{% url "fav" toot.id %}" class="level-item"
+                       ic-post-to="{% url "fav" toot.id %}"
+                       ic-indicator="#toot-spinner-{{toot.id}}">
+                        {% if toot.favourited %}
+                        <span class="fa fa-heart has-text-warning">
+                            <strong class="is-hidden-mobile" >Favorited</strong>
+                            {% else %}
+                            <span class="fa fa-heart">
+                                <span class="is-hidden-mobile" >Favorite</span>
+                                {% endif %}
+                            </span>
+                        </span>
+                    </a>
+                    <i id="toot-spinner-{{toot.id}}" class="fa fa-spinner fa-spin" style="display:none"></i>
+                </div>
+                <div class="level-right">
+                    {% if toot.account.acct == own_acct.acct %}
+                    <a class="level-item" href="{% url "redraft" toot.id %}"
+                       ic-get-from="{% url "redraft" toot.id %}"
+                       ic-indicator="#page-load-indicator"
+                       ic-target="#main"
+                       ic-select-from-response="#main"
+                       ic-push-url="true">
+                        redraft
+                    </a>
+                    <a class="level-item" href="{% url "delete" toot.id %}"
+                       ic-delete-from="{% url "delete" toot.id %}"
+                       ic-indicator="#toot-spinner-{{toot.id}}"
+                       ic-confirm="Really delete that toot?"
+                       ic-success-action="fadeOut;remove"
+                       ic-action-target="#toot-{{ toot.id }}">
+                        delete
+                    </a>
+                    {% endif %}
+                    {{ toot.visibility }}
+                    &nbsp;&nbsp;
+                    <a class="level-item" href="{% url "thread" toot.id %}"
+                       ic-get-from="{% url "thread" toot.id %}"
+                       ic-target="#main"
+                       ic-select-from-response="#main"
+                       ic-push-url="true"
+                       ic-on-success="afterPage('{{ own_acct.username }}', 'thread')"
+                       ic-indicator="#page-load-indicator"">
+                        thread
+                    </a>
+                </div>
+            </nav>
+            {% endif %}
+
         </div>
         <div class="media-right"></div>
     </article>

package.json

@@ -5,6 +5,7 @@
     "fork-awesome": "^1.1.0",
     "intercooler": "^1.2.1",
     "jquery": "^3.3.1",
-    "mousetrap": "^1.6.2"
+    "mousetrap": "^1.6.2",
+    "slick-carousel": "^1.8.1"
   }
 }

yarn.lock

@@ -25,3 +25,7 @@ jquery@^3.3.1:
 mousetrap@^1.6.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.2.tgz#caadd9cf886db0986fb2fee59a82f6bd37527587"
+
+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"