Placeholder content and CSS style sheets.

10 files changed, 189 insertions, 44 deletions

diff --git a/app/placeholder_messages.py b/app/placeholder_messages.py
index 4416106..6225859 100644
--- a/app/placeholder_messages.py
+++ b/app/placeholder_messages.py
@@ -17,4 +17,23 @@ messages = [{
     '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/placeholder_news.py b/app/placeholder_news.py
index a55f8c7..7b2d7fe 100644
--- a/app/placeholder_news.py
+++ b/app/placeholder_news.py
@@ -3,6 +3,33 @@ news = [{
     'date': 'Dec. 26th, 2019',
     'content': "Breaking news: the squad is in shambles."
 }, {
+    'author':
+    'Blendoit',
+    'date':
+    'Dec. 25th, 2019',
+    'content':
+    "Ah, this is a public personal update.\n It's pretty long, because this enables testing layouts that adapt to posts with a lot of content. Do we want the content to wrap around? Should we implement a content clipping feature?"
+}, {
+    'author': 'Country_V',
+    'date': 'Dec. 24th, 2019',
+    'content': "This is a second public personal update."
+}, {
+    'author': 'CNN',
+    'date': 'Dec. 26th, 2019',
+    'content': "Breaking news: the squad is in shambles."
+}, {
+    'author': 'Blendoit',
+    'date': 'Dec. 25th, 2019',
+    'content': "Ah, this is a public personal update."
+}, {
+    'author': 'Country_V',
+    'date': 'Dec. 24th, 2019',
+    'content': "This is a second public personal update."
+}, {
+    'author': 'CNN',
+    'date': 'Dec. 26th, 2019',
+    'content': "Breaking news: the squad is in shambles."
+}, {
     'author': 'Blendoit',
     'date': 'Dec. 25th, 2019',
     'content': "Ah, this is a public personal update."
@@ -15,6 +42,60 @@ news = [{
     'date': 'Dec. 26th, 2019',
     'content': "Breaking news: the squad is in shambles."
 }, {
+    'author':
+    'Blendoit',
+    'date':
+    'Dec. 25th, 2019',
+    'content':
+    "Ah, this is a public personal update.\n It's pretty long, because this enables testing layouts that adapt to posts with a lot of content. Do we want the content to wrap around? Should we implement a content clipping feature?"
+}, {
+    'author': 'CNN',
+    'date': 'Dec. 26th, 2019',
+    'content': "Breaking news: the squad is in shambles."
+}, {
+    'author':
+    'Blendoit',
+    'date':
+    'Dec. 25th, 2019',
+    'content':
+    "Ah, this is a public personal update.\n It's pretty long, because this enables testing layouts that adapt to posts with a lot of content. Do we want the content to wrap around? Should we implement a content clipping feature?"
+}, {
+    'author': 'Country_V',
+    'date': 'Dec. 24th, 2019',
+    'content': "This is a second public personal update."
+}, {
+    'author': 'CNN',
+    'date': 'Dec. 26th, 2019',
+    'content': "Breaking news: the squad is in shambles."
+}, {
+    'author': 'Blendoit',
+    'date': 'Dec. 25th, 2019',
+    'content': "Ah, this is a public personal update."
+}, {
+    'author': 'Country_V',
+    'date': 'Dec. 24th, 2019',
+    'content': "This is a second public personal update."
+}, {
+    'author': 'CNN',
+    'date': 'Dec. 26th, 2019',
+    'content': "Breaking news: the squad is in shambles."
+}, {
+    'author': 'Blendoit',
+    'date': 'Dec. 25th, 2019',
+    'content': "Ah, this is a public personal update."
+}, {
+    'author': 'Country_V',
+    'date': 'Dec. 24th, 2019',
+    'content': "This is a second public personal update."
+}, {
+    'author': 'Country_V',
+    'date': 'Dec. 24th, 2019',
+    'content': "This is a second public personal update."
+}, {
+    'author': 'CNN',
+    'date': 'Dec. 26th, 2019',
+    'content': "Breaking news: the squad is in shambles."
+}, {
     'author': 'Blendoit',
     'date': 'Dec. 25th, 2019',
     'content': "Ah, this is a public personal update."
diff --git a/app/placeholder_posts.py b/app/placeholder_posts.py
new file mode 100644
index 0000000..9e9c25c
--- /dev/null
+++ b/app/placeholder_posts.py
@@ -0,0 +1,16 @@
+posts = [{
+    'author':
+    'Marius',
+    'date':
+    'Dec. 26th, 2019',
+    'content':
+    "this is a test where I write a message that isn't too short, it isn't too long, it's just the right size."
+}, {
+    'author': 'Achille',
+    'date': 'Dec. 25th, 2019',
+    'content': "this is a second test!"
+}, {
+    'author': 'Jeanne',
+    'date': 'Dec. 24th, 2019',
+    'content': "this is a third test!"
+}]
\ No newline at end of file
diff --git a/app/routes.py b/app/routes.py
index 7152edd..4604827 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -1,33 +1,18 @@
 from flask import Flask, render_template, flash, redirect, url_for
 from forms import RegistrationForm, LoginForm
+from placeholder_posts import posts
 from placeholder_news import news
 from placeholder_messages import messages
 
 app = Flask(__name__)
 app.config['SECRET_KEY'] = 'foobarblendoitfoobar!'
 
-posts = [{
-    'author':
-    'Marius',
-    'date':
-    'Dec. 26th, 2019',
-    'content':
-    "this is a test where I write a message that isn't too short, it isn't too long, it's just the right size."
-}, {
-    'author': 'Achille',
-    'date': 'Dec. 25th, 2019',
-    'content': "this is a second test!"
-}, {
-    'author': 'Jeanne',
-    'date': 'Dec. 24th, 2019',
-    'content': "this is a third test!"
-}]
-
 
 @app.route("/")
 @app.route("/home")
 def home():
-    return render_template('home.html', posts=posts)
+    home_posts = posts + news + messages
+    return render_template('home.html', posts=home_posts)
 
 
 @app.route("/yes")
@@ -37,7 +22,8 @@ def yes():
 
 @app.route("/no")
 def no():
-    return render_template("no.html")
+    archives = posts + news + messages
+    return render_template("no.html", archive=archives)
 
 
 @app.route("/register", methods=['GET', 'POST'])
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index e2617bd..c875893 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -1,9 +1,20 @@
 .main {
     height: 100%;
     position: absolute;
-    z-index: 1;
+    z-index: 0;
     left: 3%;
     right: 3%;
+    overflow: hidden;
+}
+
+.feed-post {
+    height: 100%;
+    padding: 1px;
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    overflow: auto;
+    justify-content: space-around;
 }
 
 .tab-yes {
@@ -11,7 +22,6 @@
     width: 3%;
     float: left;
     position: fixed;
-    z-index: -1;
     left: 0;
     background: var(--yes);
 }
@@ -20,7 +30,6 @@
     width: 3%;
     float: right;
     position: fixed;
-    z-index: -1;
     right: 0;
     background: var(--no);
 }
@@ -46,11 +55,13 @@
 }
 
 .post {
+    max-height: 20%;
+    max-width: 30%;
     background: white;
     border-radius: 14px;
     padding: 1rem;
     margin: 1rem;
-    width: 20%;
+    overflow: hidden;
 }
 
 .post:hover {
@@ -58,4 +69,5 @@
     cursor: pointer;
     transition: 0.8s;
     color: white;
+    overflow: auto;
 }
diff --git a/app/static/styles/no.css b/app/static/styles/no.css
index 352a635..4673cf3 100644
--- a/app/static/styles/no.css
+++ b/app/static/styles/no.css
@@ -1,8 +1,9 @@
 .main {
     height: 100%;
-    position: absolute;
-    z-index: 1;
+    position: fixed;
+    z-index: 0;
     left: 7%;
+    overflow: auto;
 }
 
 .tab-yes {
@@ -48,10 +49,25 @@
     transition: 0.2s;
 }
 
-.post {
+/* Archive. */
+.feed-archive {
+    width: 100%;
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.archive {
     background: white;
+    position: relative;
     border-radius: 14px;
     padding: 1rem;
-    margin: 1rem;
-    width: 20%;
+    margin: 0.5rem;
+}
+.archive:hover {
+    background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
+    cursor: pointer;
+    transition: 0.8s;
+    color: white;
 }
diff --git a/app/static/styles/yes.css b/app/static/styles/yes.css
index 3e8e614..fa6b917 100644
--- a/app/static/styles/yes.css
+++ b/app/static/styles/yes.css
@@ -1,4 +1,4 @@
-/* Main page components. */
+/* Main page area. */
 .main {
     height: 100%;
     position: relative;
@@ -9,23 +9,26 @@
 /* Feeds. */
 .feed-message {
     height: 100%;
-    width: 30%;
+    width: 25%;
     position: relative;
     float: left;
     overflow: auto;
 }
-.feed-post {
+.feed-news {
     height: 100%;
-    width: 30%;
+    width: 55%;
+    display: flex;
     position: relative;
     float: left;
+    flex-wrap: wrap;
     overflow: auto;
+    justify-content: space-between;
 }
 .feed-ads {
     height: 100%;
     width: 20%;
     position: relative;
-    float: left;
+    float: right;
     overflow: auto;
 }
 
@@ -73,16 +76,21 @@
 
 /* News. */
 .news {
+    max-height: 10%;
+    max-width: 50%;
     background: white;
+    position: relative;
     border-radius: 14px;
     padding: 1rem;
     margin: 0.5rem;
+    overflow: hidden;
 }
 .news:hover {
     background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
     cursor: pointer;
     transition: 0.8s;
     color: white;
+    overflow: auto;
 }
 
 /* Ads. */
diff --git a/app/templates/home.html b/app/templates/home.html
index 6205c03..9d77add 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -9,13 +9,15 @@
     <a href="{{ url_for('no') }}" class="tab-no"></a>
 
     <div class="main">
-        {% for post in posts %}
-        <div class="post">
-            <h1>{{post.author}}</h1>
-            <h2>{{post.date}}</h2>
-            <p>{{post.content}}</p>
+        <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>
-        {% endfor %}
     </div>
 </div>
 
diff --git a/app/templates/no.html b/app/templates/no.html
index 5bb7a0f..f7a2d53 100644
--- a/app/templates/no.html
+++ b/app/templates/no.html
@@ -9,11 +9,16 @@
     <a href="{{ url_for('home') }}" class="tab-home"></a>
 
     <div class="main">
-        <p>
-            Tell me, no
-        </p>
+        <div class="feed-archive">
+            {% for archive in archive %}
+            <div class="archive">
+                <h1>{{archive.author}}</h1>
+                <h2>{{archive.date}}</h2>
+                <p>{{archive.content}}</p>
+            </div>
+            {% endfor %}
+        </div>
     </div>
 </div>
 
-
 {% endblock content %}
diff --git a/app/templates/yes.html b/app/templates/yes.html
index 00a330d..3ccc24b 100644
--- a/app/templates/yes.html
+++ b/app/templates/yes.html
@@ -20,7 +20,7 @@
             {% endfor %}
         </div>
 
-        <div class="feed-post">
+        <div class="feed-news">
             {% for news in news %}
             <div class="news">
                 <h1>{{news.author}}</h1>