Skip to content

Overhaul frontend #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
theiostream wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Overhaul frontend #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1db0a4f
website: add sticky newsletter to posts, rearrange text size, add aut…
aspilt Nov 20, 2020
e82a388
website: add support for coauthorship
aspilt Dec 2, 2020
d07ec25
website: fix bug with mobile coauthorship
aspilt Dec 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _includes/newsletter-desktop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="card-body">
<p class="title">Quinzenário Pindograma</p>
<p class="sign-up">Inscreva-se...</p>
<p class="text-secondary small"> Para receber a newsletter com as melhores matérias do Pindograma em seu email a cada dois domingos!</p>
<p class="text-secondary small"> Para receber a newsletter com as melhores matérias do <i>Pindograma</i> em seu email a cada dois domingos!</p>
<form action="https://pindograma.us17.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="669555e1986fad91fabf8d796" />
<input type="hidden" name="id" value="c2fd975134" />
Expand Down
17 changes: 17 additions & 0 deletions _includes/newsletter-post-d.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="newsletter my-3 d-none d-xl-block">
<div class="card">
<div class="card-body">
<p class="title">Quinzenário Pindograma</p>
<p class="sign-up" style="font-size:22px;">Inscreva-se!</p>
<p class="text-secondary small"> Receba a newsletter com as melhores matérias do <i>Pindograma</i> em seu email a cada dois domingos!</p>
<form action="https://pindograma.us17.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="669555e1986fad91fabf8d796" />
<input type="hidden" name="id" value="c2fd975134" />
<input type="email" placeholder="seu email" class="rounded field-orange py-4" autocapitalize="off" name="MERGE0" id="MERGE0" size="30" value="" style="height:1px" />
<input type="submit" class="rounded button py-2" value="CONFIRMA"/>

<input type="hidden" name="mc_signupsource" value="hosted" />
</form>
</div>
</div>
</div>
13 changes: 10 additions & 3 deletions _includes/post-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% assign incl_author = site.authors | where: 'short_name', include.author | first %}
{% assign second_author = site.authors | where: 'short_name', include.second_author | first %}

<article>
<div class="row">
Expand All @@ -11,9 +12,15 @@
</a>

<p class="undertitle small">por
<a href="{{ incl_author.url }}">
<span class="old-author">{{ incl_author.name }}</span>
</a>
<a href="{{ incl_author.url }}">
<span class="old-author">{{ incl_author.name }}</span>
</a>
{% if second_author %}
e
<a href="{{ second_author.url }}">
<span class="old-author">{{ second_author.name }}</span>
</a>
{% endif %}
</p>
</div>

Expand Down
10 changes: 9 additions & 1 deletion _includes/post-2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{% assign incl_author = site.authors | where: 'short_name', include.author | first %}
{% assign second_author = site.authors | where: 'short_name', include.second_author | first %}


<article>
<div class="row">
Expand Down Expand Up @@ -26,8 +28,14 @@

<p class="undertitle small">por
<a href="{{ incl_author.url }}">
<span class="old-author">{{ incl_author.name }}</span>
<span class="old-author">{{ incl_author.name }}</span>
</a>
{% if second_author %}
e
<a href="{{ second_author.url }}">
<span class="old-author">{{ second_author.name }}</span>
</a>
{% endif %}
</p>
</div>
</div>
Expand Down
20 changes: 16 additions & 4 deletions _includes/related-post-mobile-white.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
{% assign incl_author = site.authors | where: 'short_name', include.author | first %}
{% assign second_author = site.authors | where: 'short_name', include.second_author | first %}

<div class="col-12 px-0">
<div class="bg-white text-secondary px-4 py-2" style="border-radius: 1px; min-height: 135px;">
<p class="blue"><strong><a class="blue" href="{{ include.url }}">{{ include.title }}</a></strong></p>
<p class="mb-0 pb-1 underauthor"><small>por <span class="bg-darkblue">
<a href="{{ incl_author.url }}">
<span class="text-white px-1">{{ incl_author.name }}</span>
<p class="mb-0 pb-1 underauthor"><small>
por
<span class="bg-darkblue">
<a href="{{ incl_author.url }}">
<span class="text-white px-1">{{ incl_author.name }}</span>
</a>
</span>
{% if second_author %}
&nbsp;e
<span class="bg-darkblue">
<a href="{{ second_author.url }}">
<span class="text-white px-1">{{ second_author.name }}</span>
</a>
</span></small></p>
</span>
{% endif %}
</small></p>
</div>
</div>
22 changes: 17 additions & 5 deletions _includes/related-post-mobile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
{% assign incl_author = site.authors | where: 'short_name', include.author | first %}
{% assign second_author = site.authors | where: 'short_name', include.second_author | first %}

