wutta/wuttaweb
2
0
Fork 0
Code Activity

fix: improve home, login page styles for large logo image

Browse source
This commit is contained in:
Lance Edgar 2024-08-22 15:49:52 -05:00
parent fab87d3303
commit 5ec065d9cd
4 changed files with 55 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/wuttaweb/templates/auth/login.mako
View file

@ -4,9 +4,32 @@
<%def name="title()">Login</%def>
<%def name="extra_styles()">
${parent.extra_styles()}
<style>
.wutta-page-content {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.wutta-logo {
margin-top: 2rem;
display: flex;
justify-content: center;
}
.wutta-logo img {
max-height: 350px;
max-width: 800px;
}
</style>
</%def>
<%def name="page_content()">
<div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
<div>${base_meta.full_logo(image_url or None)}</div>
<div class="wutta-page-content">
<div class="wutta-logo">${base_meta.full_logo(image_url or None)}</div>
<div class="card">
<div class="card-content">
${form.render_vue_tag()}

4
src/wuttaweb/templates/base.mako
View file

@ -151,6 +151,10 @@
white-space: nowrap;
}
.wutta-page-content-wrapper {
height: 100%;
}
##############################
## grids
##############################

27
src/wuttaweb/templates/home.mako
View file

@ -4,9 +4,32 @@
<%def name="title()">Home</%def>
<%def name="extra_styles()">
${parent.extra_styles()}
<style>
.wutta-page-content {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.wutta-logo {
margin-top: 2rem;
display: flex;
justify-content: center;
}
.wutta-logo img {
max-height: 350px;
max-width: 800px;
}
</style>
</%def>
<%def name="page_content()">
<div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
<div>${base_meta.full_logo(image_url or None)}</div>
<div class="wutta-page-content">
<div class="wutta-logo">${base_meta.full_logo(image_url or None)}</div>
<h1 class="is-size-1">Welcome to ${app.get_title()}</h1>
</div>
</%def>

2
src/wuttaweb/templates/page.mako
View file

@ -11,7 +11,7 @@
<%def name="render_vue_template_this_page()">
<script type="text/x-template" id="this-page-template">
<div style="height: 100%;">
<div class="wutta-page-content-wrapper">
${self.page_content()}
</div>
</script>