From 7f11afa0818f07793ef1e26dbc289c3472e4e902 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 5 Nov 2020 10:48:28 -0800
Subject: [PATCH] Revamps reply form

---
 bookwyrm/static/css/fonts/icomoon.eot        | Bin 7288 -> 7408 bytes
 bookwyrm/static/css/fonts/icomoon.svg        |   1 +
 bookwyrm/static/css/fonts/icomoon.ttf        | Bin 7124 -> 7244 bytes
 bookwyrm/static/css/fonts/icomoon.woff       | Bin 7200 -> 7320 bytes
 bookwyrm/static/css/icons.css                |  13 +-
 bookwyrm/templates/snippets/interaction.html |  69 -----------
 bookwyrm/templates/snippets/status.html      | 124 ++++++++++++++-----
 bookwyrm/templatetags/fr_display.py          |   3 +-
 8 files changed, 102 insertions(+), 108 deletions(-)
 delete mode 100644 bookwyrm/templates/snippets/interaction.html

diff --git a/bookwyrm/static/css/fonts/icomoon.eot b/bookwyrm/static/css/fonts/icomoon.eot
index 99a90268aada65ae1e38bb4281deb044275a8478..e031e7d2809291c6b0ef32a7cb71e378b36a853e 100644
GIT binary patch
delta 413
zcmexi@xhYqgA4<MkIY0iGnTJj-d&RqN{LJiNfx}qz`(Evh!c`?6AKvD?)g6PgiQVJ
z)T3++42&HN4B~e(QWI08eha8DFi55V)tO}g1vt1_w1E6MK)y;wZb?N^JDUcOe*nmD
z$jMJmj6W0I$G{-v0OUL6CRP+MXfgpUmudm>74i~uQ)hZ{{s!`w0PSci$S*EoU<S%C
z$moFN8JL+FFHBBh>}C|3{DD!Pd8(M}W+5hX(RyYEO~x4J>rA!`JPZ;HK=&{zv5AU^
z85^0Iny4u&B5{z}Obq%?PWmAHZx)Eub8=#u2PE`>941>Z1rh^sk!X-}m>3xT-(Y^h
ze1JiN!G(cgbA-4DlT4Sl*VlM{o39MqEFd)uw@*I30i!4Hku+yinEXXDn^ALejFh+R
mF>V9y1nwU0Row4@Y8Zi7fk}#i1EijTX>y{B@aD@>OBn%A>SS{O

delta 261
zcmexh`NM*(LWY6iiu6P_GZx8`@~DXp<${+O7#Q{daYAx#VgbXNJzpoDkf~2D>pIQA
zz}UgSAfA(vnwTQ>%zPFDgTxo0I<pL*00%dVCIf?{4v?>sky}!c*UtJM$PWPWYjX0F
z6NC3e9{}>t0QnBNi4_G58caZorFejRg}lVv)R|tKzkz(9e#W+f{NfS@W}pm%^cIjj
z12Z$@xydPv-Hf7>KQPKOPZ4w3EW~6kx_PH~IFn3Nd5L5^zs*+$ZWfRhhTHoqC&TE;
mI#TA0@{?1fvL|1b^5Fl$t-&3_UBtbOff1-eezTtRAw~csVMWvc

diff --git a/bookwyrm/static/css/fonts/icomoon.svg b/bookwyrm/static/css/fonts/icomoon.svg
index 28612eee..0323df05 100644
--- a/bookwyrm/static/css/fonts/icomoon.svg
+++ b/bookwyrm/static/css/fonts/icomoon.svg
@@ -29,6 +29,7 @@
 <glyph unicode="&#xe913;" glyph-name="arrow-down" d="M298 512.667h428l-214-214z" />
 <glyph unicode="&#xe914;" glyph-name="home" horiz-adv-x="951" d="M804.571 384v-274.286c0-20-16.571-36.571-36.571-36.571h-219.429v219.429h-146.286v-219.429h-219.429c-20 0-36.571 16.571-36.571 36.571v274.286c0 1.143 0.571 2.286 0.571 3.429l328.571 270.857 328.571-270.857c0.571-1.143 0.571-2.286 0.571-3.429zM932 423.428l-35.429-42.286c-2.857-3.429-7.429-5.714-12-6.286h-1.714c-4.571 0-8.571 1.143-12 4l-395.429 329.714-395.429-329.714c-4-2.857-8.571-4.571-13.714-4-4.571 0.571-9.143 2.857-12 6.286l-35.429 42.286c-6.286 7.429-5.143 19.429 2.286 25.714l410.857 342.286c24 20 62.857 20 86.857 0l139.429-116.571v111.429c0 10.286 8 18.286 18.286 18.286h109.714c10.286 0 18.286-8 18.286-18.286v-233.143l125.143-104c7.429-6.286 8.571-18.286 2.286-25.714z" />
 <glyph unicode="&#xe915;" glyph-name="local" horiz-adv-x="1097" d="M338.857 438.857c-59.429-1.714-113.143-27.429-151.429-73.143h-76.571c-57.143 0-110.857 27.429-110.857 90.857 0 46.286-1.714 201.714 70.857 201.714 12 0 71.429-48.571 148.571-48.571 26.286 0 51.429 4.571 76 13.143-1.714-12.571-2.857-25.143-2.857-37.714 0-52 16.571-103.429 46.286-146.286zM950.857 74.857c0-92.571-61.143-148-152.571-148h-499.429c-91.429 0-152.571 55.429-152.571 148 0 129.143 30.286 327.429 197.714 327.429 19.429 0 90.286-79.429 204.571-79.429s185.143 79.429 204.571 79.429c167.429 0 197.714-198.286 197.714-327.429zM365.714 804.571c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM768 585.143c0-121.143-98.286-219.429-219.429-219.429s-219.429 98.286-219.429 219.429 98.286 219.429 219.429 219.429 219.429-98.286 219.429-219.429zM1097.143 456.571c0-63.429-53.714-90.857-110.857-90.857h-76.571c-38.286 45.714-92 71.429-151.429 73.143 29.714 42.857 46.286 94.286 46.286 146.286 0 12.571-1.143 25.143-2.857 37.714 24.571-8.571 49.714-13.143 76-13.143 77.143 0 136.571 48.571 148.571 48.571 72.571 0 70.857-155.429 70.857-201.714zM1024 804.571c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286z" />
+<glyph unicode="&#xe916;" glyph-name="dots-three" d="M512.051 573.44c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.432 112.589 112.64s-50.381 112.64-112.589 112.64zM153.651 573.44c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.483 112.589 112.64s-50.381 112.64-112.589 112.64zM870.451 573.44c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.432 112.589 112.64s-50.381 112.64-112.589 112.64z" />
 <glyph unicode="&#xe986;" glyph-name="search" d="M992.262 88.604l-242.552 206.294c-25.074 22.566-51.89 32.926-73.552 31.926 57.256 67.068 91.842 154.078 91.842 249.176 0 212.078-171.922 384-384 384-212.076 0-384-171.922-384-384s171.922-384 384-384c95.098 0 182.108 34.586 249.176 91.844-1-21.662 9.36-48.478 31.926-73.552l206.294-242.552c35.322-39.246 93.022-42.554 128.22-7.356s31.892 92.898-7.354 128.22zM384 320c-141.384 0-256 114.616-256 256s114.616 256 256 256 256-114.616 256-256-114.614-256-256-256z" />
 <glyph unicode="&#xe9d7;" glyph-name="star-empty" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538zM512 206.502l-223.462-117.48 42.676 248.83-180.786 176.222 249.84 36.304 111.732 226.396 111.736-226.396 249.836-36.304-180.788-176.222 42.678-248.83-223.462 117.48z" />
 <glyph unicode="&#xe9d8;" glyph-name="star-half" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538zM512 206.502l-0.942-0.496 0.942 570.768 111.736-226.396 249.836-36.304-180.788-176.222 42.678-248.83-223.462 117.48z" />
diff --git a/bookwyrm/static/css/fonts/icomoon.ttf b/bookwyrm/static/css/fonts/icomoon.ttf
index 0f78404f5b872fd47f68872cc2b0d43391c48485..d112fb65cef4b0db4ca7b386f19122adb5c42b98 100644
GIT binary patch
delta 433
zcmca&e#WAnfsuiMft#U$ftkU;KUm+0Ux@7rP-G7fCnV=47BH;c^PPc#Q3l9QNlz>;
z0MY_Leglx^NYANE+nsup4ao0cU=Y8Pk(!ty^;<xNfk83_C~uYl6yV@y(E{@40Qo8z
zxg`}v?Q9xA{sADrAtyiCF){v3bRPqQlmk$}DL1jAfI*W9Xqi+Ckgt%Jn43D&i}N>-
zzXWJWTS0zt3DBWHAfp44XJBT&F!4Y)qu690MtSC`Vy>I>7|liNnHe-0W0<cq*)s4j
zNH74M!>Gh2Dk5fVWM*ojrmTp>L1r^C=sP*-gYdsuAX3lCiD@2?&;xRqY{3*r48%pE
zL5^W!VEBK7`33U<1`P%m28PXB#5|Z}y1c!<#`D{JW#DE3sbRQ%^63p2Jy}B1oKazN
xfMhnK=Hwlc-m=HI4Y(7yd$?C|zXPfPMTr8F6axoHJp<F^gVMsA^`(|F0stQHVN(DA

delta 285
zcmX?OamBozfsuiMft#U$ftkU;KUm+0Ux@7zP-G7fCnV=47BH;Y^Ob>tQ3l9QNlz>;
z0MY_Leglx^NYANEOD^j=4diz)Fo@@5q$Z|FJu{!hz##DjC~uYl6yV@y(PUtd)B*BU
zGIC2Q^4eMd1Ni|!eoan(vSVWKp6CNWfipk>hup-90tO8xpk-1#K)ym=Vs7e8FV5dU
zKF|Qhwu1cP5}-qYKza*Eo`IS9+{6RjjG~i$80DF#h`DUeV>B1tEGiz(BokF$A{ozb
z^Ob>{1*C!D_WsJrFnV%_q&cJf<O7n~ll7%M_<wL~aEEXgac=_$hWzF(sY8qaVfsaV

diff --git a/bookwyrm/static/css/fonts/icomoon.woff b/bookwyrm/static/css/fonts/icomoon.woff
index dcb8dc751f03c27be55ef707f5dcfdd05ce506c1..bbac704f0c03b1494336fc8f0784d85de2f24270 100644
GIT binary patch
delta 456
zcmZ2rF~d@%+~3WOfsp|SWM(jMgK3|MBHHy=l5-Oa7#J8cfI=x?ymrs`^u%J2*cl+7
z1BwOGb1Kt-VpkX##P5Lc?$o1f8L5dtJ(3%MYRo`b>bHPO22c<v_5#RP0bveq7Ojlj
zk_rX}DIOrd0fdX%*)($UlY#2|q<Vk?P9PkACb};-u>xqZ)CC}40gN@7WbzVoQ-NY1
zfR?v`@Juhx-v#-_B|x754TY*>2C|r$FHGiP>}C|3JcCi5d8(M}=3R{DqV>!Snv5~b
z*O_b?co-x=Zemno6BQ9NHZn6cQBzh#;vln`81$W-^g;OFED)*Z<is=&Naz7MOtxSO
zBnILl(Lh%)FflOvzrp;1`2d3kg9`)0CUFlYnJ#ayukrjgUm3VrKuQ>HpL}`)Mo&(W
pG-p(pJV!E{QFAhjl(+CPZUgQF?jG({-0y&D7=c(}bDY#6MgaKyWIzA_

delta 341
zcmbPXxxhlC+~3WOfsp|SWE2><LA3Oh$&E7N6SYO^FD2(D7BDa{W&lM~z<AA`ujz@!
zAh9z*J_i&Fq~}zo0mZH`Fo@@XaB^AK>5SAwpdLvFpc*p}mU?DBD+4G96srL8RX~`7
zn?*Atw*<(SoCD<7fN)+r>;IhmWS}}fDG8u}0|*E2i9V2<SOK(HDgww?0Amd%nY_f@
zRG=8p0LC^Dp6SK;yCA=~1n3)}5~w<6Ad8v#++-fcZbs3`GZ^KWr--?1-o<Dxx;ari
zoJl6CyhJjd-{va=Hw#D;!|nZ*lVSAaE0X4n@{@U_vL{zdc}V`?*5D4|F5=z>4l;Qr
TDR3AtFfajwOnCEWsilknO@2#p

diff --git a/bookwyrm/static/css/icons.css b/bookwyrm/static/css/icons.css
index bf68b7d6..1f34f78c 100644
--- a/bookwyrm/static/css/icons.css
+++ b/bookwyrm/static/css/icons.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?7ifunb');
-  src:  url('fonts/icomoon.eot?7ifunb#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?7ifunb') format('truetype'),
-    url('fonts/icomoon.woff?7ifunb') format('woff'),
-    url('fonts/icomoon.svg?7ifunb#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?ouoizu');
+  src:  url('fonts/icomoon.eot?ouoizu#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?ouoizu') format('truetype'),
+    url('fonts/icomoon.woff?ouoizu') format('woff'),
+    url('fonts/icomoon.svg?ouoizu#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-dots-three:before {
+  content: "\e916";
+}
 .icon-envelope:before {
   content: "\e900";
 }
diff --git a/bookwyrm/templates/snippets/interaction.html b/bookwyrm/templates/snippets/interaction.html
deleted file mode 100644
index 97e7d068..00000000
--- a/bookwyrm/templates/snippets/interaction.html
+++ /dev/null
@@ -1,69 +0,0 @@
-{% load fr_display %}
-{% with activity.id|uuid as uuid %}
-<div class="card-footer-item">
-    {% if request.user.is_authenticated %}
-    <form name="reply" action="/reply" method="post" onsubmit="return reply(event)">
-        <div class="field is-grouped">
-        {% csrf_token %}
-        <input type="hidden" name="reply_parent" value="{{ activity.id }}">
-        <input type="hidden" name="user" value="{{ request.user.id }}">
-        <input type="hidden" name="privacy" value="{{ activity.privacy }}">
-        <textarea name="content" placeholder="Leave a comment..." id="id_content_{{ activity.id }}-{{ uuid }}" required="true"></textarea>
-        <button class="button" type="submit">
-            <span class="icon icon-comment">
-                <span class="is-sr-only">Comment</span>
-            </span>
-        </button>
-        </div>
-    </form>
-
-    <form name="boost" action="/boost/{{ activity.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }} {% if request.user|boosted:status  %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
-        {% csrf_token %}
-        <button class="button" type="submit">
-            <span class="icon icon-boost">
-                <span class="is-sr-only">Boost status</span>
-            </span>
-        </button>
-    </form>
-    <form name="unboost" action="/unboost/{{ activity.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
-        {% csrf_token %}
-        <button class="button is-success" type="submit">
-            <span class="icon icon-boost">
-                <span class="is-sr-only">Un-boost status</span>
-            </span>
-        </button>
-    </form>
-
-    <form name="favorite" action="/favorite/{{ activity.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
-        {% csrf_token %}
-        <button class="button" type="submit">
-            <span class="icon icon-heart">
-                <span class="is-sr-only">Like status</span>
-            </span>
-        </button>
-    </form>
-    <form name="unfavorite" action="/unfavorite/{{ activity.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
-        {% csrf_token %}
-        <button class="button is-success" type="submit">
-            <span class="icon icon-heart">
-                <span class="is-sr-only">Un-like status</span>
-            </span>
-        </button>
-    </form>
-    {% else %}
-    <a href="/login">
-    <span class="icon icon-comment">
-        <span class="is-sr-only">Comment</span>
-    </span>
-
-    <span class="icon icon-boost">
-        <span class="is-sr-only">Boost status</span>
-    </span>
-
-    <span class="icon icon-heart">
-        <span class="is-sr-only">Like status</span>
-    </span>
-    </a>
-    {% endif %}
-</div>
-{% endwith %}
diff --git a/bookwyrm/templates/snippets/status.html b/bookwyrm/templates/snippets/status.html
index 4c3284c6..6e249520 100644
--- a/bookwyrm/templates/snippets/status.html
+++ b/bookwyrm/templates/snippets/status.html
@@ -28,43 +28,101 @@
         {% endif %}
     </div>
 
-    <footer class="card-footer">
-        {% if status.status_type == 'Boost' %}
-        {% include 'snippets/interaction.html' with activity=status|boosted_status %}
-        {% else %}
-        {% include 'snippets/interaction.html' with activity=status %}
+    <footer>
+        {% if request.user.is_authenticated %}
+        <input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}">
+        <div class="toggle-content hidden">
+            <div class="card-footer">
+                <div class="card-footer-item">
+                    {% if status.status_type == 'Boost' %}
+                    {% include 'snippets/reply_form.html' with status=status|boosted_status %}
+                    {% else %}
+                    {% include 'snippets/reply_form.html' with status=status %}
+                    {% endif %}
+                </div>
+            </div>
+        </div>
         {% endif %}
+        <div class="card-footer">
+            <div class="card-footer-item">
+                {% if request.user.is_authenticated %}
 
-        <div class="card-footer-item">
-            {% if status.privacy == 'public' %}
-            <span class="icon icon-globe">
-                <span class="is-sr-only">Public post</span>
-            </span>
-            {% elif status.privacy == 'unlisted' %}
-            <span class="icon icon-unlock">
-                <span class="is-sr-only">Unlisted post</span>
-            </span>
-            {% elif status.privacy == 'followers' %}
-            <span class="icon icon-lock">
-                <span class="is-sr-only">Followers-only post</span>
-            </span>
-            {% else %}
-            <span class="icon icon-envelope">
-                <span class="is-sr-only">Private post</span>
-            </span>
-            {% endif %}
-            {% if status.user == request.user %}
-            <form name="delete-{{status.id}}" action="/delete-status" method="post">
-                {% csrf_token %}
-                <input type="hidden" name="status" value="{{ status.id }}">
-                <button type="submit">
-                    <span class="icon icon-x">
-                        <span class="is-sr-only">Delete post</span>
+                <label class="button" for="show-comment-{{ status.id }}">
+                    <span class="ic-n icon-comment">
+                        <span class="is-sr-only">Comment</span>
                     </span>
-                </button>
-            </form>
+                </label>
+                {% if status.status_type == 'Boost' %}
+                {% include 'snippets/boost_button.html' with status=status|boosted_status %}
+                {% include 'snippets/fav_button.html' with status=status|boosted_status %}
+                {% else %}
+                {% include 'snippets/boost_button.html' with status=status %}
+                {% include 'snippets/fav_button.html' with status=status %}
+                {% endif %}
+
+                {% else %}
+                <a href="/login">
+                <span class="icon icon-comment">
+                    <span class="is-sr-only">Comment</span>
+                </span>
+
+                <span class="icon icon-boost">
+                    <span class="is-sr-only">Boost status</span>
+                </span>
+
+                <span class="icon icon-heart">
+                    <span class="is-sr-only">Like status</span>
+                </span>
+                </a>
+                {% endif %}
+            </div>
+
+            <div class="card-footer-item">
+                {% if status.privacy == 'public' %}
+                <span class="icon icon-globe">
+                    <span class="is-sr-only">Public post</span>
+                </span>
+                {% elif status.privacy == 'unlisted' %}
+                <span class="icon icon-unlock">
+                    <span class="is-sr-only">Unlisted post</span>
+                </span>
+                {% elif status.privacy == 'followers' %}
+                <span class="icon icon-lock">
+                    <span class="is-sr-only">Followers-only post</span>
+                </span>
+                {% else %}
+                <span class="icon icon-envelope">
+                    <span class="is-sr-only">Private post</span>
+                </span>
+                {% endif %}
+
+                <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
+
+                {% if status.user == request.user %}
+                <label class="button" for="more-info-{{ status.id }}">
+                    <div class="icon icon-dots-three">
+                        <span class="is-sr-only">More options</span>
+                    </div>
+                </label>
+                {% endif %}
+            </div>
+        </div>
+
+        <input class="toggle-control" type="checkbox" name="more-info-{{ status.id }}" id="more-info-{{ status.id }}">
+        <div class="toggle-content hidden card-footer">
+            {% if status.user == request.user %}
+            <div class="card-footer-item">
+                <form name="delete-{{status.id}}" action="/delete-status" method="post">
+                    {% csrf_token %}
+                    <input type="hidden" name="status" value="{{ status.id }}">
+                    <button type="submit" class="button">
+                        <span class="icon icon-x">
+                            <span class="is-sr-only">Delete post</span>
+                        </span>
+                    </button>
+                </form>
+            </div>
             {% endif %}
-            <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
         </div>
     </footer>
 </div>
diff --git a/bookwyrm/templatetags/fr_display.py b/bookwyrm/templatetags/fr_display.py
index 053058eb..2af66a54 100644
--- a/bookwyrm/templatetags/fr_display.py
+++ b/bookwyrm/templatetags/fr_display.py
@@ -117,7 +117,7 @@ def text_overflow(text):
     ''' dont' let book descriptions run for ages '''
     if not text:
         return ''
-    char_max = 500
+    char_max = 400
     if text and len(text) < char_max:
         return text
 
@@ -129,6 +129,7 @@ def text_overflow(text):
 
 @register.filter(name='uuid')
 def get_uuid(identifier):
+    ''' for avoiding clashing ids when there are many forms '''
     return '%s%s' % (identifier, uuid4())