From 15c0db6fe4dc2012223557d802096c6f4c36a958 Mon Sep 17 00:00:00 2001 From: blendoit Date: Mon, 27 Jan 2020 17:41:34 -0800 Subject: Add yes/no buttons and animation on home page. Also add comments throughout. --- app/routes.py | 4 +-- app/static/styles/default.css | 1 - app/static/styles/home.css | 77 ++++++++++++++++++++++++++----------------- app/templates/home.html | 30 ++++++++++------- 4 files changed, 66 insertions(+), 46 deletions(-) (limited to 'app') diff --git a/app/routes.py b/app/routes.py index 6c7059a..e520602 100644 --- a/app/routes.py +++ b/app/routes.py @@ -9,7 +9,7 @@ This Python module contains the logic supporting: Python dependencies: - flask: provides web application features -- forms: provides secure form user submission +- forms: provides secure user form submission - sqlalchemy: provides communication with database on server. Personal imports: @@ -25,7 +25,7 @@ from placeholder_news import news from placeholder_messages import messages app = Flask(__name__) -app.config['SECRET_KEY'] = 'foobarblendoitfoobar!' +app.config['SECRET_KEY'] = 'Scooby_Lu,_where_are_you?' app.config['SQLALCHEMY_DATABASE_URI'] = 'mariadb:///site.db' db = SQLAlchemy(app) diff --git a/app/static/styles/default.css b/app/static/styles/default.css index 51c6549..069588d 100644 --- a/app/static/styles/default.css +++ b/app/static/styles/default.css @@ -6,7 +6,6 @@ --no: rgba(255, 0, 0, 0.7); background-image: url(../img/home.png); background-repeat: repeat-x; - transition-timing-function: ease-in-out; } * { diff --git a/app/static/styles/home.css b/app/static/styles/home.css index 553299c..a188754 100644 --- a/app/static/styles/home.css +++ b/app/static/styles/home.css @@ -1,19 +1,4 @@ -.main { - height: 100%; - position: relative; - z-index: 0; - overflow: hidden; -} - -.feed-post { - height: 100%; - display: flex; - position: relative; - flex-wrap: wrap; - overflow: auto; - justify-content: space-between; -} - +/* Tabs. */ .tab-yes { height: 100%; width: 3%; @@ -21,6 +6,7 @@ position: relative; background: var(--yes); } +.tab-yes:hover {width: 4%; transition: 0.2s;} .tab-no { height: 100%; width: 3%; @@ -28,31 +14,60 @@ position: relative; background: var(--no); } +.tab-no:hover {width: 4%; transition: 0.2s;} -.tab-yes:hover { - width: 4%; - transition: 0.2s; +/* Feed of posts. */ +.feed-post { + height: 100%; + display: flex; + position: relative; + flex-wrap: wrap; + overflow: auto; + justify-content: space-between; } -.tab-no:hover { - width: 4%; - transition: 0.2s; +.post-wrapper { + position: relative; + max-height: 20%; + max-width: 30%; } .post { - max-height: 20%; - max-width: 30%; + height: 70%; background: white; - border-radius: 14px; + border-radius: 12px; padding: 1rem; margin: 1rem; overflow: hidden; } +.post:hover {overflow: auto;} +.post:hover + .btn-wrapper {transform: rotateX(0deg);} -.post:hover { - background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%); - cursor: pointer; - transition: 0.8s; - color: white; - overflow: auto; +.btn-wrapper { + position: relative; + top: -0.6rem; + z-index: 1; + transition: 400ms transform ease-in-out; + transform: rotateX(90deg); +} +.btn-wrapper:hover {transform: rotateX(0deg);} + +.btn-yes { + height: 25%; + width: 45%; + float: left; + left: 1rem; + position: relative; + background: var(--yes); + border-radius: 12px; +} + +.btn-no { + height: 25%; + width: 45%; + float: right; + right: 1rem; + position: relative; + background: var(--no); + border-radius: 12px; } diff --git a/app/templates/home.html b/app/templates/home.html index 9d77add..d21c427 100644 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -4,21 +4,27 @@ {% extends "base.html" %} {% block content %} -
- - + + + + -
-
- {% for post in posts %} -
-

{{post.author}}

-

{{post.date}}

-

{{post.content}}

-
- {% endfor %} +
+ {% for post in posts %} +
+
+

{{post.author}}

+

{{post.date}}

+

{{post.content}}

+
+ +
+ +
+ + {% endfor %}
{% endblock content %} -- cgit v1.2.3