summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
authorblendoit <blendoit@gmail.com>2020-01-27 17:41:34 -0800
committerblendoit <blendoit@gmail.com>2020-01-27 17:41:34 -0800
commit15c0db6fe4dc2012223557d802096c6f4c36a958 (patch)
treeed2a4519fee9f7e99e57e3e54116b2d143976ba5 /app
parentfd1f3fba182efb1ff154dc24f2553601b28791fb (diff)
Add yes/no buttons and animation on home page.
Also add comments throughout.
Diffstat (limited to 'app')
-rw-r--r--app/routes.py4
-rw-r--r--app/static/styles/default.css1
-rw-r--r--app/static/styles/home.css77
-rw-r--r--app/templates/home.html30
4 files changed, 66 insertions, 46 deletions
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 %}
-<div>
- <a href="{{ url_for('yes') }}" class="tab-yes"></a>
- <a href="{{ url_for('no') }}" class="tab-no"></a>
+<!-- 'Yes' tab -->
+<a href="{{ url_for('yes') }}" class="tab-yes"></a>
+<!-- 'No' tab -->
+<a href="{{ url_for('no') }}" class="tab-no"></a>
- <div class="main">
- <div class="feed-post">
- {% for post in posts %}
- <div class="post">
- <h1>{{post.author}}</h1>
- <h2>{{post.date}}</h2>
- <p>{{post.content}}</p>
- </div>
- {% endfor %}
+<div class="feed-post">
+ {% for post in posts %}
+ <div class="post-wrapper">
+ <div class="post">
+ <h1>{{post.author}}</h1>
+ <h2>{{post.date}}</h2>
+ <p>{{post.content}}</p>
+ </div>
+
+ <div class="btn-wrapper">
+ <a href="{{ url_for('home') }}" class="btn-yes"></a>
+ <a href="{{ url_for('home') }}" class="btn-no"></a>
</div>
</div>
+
+ {% endfor %}
</div>
{% endblock content %}
Copyright 2019--2024 Marius PETER