From 26e4680dd6fd824e453435d246bc90bda06ed60e Mon Sep 17 00:00:00 2001 From: blendoit 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 @@
{% for post in posts %}
+ +

{{post.author}}

{{post.date}}

{{post.content}}

-
- - -
{% endfor %} -- cgit v1.2.3