vbatts/microblog.pub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improve tab bar in profile, post actions

Browse source
This commit is contained in:
Inhji 2019-12-07 22:08:09 +01:00
parent 29e99be31e
commit e735aec296
5 changed files with 54 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

22
sass/base_theme.scss
View file

@ -5,10 +5,32 @@ main#wrapper {
#header { #header {
margin-bottom: 3rem; margin-bottom: 3rem;
.badge {
background-color: #777;
padding: 0.25rem 0.4rem;;
line-height: 0.75rem;
border-radius: 3px;
margin-left: 0.5rem;
font-size: 0.75rem;
color: white;
}
.is-active .badge {
background: #dd3344;
}
} }
article.note { article.note {
margin-bottom: 3rem; margin-bottom: 3rem;
.bottom-bar {
margin-top: 1rem;
form .button {
margin-right: 0.5rem;
}
}
} }

10
templates/header.html
View file

@ -26,11 +26,11 @@
<div class="tabs"> <div class="tabs">
<ul> <ul>
<li {% if request.path == "/" %}class="is-active"{% endif %}><a href="/">Notes [{{ notes_count }}]</a></li> <li {% if request.path == "/" %}class="is-active"{% endif %}><a href="/">Notes <span class="badge">{{ notes_count }}</span></a></li>
<li {% if request.path == url_for("all") %}class="is-active"{% endif %}><a href="/all">All [{{ with_replies_count }}]</a></li> <li {% if request.path == url_for("all") %}class="is-active"{% endif %}><a href="/all">All <span class="badge">{{ with_replies_count }}</span></a></li>
<li {% if request.path == "/liked" %}class="is-active"{% endif %}><a href="/liked">Liked [{{ liked_count }}]</a></li> <li {% if request.path == "/liked" %}class="is-active"{% endif %}><a href="/liked">Liked <span class="badge">{{ liked_count }}</span></a></li>
<li {% if request.path == "/followers" %} class="is-active" {% endif %}><a href="/followers">Followers [{{ followers_count }}]</a></li> <li {% if request.path == "/followers" %} class="is-active" {% endif %}><a href="/followers">Followers <span class="badge">{{ followers_count }}</span></a></li>
<li {% if request.path == "/following" %} class="is-active" {% endif %}><a href="/following">Following [{{ following_count }}]</a></li> <li {% if request.path == "/following" %} class="is-active" {% endif %}><a href="/following">Following <span class="badge">{{ following_count }}</span></a></li>
</ul> </ul>
</div> </div>

13
templates/layout.html
View file

@ -68,15 +68,16 @@ dt, dd { font-size: 0.9em; }
<a class="navbar-item {% if request.path == "/admin/lookup" %} is-active{% endif %}" href="/admin/lookup"> <a class="navbar-item {% if request.path == "/admin/lookup" %} is-active{% endif %}" href="/admin/lookup">
Lookup Lookup
</a> </a>
<a class="navbar-item" href="/admin/logout">
Logout
</a>
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
<a href="/admin" class="navbar-item {% if request.path.startswith("/admin") %} is-active{% endif %}">Admin</a> <a class="navbar-item" href="/admin/logout">
Logout
</a>
<a href="/admin" class="navbar-item {% if request.path.startswith("/admin") %} is-active{% endif %}">
Admin
</a>
</div> </div>
</div> </div>
</nav> </nav>

6
templates/new.html
View file

@ -63,13 +63,13 @@
<div class="control"> <div class="control">
<div class="buttons"> <div class="buttons">
{% for emoji in emojis %} {% for emoji in emojis %}
<span class="button is-dark ji">{{ emoji | emojify | safe }}</span> <span class="button is-light ji">{{ emoji | emojify | safe }}</span>
{% endfor %} {% endfor %}
</div> </div>
<div class="buttons"> <div class="buttons">
{% for emoji in custom_emojis %} {% for emoji in custom_emojis %}
<span class="button is-dark ji"><img src="{{emoji.get_icon_url()}}" alt="{{emoji.name}}" title="{{emoji.name}}" class="custom-emoji"></span> <span class="button is-light ji"><img src="{{emoji.get_icon_url()}}" alt="{{emoji.name}}" title="{{emoji.name}}" class="custom-emoji"></span>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@ -181,7 +181,7 @@
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<input type="submit" value="post" class="button is-primary"> <input type="submit" value="POST" class="button is-primary">
</div> </div>
</div> </div>
</form> </form>

33
templates/utils.html
View file

