[COMPONENTS][Feed] Styling for the empty feed page added

This commit is contained in:
Eliseu Amaro 2021-12-29 19:31:28 +00:00
parent f28ed5e359
commit 49d247aec2
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
4 changed files with 27 additions and 6 deletions

View File

@ -9,6 +9,7 @@
{% endblock stylesheets %}
{% block body %}
{% if notes is defined and notes is not empty %}
<header class="feed-header">
{% if page_title is defined %}
<h1>{{ page_title | trans }}</h1>
@ -19,6 +20,7 @@
{% endfor %}
</nav>
</header>
{% endif %}
{# Backwards compatibility with hAtom 0.1 #}
<main class="feed" tabindex="0" role="feed">
@ -35,7 +37,9 @@
{% endblock current_note %}
{% endfor %}
{% else %}
<div id="empty-notes"><h1>{% trans %}No notes here.{% endtrans %}</h1></div>
<div class="feed-empty">
{{ icon('logo', 'icon feed-background') | raw }}
</div>
{% endif %}
</div>
</main>

View File

@ -148,11 +148,7 @@ html {
display: flex;
justify-content: space-evenly;
}
.footer ul {
display: inline-flex;
width: 100%;
justify-content: space-evenly;
}
/* < 720p */
@media only screen and (max-width:1280px) {
.page-header {

View File

@ -284,6 +284,18 @@ embed header {
color: var(--foreground);
border-radius: 0 0 var(--s) 0;
}
.feed-empty {
display: flex;
flex-direction: column;
}
.feed-empty .feed-background {
opacity: 3%;
width: 40%;
height: auto;
margin-top: var(--xxl);
margin-left: auto;
margin-right: auto;
}
/* < 720p */
@media only screen and (max-width:1280px) {

View File

@ -44,6 +44,7 @@
}
.section-title {
font-weight: 700;
margin-bottom: unset;
}
.section-widget {
display: flex;
@ -172,3 +173,11 @@ textarea.form-row-widget {
margin-top: 6px;
margin-bottom: 6px;
}
.footer ul {
display: inline-flex;
width: 100%;
justify-content: flex-start;
}
.footer ul li {
margin-right: 5px;
}