[Flask] Aggregate your news and vote for the content you care about.
Add yes/no buttons and animation on home page.
Also add comments throughout.
Changed files
app/routes.py
@@ -9,7 +9,7 @@
9
9
10
10
Python dependencies:
11
11
- flask: provides web application features
12
Removed:
- forms: provides secure form user submission
12
Added:
- forms: provides secure user form submission
13
13
- sqlalchemy: provides communication with database on server.
14
14
15
15
Personal imports:
@@ -25,7 +25,7 @@
25
25
from placeholder_messages import messages
26
26
27
27
app = Flask(__name__)
28
Removed:
app.config['SECRET_KEY'] = 'foobarblendoitfoobar!'
28
Added:
app.config['SECRET_KEY'] = 'Scooby_Lu,_where_are_you?'
29
29
app.config['SQLALCHEMY_DATABASE_URI'] = 'mariadb:///site.db'
30
30
31
31
db = SQLAlchemy(app)
app/static/styles/default.css
@@ -6,7 +6,6 @@
6
6
--no: rgba(255, 0, 0, 0.7);
7
7
background-image: url(../img/home.png);
8
8
background-repeat: repeat-x;
9
Removed:
transition-timing-function: ease-in-out;
10
9
}
11
10
12
11
* {
app/static/styles/home.css
@@ -1,19 +1,4 @@
1
Removed:
.main {
2
Removed:
height: 100%;
3
Removed:
position: relative;
4
Removed:
z-index: 0;
5
Removed:
overflow: hidden;
6
Removed:
}
7
Removed:
8
Removed:
.feed-post {
9
Removed:
height: 100%;
10
Removed:
display: flex;
11
Removed:
position: relative;
12
Removed:
flex-wrap: wrap;
13
Removed:
overflow: auto;
14
Removed:
justify-content: space-between;
15
Removed:
}
16
Removed:
1
Added:
/* Tabs. */
17
2
.tab-yes {
18
3
height: 100%;
19
4
width: 3%;
@@ -21,6 +6,7 @@
21
6
position: relative;
22
7
background: var(--yes);
23
8
}
9
Added:
.tab-yes:hover {width: 4%; transition: 0.2s;}
24
10
.tab-no {
25
11
height: 100%;
26
12
width: 3%;
@@ -28,31 +14,60 @@
28
14
position: relative;
29
15
background: var(--no);
30
16
}
17
Added:
.tab-no:hover {width: 4%; transition: 0.2s;}
31
18
32
Removed:
.tab-yes:hover {
33
Removed:
width: 4%;
34
Removed:
transition: 0.2s;
19
Added:
/* Feed of posts. */
20
Added:
.feed-post {
21
Added:
height: 100%;
22
Added:
display: flex;
23
Added:
position: relative;
24
Added:
flex-wrap: wrap;
25
Added:
overflow: auto;
26
Added:
justify-content: space-between;
35
27
}
36
28
37
Removed:
.tab-no:hover {
38
Removed:
width: 4%;
39
Removed:
transition: 0.2s;
29
Added:
.post-wrapper {
30
Added:
position: relative;
31
Added:
max-height: 20%;
32
Added:
max-width: 30%;
40
33
}
41
34
42
35
.post {
43
Removed:
max-height: 20%;
44
Removed:
max-width: 30%;
36
Added:
height: 70%;
45
37
background: white;
46
Removed:
border-radius: 14px;
38
Added:
border-radius: 12px;
47
39
padding: 1rem;
48
40
margin: 1rem;
49
41
overflow: hidden;
50
42
}
43
Added:
.post:hover {overflow: auto;}
44
Added:
.post:hover + .btn-wrapper {transform: rotateX(0deg);}
51
45
52
Removed:
.post:hover {
53
Removed:
background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
54
Removed:
cursor: pointer;
55
Removed:
transition: 0.8s;
56
Removed:
color: white;
57
Removed:
overflow: auto;
46
Added:
.btn-wrapper {
47
Added:
position: relative;
48
Added:
top: -0.6rem;
49
Added:
z-index: 1;
50
Added:
transition: 400ms transform ease-in-out;
51
Added:
transform: rotateX(90deg);
52
Added:
}
53
Added:
.btn-wrapper:hover {transform: rotateX(0deg);}
54
Added:
55
Added:
.btn-yes {
56
Added:
height: 25%;
57
Added:
width: 45%;
58
Added:
float: left;
59
Added:
left: 1rem;
60
Added:
position: relative;
61
Added:
background: var(--yes);
62
Added:
border-radius: 12px;
63
Added:
}
64
Added:
65
Added:
.btn-no {
66
Added:
height: 25%;
67
Added:
width: 45%;
68
Added:
float: right;
69
Added:
right: 1rem;
70
Added:
position: relative;
71
Added:
background: var(--no);
72
Added:
border-radius: 12px;
58
73
}
app/templates/home.html
@@ -4,21 +4,27 @@
4
4
{% extends "base.html" %}
5
5
{% block content %}
6
6
7
Removed:
<div>
8
Removed:
<a href="{{ url_for('yes') }}" class="tab-yes"></a>
9
Removed:
<a href="{{ url_for('no') }}" class="tab-no"></a>
7
Added:
<!-- 'Yes' tab -->
8
Added:
<a href="{{ url_for('yes') }}" class="tab-yes"></a>
9
Added:
<!-- 'No' tab -->
10
Added:
<a href="{{ url_for('no') }}" class="tab-no"></a>
10
11
11
Removed:
<div class="main">
12
Removed:
<div class="feed-post">
13
Removed:
{% for post in posts %}
14
Removed:
<div class="post">
15
Removed:
<h1>{{post.author}}</h1>
16
Removed:
<h2>{{post.date}}</h2>
17
Removed:
<p>{{post.content}}</p>
18
Removed:
</div>
19
Removed:
{% endfor %}
12
Added:
<div class="feed-post">
13
Added:
{% for post in posts %}
14
Added:
<div class="post-wrapper">
15
Added:
<div class="post">
16
Added:
<h1>{{post.author}}</h1>
17
Added:
<h2>{{post.date}}</h2>
18
Added:
<p>{{post.content}}</p>
20
19
</div>
20
Added:
21
Added:
<div class="btn-wrapper">
22
Added:
<a href="{{ url_for('home') }}" class="btn-yes"></a>
23
Added:
<a href="{{ url_for('home') }}" class="btn-no"></a>
24
Added:
</div>
21
25
</div>
26
Added:
27
Added:
{% endfor %}
22
28
</div>
23
29
24
30
{% endblock content %}