From 773975917b5a8f77b891248834e8c3ad5d0aeee2 Mon Sep 17 00:00:00 2001 From: Jason McBrayer Date: Sun, 9 Sep 2018 18:22:01 -0400 Subject: [PATCH] Add image carousel to multi-image posts --- brutaldon/static/css/brutaldon-dark.css | 7 +- brutaldon/static/css/brutaldon.css | 7 +- brutaldon/static/css/slick-theme.css | 206 ++ brutaldon/static/css/slick.css | 119 + brutaldon/static/fonts/slick.eot | Bin 0 -> 2048 bytes brutaldon/static/fonts/slick.svg | 14 + brutaldon/static/fonts/slick.ttf | Bin 0 -> 1892 bytes brutaldon/static/fonts/slick.woff | Bin 0 -> 1380 bytes brutaldon/static/js/slick.js | 3011 ++++++++++++++++++++ brutaldon/static/js/slick.min.js | 1 + brutaldon/templates/base.html | 16 +- brutaldon/templates/main/toot_partial.html | 145 +- package.json | 3 +- yarn.lock | 4 + 14 files changed, 3453 insertions(+), 80 deletions(-) create mode 100644 brutaldon/static/css/slick-theme.css create mode 100644 brutaldon/static/css/slick.css create mode 100644 brutaldon/static/fonts/slick.eot create mode 100644 brutaldon/static/fonts/slick.svg create mode 100644 brutaldon/static/fonts/slick.ttf create mode 100644 brutaldon/static/fonts/slick.woff create mode 100644 brutaldon/static/js/slick.js create mode 100644 brutaldon/static/js/slick.min.js diff --git a/brutaldon/static/css/brutaldon-dark.css b/brutaldon/static/css/brutaldon-dark.css index 2152bff..899056c 100644 --- a/brutaldon/static/css/brutaldon-dark.css +++ b/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 diff --git a/brutaldon/static/css/brutaldon.css b/brutaldon/static/css/brutaldon.css index 450a898..08ae18e 100644 --- a/brutaldon/static/css/brutaldon.css +++ b/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; } diff --git a/brutaldon/static/css/slick-theme.css b/brutaldon/static/css/slick-theme.css new file mode 100644 index 0000000..6db2f9c --- /dev/null +++ b/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; +} diff --git a/brutaldon/static/css/slick.css b/brutaldon/static/css/slick.css new file mode 100644 index 0000000..57477e8 --- /dev/null +++ b/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; +} diff --git a/brutaldon/static/fonts/slick.eot b/brutaldon/static/fonts/slick.eot new file mode 100644 index 0000000000000000000000000000000000000000..2cbab9ca97723bc24c50315a0a9bd155db4e0aa5 GIT binary patch literal 2048 zcmcgtO>7%Q6n^9V^B-}NZk*EEVeMi&O%prb7zafaL6A786eTJs%>e;R;y4y|oY<}i z5)vjt;=&>7feV}}ai#*PAS5oRLOp@#1tg{ z_p`I}$V;?l5Ha!)A0EnC8 zkxFz4m_v0SVOj=KhgO+tv`H3aDNU1*9JB<$9X&!VQfR4Acvv~GM)n(S(uwI zP>yu)qu{N@7c=(ay}v($(F*wG)vB`<56yoK{s!jjC8x2~>0l=^EXcj3%3JHRA6a>A<{O0ZEn>X&CKUE{OdnKJ}+`Zes`|-FTNT&dzS)k{lDMd zc?WV5Yl0H2&DvnS^7UXV{5g_#^+EG0^$t}a2F=}nrQC{ZJuTIkhu9uz68^}NcC@rUzlL3$*kyLRbDPqv-Qlsw2;7Lcy_kqz{J1gl7BeDsUk1mm zBBY9_f+9l|h-1ZLd$G%SSA6tvolk!G^;YxNcGsJbS^LQ5 z?5U$!?eFs}j@Xc?pJ6ECEH5!HsG*xEBz{viuj-VI1c!vTQ=-HKh*wf){! zK-YYuV>8i6WY7!-0zq>y5{bq~tYbP;m6YO%ojIM$B*#yjGzSLElPAWLnX%OAXu=x| zurFF(e<0vXrCh5ScZ*P8M1i5=QB$Vrn!MuLhXx`EuPP6AkUo^(3B$b*l(dHoic4Cd z7%pq~TT-F(v7|K$&{vYyf#2j`w(0}oM}1w|gElZIX@#DlF-fb?*^{(}#&AW_I`D6M z+eo8QUPU)K)JiTCOP4ARdP+ewlBQVeXf{Q%$QDh-q8ZTp4aw!R=o}Mb+GsqSqe5-7 zS*X=ZMaxc4S~HgLh&7v=$W7RjS*YyqLNcC*G_vJly-}`hTG=$Z+EJ^+H`LMl3H=!L z^Dqxn=zW^=JN0_)&3d`C(ew$jQe1CBg=^uS#AObu5A!&O1h1eoGTg0QU&6 + + +Generated by Fontastic.me + + + + + + + + + + diff --git a/brutaldon/static/fonts/slick.ttf b/brutaldon/static/fonts/slick.ttf new file mode 100644 index 0000000000000000000000000000000000000000..9d03461b653373f7cda3b4af104c6bca07f9892b GIT binary patch literal 1892 zcmcgtO>7%Q7=7dYvttuC>BcFo9o8<6(=@T2jd4&^kqQzA6;LWbX$}ZjQpdJ%;>2-9 zkdO!w5*H3p4_x3>i8B>Q1tD=k2=xS_7m$ofCB&7VLwiBUyq#S)NmC98iCxXk_rBjZ z-_FiL0C)h~P;kCfdj6T!@2-CY7*A3gpP!v8p#YtDgxFemE@v;?`RijqEDIs?@EmH#S?j zPi)rLf1rI1?%Fth|LVxXOVKm85e`rRe7mvr=G{4sv}lVqaS)za#z;-pQ&4s@?Y~s1 zF)-`LxQ;^V&iZa50I>@VLGiR$p>E!vZ{tC{&2B&od7j&{9xM+5=U3(~;w+rxWpS%> z3t7?bxa@oeU5f6^LH6=?gSl=w;=b<-L~c|ZD)Rvmxk8naW2KV2$;*6K?zInfKK$wD zo2{E0-D=X#hu|LQwtx$hrMosccZ~;>{}Qmqf4;bv{)elCcX3t3_yW4S=NPy{XGF1( z6T>G{QK1i*4+%p)W0Q8#G;~8xWrj1ug{k6H(H@Kq{;{L$JDL&H61sljg03gDpz&K` z$j-l!w}%p4VPi+{rJFXS86kCPNevkkZya!OeYxg)xTL3wkC2S_^eBNCzWf@#%K3CmarCGG5fQmm=C5R~V=S)Qo9* zAuoFI(Y|;(sQMc_g7^H7Nbp>U_;LUSQogJpi8WtV>GOdvYY5|WU)HI=;eOd_h?*Yu z*OLS2MZYgAcpRg?tkP%Kmo>z2#g}#Jzs4r&s9_ne0-N>PGN)%zMg^CschDp(S1#2Z z3MDkittICsJ<70PBa1xeX^y>29-iQzV_XiKJ}yG3vDPXznw7F;XYNfv0h$j(Z%)RImyGEQZL6bS0%B+KcnE;+N~vPeDmw~?!W86Kjv>PckT%Q literal 0 HcmV?d00001 diff --git a/brutaldon/static/fonts/slick.woff b/brutaldon/static/fonts/slick.woff new file mode 100644 index 0000000000000000000000000000000000000000..8ee99721bb81b59a5e1ceee1d3256b15f907d96b GIT binary patch literal 1380 zcmZWoc~H_>9DiItQdGPuZL>_xgDjCHpv=4wk37&Nx3m(F$RqMd4ZI>#sTnIvS4$mr zYIRq0kV)NX%VjCA6!RLbG&S?cF0*sBT4Nv8fBW8i=FR8xz30vMSTKtf%;5wBfD-@$ zfCs-1ptSG*j~9z&2>@yZ0O&0cW$QnM8L(KKKmafd=)DGFt!Us*gAdc21vQSALs$X| zzy|;1M1fiYDb!#MKm#b}&(TnX8WVDD zJ{!y|8WSx_7DJ5-xq%i~f8a0TiD5phwg&PQI5s%K6CH#a^aW$E#u1#|iQ5VBN0Z^a z+Wrh7ECB|f#O1CR`r?f}Ogj%bMA#Kog;~-(rbgn@>1o4d$4nYiRyuAWwB_b_E;YM} zZ@NV6aV$`k?$I^#Wy?FR9QXZfCw>r^*1y-k$0lC+Q7Ne`X`$=sB1Wy`n;#2J7g5fr zwyHxDSEMClZ`L6n$e70#EAWLIl3&MaoK(k+l#St%Y&(Sx=VqDv(*x+{1v@swNPOd5 z_D&(udjRFH?3%?ol%y>x6(M%zP2C#?oZgpRVvQB6J2<-s z1XZ2vz<(2aNi{4LTCF&BxGP@+$wvm5GG@1!A5n$t7wEd@)dWbK1t7 zAI3J92@9!?&4dSMUJZ6VPu@Y5=2}-+pk@x!aH)vCoky=Cjr>DnYdb;5B3lEE)C=baaLJ_-dKR1 zWr9+1d0o&|%I}m3VT=Au5?NY}TCUN7+x*?X<*rIq)!7En?lfx*iHingK58Bf7Yt(K z_X`Li%+9B6@V=(#SWT`XQx%ekcKa;n!7{j@jA|tbPOhjX{3cs;}XV-aNF@z-Qg~t z^N?v#oy+p0z}5Q)3S^P$>6P=;iqWo=dqdtaskSzCVSy7fDSNx#E>`??q5MPtvepFdF46=ngEMs$@2`LCj^yh_!*S07+8;<}0 literal 0 HcmV?d00001 diff --git a/brutaldon/static/js/slick.js b/brutaldon/static/js/slick.js new file mode 100644 index 0000000..7aca613 --- /dev/null +++ b/brutaldon/static/js/slick.js @@ -0,0 +1,3011 @@ +/* + _ _ _ _ + ___| (_) ___| | __ (_)___ +/ __| | |/ __| |/ / | / __| +\__ \ | | (__| < _ | \__ \ +|___/_|_|\___|_|\_(_)/ |___/ + |__/ + + Version: 1.8.1 + Author: Ken Wheeler + Website: http://kenwheeler.github.io + Docs: http://kenwheeler.github.io/slick + Repo: http://github.com/kenwheeler/slick + Issues: http://github.com/kenwheeler/slick/issues + + */ +/* global window, document, define, jQuery, setInterval, clearInterval */ +;(function(factory) { + 'use strict'; + if (typeof define === 'function' && define.amd) { + define(['jquery'], factory); + } else if (typeof exports !== 'undefined') { + module.exports = factory(require('jquery')); + } else { + factory(jQuery); + } + +}(function($) { + 'use strict'; + var Slick = window.Slick || {}; + + Slick = (function() { + + var instanceUid = 0; + + function Slick(element, settings) { + + var _ = this, dataSettings; + + _.defaults = { + accessibility: true, + adaptiveHeight: false, + appendArrows: $(element), + appendDots: $(element), + arrows: true, + asNavFor: null, + prevArrow: '', + nextArrow: '', + autoplay: false, + autoplaySpeed: 3000, + centerMode: false, + centerPadding: '50px', + cssEase: 'ease', + customPaging: function(slider, i) { + return $('',nextArrow:'',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(e,t){return i('