From ec90aca699de31631aad53e63ebf8292ff8eefbe Mon Sep 17 00:00:00 2001
From: Jason McBrayer <jmcbray@carcosa.net>
Date: Thu, 9 Aug 2018 22:01:23 -0400
Subject: [PATCH] Add templates and css for emoji reference

---
 brutaldon/static/css/brutaldon.css     | 15 +++++++++++++++
 brutaldon/static/css/fullbrutalism.css |  7 +++++++
 brutaldon/templates/main/emoji.html    | 26 ++++++++++++++++++++++++++
 3 files changed, 48 insertions(+)
 create mode 100644 brutaldon/templates/main/emoji.html

diff --git a/brutaldon/static/css/brutaldon.css b/brutaldon/static/css/brutaldon.css
index 7157683..98d28ba 100644
--- a/brutaldon/static/css/brutaldon.css
+++ b/brutaldon/static/css/brutaldon.css
@@ -80,6 +80,21 @@ span.account-locked
     color: #FF0000;
 }
 
+.emoji-box
+{
+    padding: .75rem;
+    background-color: #FCFCFC;
+    border: 1px solid #CCC;
+    border-radius: 5px;
+}
+
+img.emoji
+{
+    display: inline;
+    max-height: 1.5rem;
+    max-width: 1.5rem;
+}
+
 @media screen and (max-width: 768px) {
     .media {
         display: block;
diff --git a/brutaldon/static/css/fullbrutalism.css b/brutaldon/static/css/fullbrutalism.css
index 3b80ba0..b029ef6 100644
--- a/brutaldon/static/css/fullbrutalism.css
+++ b/brutaldon/static/css/fullbrutalism.css
@@ -287,3 +287,10 @@ label
 {
     color: #FF0000;
 }
+
+img.emoji
+{
+    display: inline;
+    max-height: 1.5rem;
+    max-width: 1.5rem;
+}
diff --git a/brutaldon/templates/main/emoji.html b/brutaldon/templates/main/emoji.html
new file mode 100644
index 0000000..80da6c1
--- /dev/null
+++ b/brutaldon/templates/main/emoji.html
@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+
+{% block title %}Brutaldon ({{ own_acct.username }}) - Custom emoji reference {% endblock %}
+
+{% block content %}
+    <section>
+        <h1 class="title">Custom emoji reference</h1>
+        <p class="subtitle">
+            Copy shortcodes from the list below to use your instance's custom emoji.
+        </p>
+    </section>
+
+    <hr>
+    <section>
+        <div class="columns is-9 is-variable is-centered is-multiline">
+            {% for emojo in emojos  %}
+                <div class="column is-one-quarter">
+                    <p class="level emoji-box">
+                        <img alt="" class="level-item emoji" src="{{ emojo.url }}">
+                        <span class="level-item">:{{ emojo.shortcode }}:</span>
+                    </p>
+                </div>
+            {% endfor %}
+        </div>
+    </section>
+{% endblock %}