Add initial "no posts" empty state

This commit is contained in:
vimux 2018-05-28 15:31:50 +03:00
parent 6e72956f06
commit 5552fc3f5a
No known key found for this signature in database
GPG key ID: 5A34FDC4EE832E34
3 changed files with 33 additions and 0 deletions

View file

@ -16,6 +16,19 @@
- id: footer_credits - id: footer_credits
translation: "Powered by <a href=\"https://gohugo.io/\" rel=\"nofollow noopener\" target=\"_blank\">Hugo</a> and <a href=\"https://github.com/vimux/binario\" rel=\"nofollow noopener\" target=\"_blank\">Binario</a> theme." translation: "Powered by <a href=\"https://gohugo.io/\" rel=\"nofollow noopener\" target=\"_blank\">Hugo</a> and <a href=\"https://github.com/vimux/binario\" rel=\"nofollow noopener\" target=\"_blank\">Binario</a> theme."
# "No posts" empty state
- id: empty_title
translation: "You don't have any posts yet!"
- id: empty_text_start
translation: "As posts are added in your <code>mainSection</code> folders"
- id: empty_text_end
translation: "they'll appear here"
- id: empty_tip
translation: "<b>Tip:</b> You could change <code>mainSection</code> folders in site config file."
# 404 # 404
- id: page404_title - id: page404_title
translation: "404 Page not found" translation: "404 Page not found"

View file

@ -9,6 +9,14 @@
</div> </div>
{{ end }} {{ end }}
</div> </div>
{{- if eq $paginator.TotalNumberOfElements 0 }}
<div class="empty block center">
<div class="empty__icon">¯\_(ツ)_/¯</div>
<h3 class="empty__title">{{ T "empty_title" }}</h3>
<p class="empty__text">{{ T "empty_text_start" | safeHTML }} ({{ delimit (apply $mainSections "printf" "<code>content/%s</code>" ".") ", " | safeHTML }}), {{ T "empty_text_end" }}.</p>
<p class="empty__tip">{{ T "empty_tip" | safeHTML }}</p>
</div>
{{- end }}
{{ partial "pagination.html" . }} {{ partial "pagination.html" . }}
</div> </div>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

View file

@ -767,6 +767,18 @@ mark {
font-size: 1.5rem; font-size: 1.5rem;
} }
/* Empty state */
.empty__icon {
font-size: 3.5rem;
margin-bottom: 2rem;
}
.empty__tip {
padding: .5rem;
background-color: #202020;
margin: 4rem 0 0;
}
/* Footer */ /* Footer */
.footer { .footer {
padding: .625rem 0; padding: .625rem 0;