docbrown/app/views/users/_ux.html.erb
Emma Goto d98f143146
[deploy] Make UX settings save button sticky when modified (#9478)
* Add sticky footer to UX settings page  when changes are made

* Add missing spaces to html object
2020-07-27 12:52:21 -04:00

66 lines
2.8 KiB
Text

<%= javascript_packs_with_chunks_tag "stickySaveFooter", defer: true %>
<%= form_for @user, html: { id: "ux-customization-form", class: "sticky-footer-form grid gap-6" } do |f| %>
<div class="crayons-card grid gap-6 p-6">
<h2>Style Customization</h2>
<div class="crayons-field">
<%= f.label :config_theme, "Site Theme", class: "crayons-field__label" %>
<div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
<% ["default", "night theme", "minimal light theme", "pink theme", "ten x hacker theme"].each do |theme| %>
<%= render partial: "theme_selector", locals: { f: f, theme: theme } %>
<% end %>
</div>
</div>
<div class="crayons-field">
<%= f.label :config_font, "Base Reading Font", class: "crayons-field__label" %>
<div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
<% ["default", "sans serif", "monospace", "comic sans", "open dyslexic"].each do |font| %>
<%= render partial: "font_selector", locals: { f: f, font: font } %>
<% end %>
</div>
</div>
<div class="crayons-field">
<%= f.label :config_navbar, "Site Navbar", class: "crayons-field__label" %>
<div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
<% %w[default static].each do |navbar| %>
<%= render partial: "navbar_selector", locals: { f: f, navbar: navbar } %>
<% end %>
</div>
</div>
</div>
<div class="crayons-card grid gap-6 p-6">
<h2>Writing</h2>
<div class="crayons-field">
<%= f.label :editor_version, "Editor Version", class: "crayons-field__label" %>
<div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
<% %w[v1 v2].each do |version| %>
<%= render partial: "editor_selector", locals: { f: f, version: version } %>
<% end %>
</div>
</div>
</div>
<div class="crayons-card grid gap-6 p-6">
<h2>Content Customization</h2>
<div class="crayons-field">
<%= f.label :experience_level, "What is your approximate coding experience level (1-5)?", class: "crayons-field__label" %>
<div class="theme-selector-field grid grid-cols-5">
<% user_experience_levels.each_with_index do |exp, i| %>
<%= render partial: "experience_selector", locals: { f: f, exp: exp, i: i, label: user_experience_labels } %>
<% end %>
</div>
<p>This will not be displayed on your profile or anywhere publicly. It helps gently determine what content you are shown along with tags you follow etc.</p>
</div>
</div>
<div class="save-footer crayons-card mb-6 grid gap-6 p-6">
<%= f.hidden_field :tab, value: @tab, id: nil %>
<div>
<button class="crayons-btn" type="submit">Save</button>
</div>
</div>
<% end %>