From ece3cd7e6d01045722e6c4f893659d0d0c80ab41 Mon Sep 17 00:00:00 2001
From: Bryan Brancotte <bryan.brancotte@pasteur.fr>
Date: Tue, 28 Jul 2020 12:37:45 +0200
Subject: [PATCH] Fixing flip card effect, closing #186 Using position:absolute
was the cause of the blinking for the first render of the back of the card
Using .choices_background:hover{...background-color:white} was the cause of
the impression that the flip card was turning only one out of two Moving down
box-shadow to flip-card-inner level
---
ippisite/ippidb/static/css/main.css | 6 ++++--
ippisite/ippidb/templates/index.html | 8 ++++----
2 files changed, 8 insertions(+), 6 deletions(-)
diff --git a/ippisite/ippidb/static/css/main.css b/ippisite/ippidb/static/css/main.css
index a252907b..033d23bd 100644
--- a/ippisite/ippidb/static/css/main.css
+++ b/ippisite/ippidb/static/css/main.css
@@ -379,13 +379,15 @@ div.hidden {
}
.choices_background:hover {
- box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
- background-color: rgba(255, 255, 255, 1);
cursor: pointer;
color: #000;
text-decoration: none;
}
+.choices_background:hover .flip-card-inner{
+ box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
+}
+
.choices_image {
text-align: center;
padding: 11px;
diff --git a/ippisite/ippidb/templates/index.html b/ippisite/ippidb/templates/index.html
index b85937dc..ead7713e 100644
--- a/ippisite/ippidb/templates/index.html
+++ b/ippisite/ippidb/templates/index.html
@@ -74,7 +74,7 @@
</div>
<div class="flip-card-back">
<a href="/compounds">
- <div style="top:20%; position:absolute;">
+ <div style="padding-top: 3.5em;">
<div class="choices_title">
Query
</div>
@@ -105,7 +105,7 @@
</div>
<div class="flip-card-back">
<a href="/about-pca">
- <div style="top:20%; position:absolute;">
+ <div style="padding-top: 3.5em;">
<div class="choices_title">
Navigate the PPI chemical space
</div>
@@ -138,7 +138,7 @@
</div>
<div class="flip-card-back">
<a href="/about-le-lle">
- <div style="top:20%; position:absolute;">
+ <div style="padding-top: 3.5em;">
<div class="choices_title">
Surf the efficiency plot
</div>
@@ -173,7 +173,7 @@
</div>
<div class="flip-card-back">
<a href="/contribute">
- <div style="top:20%; position:absolute; ">
+ <div style="padding-top: 2.5em; ">
<div class="choices_title">
Contribute
</div>
--
GitLab