mirror of
https://github.com/jointakahe/takahe.git
synced 2024-12-25 23:00:29 +00:00
More UX tweaks
This commit is contained in:
Andrew Godwin
parent
e31a89f785
commit
e7c09d6457
4 changed files with 77 additions and 81 deletions
|
|
@ -1002,7 +1002,7 @@ form .post {
|
|||
}
|
||||
|
||||
.post .summary {
|
||||
margin: 12px 0 4px 0;
|
||||
margin: 12px 0 4px 64px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
background: var(--color-bg-menu);
|
||||
|
|
@ -1027,6 +1027,10 @@ form .post {
|
|||
color: var(--color-text-duller);
|
||||
}
|
||||
|
||||
.post .content {
|
||||
margin-left: 64px;
|
||||
}
|
||||
|
||||
.post.mini .content,
|
||||
.post.mini .edited {
|
||||
margin-left: 0;
|
||||
|
|
@ -1058,33 +1062,29 @@ form .post {
|
|||
|
||||
.post .actions {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0 0 0;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
|
||||
.post .post-action {
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post .post-action:hover {
|
||||
background-color: var(--color-bg-main);
|
||||
margin: 0 0 -8px 64px;
|
||||
}
|
||||
|
||||
.post .actions a {
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-dull);
|
||||
}
|
||||
|
||||
.post .actions a.menu {
|
||||
.post .actions a:hover {
|
||||
background-color: var(--color-bg-main);
|
||||
}
|
||||
|
||||
.post .actions a.menu {}
|
||||
|
||||
.post .actions menu {
|
||||
display: none;
|
||||
background-color: var(--color-bg-menu);
|
||||
|
|
@ -1092,8 +1092,8 @@ form .post {
|
|||
padding: 5px 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
position: absolute;
|
||||
left: -130px;
|
||||
top: -130px;
|
||||
right: 0px;
|
||||
bottom: 35px;
|
||||
}
|
||||
|
||||
.post .actions menu.enabled {
|
||||
|
|
@ -1104,7 +1104,7 @@ form .post {
|
|||
.post .actions menu a {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 165px;
|
||||
width: 185px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -1113,10 +1113,6 @@ form .post {
|
|||
width: 16px;
|
||||
}
|
||||
|
||||
.post .actions .dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post .actions a:hover {
|
||||
color: var(--color-text-main);
|
||||
}
|
||||
|
|
@ -1177,7 +1173,7 @@ form .post {
|
|||
.mention-banner,
|
||||
.follow-banner,
|
||||
.like-banner {
|
||||
padding: 3px 0 3px 10px;
|
||||
padding: 0 0 3px 5px;
|
||||
}
|
||||
|
||||
.boost-banner .emoji,
|
||||
|
|
@ -1298,7 +1294,7 @@ form .post {
|
|||
}
|
||||
|
||||
|
||||
@media (max-width: 700px) {
|
||||
@media (max-width: 750px) {
|
||||
header menu a.identity {
|
||||
width: 50px;
|
||||
padding: 10px 10px 0 0;
|
||||
|
|
@ -1339,19 +1335,25 @@ form .post {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#side-navigation,
|
||||
header menu .identity {
|
||||
border-left: 1px solid var(--color-input-border);
|
||||
.left-column {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid var(--color-input-border);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 550px) {
|
||||
|
||||
.post .content,
|
||||
.post .summary,
|
||||
.post .actions {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Copy to clipboard action */
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<span class="post-action">
|
||||
{% if post.pk in interactions.boost %}
|
||||
<a title="Unboost" class="active" hx-post="{{ post.urls.action_unboost }}" hx-swap="outerHTML">
|
||||
<i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a title="Boost" hx-post="{{ post.urls.action_boost }}" hx-swap="outerHTML">
|
||||
<i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if post.pk in interactions.boost %}
|
||||
<a title="Unboost" class="active" hx-post="{{ post.urls.action_unboost }}" hx-swap="outerHTML">
|
||||
<i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a title="Boost" hx-post="{{ post.urls.action_boost }}" hx-swap="outerHTML">
|
||||
<i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<span class="post-action">
|
||||
{% if post.pk in interactions.like %}
|
||||
<a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem">
|
||||
<i class="fa-solid fa-star"></i> {{ event.like_count }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML" role="menuitem">
|
||||
<i class="fa-solid fa-star"></i> {{ event.like_count }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if post.pk in interactions.like %}
|
||||
<a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem">
|
||||
<i class="fa-solid fa-star"></i> {{ event.like_count }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML" role="menuitem">
|
||||
<i class="fa-solid fa-star"></i> {{ event.like_count }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -62,36 +62,34 @@
|
|||
{% include "activities/_reply.html" %}
|
||||
{% include "activities/_like.html" %}
|
||||
{% include "activities/_boost.html" %}
|
||||
<div class="dropdown">
|
||||
<a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu">
|
||||
<i class="fa-solid fa-caret-down"></i>
|
||||
<a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
<menu>
|
||||
<a href="{{ post.urls.view }}" role="menuitem">
|
||||
<i class="fa-solid fa-comment"></i> View Post & Replies
|
||||
</a>
|
||||
<menu>
|
||||
<a href="{{ post.urls.view }}" role="menuitem">
|
||||
<i class="fa-solid fa-comment"></i> View Post & Replies
|
||||
<a href="{{ post.urls.action_report }}" role="menuitem">
|
||||
<i class="fa-solid fa-flag"></i> Report
|
||||
</a>
|
||||
{% if post.author == request.identity %}
|
||||
<a href="{{ post.urls.action_edit }}" role="menuitem">
|
||||
<i class="fa-solid fa-pen-to-square"></i> Edit
|
||||
</a>
|
||||
<a href="{{ post.urls.action_report }}" role="menuitem">
|
||||
<i class="fa-solid fa-flag"></i> Report
|
||||
<a href="{{ post.urls.action_delete }}" role="menuitem">
|
||||
<i class="fa-solid fa-trash"></i> Delete
|
||||
</a>
|
||||
{% if post.author == request.identity %}
|
||||
<a href="{{ post.urls.action_edit }}" role="menuitem">
|
||||
<i class="fa-solid fa-pen-to-square"></i> Edit
|
||||
</a>
|
||||
<a href="{{ post.urls.action_delete }}" role="menuitem">
|
||||
<i class="fa-solid fa-trash"></i> Delete
|
||||
</a>
|
||||
{% elif not post.local and post.url %}
|
||||
<a href="{{ post.url }}" role="menuitem">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square"></i> See Original
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if request.user.admin %}
|
||||
<a href="{{ post.urls.admin_edit }}" role="menuitem">
|
||||
<i class="fa-solid fa-gear"></i> View In Admin
|
||||
</a>
|
||||
{% endif %}
|
||||
</menu>
|
||||
</div>
|
||||
{% elif not post.local and post.url %}
|
||||
<a href="{{ post.url }}" role="menuitem">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square"></i> See Original
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if request.user.admin %}
|
||||
<a href="{{ post.urls.admin_edit }}" role="menuitem">
|
||||
<i class="fa-solid fa-gear"></i> View In Admin
|
||||
</a>
|
||||
{% endif %}
|
||||
</menu>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue