thread page mostly finished

app/templates/common/404.html

@@ -0,0 +1,8 @@
+{%- from 'common/macros.html' import subheader -%}
+{%- extends 'base.html' -%}
+{%- block title -%}Not found{%- endblock -%}
+{%- block content -%}
+{%- call() subheader('404 Not Found') -%}
+<span>The requested URL was not found.</span>
+{%- endcall -%}
+{%- endblock -%}

app/templates/common/macros.html

@@ -65,3 +65,116 @@
 {%- endif -%}
 </span>
 {%- endmacro %}
+
+{% macro tabs(prefix='', labels = []) -%}
+<div class="tab-container">
+  <div class="tab-bar" role="tablist">
+    {%- for tab_label in labels -%}
+    <button type="button" class="tab-button" role="tab" aria-selected="{{'true' if loop.index0==0 else 'false'}}" id="{{prefix+'-'+(tab_label | lower)+'-tab'}}" aria-controls="{{prefix+'-'+(tab_label | lower)+'-content'}}">{{tab_label}}</button>
+    {%- endfor -%}
+  </div>
+  {%- for tab_label in labels -%}
+  <div class="plank secondary-bg even no-shadow tab-content {{'hidden' if loop.index0!=0 else ''}}" role="tabpanel" aria-labelledby="{{prefix+'-'+(tab_label | lower)+'-tab'}}" id="{{prefix+'-'+(tab_label | lower)+'-content'}}">
+    {{- caller(loop.index0) -}}
+  </div>
+  {%- endfor -%}
+</div>
+{%- endmacro %}
+
+{% macro babycode_editor_component(
+  placeholder='Post content',
+  prefill=''
+) -%}
+{%- call(idx) tabs(prefix='babycode', labels=['Write', 'Preview']) -%}
+{%- if idx == 0 -%}
+<span class="babycode-editor-controls">
+  <span class="button-row">
+    <button type="button" class="minimal"><b>B</b></button>
+    <button type="button" class="minimal"><i>i</i></button>
+    <button type="button" class="minimal"><s>S</s></button>
+    <button type="button" class="minimal"><u>U</u></button>
+    <button type="button" class="minimal"><code>://</code></button>
+    <button type="button" class="minimal"><code>&lt;/&gt;</code></button>
+    <button type="button" class="minimal">1.</button>
+    <button type="button" class="minimal">&bullet;</button>
+    <button type="button" class="minimal"><img src="/static/emoji/angry.png" class="emoji"></button>
+  </span>
+  <a href="##">babycode help</a>
+</span>
+<textarea name="babycode-content" class="babycode-editor" placeholder="{{placeholder}}" required>{{ prefill }}</textarea>
+{%- endif -%}
+{%- endcall -%}
+{%- endmacro %}
+
+{% macro full_post(
+  post, render_sig=true, is_latest=false,
+  show_toolbar=true, is_editing=false, thread=none,
+  show_reactions=true
+) -%}
+{%- if is_logged_in() -%}
+{%- set can_delete = post.user_id == get_active_user().id or is_mod() -%}
+{%- else -%}
+{%- set show_toolbar = false -%}
+{%- endif -%}
+{%- set owns = is_logged_in() and post.user_id == get_active_user().id -%}
+{%- set can_reply = (is_logged_in()) and (not thread.locked or is_mod()) -%}
+<div class="usercard plank even contrast-bg minimal no-shadow">
+  <div class="usercard-inner">
+    <img src="{{post.avatar_path}}" class="avatar">
+    <div class="usercard-rest">
+      <a href="{{url_for('users.user_page', username=post.username)}}">{{post.display_name if post.display_name else post.username}}</a>
+      <abbr title="mention">@{{post.username}}</abbr>
+      <i>{{post.status}}</i>
+      {%- set badges=post.badges_json | fromjson -%}
+      <div class="badges-container">
+        {%- for badge in badges -%}
+        {%- if badge.link -%}<a href="{{badge.link}}">{%- endif -%}
+        <img src="{{badge.file_path}}" alt="{{badge.label}}" title="{{badge.label}}" class="badge-button">
+        {%- if badge.link -%}</a>{%- endif -%}
+        {%- endfor -%}
+      </div>
+    </div>
+  </div>
+</div>
+<div class="post-content">
+  <div class="plank even minimal secondary-bg no-shadow post-info">
+    <a href="{{get_post_url(post.id, _anchor=true)}}"><i>Posted on {{timestamp(post.created_at)}}</i></a>
+    {%- if show_toolbar -%}
+    <span class="thread-actions">
+      {%- if owns -%}
+      <a class="linkbutton" href="{{url_for('posts.edit', post_id=post.id)}}">Edit</a>
+      {%- endif -%}
+      {%- if can_reply -%}
+      <button>Quote</button>
+      {%- endif -%}
+      {%- if can_delete -%}
+      <button class="critical">Delete</button>
+      {%- endif -%}
+      <button>Bookmark&hellip;</button>
+    </span>
+    {%- endif -%}
+  </div>
+  <div class="plank even no-shadow post-content-inner minimal">{{post.content | safe}}
+    {%- if render_sig and post.signature_rendered -%}
+    <div class="post-signature">{{post.signature_rendered | safe}}</div>
+    {%- endif -%}
+  </div>
+  {%- if show_reactions -%}
+  <div class="plank even secondary-bg minimal no-shadow">
+    <span class="button-row">
+      {%- for reaction in Reactions.for_post(post.id) -%}
+      {% set reactors = Reactions.get_users(post.id, reaction.reaction_text) | map(attribute='username') | list %}
+      {% set reactors_trimmed = reactors[:10] %}
+      {% set reactors_str = reactors_trimmed | join (',\n') %}
+      {% if reactors | count > 10 %}
+        {% set reactors_str = reactors_str + '\n...and many others' %}
+      {% endif %}
+      {% set has_reacted = get_active_user() is not none and get_active_user().username in reactors %}
+      <button {{'disabled' if not is_logged_in() else ''}} title="{{reactors_str}}" class="minimal {{'alt' if has_reacted else ''}}"><img src="/static/emoji/{{reaction.reaction_text}}.png">{{reaction.c}}</button>
+      {%- endfor -%}
+    </span>
+    {%- if is_logged_in() -%}<button>Add reaction</button>{%- endif -%}
+  </div>
+  {%- endif -%}
+</div>
+{%- endmacro %}

app/templates/common/topnav.html

@@ -19,7 +19,7 @@
     <input type="text" placeholder="Username" name="username" autocomplete="username" required>
     <input type="password" placeholder="Password" name="password" autocomplete="current-password" required>
     <input type="submit" value="Log in">
-    <a href="{{url_for('users.sign_up')}}" class="linkbutton">Sign up</a>
+    <a href="{{url_for('users.sign_up')}}" class="linkbutton alt">Sign up</a>
   </form>
   {%- endif -%}
 </nav>