Revamps reply form

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

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?ouoizu');
-  src:  url('fonts/icomoon.eot?7ifunb#iefix') format('embedded-opentype'),
+  src:  url('fonts/icomoon.eot?ouoizu#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?7ifunb') format('truetype'),
+    url('fonts/icomoon.ttf?ouoizu') format('truetype'),
-    url('fonts/icomoon.woff?7ifunb') format('woff'),
+    url('fonts/icomoon.woff?ouoizu') format('woff'),
-    url('fonts/icomoon.svg?7ifunb#icomoon') format('svg');
+    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";
 }

bookwyrm/templates/snippets/interaction.html

@@ -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 %}

bookwyrm/templates/snippets/status.html

@@ -28,43 +28,101 @@
         {% endif %}
     </div>
 
-    <footer class="card-footer">
+    <footer>
-        {% if status.status_type == 'Boost' %}
+        {% if request.user.is_authenticated %}
-        {% include 'snippets/interaction.html' with activity=status|boosted_status %}
+        <input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}">
-        {% else %}
+        <div class="toggle-content hidden">
-        {% include 'snippets/interaction.html' with activity=status %}
+            <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">
+                <label class="button" for="show-comment-{{ status.id }}">
-            {% if status.privacy == 'public' %}
+                    <span class="ic-n icon-comment">
-            <span class="icon icon-globe">
+                        <span class="is-sr-only">Comment</span>
-                <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>
                     </span>
-                </button>
+                </label>
-            </form>
+                {% 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>

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())