summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/placeholder_messages.py228
-rw-r--r--app/routes.py6
-rw-r--r--app/static/styles/default.css2
-rw-r--r--app/static/styles/home.css4
-rw-r--r--app/static/styles/yes.css177
-rw-r--r--app/templates/home.html2
-rw-r--r--app/templates/yes.html101
7 files changed, 386 insertions, 134 deletions
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 %}
-<!-- 'Yes' tab -->
<a href="{{ url_for('yes') }}" class="tab-yes"></a>
-<!-- 'No' tab -->
<a href="{{ url_for('no') }}" class="tab-no"></a>
<div class="feed-post">
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 %}
-<div>
- <a href="{{ url_for('no') }}" class="tab-no"></a>
- <a href="{{ url_for('home') }}" class="tab-home"></a>
+<a href="{{ url_for('no') }}" class="tab-no"></a>
+<a href="{{ url_for('home') }}" class="tab-home"></a>
- <div class="main">
+<div class="feeds">
+ <div class="feed-conversations">
+ {% for conversation in conversations %}
+ <div class="conversation-wrapper">
+ <a href="{{ url_for('yes') }}" class="btn-reply">reply</a>
+ <a href="{{ url_for('yes') }}" class="btn-finish">finish conversation</a>
+ <div class="conversation">
+ {% if 'title' in conversation %}
+ <h1>{{conversation.title}}</h1>
+ {% endif %}
+ <!-- {% for message in conversation.messages %} -->
+ <!-- <h2>{{ message }}</h2> -->
+ <!-- {% endfor %} -->
+ <div class="message-received">
+ <h2>author 1</h2>
+ <p> message received </p>
+ </div>
+ <div class="message-sent">
+ <h2>me</h2>
+ <p> message received </p>
+ </div>
+ <div class="message-received">
+ <h2>author 1</h2>
+ <p> message received </p>
+ </div>
+ <div class="message-sent">
+ <h2>me</h2>
+ <p> message received </p>
+ </div>
+ <div class="message-received">
+ <h2>author 1</h2>
+ <p> message received </p>
+ </div>
+ <div class="message-sent">
+ <h2>me</h2>
+ <p> last message received </p>
+ </div>
- <div class="feed-message">
- {% for message in messages %}
- <div class="message">
- <h1>{{message.author}}</h1>
- <h2>{{message.date}}</h2>
- <p>{{message.content}}</p>
</div>
- {% endfor %}
+ <input class="message-reply" name="Reply" type="text" value="reply"/>
</div>
+ {% endfor %}
+ <!-- <a href="{{ url_for('yes') }}" class="input">reply</a> -->
+ </div>
- <div class="feed-news">
- {% for news in news %}
+ <div class="feed-news">
+ {% for news in news %}
+ <div class="news-wrapper">
+ <a href="{{ url_for('yes') }}" class="btn-comment">comment</a>
+ <a href="{{ url_for('yes') }}" class="btn-archive">archive</a>
<div class="news">
<h1>{{news.author}}</h1>
<h2>{{news.date}}</h2>
<p>{{news.content}}</p>
</div>
- {% endfor %}
</div>
+ {% endfor %}
+ </div>
- <div class="feed-ads">
- <div class="ad">
- Buy my sourdough, ah
- </div>
- <div class="ad">
- Check out this sponsored link, ere.
- </div>
- <div class="ad">
- Another random ad (from a high-paying sponsor hopefully)
- </div>
- <div class="ad">
- Ah I literally don't have any other placeholder ideas for ads.
- </div>
- <div class="ad">
- Buy my sourdough, ah
- </div>
- <div class="ad">
- Check out this sponsored link, ere.
- </div>
- <div class="ad">
- Another random ad (from a high-paying sponsor hopefully)
- </div>
- <div class="ad">
- Ah I literally don't have any other placeholder ideas for ads.
- </div>
- </div>
- </div>
+ <div class="feed-ads">
+ <div class="ad"> Buy my sourdough, ah </div>
+ <div class="ad"> Check out this sponsored link, ere. </div>
+ <div class="ad"> Another random ad (from a high-paying sponsor hopefully) </div>
+ <div class="ad"> Ah I literally don't have any other placeholder ideas for ads. </div>
+ <div class="ad"> Buy my sourdough, ah </div>
+ <div class="ad"> Check out this sponsored link, ere. </div>
+ <div class="ad"> Another random ad (from a high-paying sponsor hopefully) </div>
+ <div class="ad"> Ah I literally don't have any other placeholder ideas for ads. </div>
</div>
</div>
-
{% endblock content %}
Copyright 2019--2024 Marius PETER