From 15c0db6fe4dc2012223557d802096c6f4c36a958 Mon Sep 17 00:00:00 2001
From: blendoit <blendoit@gmail.com>
Date: Mon, 27 Jan 2020 17:41:34 -0800
Subject: Add yes/no buttons and animation on home page.

Also add comments throughout.
---
 app/routes.py                 |  4 +--
 app/static/styles/default.css |  1 -
 app/static/styles/home.css    | 77 ++++++++++++++++++++++++++-----------------
 app/templates/home.html       | 30 ++++++++++-------
 4 files changed, 66 insertions(+), 46 deletions(-)

(limited to 'app')

diff --git a/app/routes.py b/app/routes.py
index 6c7059a..e520602 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -9,7 +9,7 @@ This Python module contains the logic supporting:
 
 Python dependencies:
 - flask: provides web application features
-- forms: provides secure form user submission
+- forms: provides secure user form submission
 - sqlalchemy: provides communication with database on server.
 
 Personal imports:
@@ -25,7 +25,7 @@ from placeholder_news import news
 from placeholder_messages import messages
 
 app = Flask(__name__)
-app.config['SECRET_KEY'] = 'foobarblendoitfoobar!'
+app.config['SECRET_KEY'] = 'Scooby_Lu,_where_are_you?'
 app.config['SQLALCHEMY_DATABASE_URI'] = 'mariadb:///site.db'
 
 db = SQLAlchemy(app)
diff --git a/app/static/styles/default.css b/app/static/styles/default.css
index 51c6549..069588d 100644
--- a/app/static/styles/default.css
+++ b/app/static/styles/default.css
@@ -6,7 +6,6 @@
     --no: rgba(255, 0, 0, 0.7);
     background-image: url(../img/home.png);
     background-repeat: repeat-x;
-    transition-timing-function: ease-in-out;
 }
 
 * {
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index 553299c..a188754 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -1,19 +1,4 @@
-.main {
-    height: 100%;
-    position: relative;
-    z-index: 0;
-    overflow: hidden;
-}
-
-.feed-post {
-    height: 100%;
-    display: flex;
-    position: relative;
-    flex-wrap: wrap;
-    overflow: auto;
-    justify-content: space-between;
-}
-
+/* Tabs. */
 .tab-yes {
     height: 100%;
     width: 3%;
@@ -21,6 +6,7 @@
     position: relative;
     background: var(--yes);
 }
+.tab-yes:hover {width: 4%; transition: 0.2s;}
 .tab-no {
     height: 100%;
     width: 3%;
@@ -28,31 +14,60 @@
     position: relative;
     background: var(--no);
 }
+.tab-no:hover {width: 4%; transition: 0.2s;}
 
-.tab-yes:hover {
-    width: 4%;
-    transition: 0.2s;
+/* Feed of posts. */
+.feed-post {
+    height: 100%;
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    overflow: auto;
+    justify-content: space-between;
 }
 
-.tab-no:hover {
-    width: 4%;
-    transition: 0.2s;
+.post-wrapper {
+    position: relative;
+    max-height: 20%;
+    max-width: 30%;
 }
 
 .post {
-    max-height: 20%;
-    max-width: 30%;
+    height: 70%;
     background: white;
-    border-radius: 14px;
+    border-radius: 12px;
     padding: 1rem;
     margin: 1rem;
     overflow: hidden;
 }
+.post:hover {overflow: auto;}
+.post:hover + .btn-wrapper {transform: rotateX(0deg);}
 
-.post:hover {
-    background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
-    cursor: pointer;
-    transition: 0.8s;
-    color: white;
-    overflow: auto;
+.btn-wrapper {
+    position: relative;
+    top: -0.6rem;
+    z-index: 1;
+    transition: 400ms transform ease-in-out;
+    transform: rotateX(90deg);
+}
+.btn-wrapper:hover {transform: rotateX(0deg);}
+
+.btn-yes {
+    height: 25%;
+    width: 45%;
+    float: left;
+    left: 1rem;
+    position: relative;
+    background: var(--yes);
+    border-radius: 12px;
+}
+
+.btn-no {
+    height: 25%;
+    width: 45%;
+    float: right;
+    right: 1rem;
+    position: relative;
+    background: var(--no);
+    border-radius: 12px;
 }
diff --git a/app/templates/home.html b/app/templates/home.html
index 9d77add..d21c427 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -4,21 +4,27 @@
 {% extends "base.html" %}
 {% block content %}
 
-<div>
-    <a href="{{ url_for('yes') }}" class="tab-yes"></a>
-    <a href="{{ url_for('no') }}" class="tab-no"></a>
+<!-- 'Yes' tab -->
+<a href="{{ url_for('yes') }}" class="tab-yes"></a>
+<!-- 'No' tab -->
+<a href="{{ url_for('no') }}" class="tab-no"></a>
 
-    <div class="main">
-        <div class="feed-post">
-            {% for post in posts %}
-            <div class="post">
-                <h1>{{post.author}}</h1>
-                <h2>{{post.date}}</h2>
-                <p>{{post.content}}</p>
-            </div>
-            {% endfor %}
+<div class="feed-post">
+    {% for post in posts %}
+    <div class="post-wrapper">
+        <div class="post">
+            <h1>{{post.author}}</h1>
+            <h2>{{post.date}}</h2>
+            <p>{{post.content}}</p>
+        </div>
+
+        <div class="btn-wrapper">
+            <a href="{{ url_for('home') }}" class="btn-yes"></a>
+            <a href="{{ url_for('home') }}" class="btn-no"></a>
         </div>
     </div>
+
+    {% endfor %}
 </div>
 
 {% endblock content %}
-- 
cgit v1.2.3