From b5b8b9bdbcc7f83d4a3e23b3e03e33cd08ee10a3 Mon Sep 17 00:00:00 2001 From: blendoit Date: Mon, 3 Feb 2020 02:06:13 -0800 Subject: Homepage load animations 2. --- Pipfile | 2 ++ Pipfile.lock | 30 +++++++++++++----- app/routes.py | 31 +++++++++++++++++-- app/static/styles/default.css | 46 +++++++++++++++++++++++++--- app/static/styles/home.css | 8 ++++- app/static/styles/yes.css | 71 +++++++++++++++++++++++-------------------- 6 files changed, 140 insertions(+), 48 deletions(-) diff --git a/Pipfile b/Pipfile index a220484..15e2a5d 100644 --- a/Pipfile +++ b/Pipfile @@ -11,6 +11,8 @@ flask-wtf = "*" uwsgi = "*" flask-socketio = "*" flask-sqlalchemy = "*" +pymysql = "*" +sqlalchemy = "*" [requires] python_version = "3.8" diff --git a/Pipfile.lock b/Pipfile.lock index 0b33a96..81a40a9 100644 --- a/Pipfile.lock +++ b/Pipfile.lock @@ -1,7 +1,7 @@ { "_meta": { "hash": { - "sha256": "28f4a6fb6e08e2b08c8f9dd44c53ab851efd6b6883afe810ae0222d73176abf3" + "sha256": "45e0b8d6a2539692d1e7c95574a2ab2b419bd7d2ea86d84b5ee2a23e23dca9af" }, "pipfile-spec": 6, "requires": { @@ -64,10 +64,10 @@ }, "jinja2": { "hashes": [ - "sha256:74320bb91f31270f9551d46522e33af46a80c3d619f4a4bf42b3164d30b5911f", - "sha256:9fe95f19286cfefaa917656583d020be14e7859c6b0252588391e47db34527de" + "sha256:93187ffbc7808079673ef52771baa950426fd664d3aad1d0fa3e95644360e250", + "sha256:b0eaf100007721b5c16c1fc1eecb87409464edc10469ddc9a22a27a99123be49" ], - "version": "==2.10.3" + "version": "==2.11.1" }, "markupsafe": { "hashes": [ @@ -75,13 +75,16 @@ "sha256:09027a7803a62ca78792ad89403b1b7a73a01c8cb65909cd876f7fcebd79b161", "sha256:09c4b7f37d6c648cb13f9230d847adf22f8171b1ccc4d5682398e77f40309235", "sha256:1027c282dad077d0bae18be6794e6b6b8c91d58ed8a8d89a89d59693b9131db5", + "sha256:13d3144e1e340870b25e7b10b98d779608c02016d5184cfb9927a9f10c689f42", "sha256:24982cc2533820871eba85ba648cd53d8623687ff11cbb805be4ff7b4c971aff", "sha256:29872e92839765e546828bb7754a68c418d927cd064fd4708fab9fe9c8bb116b", "sha256:43a55c2930bbc139570ac2452adf3d70cdbb3cfe5912c71cdce1c2c6bbd9c5d1", "sha256:46c99d2de99945ec5cb54f23c8cd5689f6d7177305ebff350a58ce5f8de1669e", "sha256:500d4957e52ddc3351cabf489e79c91c17f6e0899158447047588650b5e69183", "sha256:535f6fc4d397c1563d08b88e485c3496cf5784e927af890fb3c3aac7f933ec66", + "sha256:596510de112c685489095da617b5bcbbac7dd6384aeebeda4df6025d0256a81b", "sha256:62fe6c95e3ec8a7fad637b7f3d372c15ec1caa01ab47926cfdf7a75b40e0eac1", + "sha256:6788b695d50a51edb699cb55e35487e430fa21f1ed838122d722e0ff0ac5ba15", "sha256:6dd73240d2af64df90aa7c4e7481e23825ea70af4b4922f8ede5b9e35f78a3b1", "sha256:717ba8fe3ae9cc0006d7c451f0bb265ee07739daf76355d06366154ee68d221e", "sha256:79855e1c5b8da654cf486b830bd42c06e8780cea587384cf6545b7d9ac013a0b", @@ -98,10 +101,20 @@ "sha256:ba59edeaa2fc6114428f1637ffff42da1e311e29382d81b339c1817d37ec93c6", "sha256:c8716a48d94b06bb3b2524c2b77e055fb313aeb4ea620c8dd03a105574ba704f", "sha256:cd5df75523866410809ca100dc9681e301e3c27567cf498077e8551b6d20e42f", - "sha256:e249096428b3ae81b08327a63a485ad0878de3fb939049038579ac0ef61e17e7" + "sha256:cdb132fc825c38e1aeec2c8aa9338310d29d337bebbd7baa06889d09a60a1fa2", + "sha256:e249096428b3ae81b08327a63a485ad0878de3fb939049038579ac0ef61e17e7", + "sha256:e8313f01ba26fbbe36c7be1966a7b7424942f670f38e666995b88d012765b9be" ], "version": "==1.1.1" }, + "pymysql": { + "hashes": [ + "sha256:3943fbbbc1e902f41daf7f9165519f140c4451c179380677e6a848587042561a", + "sha256:d8c059dcd81dedb85a9f034d5e22dcb4442c0b201908bede99e306d65ea7c8e7" + ], + "index": "pypi", + "version": "==0.9.3" + }, "python-engineio": { "hashes": [ "sha256:47ae4a9b3b4f2e8a68929f37a518338838e119f24c9a9121af92c49f8bea55c3", @@ -127,6 +140,7 @@ "hashes": [ "sha256:64a7b71846db6423807e96820993fa12a03b89127d278290ca25c0b11ed7b4fb" ], + "index": "pypi", "version": "==1.3.13" }, "uwsgi": { @@ -138,10 +152,10 @@ }, "werkzeug": { "hashes": [ - "sha256:7280924747b5733b246fe23972186c6b348f9ae29724135a6dfc1e53cea433e7", - "sha256:e5f4a1f98b52b18a93da705a7458e55afb26f32bff83ff5d19189f92462d65c4" + "sha256:1e0dedc2acb1f46827daa2e399c1485c8fa17c0d8e70b6b875b4e7f54bf408d2", + "sha256:b353856d37dec59d6511359f97f6a4b2468442e454bd1c98298ddce53cac1f04" ], - "version": "==0.16.0" + "version": "==0.16.1" }, "wtforms": { "hashes": [ diff --git a/app/routes.py b/app/routes.py index e520602..67b9359 100644 --- a/app/routes.py +++ b/app/routes.py @@ -16,6 +16,7 @@ Personal imports: These are used to avoid cluttering this file with placeholder data for posts' content. """ +from datetime import datetime from flask import Flask, render_template, flash, redirect, url_for from forms import RegistrationForm, LoginForm from flask_sqlalchemy import SQLAlchemy @@ -26,11 +27,37 @@ from placeholder_messages import messages app = Flask(__name__) app.config['SECRET_KEY'] = 'Scooby_Lu,_where_are_you?' -app.config['SQLALCHEMY_DATABASE_URI'] = 'mariadb:///site.db' - +app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db' db = SQLAlchemy(app) +class Alias(db.Model): + id = db.Column(db.Integer, primary_key=True) + username = db.Column(db.String(20), unique=True, nullable=False) + email = db.Column(db.String(120), unique=True, nullable=False) + image_file = db.Column(db.String(20), + nullable=False, + default='default.png') + password = db.Column(db.String(60), nullable=False) + posts = db.relationship('Post', backref='author', lazy=True) + + def __repr__(self): + return f"Alias('{self.username}','{self.email}','{self.image_file}' )" + + +class Post(db.Model): + id = db.Column(db.Integer, primary_key=True) + title = db.Column(db.String(100), nullable=False) + date_posted = db.Column(db.DateTime, + nullable=False, + default=datetime.utcnow) + content = db.Column(db.Text, nullable=False) + user_id = db.Column(db.Integer, db.ForeignKey('alias.id'), nullable=False) + + def __repr__(self): + return f"Post('{self.title}', '{self.date_posted}')" + + @app.route("/") @app.route("/home") def home(): diff --git a/app/static/styles/default.css b/app/static/styles/default.css index 654b42f..3812189 100644 --- a/app/static/styles/default.css +++ b/app/static/styles/default.css @@ -2,16 +2,14 @@ --primary-color: #003B5C; --secondary-color: #C3D7EE; --home: rgba(200, 200, 200, 0.7); - --yes: rgba(0, 255, 0, 0.7); - --no: rgba(255, 0, 0, 0.7); + --yes: #5cff5c; + --no: #ff5c5c; font-size: 18; --fast-speed: 0.2s; --med-speed: 0.4s; --slow-speed: 1s; } -* {} - body { font-family: 'Liberation Sans', sans-serif; line-height: 1.2; @@ -33,3 +31,43 @@ p { margin-left: 1rem; margin-right: 1rem; } + +/* Animation on page load. */ +@keyframes fade-refresh { + 0% { + opacity: 0%; + } + 100% { + opacity: 100%; + } +} + +@keyframes squeeze-refresh { + 0% { + width: 50%; + } + 100% { + /* opacity: 100%; */ + width: 10%; + } +} + +@keyframes home-refresh { + 0% { + transform: translateY(100%); + /* opacity: 0%; */ + } + 100% { + transform: translateY(0); + /* opacity: 100%; */ + } +} + +@keyframes yes-refresh { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(0); + } +} diff --git a/app/static/styles/home.css b/app/static/styles/home.css index f4ba121..290909f 100644 --- a/app/static/styles/home.css +++ b/app/static/styles/home.css @@ -5,6 +5,8 @@ position: absolute; left: 0; background: var(--yes); + animation-name: squeeze-refresh; + animation-duration: var(--med-speed); } .tab-yes:hover ~ .feed-post { left: 6%; @@ -17,6 +19,8 @@ position: absolute; right: 0; background: var(--no); + animation-name: squeeze-refresh; + animation-duration: var(--med-speed); } .tab-no:hover ~ .feed-post { left: 0%; @@ -37,6 +41,8 @@ flex-wrap: wrap; overflow: auto; justify-content: space-between; + animation-name: fade-refresh; + animation-duration: var(--slow-speed); } .post-wrapper { @@ -91,7 +97,7 @@ .post-wrapper:hover > .btn-no {transform: rotateY(0deg);} /* Dynamic content reajustment if browser window is made too narrow */ -@media (max-width: 800px) { +@media (max-width: 900px) { .feed-post { display: inline; } diff --git a/app/static/styles/yes.css b/app/static/styles/yes.css index fa6b917..bcaf7a4 100644 --- a/app/static/styles/yes.css +++ b/app/static/styles/yes.css @@ -1,51 +1,33 @@ /* Main page area. */ +:root {background: var(--yes);} + .main { height: 100%; position: relative; z-index: 0; overflow: hidden; -} - -/* Feeds. */ -.feed-message { - height: 100%; - width: 25%; - position: relative; - float: left; - overflow: auto; -} -.feed-news { - height: 100%; - width: 55%; - display: flex; - position: relative; - float: left; - flex-wrap: wrap; - overflow: auto; - justify-content: space-between; -} -.feed-ads { - height: 100%; - width: 20%; - position: relative; - float: right; - overflow: auto; + /* animation-name: yes-refresh; */ + /* animation-duration: var(--slow-speed); */ } /* Tabs. */ .tab-no { height: 100%; width: 3%; - float: right; - position: relative; + position: absolute; + right: 0; background: var(--no); + /* animation-name: yes-refresh; */ + /* animation-duration: var(--slow-speed); */ } .tab-home { height: 100%; width: 3%; float: right; - position: relative; - background: var(--home); + position: absolute; + /* background: var(--home); */ + /* animation-name: yes-refresh; */ + animation-duration: var(--slow-speed); } .tab-home:hover { width: 4%; @@ -60,7 +42,15 @@ transition: 0.2s; } -/* Messages. */ + +/* Feeds. */ +.feed-message { + height: 100%; + width: 25%; + position: relative; + float: left; + overflow: auto; +} .message { background: white; border-radius: 14px; @@ -74,7 +64,16 @@ color: white; } -/* News. */ +.feed-news { + height: 100%; + width: 55%; + display: flex; + position: relative; + float: left; + flex-wrap: wrap; + overflow: auto; + justify-content: space-between; +} .news { max-height: 10%; max-width: 50%; @@ -93,7 +92,13 @@ overflow: auto; } -/* Ads. */ +.feed-ads { + height: 100%; + width: 20%; + position: relative; + float: right; + overflow: auto; +} .ad { background: white; border-radius: 14px; -- cgit v1.2.3