[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 %} {% endblock stylesheets %}
{% block body %} {% block body %}
{% if notes is defined and notes is not empty %}
<header class="feed-header"> <header class="feed-header">
{% if page_title is defined %} {% if page_title is defined %}
<h1>{{ page_title | trans }}</h1> <h1>{{ page_title | trans }}</h1>
@ -19,6 +20,7 @@
{% endfor %} {% endfor %}
</nav> </nav>
</header> </header>
{% endif %}
{# Backwards compatibility with hAtom 0.1 #} {# Backwards compatibility with hAtom 0.1 #}
<main class="feed" tabindex="0" role="feed"> <main class="feed" tabindex="0" role="feed">
@ -35,7 +37,9 @@
{% endblock current_note %} {% endblock current_note %}
{% endfor %} {% endfor %}
{% else %} {% 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 %} {% endif %}
</div> </div>
</main> </main>

View File

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

View File

@ -284,6 +284,18 @@ embed header {
color: var(--foreground); color: var(--foreground);
border-radius: 0 0 var(--s) 0; 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 */ /* < 720p */
@media only screen and (max-width:1280px) { @media only screen and (max-width:1280px) {

View File

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