<div class="col-12 px-0">
<div class="bg-blue text-secondary px-4 py-2" style="border-radius: 1px; min-height: 135px;">
<p><strong><a class="darkgray" href="{{ include.url }}">{{ include.title }}</a></strong></p>
<p class="mb-0 pb-1 underauthor"><small>por <span class="bg-darkblue">
<a href="{{ incl_author.url }}">
<span class="text-white px-1">{{ incl_author.name }}</span>
</a>
</span></small></p>
<p class="mb-0 pb-1 underauthor"><small>
por
<span class="bg-darkblue">
<a href="{{ incl_author.url }}">
<span class="text-white px-0">{{ incl_author.name }}</span>
</a>
</span>
{% if second_author %}
&nbsp;e
<span class="bg-darkblue">
<a href="{{ second_author.url }}">
<span class="text-white px-1">{{ second_author.name }}</span>
</a>
</span>
{% endif %}
</small></p>
</div>
</div>
26 changes: 19 additions & 7 deletions _includes/related-post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,29 @@
{% assign incl_author = site.authors | where: 'short_name', include.author | first %}
{% assign second_author = site.authors | where: 'short_name', include.second_author | first %}

<div class="col-4">
<div class="card bg-orange text-white related-post-container">
<div class="card-body">
<p><a class="text-white" href="{{ include.url }}">{{ include.title }}</a></p>
<p class="mb-0 pb-1 underauthor">
<small>por
<span class="bg-darkblue">
<a href="{{ incl_author.url }}">
<span class="text-white px-1"><i>{{ incl_author.name }}</i></span>
</a>
</span>
</small>
<small>por
<span class="bg-darkblue">
<a href="{{ incl_author.url }}">
<span class="text-white px-1">
<i>{{ incl_author.name }}</i>
</span>
</a>
</span>
{% if second_author %}<br>e
<span class="bg-darkblue">
<a href="{{ second_author.url }}">
<span class="text-white px-1">
<i>{{ second_author.name }}</i>
</span>
</a>
</span>
{% endif %}
</small>
</p>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion _layouts/author.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@

<div class="col-12 col-md-6 p-md-4 bg-white posts-author">
<div class="row">
{% assign filtered_posts = site.posts | where: 'author', page.short_name %}
{% assign authored_posts = site.posts | where: 'author', page.short_name %}
{% assign coauthored_posts = site.posts | where: 'second_author', page.short_name %}
{% assign filtered_posts = authored_posts | concat: coauthored_posts %}
{% for post in filtered_posts %}
{% include author-post.html url=post.url image=post.image title=post.title subtitle=post.subtitle %}
{% endfor %}
Expand Down
121 changes: 93 additions & 28 deletions _layouts/post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
---

{% assign author = site.authors | where: 'short_name', page.author | first %}
{% assign second_author = site.authors | where: 'short_name', page.second_author | first %}
{% assign second_author_m = site.authors | where: 'short_name', page.second_author | first %}
{% assign similar_posts = site.posts | where_exp:"post","post.url != page.url" %}

<section>
Expand All @@ -14,25 +16,17 @@
<h1 class="article-title">{{ page.title }}</h1>
<hr class="green-separator"/>
<h5 class="article-undertitle undertitle darkgray">{{ page.subtitle }}</h5>
<h5 class="mt-4 underauthor">POR {{ author.name | upcase }} &bull; {{ page.date | date: "%d/%m/%Y" }}</h5>
<h5 class="mt-4 underauthor">
POR <a href="{{ author.url }}" style="color:#6c82a0; text-decoration:underline;">{{ author.name | upcase }}</a>{% if page.second_author %} E <a href="{{ second_author.url }}" style="color:#6c82a0; text-decoration:underline;">{{ second_author.name | upcase }}</a>{% endif %} &bull; {{ page.date | date: "%d/%m/%Y" }}
</h5>
</div>
</div>
<div class="article-image-container">
<img src="{{ page.image }}" class="article-image mx-auto" />
</div>
</div>
<div class="row mt-2 px-5">
<div class="col-2">
<div class="sticky-top d-flex flex-column justify-content-center align-items-center pt-5">
<a href="https://twitter.com/intent/tweet?counturl=https%3A%2F%2Fpindograma.com.br{{ page.url | url_encode }}&text={{ page.title | url_encode }}&url=https%3A%2F%2Fpindograma.com.br{{ page.url | url_encode }}"><img class="share-img" src="/assets/images/twt_share.svg" /></a>
<a href="whatsapp://send?text={{ page.title | url_encode }}: https%3A%2F%2Fpindograma.com.br{{ page.url | url_encode }}"><img class="share-img" src="/assets/images/whatsapp_share.svg" /></a>
<a href="https://facebook.com/sharer/sharer.php?text={{ page.title | url_encode }}&u=https%3A%2F%2Fpindograma.com.br{{ page.url | url_encode }}"><img class="share-img" src="/assets/images/fb_share.svg" /></a>
<a href="https://linkedin.com/shareArticle?title={{ page.title | url_encode }}&url=https://pindograma.com.br{{ page.url }}&source=pindograma.com.br"><img class="share-img" src="/assets/images/linkedin_share.svg" /></a>
<a href="mailto:?subject=Artigo do Pindograma&body={{ page.title }}: https://pindograma.com.br{{ page.url }}"><img class="share-img" src="/assets/images/email_share.svg" /></a>
<div class="col-9 d-flex flex-column align-items-center">
<div class="article-image-container">
<img src="{{ page.image }}" class="article-image mx-auto" />
</div>
</div>

