'yes' page styles.

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 %}