From 26e4680dd6fd824e453435d246bc90bda06ed60e Mon Sep 17 00:00:00 2001
From: blendoit <blendoit@gmail.com>
Date: Wed, 29 Jan 2020 09:31:06 -0800
Subject: Change vertical to horizontal animation for consistency.

---
 app/static/styles/home.css | 73 ++++++++++++++++++----------------------------
 app/templates/home.html    |  6 ++--
 2 files changed, 31 insertions(+), 48 deletions(-)

diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index d18729d..d7828c3 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -2,8 +2,8 @@
 .tab-yes {
     height: 100%;
     width: 10%;
-    float: left;
-    position: relative;
+    position: absolute;
+    left: 0;
     background: var(--yes);
 }
 .tab-yes:hover ~ .feed-post {
@@ -14,8 +14,8 @@
 .tab-no {
     height: 100%;
     width: 10%;
-    float: right;
-    position: relative;
+    position: absolute;
+    right: 0;
     background: var(--no);
 }
 .tab-no:hover ~ .feed-post {
@@ -41,66 +41,51 @@
 
 .post-wrapper {
     position: relative;
-    z-index: 1;
     max-height: 25%;
     max-width: 40%;
+    margin: 1rem;
+    background: blue;
     perspective: 600px;
-    perspective-origin: bottom;
 }
 
-@keyframes post {
-    0% {}
-    100% {overflow: auto; height: 40%;}
-}
 .post {
     position: relative;
-    height: 70%;
+    margin: 0 auto;
+    height: 50%;
+    width: 70%;
     background: white;
-    z-index: 0;
     border-radius: 12px;
     padding: 1rem;
-    margin: 1rem;
     overflow: hidden;
+    transition-duration: 1s;
 }
-.post:hover {
-    animation-name: post;
-    animation-duration: var(--med-speed);
-    animation-fill-mode: both;
-}
-.post:hover + .btn-wrapper {
-    animation-name: btn-wrapper;
-    animation-duration: var(--med-speed);
-    animation-fill-mode: both;
-}
-
-@keyframes btn-wrapper {
-    0% {}
-    100% {transform: rotateX(0deg); opacity: 100%;}
-}
-.btn-wrapper {
-    position: relative;
-    z-index: 1;
-    opacity: 0%;
-    transform: rotateX(-90deg);
+.post-wrapper:hover > .post {
+    width: 60%;
+    overflow: auto;
 }
 
 .btn-yes {
-    height: 25%;
-    width: 40%;
-    float: left;
-    left: 1rem;
-    z-index: 2;
-    position: relative;
+    height: 100%;
+    width: 20%;
+    position: absolute;
+    left: 0;
     background: var(--yes);
     border-radius: 12px;
+    transform: rotateY(-90deg);
+    transition-duration: 1s;
+    transform-origin: right;
 }
+.post-wrapper:hover > .btn-yes {transform: rotateY(0deg);}
 
 .btn-no {
-    height: 25%;
-    width: 40%;
-    float: right;
-    right: 1rem;
-    position: relative;
+    height: 100%;
+    width: 20%;
+    position: absolute;
+    right: 0;
     background: var(--no);
     border-radius: 12px;
+    transform: rotateY(90deg);
+    transition-duration: 1s;
+    transform-origin: left;
 }
+.post-wrapper:hover > .btn-no {transform: rotateY(0deg);}
diff --git a/app/templates/home.html b/app/templates/home.html
index 5990c14..28bde41 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -12,15 +12,13 @@
 <div class="feed-post">
     {% for post in posts %}
     <div class="post-wrapper">
+        <a href="{{ url_for('home') }}" class="btn-yes"></a>
+        <a href="{{ url_for('home') }}" class="btn-no"></a>
         <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 %}
-- 
cgit v1.2.3