wutta/wuttaweb
3
0
Fork 0
Code Issues 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
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="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()"> <%def name="page_content()">
<div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;"> <div class="wutta-page-content">
<div>${base_meta.full_logo(image_url or None)}</div> <div class="wutta-logo">${base_meta.full_logo(image_url or None)}</div>
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
${form.render_vue_tag()} ${form.render_vue_tag()}

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

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

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

@ -4,9 +4,32 @@
<%def name="title()">Home</%def> <%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()"> <%def name="page_content()">
<div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;"> <div class="wutta-page-content">
<div>${base_meta.full_logo(image_url or None)}</div> <div class="wutta-logo">${base_meta.full_logo(image_url or None)}</div>
<h1 class="is-size-1">Welcome to ${app.get_title()}</h1> <h1 class="is-size-1">Welcome to ${app.get_title()}</h1>
</div> </div>
</%def> </%def>

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

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