diff options
| -rw-r--r-- | app/placeholder_messages.py | 19 | ||||
| -rw-r--r-- | app/placeholder_news.py | 81 | ||||
| -rw-r--r-- | app/placeholder_posts.py | 16 | ||||
| -rw-r--r-- | app/routes.py | 24 | ||||
| -rw-r--r-- | app/static/styles/home.css | 20 | ||||
| -rw-r--r-- | app/static/styles/no.css | 26 | ||||
| -rw-r--r-- | app/static/styles/yes.css | 18 | ||||
| -rw-r--r-- | app/templates/home.html | 14 | ||||
| -rw-r--r-- | app/templates/no.html | 13 | ||||
| -rw-r--r-- | app/templates/yes.html | 2 |
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> |