From 43eae3a4a86db4878b670b7efc14e01bd4c06e0f Mon Sep 17 00:00:00 2001 From: blendoit Date: Wed, 5 Feb 2020 19:47:05 -0800 Subject: 'yes' page styles. --- app/placeholder_messages.py | 228 +++++++++++++++++++++++++++++++++++------- app/routes.py | 6 +- app/static/styles/default.css | 2 +- app/static/styles/home.css | 4 +- app/static/styles/yes.css | 177 +++++++++++++++++++++++--------- app/templates/home.html | 2 - app/templates/yes.html | 101 +++++++++++-------- 7 files changed, 386 insertions(+), 134 deletions(-) (limited to 'app') diff --git a/app/placeholder_messages.py b/app/placeholder_messages.py index 6225859..b48c3a6 100644 --- a/app/placeholder_messages.py +++ b/app/placeholder_messages.py @@ -1,39 +1,199 @@ -messages = [{ - 'author': 'A.Banyan_97', - 'date': 'Dec. 26th, 2019', - 'content': "How is it going?" +conversations = [{ + 'title': 'Code meee', + 'messages': { + '1': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Yo tryna code tonight?' + }, + '2': { + 'author': 'blendoit', + 'date': 'Jan. 31st 2020', + 'content': 'Sure, what time are you tryna meet up?' + }, + '3': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Maybe 8 or 9 sara7a.' + }, + '4': { + 'author': + 'blendoit', + 'date': + 'Jan. 31st 2020', + 'content': + 'Perfect, I should be done with this fluid mechanics homework in the meantime, ah.' + }, + '5': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Ok cool, see you then.' + } + } }, { - 'author': 'itsgeorgeeid', - 'date': 'Dec. 25th, 2019', - 'content': "Bas man we should have a private sesh." + 'title': 'Second Convo', + 'messages': { + '1': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Yo tryna code tonight?' + }, + '2': { + 'author': 'blendoit', + 'date': 'Jan. 31st 2020', + 'content': 'Sure, what time are you tryna meet up?' + }, + '3': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Maybe 8 or 9 sara7a.' + }, + '4': { + 'author': + 'blendoit', + 'date': + 'Jan. 31st 2020', + 'content': + 'Perfect, I should be done with this fluid mechanics homework in the meantime, ah.' + }, + '5': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Ok cool, see you then.' + } + } }, { - 'author': 'Country_V', - 'date': 'Dec. 24th, 2019', - 'content': "Have you checked out Young Thug's latest leak?!" + 'title': 'Third Convo', + 'messages': { + '1': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Yo tryna code tonight?' + }, + '2': { + 'author': 'blendoit', + 'date': 'Jan. 31st 2020', + 'content': 'Sure, what time are you tryna meet up?' + }, + '3': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Maybe 8 or 9 sara7a.' + }, + '4': { + 'author': + 'blendoit', + 'date': + 'Jan. 31st 2020', + 'content': + 'Perfect, I should be done with this fluid mechanics homework in the meantime, ah.' + }, + '5': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Ok cool, see you then.' + } + } }, { - 'author': - 'Blendoit', - 'date': - 'Dec. 26th, 2019', - 'content': - "Ah, I'm creating a new website with a friend from college, how about you?" + 'title': 'Fourth Convo', + 'messages': { + '1': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Yo tryna code tonight?' + }, + '2': { + 'author': 'blendoit', + 'date': 'Jan. 31st 2020', + 'content': 'Sure, what time are you tryna meet up?' + }, + '3': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Maybe 8 or 9 sara7a.' + }, + '4': { + 'author': + 'blendoit', + 'date': + 'Jan. 31st 2020', + 'content': + 'Perfect, I should be done with this fluid mechanics homework in the meantime, ah.' + }, + '5': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Ok cool, see you then.' + } + } }, { - 'author': 'BChon', - 'date': 'Jan. 26th, 2019', - 'content': "yo wassap" -}, { - 'author': 'Blendoit', - 'date': 'Dec. 26th, 2019', - 'content': "Ah why aren't you replying" -}, { - 'author': 'vaqarsyed', - 'date': 'Jan. 14th, 2019', - 'content': "Hrr, another day on the grind #slatt" -}, { - 'author': - 'christinafarhat', - 'date': - 'Dec. 26th, 2019', - 'content': - "I'm just using the first name that comes to mind at this point." + 'title': 'Fifth Convo', + 'messages': { + '1': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Yo tryna code tonight?' + }, + '2': { + 'author': 'blendoit', + 'date': 'Jan. 31st 2020', + 'content': 'Sure, what time are you tryna meet up?' + }, + '3': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Maybe 8 or 9 sara7a.' + }, + '4': { + 'author': + 'blendoit', + 'date': + 'Jan. 31st 2020', + 'content': + 'Perfect, I should be done with this fluid mechanics homework in the meantime, ah.' + }, + '5': { + 'author': 'vaqarsyed', + 'date': 'Jan. 31st 2020', + 'content': 'Ok cool, see you then.' + } + } }] +# 'author': 'A.Banyan_97', +# 'date': 'Dec. 26th, 2019', +# 'content': "How is it going?" +# }, { +# 'author': 'itsgeorgeeid', +# 'date': 'Dec. 25th, 2019', +# 'content': "Bas man we should have a private sesh." +# }, { +# 'author': 'Country_V', +# 'date': 'Dec. 24th, 2019', +# 'content': "Have you checked out Young Thug's latest leak?!" +# }, { +# 'author': +# 'Blendoit', +# 'date': +# 'Dec. 26th, 2019', +# 'content': +# "Ah, I'm creating a new website with a friend from college, how about you?" +# }, { +# 'author': 'BChon', +# 'date': 'Jan. 26th, 2019', +# 'content': "yo wassap" +# }, { +# 'author': 'Blendoit', +# 'date': 'Dec. 26th, 2019', +# 'content': "Ah why aren't you replying" +# }, { +# 'author': 'vaqarsyed', +# 'date': 'Jan. 14th, 2019', +# 'content': "Hrr, another day on the grind #slatt" +# }, { +# 'author': +# 'christinafarhat', +# 'date': +# 'Dec. 26th, 2019', +# 'content': +# "I'm just using the first name that comes to mind at this point." +# }] diff --git a/app/routes.py b/app/routes.py index 67b9359..301a8a8 100644 --- a/app/routes.py +++ b/app/routes.py @@ -23,7 +23,7 @@ from flask_sqlalchemy import SQLAlchemy from placeholder_posts import posts from placeholder_news import news -from placeholder_messages import messages +from placeholder_messages import conversations app = Flask(__name__) app.config['SECRET_KEY'] = 'Scooby_Lu,_where_are_you?' @@ -62,14 +62,14 @@ class Post(db.Model): @app.route("/home") def home(): """This is our homepage.""" - home_posts = posts + news + messages + home_posts = posts + news + conversations return render_template('home.html', posts=home_posts) @app.route("/yes") def yes(): """Another page, presenting the user with content marked as 'yes'.""" - return render_template("yes.html", messages=messages, news=news) + return render_template("yes.html", conversations=conversations, news=news) @app.route("/no") diff --git a/app/static/styles/default.css b/app/static/styles/default.css index 3812189..05413f6 100644 --- a/app/static/styles/default.css +++ b/app/static/styles/default.css @@ -1,7 +1,7 @@ :root { --primary-color: #003B5C; --secondary-color: #C3D7EE; - --home: rgba(200, 200, 200, 0.7); + --home: #c8c8c8; --yes: #5cff5c; --no: #ff5c5c; font-size: 18; diff --git a/app/static/styles/home.css b/app/static/styles/home.css index 290909f..161abc8 100644 --- a/app/static/styles/home.css +++ b/app/static/styles/home.css @@ -1,7 +1,7 @@ /* Tabs. */ .tab-yes { height: 100%; - width: 10%; + width: 6%; position: absolute; left: 0; background: var(--yes); @@ -15,7 +15,7 @@ } .tab-no { height: 100%; - width: 10%; + width: 6%; position: absolute; right: 0; background: var(--no); diff --git a/app/static/styles/yes.css b/app/static/styles/yes.css index bcaf7a4..cd0970f 100644 --- a/app/static/styles/yes.css +++ b/app/static/styles/yes.css @@ -1,72 +1,113 @@ -/* Main page area. */ :root {background: var(--yes);} - -.main { +/* Feeds wrapper. */ +.feeds { height: 100%; - position: relative; - z-index: 0; + width: calc(100% - 6%); + position: absolute; overflow: hidden; - /* animation-name: yes-refresh; */ - /* animation-duration: var(--slow-speed); */ + animation-name: yes-refresh; + animation-duration: var(--med-speed); } - /* Tabs. */ .tab-no { height: 100%; width: 3%; - position: absolute; - right: 0; + position: relative; + float: right; + z-index: 0; background: var(--no); - /* animation-name: yes-refresh; */ - /* animation-duration: var(--slow-speed); */ } +.tab-no:hover {width: 6%; transition: var(--fast-speed);} +.tab-no:hover ~ .tab-home {width: 6%; transition: var(--fast-speed);} +.tab-no:hover ~ .feeds {right: 12%; transition: var(--fast-speed);} .tab-home { height: 100%; width: 3%; + position: relative; float: right; - position: absolute; - /* background: var(--home); */ - /* animation-name: yes-refresh; */ - animation-duration: var(--slow-speed); + z-index: 1; + background: var(--home); } -.tab-home:hover { - width: 4%; - transition: 0.2s; +.tab-home:hover {width: 6%; transition: var(--fast-speed);} +.tab-home:hover ~ .feeds { + /* left: -3%; */ + right: 9%; + transition: var(--fast-speed); } -.tab-no:hover ~ .tab-home { - width: 5%; - transition: 0.2s; -} -.tab-no:hover { - width: 4%; - transition: 0.2s; -} - /* Feeds. */ -.feed-message { +.feed-conversations { height: 100%; - width: 25%; + width: 30%; position: relative; float: left; overflow: auto; } -.message { +.conversation-wrapper { + /* background: blue; */ + height: 25%; + position: relative; + margin: 1rem; + overflow: hidden; + perspective: 600px; +} +.conversation-wrapper:hover { + height: 40%; + transition-duration: var(--med-speed); +} +.btn-reply { + height: 3rem; + width: calc(50% - 1rem); + position: absolute; + left: 0; + background: var(--home); + border-radius: 8px; + transform: rotateX(90deg); + transition-duration: var(--slow-speed); + transform-origin: bottom; +} +.conversation-wrapper:hover > .btn-reply {transform: rotateX(0deg);} +.btn-finish { + height: 3rem; + width: calc(50% - 1rem); + position: absolute; + right: 0; + background: var(--no); + border-radius: 8px; + transform: rotateX(90deg); + transition-duration: var(--slow-speed); + transform-origin: bottom; +} +.conversation-wrapper:hover > .btn-finish {transform: rotateX(0deg);} +.conversation { + height: 40%; + width: 100%; + position: relative; background: white; - border-radius: 14px; - padding: 1rem; - margin: 0.5rem; + border-radius: 12px; + overflow: hidden; + transition-duration: var(--med-speed); } -.message:hover { - background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%); - cursor: pointer; - transition: 0.8s; - color: white; +.conversation-wrapper:hover > .conversation { + margin-top: 3.5rem; + overflow: auto; +} +.input[type=text] { + width: 70%; + position: relative; + margin: 0 auto; + /* transform: rotateX(-90deg); */ + transition-duration: var(--slow-speed); + transform-origin: top; +} +conversation-wrapper:hover > .input[type=text] { + transform: rotateX(90deg); + width: 20%; } .feed-news { height: 100%; - width: 55%; + width: 50%; display: flex; position: relative; float: left; @@ -74,27 +115,63 @@ overflow: auto; justify-content: space-between; } +.news-wrapper { + /* background: blue; */ + height: 25%; + max-width: 40%; + position: relative; + margin: 1rem; + overflow: hidden; + perspective: 600px; +} +.news-wrapper:hover { + height: 25%; + transition-duration: var(--med-speed); +} .news { - max-height: 10%; - max-width: 50%; + height: 100%; + max-width: 100%; background: white; position: relative; border-radius: 14px; - padding: 1rem; - margin: 0.5rem; overflow: hidden; + transition-duration: var(--med-speed); } -.news:hover { - background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%); - cursor: pointer; - transition: 0.8s; - color: white; +.news-wrapper:hover > .news { + overflow: auto; +} +.btn-comment { + height: 3rem; + width: calc(50% - 1rem); + position: absolute; + left: 0; + background: var(--home); + border-radius: 8px; + transform: rotateX(90deg); + transition-duration: var(--slow-speed); + transform-origin: bottom; +} +.news-wrapper:hover > .btn-comment {transform: rotateX(0deg);} +.btn-archive { + height: 3rem; + width: calc(50% - 1rem); + position: absolute; + right: 0; + background: var(--no); + border-radius: 8px; + transform: rotateX(90deg); + transition-duration: var(--slow-speed); + transform-origin: bottom; +} +.news-wrapper:hover > .btn-archive {transform: rotateX(0deg);} +.news-wrapper:hover > .news { + margin-top: 3.5rem; overflow: auto; } .feed-ads { - height: 100%; width: 20%; + height: 100%; position: relative; float: right; overflow: auto; diff --git a/app/templates/home.html b/app/templates/home.html index 5598739..6363601 100644 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -4,9 +4,7 @@ {% extends "base.html" %} {% block content %} - -
diff --git a/app/templates/yes.html b/app/templates/yes.html index 3ccc24b..9a2fff3 100644 --- a/app/templates/yes.html +++ b/app/templates/yes.html @@ -4,61 +4,78 @@ {% extends "base.html" %} {% block content %} -
- - + + -
+
+
+ {% for conversation in conversations %} +
+ reply + finish conversation +
+ {% if 'title' in conversation %} +

{{conversation.title}}

+ {% endif %} + + + +
+

author 1

+

message received

+
+
+

me

+

message received

+
+
+

author 1

+

message received

+
+
+

me

+

message received

+
+
+

author 1

+

message received

+
+
+

me

+

last message received

+
-
- {% for message in messages %} -
-

{{message.author}}

-

{{message.date}}

-

{{message.content}}

- {% endfor %} +
+ {% endfor %} + +
-
- {% for news in news %} +
+ {% for news in news %} +
+ comment + archive

{{news.author}}

{{news.date}}

{{news.content}}

- {% endfor %}
+ {% endfor %} +
-
-
- Buy my sourdough, ah -
-
- Check out this sponsored link, ere. -
-
- Another random ad (from a high-paying sponsor hopefully) -
-
- Ah I literally don't have any other placeholder ideas for ads. -
-
- Buy my sourdough, ah -
-
- Check out this sponsored link, ere. -
-
- Another random ad (from a high-paying sponsor hopefully) -
-
- Ah I literally don't have any other placeholder ideas for ads. -
-
-
+
+
Buy my sourdough, ah
+
Check out this sponsored link, ere.
+
Another random ad (from a high-paying sponsor hopefully)
+
Ah I literally don't have any other placeholder ideas for ads.
+
Buy my sourdough, ah
+
Check out this sponsored link, ere.
+
Another random ad (from a high-paying sponsor hopefully)
+
Ah I literally don't have any other placeholder ideas for ads.
- {% endblock content %} -- cgit v1.2.3