maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update the Creator Settings Page (#15295)

Browse source 
* fix: closing divs and  alignments

* fix: closing divs, alignments and add z-elevate

* refactor: remove the confirm email css annd add it to setup_mode

* improve mobile responsiveness
This commit is contained in:
Ridhwana 2021-11-09 12:42:24 +02:00 • committed by GitHub
parent 5c0fa0add7
commit 04c7d61dd5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 88 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/stylesheets/setup-mode.scss
View file

@ -6,3 +6,14 @@ body.default-header {
padding-top: 0;
min-height: 100vh;
}
#page-content {
display: flex;
flex-direction: column;
}
#page-content-inner {
display: flex;
flex: 1;
background: white;
}

1
app/assets/stylesheets/views.scss
View file

@ -1,7 +1,6 @@
@import 'views/article';
@import 'views/article-form';
@import 'views/comments';
@import 'views/confirm-email';
@import 'views/footer';
@import 'views/listings';
@import 'views/dashboard';

12
app/assets/stylesheets/views/confirm-email.scss
View file

@ -1,12 +0,0 @@
@import '../config/import';
#page-content.confirmations {
display: flex;
flex-direction: column;
#page-content-inner {
display: flex;
flex: 1;
background: white;
}
}

62
app/views/admin/creator_settings/_form.html.erb
View file

@ -14,7 +14,7 @@
<p id="logo-subtitle" class="crayons-field__description">Ideally SVG, but PNG will work, too. Min size: 300x300px.</p>
<% end %>
<span class="block border-none">
<%= file_field_tag :logo_svg, class: "crayons-btn crayons-btn--secondary", role: "button", required: true %>
<%= file_field_tag :logo_svg, class: "crayons-btn crayons-btn--secondary w-100 ", role: "button", required: true %>
</span>
<% if ::Settings::General.logo_svg.present? %>
@ -31,8 +31,8 @@
<p id="color-selector-subtitle" class="crayons-field__description">This will be the "accent" color used for buttons, links, etc.</p>
<% end %>
<div class="flex items-center w-100 m:w-50 crayons-field">
<div class="flex items-center">
<div class="flex w-100 m:w-50 crayons-field">
<div class="flex">
<%= text_field_tag :primary_brand_color_hex,
::Settings::UserExperience.primary_brand_color_hex,
pattern: "^#+([a-fA-F0-9]{6})$",
@ -44,30 +44,38 @@
placeholder: ::Settings::UserExperience.primary_brand_color_hex,
class: "crayons-color-selector js-color-field ml-2",
required: true %>
</div>
</div>
<div class="crayons-field mt-6 align-left">
<fieldset aria-describedby="section-description">
<legend class="fs-l">Who can join this community?</legend>
<div>
<%= radio_button_tag :invite_only_mode, "0", class: "crayons-field crayons-field--radio", required: true %>
<label for="invite_only_mode_0">Everyone</label>
<br>
<%= radio_button_tag :invite_only_mode, "1", class: "crayons-field crayons-field--radio", required: true %>
<label for="invite_only_mode_1">Only people who are invited</label>
</div>
</fieldset>
<div class="crayons-field mt-6 align-left">
<fieldset aria-describedby="section-description">
<legend class="fs-l">Who can view content in this community?</legend>
<div>
<%= radio_button_tag :public, "0", class: "crayons-field crayons-field--radio", required: true %>
<label for="public_0">Everyone</label>
<br>
<%= radio_button_tag :public, "1", class: "crayons-field crayons-field--radio", required: true %>
<label for="public_1">Members only</label>
</div>
</div>
</div>
<div class="crayons-field mt-6 align-left">
<fieldset aria-describedby="section-description">
<legend class="crayons-field__label mb-2">Who can join this community?</legend>
<div>
<div class="mb-2">
<%= radio_button_tag :invite_only_mode, "0", class: "crayons-field crayons-field--radio", required: true %>
<label for="invite_only_mode_0">Everyone</label>
</div>
<div>
<%= radio_button_tag :invite_only_mode, "1", class: "crayons-field crayons-field--radio", required: true %>
<label for="invite_only_mode_1">Only people who are invited</label>
</div>
</div>
</fieldset>
</div>
<div class="crayons-field mt-6 align-left">
<fieldset aria-describedby="section-description">
<legend class="crayons-field__label mb-2">Who can view content in this community?</legend>
<div>
<div class="mb-2">
<%= radio_button_tag :public, "0", class: "crayons-field crayons-field--radio", required: true %>
<label for="public_0">Everyone</label>
</div>
<div>
<%= radio_button_tag :public, "1", class: "crayons-field crayons-field--radio", required: true %>
<label for="public_1">Members only</label>
</div>
</div>
</fieldset>
</div>

