[Flask] Aggregate your news and vote for the content you care about.
Change vertical to horizontal animation for consistency.
Changed files
app/static/styles/home.css
@@ -2,8 +2,8 @@
2
2
.tab-yes {
3
3
height: 100%;
4
4
width: 10%;
5
Removed:
float: left;
6
Removed:
position: relative;
5
Added:
position: absolute;
6
Added:
left: 0;
7
7
background: var(--yes);
8
8
}
9
9
.tab-yes:hover ~ .feed-post {
@@ -14,8 +14,8 @@
14
14
.tab-no {
15
15
height: 100%;
16
16
width: 10%;
17
Removed:
float: right;
18
Removed:
position: relative;
17
Added:
position: absolute;
18
Added:
right: 0;
19
19
background: var(--no);
20
20
}
21
21
.tab-no:hover ~ .feed-post {
@@ -41,66 +41,51 @@
41
41
42
42
.post-wrapper {
43
43
position: relative;
44
Removed:
z-index: 1;
45
44
max-height: 25%;
46
45
max-width: 40%;
46
Added:
margin: 1rem;
47
Added:
background: blue;
47
48
perspective: 600px;
48
Removed:
perspective-origin: bottom;
49
49
}
50
50
51
Removed:
@keyframes post {
52
Removed:
0% {}
53
Removed:
100% {overflow: auto; height: 40%;}
54
Removed:
}
55
51
.post {
56
52
position: relative;
57
Removed:
height: 70%;
53
Added:
margin: 0 auto;
54
Added:
height: 50%;
55
Added:
width: 70%;
58
56
background: white;
59
Removed:
z-index: 0;
60
57
border-radius: 12px;
61
58
padding: 1rem;
62
Removed:
margin: 1rem;
63
59
overflow: hidden;
60
Added:
transition-duration: 1s;
64
61
}
65
Removed:
.post:hover {
66
Removed:
animation-name: post;
67
Removed:
animation-duration: var(--med-speed);
68
Removed:
animation-fill-mode: both;
62
Added:
.post-wrapper:hover > .post {
63
Added:
width: 60%;
64
Added:
overflow: auto;
69
65
}
70
Removed:
.post:hover + .btn-wrapper {
71
Removed:
animation-name: btn-wrapper;
72
Removed:
animation-duration: var(--med-speed);
73
Removed:
animation-fill-mode: both;
74
Removed:
}
75
66
76
Removed:
@keyframes btn-wrapper {
77
Removed:
0% {}
78
Removed:
100% {transform: rotateX(0deg); opacity: 100%;}
79
Removed:
}
80
Removed:
.btn-wrapper {
81
Removed:
position: relative;
82
Removed:
z-index: 1;
83
Removed:
opacity: 0%;
84
Removed:
transform: rotateX(-90deg);
85
Removed:
}
86
Removed:
87
67
.btn-yes {
88
Removed:
height: 25%;
89
Removed:
width: 40%;
90
Removed:
float: left;
91
Removed:
left: 1rem;
92
Removed:
z-index: 2;
93
Removed:
position: relative;
68
Added:
height: 100%;
69
Added:
width: 20%;
70
Added:
position: absolute;
71
Added:
left: 0;
94
72
background: var(--yes);
95
73
border-radius: 12px;
74
Added:
transform: rotateY(-90deg);
75
Added:
transition-duration: 1s;
76
Added:
transform-origin: right;
96
77
}
78
Added:
.post-wrapper:hover > .btn-yes {transform: rotateY(0deg);}
97
79
98
80
.btn-no {
99
Removed:
height: 25%;
100
Removed:
width: 40%;
101
Removed:
float: right;
102
Removed:
right: 1rem;
103
Removed:
position: relative;
81
Added:
height: 100%;
82
Added:
width: 20%;
83
Added:
position: absolute;
84
Added:
right: 0;
104
85
background: var(--no);
105
86
border-radius: 12px;
87
Added:
transform: rotateY(90deg);
88
Added:
transition-duration: 1s;
89
Added:
transform-origin: left;
106
90
}
91
Added:
.post-wrapper:hover > .btn-no {transform: rotateY(0deg);}
app/templates/home.html
@@ -12,14 +12,12 @@
12
12
<div class="feed-post">
13
13
{% for post in posts %}
14
14
<div class="post-wrapper">
15
Added:
<a href="{{ url_for('home') }}" class="btn-yes"></a>
16
Added:
<a href="{{ url_for('home') }}" class="btn-no"></a>
15
17
<div class="post">
16
18
<h1>{{post.author}}</h1>
17
19
<h2>{{post.date}}</h2>
18
20
<p>{{post.content}}</p>
19
Removed:
</div>
20
Removed:
<div class="btn-wrapper">
21
Removed:
<a href="{{ url_for('home') }}" class="btn-yes"></a>
22
Removed:
<a href="{{ url_for('home') }}" class="btn-no"></a>
23
21
</div>
24
22
</div>
25
23