mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-11-23 01:51:08 +00:00
Revamps reply form
This commit is contained in:
Mouse Reeve
parent
1c442f0dfe
commit
7f11afa081
8 changed files with 102 additions and 108 deletions
Binary file not shown.
|
|
@ -29,6 +29,7 @@
|
|||
<glyph unicode="" glyph-name="arrow-down" d="M298 512.667h428l-214-214z" />
|
||||
<glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -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";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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())
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue