From 668e714c31db2b755ec2b7106a922a2320c6e47a Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Wed, 29 Jan 2020 12:53:12 -0800
Subject: [PATCH] styles

---
 fedireads/static/format.css   | 56 +++++++++++++++++++----------------
 fedireads/templates/feed.html |  5 ++++
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/fedireads/static/format.css b/fedireads/static/format.css
index d5c76c5d5..34b3c1425 100644
--- a/fedireads/static/format.css
+++ b/fedireads/static/format.css
@@ -8,22 +8,20 @@
 }
 
 h1 {
-    font-size: 1.2rem;
+    font-size: 1.5rem;
 }
 
 h2 {
     font-size: 1rem;
-    background-color: #F3FFBD;
+    background-color: #B2DBBF;
     padding: 0.5rem 0.2rem;
     margin-bottom: 1rem;
 }
 
-#main, header > div {
-    margin: 0 auto;
-    display: flex;
-    flex-direction: row;
-    max-width: 75rem;
-    width: 100%;
+#top-bar {
+    background-color: #70C1B3;
+    overflow: hidden;
+    padding: 0.5rem;
 }
 
 #branding, #actions {
@@ -31,6 +29,7 @@ h2 {
 }
 #branding {
     flex-grow: 1;
+    font-size: 2rem;
 }
 #branding a {
     text-decoration: none;
@@ -41,30 +40,26 @@ h2 {
     text-align: right;
 }
 
-#top-bar {
-    background-color: #B2DBBF;
-    overflow: hidden;
-    padding: 0.5rem;
-}
-
-#branding {
-    font-size: 2em;
-}
-
-#sidebar {
+#main, header > div {
+    margin: 0 auto;
     display: flex;
-    flex-direction: column;
-    min-width: 20rem;
+    flex-direction: row;
+    max-width: 75rem;
+    width: 100%;
 }
 
-#feed, #content {
+#feed, #content, #sidebar {
     display: flex;
     flex-direction: column;
     margin: 0 1rem 0 0;
 }
 
+#sidebar {
+    min-width: 20rem;
+}
+
 .user-pic {
-    width: 2em;
+    width: 2rem;
     height: auto;
     border-radius: 50%;
     vertical-align: middle;
@@ -72,12 +67,12 @@ h2 {
 
 .book-preview {
     overflow: auto;
-    margin-bottom: 1em;
 }
 
 .book-preview img {
     float: left;
-    margin-right: 0.5em;
+    margin-right: 1em;
+    margin-bottom: 1em;
 }
 
 .book-cover.small {
@@ -87,10 +82,13 @@ h2 {
 
 #content > div, #feed > div, #sidebar > div {
     background-color: #EFEFEF;
-    margin: 1rem 0 1rem 1rem;
+    margin: 1rem 0 0 1rem;
+}
+#content > div > *, #feed > div > *, #sidebar > div > * {
     padding: 1rem;
 }
 
+
 .review-form textarea {
     width: 30rem;
     height: 10rem;
@@ -106,3 +104,9 @@ small {
 blockquote {
     white-space: pre-wrap;
 }
+
+.interaction {
+    background-color: #F3FFBD;
+    clear: both;
+    margin-top: 1rem;
+}
diff --git a/fedireads/templates/feed.html b/fedireads/templates/feed.html
index cb6f7a498..96c8dbdb3 100644
--- a/fedireads/templates/feed.html
+++ b/fedireads/templates/feed.html
@@ -12,6 +12,7 @@
             <p class="title"><a href="{{ book.openlibrary_key }}">{{ book.data.title }}</a></p>
             <p>by <a href="" class="author">{{ book.authors.first.data.name }}</a></p>
             <form name="shelve" action="/shelve/{{ user.localname }}_currently-reading/{{ book.id }}" method="post">
+                {% csrf_token %}
                 <input type="hidden" name="book" value="book.id"></input>
                 <button type="submit">Start reading</button>
             </form>
@@ -25,6 +26,7 @@
             <p class="title"><a href="{{ book.openlibrary_key }}">{{ book.data.title }}</a></p>
             <p>by <a href="" class="author">{{ book.authors.first.data.name }}</a></p>
             <form name="shelve" action="/shelve/{{ user.localname }}_read/{{ book.id }}" method="post">
+                {% csrf_token %}
                 <input type="hidden" name="book" value="book.id"></input>
                 <button type="submit">I'm done!</button>
             </form>
@@ -45,6 +47,7 @@
             </p>
             {% if not book in user_books.all %}
             <form name="shelve" action="/shelve/{{ user.localname }}_to-read/{{ book.id }}" method="post">
+                {% csrf_token %}
                 <input type="hidden" name="book" value="book.id"></input>
                 <button type="submit">Want to read</button>
             </form>
@@ -85,6 +88,7 @@
                     <blockquote>{{ activity.book.data.description }}</blockquote>
                 </p>
             </div>
+            <div class="interaction"><button>⭐️ Like</button></div>
         {% elif activity.fedireads_type == 'Review' %}
             {# display a review #}
             reviewed {{ activity.book.data.title }}
@@ -102,6 +106,7 @@
                 <p>{{ activity.rating }} stars</p>
                 <p>{{ activity.review_content }}</p>
             </div>
+            <div class="interaction"><button>⭐️ Like</button></div>
         {% elif activity.activity_type == 'Follow' %}
             started following someone
         </h2>