github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-20 17:00:17 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Setup wizard copy changes and vertically stack logo fields (#19583)

Browse Source 
* copy changes to setup wizard step title
* make logo upload stacking; tweaks on medium size screen view
This commit is contained in:
Ella E 2022-12-22 10:15:09 -07:00 committed by GitHub
parent 84bc4bf3d5
commit 3c0a4b37d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/assets/stylesheets/wizard.scss
View File

@ -71,12 +71,10 @@ body.wizard {
padding: 0;
border: 1px solid var(--primary-low);
border-radius: 8px;
padding: 2em 3em;
padding: 2em;
@include breakpoint("mobile-extra-large") {
@include breakpoint("large") {
padding: 2em 1.5em;
max-width: 99%;
margin: 1.5em auto;
}
&__step {
@ -85,7 +83,7 @@ body.wizard {
min-width: 35%;
width: 100%;
@include breakpoint("mobile-extra-large") {
@include breakpoint("large") {
max-width: 95%;
}
@ -129,20 +127,6 @@ body.wizard {
}
}
&__step.branding .wizard-container__fields {
padding-right: 0;
display: flex;
flex-wrap: wrap;
gap: 0 2em;
.wizard-container__field {
flex: 1 1 45%;
@include breakpoint("large") {
flex: 1 1 100%;
}
}
}
&__step.branding .wizard-container__field {
@include breakpoint("mobile-extra-large") {
max-width: 100%;
@ -205,6 +189,12 @@ body.wizard {
box-sizing: border-box;
margin-right: 1em;
@media only screen and (max-device-width: 568px) {
width: 80%;
margin-left: auto;
margin-right: auto;
}
+ .wizard-container__fields {
padding: 1em;
background: var(--primary-very-low);
@ -348,7 +338,6 @@ body.wizard {
display: flex;
align-items: center;
font-weight: bold;
margin-right: -1.5em;
@include breakpoint("mobile-extra-large") {
margin-right: 0;
@ -544,7 +533,7 @@ body.wizard {
display: flex;
justify-content: space-between;
align-items: center;
@media only screen and (max-device-width: 568px) {
@include breakpoint("mobile-extra-large") {
flex-direction: column;
justify-content: center;
align-items: stretch;
@ -592,7 +581,10 @@ body.wizard {
&__description.extra {
color: var(--primary-high);
font-size: var(--font-up-1);
margin: 0.25em 0 0.5em 0;
margin: 0.25em 0 0.5em 3.5em;
@media only screen and (max-device-width: 568px) {
margin-left: 2em;
}
}
&__text-input {
@ -607,6 +599,10 @@ body.wizard {
transition: border-color 0.5s;
}
&__dropdown {
width: 100%;
}
&__dropdown .select-kit-header:not(.btn) {
border-radius: 4px;
}
@ -628,8 +624,8 @@ body.wizard {
display: inline-block;
background: var(--primary-low-mid);
border-radius: 16px;
width: 58px;
height: 32px;
width: 50px;
height: 28px;
margin-right: 0.5em;
position: relative;
vertical-align: middle;
@ -650,7 +646,7 @@ body.wizard {
content: "\2713"; // checkmark
color: var(--secondary);
top: 4px;
left: 10px;
left: 9px;
@media only screen and (max-device-width: 568px) {
top: 3px;
left: 5px;
@ -661,8 +657,8 @@ body.wizard {
&__checkbox-slider:before {
background: var(--secondary);
border-radius: 50%;
width: 24px;
height: 24px;
width: 20px;
height: 20px;
top: 4px;
left: 4px;
transition: left 0.25s;
@ -681,7 +677,7 @@ body.wizard {
background: var(--tertiary);
}
&__checkbox:checked + .wizard-container__checkbox-slider:before {
left: 30px;
left: 26px;
@media only screen and (max-device-width: 568px) {
left: 20px;
}

4
config/locales/server.en.yml
View File

@ -4929,7 +4929,7 @@ en:
title: "Discourse Setup"
step:
introduction:
title: "Tell us about your community"
title: "About your site"
description: "These will be shown on your login and any public pages. You can always change them later."
fields:
@ -5000,7 +5000,7 @@ en:
label: "Subcategories with Featured Topics"
branding:
title: "Community logo"
title: "Site logo"
fields:
logo:
label: "Primary logo"