add scuttlebutt templates

This commit is contained in:
glyph 2021-11-15 17:29:42 +02:00
parent 53cbe0f41a
commit b10cfd31c0
4 changed files with 76 additions and 0 deletions

View File

@ -0,0 +1,12 @@
{%- extends "nav" -%}
{%- block card %}
<!-- SCUTTLEBUTT MESSAGES -->
<div class="card center">
<div class="card-container">
<!-- FLASH MESSAGE -->
{% include "snippets/flash_message" %}
<!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
{% include "snippets/noscript" %}
</div>
</div>
{%- endblock card -%}

View File

@ -0,0 +1,15 @@
{%- extends "nav" -%}
{%- block card %}
<!-- SCUTTLEBUTT PEERS -->
<div class="card center">
<div class="card-container">
<!-- BUTTONS -->
<div id="buttons">
<a id="friends" class="button button-primary center" href="/scuttlebutt/friends" title="List Friends">Friends</a>
<a id="follows" class="button button-primary center" href="/scuttlebutt/follows" title="List Follows">Follows</a>
<a id="followers" class="button button-primary center" href="/scuttlebutt/followers" title="List Followers">Followers</a>
<a id="blocks" class="button button-primary center" href="/scuttlebutt/blocks" title="List Blocks">Blocks</a>
</div>
</div>
</div>
{%- endblock card -%}

View File

@ -0,0 +1,16 @@
{%- extends "nav" -%}
{%- block card %}
<div class="card center">
<ul class="list">
<!-- for peer in peers -->
<li>
<a class="list-item link light-bg" href="/scuttlebutt/profile?public_key=pub_key">
<img id="peerImage" class="icon list-icon" src="{ image_path }" alt="{ peer_name }'s profile image">
<p id="peerName" class="list-text">{ name }</p>
<label class="label-small label-ellipsis list-label font-gray" for="peerName" title="{ peer_name }'s Public Key">{ public_key }</label>
</a>
</li>
<!-- end for loop -->
</ul>
</div>
{%- endblock card -%}

View File

@ -0,0 +1,33 @@
{%- extends "nav" -%}
{%- block card %}
<!-- USER PROFILE -->
<div class="card center">
<!-- PROFILE INFO BOX -->
<div class="capsule capsule-profile" title="Scuttlebutt account profile information">
<!-- edit profile button -->
<img id="editProfile" class="icon-small nav-icon-right" src="/icons/pencil.svg" alt="Profile picture">
<!-- PROFILE BIO -->
<!-- profile picture -->
<img id="profilePicture" class="icon-large" src="{ image_path }" alt="Profile picture">
<!-- name, public key & description -->
<p id="profileName" class="card-text" title="Name">{ name }</p>
<label class="label-small label-ellipsis font-gray" style="user-select: all;" for="profileName" title="Public Key">{ public_key }</label>
<p id="profileDescription" style="margin-top: 1rem" class="card-text" title="Description">{ description }</p>
</div>
<!-- PUBLIC POST FORM -->
<form id="postForm" action="/scuttlebutt/post" method="post">
<!-- input for message contents -->
<textarea id="publicPost" class="center input message-input" title="Compose Public Post"></textarea>
<input id="publishPost" class="button button-primary center" title="Publish" type="submit" value="Publish">
</form>
<!-- BUTTONS -->
<!-- TODO: each of these buttons needs to be a form with a public key -->
<div id="buttons">
<a id="followPeer" class="button button-primary center" href="/scuttlebutt/follow" title="Follow Peer">Follow</a>
<a id="blockPeer" class="button button-warning center" href="/scuttlebutt/block" title="Block Peer">Block</a>
<a id="privateMessage" class="button button-primary center" href="/scuttlebutt/private_message" title="Private Message">Private Message</a>
</div>
<!-- FLASH MESSAGE -->
{% include "snippets/flash_message" %}
</div>
{%- endblock card -%}