85
app/views/admin/creator_settings/new.html.erb
View file

@ -1,48 +1,47 @@
<% if FeatureFlag.enabled?(:creator_onboarding) && User.with_role(:creator).any? %>
<style>
<%= Rails.application.assets["setup-mode.css"].to_s.html_safe %>
#page-content {
display: flex;
flex-direction: column;
}
</style>
<main id="main-content" class="flex flex-1 justify-center flex-col crayons-layout crayons-layout--limited-xs">
<div aria-live="assertive">
<% if flash[:error] %>
<div class="crayons-notice crayons-notice--danger mb-6" role="alert">
<%= flash[:error] %>
</div>
<% end %>
</div>
<style>
<%= Rails.application.assets["setup-mode.css"].to_s.html_safe %>
</style>
<%= form_tag(admin_creator_settings_path, method: "post") do %>
<% if defined?(resource) && resource&.errors&.any? %>
<div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger" role="alert" data-testid="signup-errors">
<div class="crayons-card__header">
<h1 class="crayons-card__headline">
Whoops, we found <%= pluralize(resource.errors.size, "problem") %>
</h1>
<main id="main-content" class="flex flex-1 justify-center flex-col crayons-layout crayons-layout--limited-xs">
<div aria-live="assertive">
<% if flash[:error] %>
<div class="crayons-notice crayons-notice--danger mb-6" role="alert">
<%= flash[:error] %>
</div>
<div class="crayons-card__body">
<ul>
<% resource.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
</div>
<% end %>
<div class="align-center">
<p class="pb-4 fs-3xl fw-bold">Lovely! Let's set up your Forem.</p>
<p class="color-base-70 fs-xl">No stress, you can always change it later.</p>
<% end %>
</div>
<br>
<%= render "form" %>
<div class="crayons-field mt-6 align-left">
<%= submit_tag "Finish", class: "crayons-btn btn--primary" %>
</div>
<% end %>
<% end %>
<%= inline_svg_tag("forem-background.svg", aria_hidden: true, class: "forem-background absolute bottom-0 right-0") %>
<%= form_tag(admin_creator_settings_path, method: "post", class: "relative z-elevate p-4") do %>
<% if defined?(resource) && resource&.errors&.any? %>
<div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger" role="alert" data-testid="signup-errors">
<div class="crayons-card__header">
<h1 class="crayons-card__headline">
Whoops, we found <%= pluralize(resource.errors.size, "problem") %>
</h1>
</div>
<div class="crayons-card__body">
<ul>
<% resource.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
</div>
<% end %>
<div class="align-center">
<p class="pb-4 fs-3xl fw-bold">Lovely! Let's set up your Forem.</p>
<p class="color-base-70 fs-xl">No stress, you can always change it later.</p>
</div>
<br>
<%= render "form" %>
<div class="crayons-field mt-6 align-left">
<%= submit_tag "Finish", class: "crayons-btn btn--primary" %>
</div>
<% end %>
<%= inline_svg_tag("forem-background.svg", aria_hidden: true, class: "forem-background absolute bottom-0 right-0 hidden m:block") %>
</main>
<% end %>