From 673d7adedddaf95c05e24e22367577aacb6b412e Mon Sep 17 00:00:00 2001
From: McBrayer <mcbrayjf@dhec.sc.gov>
Date: Fri, 30 Nov 2018 14:30:46 -0500
Subject: [PATCH] Add display of cards. This is not 100% complete.

---
 brutaldon/static/css/brutaldon-dark.css    | 22 ++++++++++++++++
 brutaldon/static/css/brutaldon.css         | 29 ++++++++++++++++------
 brutaldon/static/css/fullbrutalism.css     | 23 +++++++++++++++++
 brutaldon/templates/main/toot_partial.html | 21 ++++++++++++++++
 brutaldon/templates/main/user.html         |  2 +-
 5 files changed, 88 insertions(+), 9 deletions(-)

diff --git a/brutaldon/static/css/brutaldon-dark.css b/brutaldon/static/css/brutaldon-dark.css
index 59730cf..c9a33b5 100644
--- a/brutaldon/static/css/brutaldon-dark.css
+++ b/brutaldon/static/css/brutaldon-dark.css
@@ -23,14 +23,25 @@ img.fav-avatar {
     padding: 1.5ex;
 }
 
+.is-max-128 img, .is-max-256 img
+{
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right:0;
+    top: 0;
+}
+
 .is-max-128 {
     max-height: 128px;
     max-width: 128px;
+    padding-top: 75%;
 }
 
 .is-max-256 {
     max-height: 256px;
     max-width: 256px;
+    padding-top: 75%;
 }
 
 figure.media-left p.image a img
@@ -195,3 +206,14 @@ input#id_poll_frequency
 {
     max-width: 10em;
 }
+
+.card
+{
+    margin-top: 1em;
+}
+
+.card-image
+{
+    padding: 1em;
+    margin 0, auto;
+}
diff --git a/brutaldon/static/css/brutaldon.css b/brutaldon/static/css/brutaldon.css
index ea289e5..73984b0 100644
--- a/brutaldon/static/css/brutaldon.css
+++ b/brutaldon/static/css/brutaldon.css
@@ -15,27 +15,29 @@ img.fav-avatar {
 }
 
 
-div.card-header-title, div.card-header-icon {
-    color: black;
-    -webkit-text-stroke: 2px white;
-    -moz-text-stroke: 2px white;
-    text-stroke: 2px white;
-}
-
-
 .media-content {
     padding: 1.5ex;
 }
 
+.is-max-128 img, .is-max-256 img
+{
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right:0;
+    top: 0;
+}
 
 .is-max-128 {
     max-height: 128px;
     max-width: 128px;
+    padding-top: 75%;
 }
 
 .is-max-256 {
     max-height: 256px;
     max-width: 256px;
+    padding-top: 75%;
 }
 
 
@@ -187,3 +189,14 @@ input#id_poll_frequency
 body.has-navbar-fixed-top, html.has-navbar-fixed-top {
 	  padding-top: 5rem;
 }
+
+.card
+{
+    margin-top: 1em;
+}
+
+.card-image
+{
+    padding: 1em;
+    margin 0, auto;
+}
diff --git a/brutaldon/static/css/fullbrutalism.css b/brutaldon/static/css/fullbrutalism.css
index 854af7b..5898034 100644
--- a/brutaldon/static/css/fullbrutalism.css
+++ b/brutaldon/static/css/fullbrutalism.css
@@ -218,6 +218,11 @@ img.is-32x32 {
     height: 96px;
 }
 
+.is-max-128 img, .is-max-256 img
+{
+    display: block;
+    clear: both;
+}
 .is-max-128 {
     max-height: 128px;
     max-width: 128px;
@@ -339,3 +344,21 @@ img.emoji
 	  display: flex;
 }
 
+.card
+{
+    padding: 1em;
+    margin-top: 1em;
+    border: 1px solid black;
+}
+
+.card-header
+{
+    padding-bottom: 1em;
+    border-bottom: 1px solid black;
+}
+
+.card-image
+{
+    padding: 1em;
+    margin 0, auto;
+}
diff --git a/brutaldon/templates/main/toot_partial.html b/brutaldon/templates/main/toot_partial.html
index d94b4a1..d61a5dc 100644
--- a/brutaldon/templates/main/toot_partial.html
+++ b/brutaldon/templates/main/toot_partial.html
@@ -4,6 +4,7 @@
 {% load taglinks %}
 {% load static %}
 
+
 {% if active %}
 <article id="toot-{{toot.id}}" class="media box active-context">
     {% else %}
@@ -51,6 +52,26 @@
                 </div>
                 {% endif %}
 
+                {% if toot.card %}
+                    <div class="card">
+                        <div class="card-header">
+                            <div class="card-header-title">
+                                <a href="{{ toot.card.url }}"> {{ toot.card.title }} </a>
+                            </div>
+                        </div>
+                        <div class="card-image">
+                            <figure class="image is-max-256">
+                                <a href="{{ toot.card.url }}">
+                                    <img alt="{{ toot.card.title }}" src="{{ toot.card.image }}">
+                                </a>
+                            </figure>
+                        </div>
+                        <div class="card-content">
+                            <p>{{ toot.card.description }}</p>
+                        </div>
+                    </div>
+                {% endif %} 
+
                 {% if toot.media_attachments %}
                 <br>
                 <div class="level attachments">
diff --git a/brutaldon/templates/main/user.html b/brutaldon/templates/main/user.html
index 7d8101d..5df4754 100644
--- a/brutaldon/templates/main/user.html
+++ b/brutaldon/templates/main/user.html
@@ -9,7 +9,7 @@ Brutaldon ({{ own_acct.username }}) - {{ user.acct }} timelime
 
 {% block content %}
 
-<div class="card">
+<div class="card user-card">
     {% if not preferences.theme.is_brutalist %}
         <div class="card-header" style="background-image: url({{ user.header }});">
     {% else %}