Homepage load animations 2.

Commit
b5b8b9bdbcc7f83d4a3e23b3e03e33cd08ee10a3
Author
blendoit <blendoit@gmail.com>
Author date
Committer
blendoit <blendoit@gmail.com>
Committer date
Changed files
Pipfile
index a2204842..15e2a5d5 100644..100644
@@ -11,6 +11,8 @@
11 11 uwsgi = "*"
12 12 flask-socketio = "*"
13 13 flask-sqlalchemy = "*"
14 Added: pymysql = "*"
15 Added: sqlalchemy = "*"
14 16
15 17 [requires]
16 18 python_version = "3.8"
Pipfile.lock
index 0b33a961..81a40a97 100644..100644
@@ -1,7 +1,7 @@
1 1 {
2 2 "_meta": {
3 3 "hash": {
4 Removed: "sha256": "28f4a6fb6e08e2b08c8f9dd44c53ab851efd6b6883afe810ae0222d73176abf3"
4 Added: "sha256": "45e0b8d6a2539692d1e7c95574a2ab2b419bd7d2ea86d84b5ee2a23e23dca9af"
5 5 },
6 6 "pipfile-spec": 6,
7 7 "requires": {
@@ -64,10 +64,10 @@
64 64 },
65 65 "jinja2": {
66 66 "hashes": [
67 Removed: "sha256:74320bb91f31270f9551d46522e33af46a80c3d619f4a4bf42b3164d30b5911f",
68 Removed: "sha256:9fe95f19286cfefaa917656583d020be14e7859c6b0252588391e47db34527de"
67 Added: "sha256:93187ffbc7808079673ef52771baa950426fd664d3aad1d0fa3e95644360e250",
68 Added: "sha256:b0eaf100007721b5c16c1fc1eecb87409464edc10469ddc9a22a27a99123be49"
69 69 ],
70 Removed: "version": "==2.10.3"
70 Added: "version": "==2.11.1"
71 71 },
72 72 "markupsafe": {
73 73 "hashes": [
@@ -75,13 +75,16 @@
75 75 "sha256:09027a7803a62ca78792ad89403b1b7a73a01c8cb65909cd876f7fcebd79b161",
76 76 "sha256:09c4b7f37d6c648cb13f9230d847adf22f8171b1ccc4d5682398e77f40309235",
77 77 "sha256:1027c282dad077d0bae18be6794e6b6b8c91d58ed8a8d89a89d59693b9131db5",
78 Added: "sha256:13d3144e1e340870b25e7b10b98d779608c02016d5184cfb9927a9f10c689f42",
78 79 "sha256:24982cc2533820871eba85ba648cd53d8623687ff11cbb805be4ff7b4c971aff",
79 80 "sha256:29872e92839765e546828bb7754a68c418d927cd064fd4708fab9fe9c8bb116b",
80 81 "sha256:43a55c2930bbc139570ac2452adf3d70cdbb3cfe5912c71cdce1c2c6bbd9c5d1",
81 82 "sha256:46c99d2de99945ec5cb54f23c8cd5689f6d7177305ebff350a58ce5f8de1669e",
82 83 "sha256:500d4957e52ddc3351cabf489e79c91c17f6e0899158447047588650b5e69183",
83 84 "sha256:535f6fc4d397c1563d08b88e485c3496cf5784e927af890fb3c3aac7f933ec66",
85 Added: "sha256:596510de112c685489095da617b5bcbbac7dd6384aeebeda4df6025d0256a81b",
84 86 "sha256:62fe6c95e3ec8a7fad637b7f3d372c15ec1caa01ab47926cfdf7a75b40e0eac1",
87 Added: "sha256:6788b695d50a51edb699cb55e35487e430fa21f1ed838122d722e0ff0ac5ba15",
85 88 "sha256:6dd73240d2af64df90aa7c4e7481e23825ea70af4b4922f8ede5b9e35f78a3b1",
86 89 "sha256:717ba8fe3ae9cc0006d7c451f0bb265ee07739daf76355d06366154ee68d221e",
87 90 "sha256:79855e1c5b8da654cf486b830bd42c06e8780cea587384cf6545b7d9ac013a0b",
@@ -98,10 +101,20 @@
98 101 "sha256:ba59edeaa2fc6114428f1637ffff42da1e311e29382d81b339c1817d37ec93c6",
99 102 "sha256:c8716a48d94b06bb3b2524c2b77e055fb313aeb4ea620c8dd03a105574ba704f",
100 103 "sha256:cd5df75523866410809ca100dc9681e301e3c27567cf498077e8551b6d20e42f",
101 Removed: "sha256:e249096428b3ae81b08327a63a485ad0878de3fb939049038579ac0ef61e17e7"
104 Added: "sha256:cdb132fc825c38e1aeec2c8aa9338310d29d337bebbd7baa06889d09a60a1fa2",
105 Added: "sha256:e249096428b3ae81b08327a63a485ad0878de3fb939049038579ac0ef61e17e7",
106 Added: "sha256:e8313f01ba26fbbe36c7be1966a7b7424942f670f38e666995b88d012765b9be"
102 107 ],
103 108 "version": "==1.1.1"
104 109 },
110 Added: "pymysql": {
111 Added: "hashes": [
112 Added: "sha256:3943fbbbc1e902f41daf7f9165519f140c4451c179380677e6a848587042561a",
113 Added: "sha256:d8c059dcd81dedb85a9f034d5e22dcb4442c0b201908bede99e306d65ea7c8e7"
114 Added: ],
115 Added: "index": "pypi",
116 Added: "version": "==0.9.3"
117 Added: },
105 118 "python-engineio": {
106 119 "hashes": [
107 120 "sha256:47ae4a9b3b4f2e8a68929f37a518338838e119f24c9a9121af92c49f8bea55c3",
@@ -127,6 +140,7 @@
127 140 "hashes": [
128 141 "sha256:64a7b71846db6423807e96820993fa12a03b89127d278290ca25c0b11ed7b4fb"
129 142 ],
143 Added: "index": "pypi",
130 144 "version": "==1.3.13"
131 145 },
132 146 "uwsgi": {
@@ -138,10 +152,10 @@
138 152 },
139 153 "werkzeug": {
140 154 "hashes": [
141 Removed: "sha256:7280924747b5733b246fe23972186c6b348f9ae29724135a6dfc1e53cea433e7",
142 Removed: "sha256:e5f4a1f98b52b18a93da705a7458e55afb26f32bff83ff5d19189f92462d65c4"
155 Added: "sha256:1e0dedc2acb1f46827daa2e399c1485c8fa17c0d8e70b6b875b4e7f54bf408d2",
156 Added: "sha256:b353856d37dec59d6511359f97f6a4b2468442e454bd1c98298ddce53cac1f04"
143 157 ],
144 Removed: "version": "==0.16.0"
158 Added: "version": "==0.16.1"
145 159 },
146 160 "wtforms": {
147 161 "hashes": [
app/routes.py
index e520602c..67b93596 100644..100644
@@ -16,6 +16,7 @@
16 16 These are used to avoid cluttering this file with
17 17 placeholder data for posts' content.
18 18 """
19 Added: from datetime import datetime
19 20 from flask import Flask, render_template, flash, redirect, url_for
20 21 from forms import RegistrationForm, LoginForm
21 22 from flask_sqlalchemy import SQLAlchemy
@@ -26,9 +27,35 @@
26 27
27 28 app = Flask(__name__)
28 29 app.config['SECRET_KEY'] = 'Scooby_Lu,_where_are_you?'
29 Removed: app.config['SQLALCHEMY_DATABASE_URI'] = 'mariadb:///site.db'
30 Removed:
30 Added: app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
31 31 db = SQLAlchemy(app)
32 Added:
33 Added:
34 Added: class Alias(db.Model):
35 Added: id = db.Column(db.Integer, primary_key=True)
36 Added: username = db.Column(db.String(20), unique=True, nullable=False)
37 Added: email = db.Column(db.String(120), unique=True, nullable=False)
38 Added: image_file = db.Column(db.String(20),
39 Added: nullable=False,
40 Added: default='default.png')
41 Added: password = db.Column(db.String(60), nullable=False)
42 Added: posts = db.relationship('Post', backref='author', lazy=True)
43 Added:
44 Added: def __repr__(self):
45 Added: return f"Alias('{self.username}','{self.email}','{self.image_file}' )"
46 Added:
47 Added:
48 Added: class Post(db.Model):
49 Added: id = db.Column(db.Integer, primary_key=True)
50 Added: title = db.Column(db.String(100), nullable=False)
51 Added: date_posted = db.Column(db.DateTime,
52 Added: nullable=False,
53 Added: default=datetime.utcnow)
54 Added: content = db.Column(db.Text, nullable=False)
55 Added: user_id = db.Column(db.Integer, db.ForeignKey('alias.id'), nullable=False)
56 Added:
57 Added: def __repr__(self):
58 Added: return f"Post('{self.title}', '{self.date_posted}')"
32 59
33 60
34 61 @app.route("/")
app/static/styles/default.css
index 654b42f5..3812189d 100644..100644
@@ -2,16 +2,14 @@
2 2 --primary-color: #003B5C;
3 3 --secondary-color: #C3D7EE;
4 4 --home: rgba(200, 200, 200, 0.7);
5 Removed: --yes: rgba(0, 255, 0, 0.7);
6 Removed: --no: rgba(255, 0, 0, 0.7);
5 Added: --yes: #5cff5c;
6 Added: --no: #ff5c5c;
7 7 font-size: 18;
8 8 --fast-speed: 0.2s;
9 9 --med-speed: 0.4s;
10 10 --slow-speed: 1s;
11 11 }
12 12
13 Removed: * {}
14 Removed:
15 13 body {
16 14 font-family: 'Liberation Sans', sans-serif;
17 15 line-height: 1.2;
@@ -32,4 +30,44 @@
32 30 p {
33 31 margin-left: 1rem;
34 32 margin-right: 1rem;
33 Added: }
34 Added:
35 Added: /* Animation on page load. */
36 Added: @keyframes fade-refresh {
37 Added: 0% {
38 Added: opacity: 0%;
39 Added: }
40 Added: 100% {
41 Added: opacity: 100%;
42 Added: }
43 Added: }
44 Added:
45 Added: @keyframes squeeze-refresh {
46 Added: 0% {
47 Added: width: 50%;
48 Added: }
49 Added: 100% {
50 Added: /* opacity: 100%; */
51 Added: width: 10%;
52 Added: }
53 Added: }
54 Added:
55 Added: @keyframes home-refresh {
56 Added: 0% {
57 Added: transform: translateY(100%);
58 Added: /* opacity: 0%; */
59 Added: }
60 Added: 100% {
61 Added: transform: translateY(0);
62 Added: /* opacity: 100%; */
63 Added: }
64 Added: }
65 Added:
66 Added: @keyframes yes-refresh {
67 Added: 0% {
68 Added: transform: translateX(-100%);
69 Added: }
70 Added: 100% {
71 Added: transform: translateX(0);
72 Added: }
35 73 }
app/static/styles/home.css
index f4ba1218..290909f9 100644..100644
@@ -5,6 +5,8 @@
5 5 position: absolute;
6 6 left: 0;
7 7 background: var(--yes);
8 Added: animation-name: squeeze-refresh;
9 Added: animation-duration: var(--med-speed);
8 10 }
9 11 .tab-yes:hover ~ .feed-post {
10 12 left: 6%;
@@ -17,6 +19,8 @@
17 19 position: absolute;
18 20 right: 0;
19 21 background: var(--no);
22 Added: animation-name: squeeze-refresh;
23 Added: animation-duration: var(--med-speed);
20 24 }
21 25 .tab-no:hover ~ .feed-post {
22 26 left: 0%;
@@ -37,6 +41,8 @@
37 41 flex-wrap: wrap;
38 42 overflow: auto;
39 43 justify-content: space-between;
44 Added: animation-name: fade-refresh;
45 Added: animation-duration: var(--slow-speed);
40 46 }
41 47
42 48 .post-wrapper {
@@ -91,7 +97,7 @@
91 97 .post-wrapper:hover > .btn-no {transform: rotateY(0deg);}
92 98
93 99 /* Dynamic content reajustment if browser window is made too narrow */
94 Removed: @media (max-width: 800px) {
100 Added: @media (max-width: 900px) {
95 101 .feed-post {
96 102 display: inline;
97 103 }
app/static/styles/yes.css
index fa6b917d..bcaf7a46 100644..100644
@@ -1,51 +1,33 @@
1 1 /* Main page area. */
2 Added: :root {background: var(--yes);}
3 Added:
2 4 .main {
3 5 height: 100%;
4 6 position: relative;
5 7 z-index: 0;
6 8 overflow: hidden;
9 Added: /* animation-name: yes-refresh; */
10 Added: /* animation-duration: var(--slow-speed); */
7 11 }
8 12
9 Removed: /* Feeds. */
10 Removed: .feed-message {
11 Removed: height: 100%;
12 Removed: width: 25%;
13 Removed: position: relative;
14 Removed: float: left;
15 Removed: overflow: auto;
16 Removed: }
17 Removed: .feed-news {
18 Removed: height: 100%;
19 Removed: width: 55%;
20 Removed: display: flex;
21 Removed: position: relative;
22 Removed: float: left;
23 Removed: flex-wrap: wrap;
24 Removed: overflow: auto;
25 Removed: justify-content: space-between;
26 Removed: }
27 Removed: .feed-ads {
28 Removed: height: 100%;
29 Removed: width: 20%;
30 Removed: position: relative;
31 Removed: float: right;
32 Removed: overflow: auto;
33 Removed: }
34 Removed:
35 13 /* Tabs. */
36 14 .tab-no {
37 15 height: 100%;
38 16 width: 3%;
39 Removed: float: right;
40 Removed: position: relative;
17 Added: position: absolute;
18 Added: right: 0;
41 19 background: var(--no);
20 Added: /* animation-name: yes-refresh; */
21 Added: /* animation-duration: var(--slow-speed); */
42 22 }
43 23 .tab-home {
44 24 height: 100%;
45 25 width: 3%;
46 26 float: right;
47 Removed: position: relative;
48 Removed: background: var(--home);
27 Added: position: absolute;
28 Added: /* background: var(--home); */
29 Added: /* animation-name: yes-refresh; */
30 Added: animation-duration: var(--slow-speed);
49 31 }
50 32 .tab-home:hover {
51 33 width: 4%;
@@ -60,7 +42,15 @@
60 42 transition: 0.2s;
61 43 }
62 44
63 Removed: /* Messages. */
45 Added:
46 Added: /* Feeds. */
47 Added: .feed-message {
48 Added: height: 100%;
49 Added: width: 25%;
50 Added: position: relative;
51 Added: float: left;
52 Added: overflow: auto;
53 Added: }
64 54 .message {
65 55 background: white;
66 56 border-radius: 14px;
@@ -74,7 +64,16 @@
74 64 color: white;
75 65 }
76 66
77 Removed: /* News. */
67 Added: .feed-news {
68 Added: height: 100%;
69 Added: width: 55%;
70 Added: display: flex;
71 Added: position: relative;
72 Added: float: left;
73 Added: flex-wrap: wrap;
74 Added: overflow: auto;
75 Added: justify-content: space-between;
76 Added: }
78 77 .news {
79 78 max-height: 10%;
80 79 max-width: 50%;
@@ -93,7 +92,13 @@
93 92 overflow: auto;
94 93 }
95 94
96 Removed: /* Ads. */
95 Added: .feed-ads {
96 Added: height: 100%;
97 Added: width: 20%;
98 Added: position: relative;
99 Added: float: right;
100 Added: overflow: auto;
101 Added: }
97 102 .ad {
98 103 background: white;
99 104 border-radius: 14px;