Homepage load animations 2.

4 files changed, 116 insertions, 40 deletions

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;