<div class="col-8 d-flex flex-column align-items-center">
<div class="row my-5 article-text article-text-maxw">
{{ content }}

Expand All @@ -41,9 +35,11 @@ <h5 class="mt-4 underauthor">POR {{ author.name | upcase }} &bull; {{ page.date
<a href="https://www.instagram.com/pindograma/">Instagram</a>.]</i></p>
</div>

<div class="row">
<div class="row" style="margin-bottom:80px;">
<div class="bottom-author-photo">
<img src="{{ author.image }}" alt="foto do autor" class="rounded-circle author-img m-0">
<a href="{{ author.url }}">
<img src="{{ author.image }}" alt="foto do autor" class="rounded-circle author-img m-0">
</a>
</div>

<div class="bottom-author-info">
Expand All @@ -59,34 +55,68 @@ <h5 class="mt-4 underauthor">POR {{ author.name | upcase }} &bull; {{ page.date
</div>
</div>
</div>
{% if page.second_author %}
<div class="row" style="margin-bottom:80px; margin-top:-60px">
<div class="bottom-author-photo">
<a href="{{ second_author.url }}">
<img src="{{ second_author.image }}" alt="foto do autor" class="rounded-circle author-img m-0">
</a>
</div>

<div class="bottom-author-info">
<div class="card bg-blue p-5 m-0 darkgray bottom-author-card">
<p class="pl-4" style="margin: 0;">
<small>
<a href="{{ second_author.url }}">
<u><b>{{ second_author.name }}</b></u>
</a>
{{ second_author.bio }}.
</small>
</p>
</div>
</div>
</div>
{% endif %}
</div>
<div class="col-3">
<div class="sticky-top d-flex flex-column justify-content-center align-items-center pt-5">
<a href="https://twitter.com/intent/tweet?counturl=https%3A%2F%2Fpindograma.com.br{{ page.url | url_encode }}&text={{ page.title | url_encode }}&url=https%3A%2F%2Fpindograma.com.br{{ page.url | url_encode }}"><img class="share-img" src="/assets/images/twt_share.svg" /></a>
<a href="whatsapp://send?text={{ page.title | url_encode }}: https%3A%2F%2Fpindograma.com.br{{ page.url | url_encode }}"><img class="share-img" src="/assets/images/whatsapp_share.svg" /></a>
<a href="https://facebook.com/sharer/sharer.php?text={{ page.title | url_encode }}&u=https%3A%2F%2Fpindograma.com.br{{ page.url | url_encode }}"><img class="share-img" src="/assets/images/fb_share.svg" /></a>
<a href="https://linkedin.com/shareArticle?title={{ page.title | url_encode }}&url=https://pindograma.com.br{{ page.url }}&source=pindograma.com.br"><img class="share-img" src="/assets/images/linkedin_share.svg" /></a>
<a href="mailto:?subject=Artigo do Pindograma&body={{ page.title }}: https://pindograma.com.br{{ page.url }}"><img class="share-img" src="/assets/images/email_share.svg" /></a>
{% include newsletter-post-d.html %}
</div>
</div>
<div class="col-2"></div>
</div>

<div class="row mt-2 px-5">
<div class="card mt-2 bg-blue p-5" style="min-height: 250px;width: 100%;border-radius: 1px;border:none;">
<h1 class="text-white" style="margin: -58px 0 0 0;">leia também</h1>
<h1 class="text-blue" style="margin: -58px 0 0 0; color:#6c82a0; font-family='Fantasque Sans Mono';">leia também</h1>
<div class="card-body">
<div class="row">
{% for post in similar_posts limit:3 %}
{% include related-post.html title=post.title author=post.author url=post.url image=post.image date=post.date %}
{% include related-post.html title=post.title author=post.author second_author=post.second_author url=post.url image=post.image date=post.date %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</article>

<article class="d-md-none single-mobile">
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<h2 class="blue px-4 mobile-article-title">{{ page.title }}</h2>
<div class="px-4 w-100 subtitle">
<p class="darkgray undertitle mobile-article-undertitle">{{ page.subtitle }}</p>
<div class="row">
<p class="col-7 blue underauthor mb-1 mobile-pheight"><small>POR {{ author.name | upcase }}</small></p>
<p class="col-5 blue text-right underauthor mb-1 mobile-pheight"><small>{{ page.date | date: "%d/%m/%Y" }}</small></p>
<p class="col-12 blue underauthor mb-1 mobile-pheight"><small>
POR <a href="{{ author.url }}" style="color:#6c82a0; text-decoration:underline;">{{ author.name | upcase }}</a>
{% if page.second_author %} E <a href="{{ second_author_m.url }}" style="color:#6c82a0; text-decoration:underline;">{{ second_author_m.name | upcase }}</a>{% endif %}
</small></p>
<p class="col-12 blue text-left underauthor mb-1 mobile-pheight"><small>{{ page.date | date: "%d/%m/%Y" }}</small></p>
</div>

<div class="row">
Expand Down Expand Up @@ -117,11 +147,19 @@ <h2 class="blue px-4 mobile-article-title">{{ page.title }}</h2>

<div class="row">
<div class="col-12 mx-0 text-center" style="margin-bottom: -75px;">
<img src="{{ author.image }}" alt="foto do autor" class="rounded-circle author-img m-0">
<a href="{{ author.url }}">
<img src="{{ author.image }}" alt="foto do autor" class="rounded-circle author-img m-0">
</a>
</div>
<div class="col-12 mx-0 px-0">
<div class="col-12 mx-0 px-0" style="pointer-events: none;">
<div class="card bg-blue text-center m-0 blue pt-5" style="min-height:150px;width: 100%;border-radius: 1px;border:none;z-index:-1;">
<p class="pt-5 mobile-author-name"><small><i><u><strong>{{ author.name }}</strong></u></i></small></p>
<p class="pt-5 mobile-author-name">
<small>
<a href="{{ author.url }}" style="color:#6c82a0; pointer-events:auto;">
<i><u><strong>{{ author.name }}</strong></u></i>
</a>
</small>
</p>
<p class="mobile-author-name"><small>{{ author.bio }}.</small></p>
</div>
<div class="col-12 blue text-center">
Expand All @@ -132,15 +170,42 @@ <h2 class="blue px-4 mobile-article-title">{{ page.title }}</h2>
</div>
</div>

{% if page.second_author %}
<div class="row">
<div class="col-12 mx-0 text-center" style="margin-bottom: -75px; margin-top: 25px;">
<a href="{{ second_author.url }}">
<img src="{{ second_author_m.image }}" alt="foto do autor" class="rounded-circle author-img m-0">
</a>
</div>
<div class="col-12 mx-0 px-0" style="pointer-events: none;">
<div class="card bg-blue text-center m-0 blue pt-5" style="min-height:150px;width: 100%;border-radius: 1px;border:none;z-index:-1;">
<p class="pt-5 mobile-author-name">
<small>
<a href="{{ second_author.url }}" style="color:#6c82a0; pointer-events:auto;">
<i><u><strong>{{ second_author_m.name }}</strong></u></i>
</a>
</small>
</p>
<p class="mobile-author-name"><small>{{ second_author_m.bio }}.</small></p>
</div>
<div class="col-12 blue text-center">
<i class="fab fa-twitter fa-2x m-2"></i>
<i class="fas fa-envelope fa-2x m-2"></i>
<i class="fab fa-linkedin-in fa-2x m-2"></i>
</div>
</div>
</div>
{% endif %}

<div class="row mt-2">
<h1 class="title-read-too blue pl-5">leia também</h1>
<div class="read-too">
{% for post in similar_posts limit:3 %}
{% assign mod = forloop.index | modulo: 2 %}
{% if mod == 0 %}
{% include related-post-mobile.html title=post.title author=post.author url=post.url image=post.image date=post.date %}
{% include related-post-mobile.html title=post.title author=post.author second_author=post.second_author url=post.url image=post.image date=post.date %}
{% else %}
{% include related-post-mobile-white.html title=post.title author=post.author url=post.url image=post.image date=post.date %}
{% include related-post-mobile-white.html title=post.title author=post.author second_author=post.second_author url=post.url image=post.image date=post.date %}
{% endif %}
{% endfor %}
</div>
Expand Down
Loading