@ -108,12 +108,13 @@
<aside> <aside>
<a href="{{ actor | url_or_id | get_url }}" class="no-hover"> <a href="{{ actor | url_or_id | get_url }}" class="no-hover">
<strong>{{ (actor.name or actor.preferredUsername) | clean | replace_custom_emojis(actor) | safe }}</strong> <strong>{{ (actor.name or actor.preferredUsername) | clean | replace_custom_emojis(actor) | safe }}</strong>
<span class="l">@{% if not no_color and obj.id | is_from_outbox %}<span class="pcolor">{{ actor.preferredUsername | clean | replace_custom_emojis(actor) | safe }}</span>{% else %}{{ actor.preferredUsername | clean | replace_custom_emojis(actor) | safe }}{% endif %}@{% if not no_color and obj.id | is_from_outbox %}<span class="pcolor">{{ actor | url_or_id | get_url | domain }}</span>{% else %}{{ actor | url_or_id | get_url | domain }}{% endif %}</span> <span>@{% if not no_color and obj.id | is_from_outbox %}<span class="pcolor">{{ actor.preferredUsername | clean | replace_custom_emojis(actor) | safe }}</span>{% else %}{{ actor.preferredUsername | clean | replace_custom_emojis(actor) | safe }}{% endif %}@{% if not no_color and obj.id | is_from_outbox %}<span class="pcolor">{{ actor | url_or_id | get_url | domain }}</span>{% else %}{{ actor | url_or_id | get_url | domain }}{% endif %}</span>
</a> </a>
<span class="is-pulled-right"> <span class="is-pulled-right">
<a rel="noopener" class="u-url u-uid note-permalink l" href="{{ obj | url_or_id | get_url }}"> <a rel="noopener" class="u-url u-uid note-permalink l" href="{{ obj | url_or_id | get_url }}">
<time class="dt-published" title="{{ obj.published }}" datetime="{{ obj.published }}" {% if obj | url_or_id | get_url | is_from_outbox %}{%else%}rel="external noreferrer"{%endif%}>{{ obj.published | format_timeago }}</time></a> <time class="dt-published" title="{{ obj.published }}" datetime="{{ obj.published }}" {% if obj | url_or_id | get_url | is_from_outbox %}{%else%}rel="external noreferrer"{%endif%}>{{ obj.published | format_timeago }}</time>
</a>
</span> </span>
</aside> </aside>
@ -289,7 +290,7 @@
{% if not perma and meta.count_like and obj.id | is_from_outbox %}<a class ="button" href="{{ obj.url | get_url }}"><strong>{{ meta.count_like }}</strong> like{% if meta.count_like > 1 %}s{% endif %}</a>{% endif %} {% if not perma and meta.count_like and obj.id | is_from_outbox %}<a class ="button" href="{{ obj.url | get_url }}"><strong>{{ meta.count_like }}</strong> like{% if meta.count_like > 1 %}s{% endif %}</a>{% endif %}
{% if session.logged_in %} {% if session.logged_in %}
<a class="button" href="/admin/new?reply={{ aid }}">reply</a> <a class="button is-primary is-light" href="/admin/new?reply={{ aid }}">reply</a>
{% if meta | get_visibility | visibility_is_public %} {% if meta | get_visibility | visibility_is_public %}
{% if meta.boosted %} {% if meta.boosted %}
@ -297,14 +298,14 @@
<input type="hidden" name="redirect" value="{{ redir }}"> <input type="hidden" name="redirect" value="{{ redir }}">
<input type="hidden" name="id" value="{{ meta.boosted }}"> <input type="hidden" name="id" value="{{ meta.boosted }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">unboost</button> <button type="submit" class="button is-warning is-light">unboost</button>
</form> </form>
{% else %} {% else %}
<form action="/api/boost" class="action-form" method="POST"> <form action="/api/boost" class="action-form" method="POST">
<input type="hidden" name="redirect" value="{{ redir }}"> <input type="hidden" name="redirect" value="{{ redir }}">
<input type="hidden" name="id" value="{{ obj.id }}"> <input type="hidden" name="id" value="{{ obj.id }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">boost</button> <button type="submit" class="button is-warning is-light">boost</button>
</form> </form>
{% endif %} {% endif %}
{% endif %} {% endif %}
@ -314,14 +315,14 @@
<input type="hidden" name="redirect" value="{{ redir }}"> <input type="hidden" name="redirect" value="{{ redir }}">
<input type="hidden" name="id" value="{{ meta.liked }}"> <input type="hidden" name="id" value="{{ meta.liked }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">unlike</button> <button type="submit" class="button is-danger is-light">unlike</button>
</form> </form>
{% else %} {% else %}
<form action="/api/like" class="action-form" method="POST"> <form action="/api/like" class="action-form" method="POST">
<input type="hidden" name="redirect" value="{{ redir }}"> <input type="hidden" name="redirect" value="{{ redir }}">
<input type="hidden" name="id" value="{{ obj.id }}"> <input type="hidden" name="id" value="{{ obj.id }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">like</button> <button type="submit" class="button is-danger is-light">like</button>
</form> </form>
{% endif %} {% endif %}
@ -331,14 +332,14 @@
<input type="hidden" name="id" value="{{ obj.id }}"> <input type="hidden" name="id" value="{{ obj.id }}">
<input type="hidden" name="undo" value="yes"> <input type="hidden" name="undo" value="yes">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">unbookmark</button> <button type="submit" class="button is-light">unbookmark</button>
</form> </form>
{% else %} {% else %}
<form action="/api/bookmark" class="action-form" method="POST"> <form action="/api/bookmark" class="action-form" method="POST">
<input type="hidden" name="redirect" value="{{ redir }}"> <input type="hidden" name="redirect" value="{{ redir }}">
<input type="hidden" name="id" value="{{ obj.id }}"> <input type="hidden" name="id" value="{{ obj.id }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">bookmark</button> <button type="submit" class="button is-light">bookmark</button>
</form> </form>
{% endif %} {% endif %}
@ -347,21 +348,21 @@
<input type="hidden" name="redirect" value="{{ redir }}"> <input type="hidden" name="redirect" value="{{ redir }}">
<input type="hidden" name="id" value="{{ obj.id }}"> <input type="hidden" name="id" value="{{ obj.id }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button" onclick="return confirm('Confirm the delete action?');">delete</button> <button type="submit" class="button is-light" onclick="return confirm('Confirm the delete action?');">delete</button>
</form> </form>
{% if meta.pinned %} {% if meta.pinned %}
<form action="/api/note/unpin" class="action-form" method="POST"> <form action="/api/note/unpin" class="action-form" method="POST">
<input type="hidden" name="redirect" value="{{ redir }}"> <input type="hidden" name="redirect" value="{{ redir }}">
<input type="hidden" name="id" value="{{ obj.id }}"> <input type="hidden" name="id" value="{{ obj.id }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">unpin</button> <button type="submit" class="button is-light">unpin</button>
</form> </form>
{% else %} {% else %}
<form action="/api/note/pin" class="action-form" method="POST"> <form action="/api/note/pin" class="action-form" method="POST">
<input type="hidden" name="redirect" value="{{ redir }}"> <input type="hidden" name="redirect" value="{{ redir }}">
<input type="hidden" name="id" value="{{ obj.id }}"> <input type="hidden" name="id" value="{{ obj.id }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">pin</button> <button type="submit" class="button is-light">pin</button>
</form> </form>
{% endif %} {% endif %}
@ -369,22 +370,22 @@
{% endif %} {% endif %}
{% if session.logged_in and obj.inReplyTo and not meta.count_reply and not perma %} {% if session.logged_in and obj.inReplyTo and not meta.count_reply and not perma %}
<a class="button" href="/admin/thread?oid={{aid}}">thread</a> <a class="button is-light" href="/admin/thread?oid={{aid}}">thread</a>
{% endif %} {% endif %}
{% if meta | get_visibility | visibility_is_public %} {% if meta | get_visibility | visibility_is_public %}
{% if obj | url_or_id | get_url | is_from_outbox %} {% if obj | url_or_id | get_url | is_from_outbox %}
{% if not perma %} {% if not perma %}
<a class="button" href="{{ obj | url_or_id | get_url }}">permalink</a> <a class="button is-light" href="{{ obj | url_or_id | get_url }}">permalink</a>
{% endif %} {% endif %}
{% else %} {% else %}
<a class="button" href="{{ obj | url_or_id | get_url }}" rel="external noreferrer">source</a> <a class="button" href="{{ obj | url_or_id | get_url }}" rel="external noreferrer">source</a>
{% if session.logged_in %} {% if session.logged_in %}
<a class="button" href="/admin/profile?actor_id={{actor.id}}">profile</a> <a class="button is-light" href="/admin/profile?actor_id={{actor.id}}">profile</a>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endif %} {% endif %}
<a class="button bar-item-no-border">{{ meta | get_visibility | visibility }}</a> <a class="button is-light">{{ meta | get_visibility | visibility }}</a>
</aside> </aside>