UX: fix styles for the wizard congrats step (#18105)

This commit is contained in:
Kris 2022-08-26 12:29:40 -04:00 committed by GitHub
parent a780b42b03
commit 000c4e1084
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 20 deletions

View File

@ -84,7 +84,7 @@ body.wizard {
position: relative;
z-index: 11;
background-color: var(--secondary);
box-shadow: 0 4px 19px 6px rgba(var(--primary-rgb), 0.05);
box-shadow: 0 4px 19px 6px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
margin: 3em auto 1.5em auto;
padding: 0;
@ -681,6 +681,40 @@ body.wizard {
.wizard-container__image-upload canvas {
border: 1px solid rgba(0, 0, 0, 0.2);
}
.finish-installation {
.wizard-congratulations-wrap {
display: flex;
@media screen and (max-width: 750px) {
flex-direction: column-reverse;
}
}
.row:not(.finish-installation-image) {
margin-right: auto;
}
h1 {
margin: 0 auto 1em 0;
}
&-image {
margin-bottom: 1em;
}
.tada {
height: 15vw;
max-height: 10em;
}
.help-text {
margin: 2em 0;
}
.primary {
display: inline-block;
}
}
}
// Register admin page... /finish-installation/register

View File

@ -1,19 +1,18 @@
<h1><%= t 'finish_installation.congratulations' %></h1>
<div class="wizard-congratulations-wrap">
<div class='row'>
<h1><%= t 'finish_installation.congratulations' %></h1>
<p><%= t 'finish_installation.register.help' %></p>
<div class='row'>
<%= image_tag "/images/wizard/tada.svg", class: "tada" %>
</div>
<div class='row help-text'>
<%= t 'finish_installation.register.help' %>
</div>
<div class='row'>
<%= link_to(finish_installation_register_path, class: 'wizard-container__button primary') do %>
<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 448 512">
<path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
</svg>
<%= t 'finish_installation.register.button' %>
<% end %>
<%= link_to(finish_installation_register_path, class: 'wizard-container__button primary') do %>
<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 448 512">
<path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
</svg>
<%= t 'finish_installation.register.button' %>
<% end %>
</div>
<div class='row finish-installation-image'>
<%= image_tag "/images/wizard/tada.svg", class: "tada" %>
</div>
</div>

View File

@ -645,7 +645,6 @@ en:
linkable_type:
invalid: "is not valid"
uncategorized_category_name: "Uncategorized"
vip_category_name: "Lounge"
@ -4888,7 +4887,7 @@ en:
register:
button: "Register"
title: "Register Admin Account"
help: "register a new account to get started"
help: "Register a new account to get started."
no_emails: "Unfortunately, no administrator emails were defined during setup, so finalizing the configuration may be difficult. Please add a developer email in the configuration file or <a href='https://meta.discourse.org/t/create-admin-account-from-console/17274'>create an administrator account from console</a>."
confirm_email:
title: "Confirm your Email"