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. --- app/routes.py | 31 +++++++++++++++++-- app/static/styles/default.css | 46 +++++++++++++++++++++++++--- app/static/styles/home.css | 8 ++++- app/static/styles/yes.css | 71 +++++++++++++++++++++++-------------------- 4 files changed, 116 insertions(+), 40 deletions(-) (limited to 'app') 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