Simplify settings layout and correct h2 levels
This commit is contained in:
Andy Smith
@@ -1,16 +0,0 @@
|
||||
@layer components {
|
||||
.profile-layout {
|
||||
display: flex;
|
||||
gap: var(--inline-space);
|
||||
|
||||
@media (min-width: 800px) {
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 799px) {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -13,18 +13,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Sections & Panels
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
.settings__panel {
|
||||
--panel-size: 100%;
|
||||
--panel-padding: calc(var(--settings-spacer) / 1);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--settings-spacer) / 2);
|
||||
gap: var(--panel-padding);
|
||||
min-block-size: 100%;
|
||||
min-inline-size: 0;
|
||||
|
||||
@media (min-width: 960px) {
|
||||
--panel-padding: calc(var(--settings-spacer) * 1.5) calc(var(--settings-spacer) * 2);
|
||||
@media (min-width: 640px) {
|
||||
--panel-padding: calc(var(--settings-spacer) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,6 +41,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.settings__section {
|
||||
h2 {
|
||||
font-size: var(--text-large);
|
||||
}
|
||||
|
||||
> * + * {
|
||||
margin-block-start: calc(var(--panel-padding) / 2);
|
||||
}
|
||||
|
||||
&:is(:first-child):has(h2) {
|
||||
margin-top: -0.33lh; /* Align h2 letters caps with panel padding */
|
||||
}
|
||||
}
|
||||
|
||||
/* Users
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<header>
|
||||
<h2 class="divider txt-large">Auto close</h2>
|
||||
<p class="margin-none-block-start">Fizzy doesn’t let stale cards stick around forever. Cards automatically move to “Not Now” if there is no activity for a specific period of time. <em>This is the default, global setting — you can override it on each board.</em></p>
|
||||
</header>
|
||||
|
||||
<%= render "entropy/auto_close", model: account.entropy, url: account_entropy_path, disabled: !Current.user.admin? %>
|
||||
<section class="settings__section">
|
||||
<header>
|
||||
<h2 class="divider">Auto close</h2>
|
||||
<div>Fizzy doesn’t let stale cards stick around forever. Cards automatically move to “Not Now” if there is no activity for a specific period of time. <em>This is the default, global setting — you can override it on each board.</em></div>
|
||||
</header>
|
||||
|
||||
<%= render "entropy/auto_close", model: account.entropy, url: account_entropy_path, disabled: !Current.user.admin? %>
|
||||
</section>
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
<header class="margin-block-start-double">
|
||||
<h2 class="divider txt-large">Export account data</h2>
|
||||
<p class="margin-none-block">Download a complete archive of all account data.</p>
|
||||
</header>
|
||||
<section class="settings__section">
|
||||
<header>
|
||||
<h2 class="divider">Export account data</h2>
|
||||
<div>Download a complete archive of all account data.</div>
|
||||
</header>
|
||||
|
||||
<div data-controller="dialog" data-dialog-modal-value="true">
|
||||
<button type="button" class="btn" data-action="dialog#open">Begin export...</button>
|
||||
<div data-controller="dialog" data-dialog-modal-value="true">
|
||||
<button type="button" class="btn" data-action="dialog#open">Begin export...</button>
|
||||
|
||||
<dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
|
||||
<h2 class="margin-none txt-large">Export all account data</h2>
|
||||
<p class="margin-none-block-start">This will generate a ZIP archive of all data in this account including all boards, cards, users, and settings.</p>
|
||||
<p>When the file is ready, we'll email you a link to download it. The link will expire after 24 hours.</p>
|
||||
<dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
|
||||
<h2 class="margin-none txt-large">Export all account data</h2>
|
||||
<p class="margin-none-block-start">This will generate a ZIP archive of all data in this account including all boards, cards, users, and settings.</p>
|
||||
<p>When the file is ready, we'll email you a link to download it. The link will expire after 24 hours.</p>
|
||||
|
||||
<div class="flex gap justify-center">
|
||||
<%= button_to "Start export", account_exports_path, method: :post, class: "btn btn--link", form: { data: { action: "submit->dialog#close" } } %>
|
||||
<button type="button" class="btn" data-action="dialog#close">Cancel</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
<div class="flex gap justify-center">
|
||||
<%= button_to "Start export", account_exports_path, method: :post, class: "btn btn--link", form: { data: { action: "submit->dialog#close" } } %>
|
||||
<button type="button" class="btn" data-action="dialog#close">Cancel</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<%= form_with model: account, url: account_settings_path, method: :put, scope: :account, data: { controller: "form" }, class: "flex gap-half" do |form| %>
|
||||
<strong class="full-width"><%= form.text_field :name, required: true, class: "input input--transparent full-width txt-medium", placeholder: "Account name…", data: { action: "input->form#disableSubmitWhenInvalid" }, readonly: !Current.user.admin? %></strong>
|
||||
<section class="settings__section">
|
||||
<%= form_with model: account, url: account_settings_path, method: :put, scope: :account, data: { controller: "form" }, class: "flex gap-half" do |form| %>
|
||||
<strong class="full-width"><%= form.text_field :name, required: true, class: "input input--transparent full-width txt-medium", placeholder: "Account name…", data: { action: "input->form#disableSubmitWhenInvalid" }, readonly: !Current.user.admin? %></strong>
|
||||
|
||||
<% if Current.user.admin? %>
|
||||
<%= form.button class: "btn btn--circle btn--link txt-medium", data: { form_target: "submit" }, disabled: form.object do %>
|
||||
<%= icon_tag "arrow-right" %>
|
||||
<span class="for-screen-reader">Save changes</span>
|
||||
<% if Current.user.admin? %>
|
||||
<%= form.button class: "btn btn--circle btn--link txt-medium", data: { form_target: "submit" }, disabled: form.object do %>
|
||||
<%= icon_tag "arrow-right" %>
|
||||
<span class="for-screen-reader">Save changes</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</section>
|
||||
|
||||
@@ -1,24 +1,26 @@
|
||||
<header>
|
||||
<h2 class="divider txt-medium margin-block-start">People on this account</h2>
|
||||
</header>
|
||||
<section class="settings__section">
|
||||
<header>
|
||||
<h2 class="divider">People on this account</h2>
|
||||
</header>
|
||||
|
||||
<%= tag.div class: "flex flex-column gap settings__user-filter", data: {
|
||||
controller: "filter navigable-list",
|
||||
action: "keydown->navigable-list#navigate filter:changed->navigable-list#reset",
|
||||
navigable_list_focus_on_selection_value: true,
|
||||
navigable_list_actionable_items_value: true
|
||||
} do %>
|
||||
<%= tag.div class: "flex flex-column gap settings__user-filter", data: {
|
||||
controller: "filter navigable-list",
|
||||
action: "keydown->navigable-list#navigate filter:changed->navigable-list#reset",
|
||||
navigable_list_focus_on_selection_value: true,
|
||||
navigable_list_actionable_items_value: true
|
||||
} do %>
|
||||
|
||||
<div class="settings__user-filter">
|
||||
<input placeholder="Filter…" class="input input--transparent full-width txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
|
||||
<div class="settings__user-filter">
|
||||
<input placeholder="Filter…" class="input input--transparent full-width txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
|
||||
|
||||
<ul class="settings__user-list margin-block-half" data-filter-target="list" role="listbox">
|
||||
<%= render partial: "account/settings/user", collection: users %>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="settings__user-list margin-block-half" data-filter-target="list" role="listbox">
|
||||
<%= render partial: "account/settings/user", collection: users %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<%= link_to account_join_code_path, class: "btn btn--link center txt-small" do %>
|
||||
<%= icon_tag "add" %>
|
||||
<span>Invite people</span>
|
||||
<%= link_to account_join_code_path, class: "btn btn--link center" do %>
|
||||
<%= icon_tag "add" %>
|
||||
<span>Invite people</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</section>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</h1>
|
||||
<% end %>
|
||||
|
||||
<section class="settings margin-block-start-half">
|
||||
<div class="settings margin-block-start-half">
|
||||
<div class="settings__panel settings__panel--users panel shadow center">
|
||||
<%= render "account/settings/name", account: @account %>
|
||||
<%= render "account/settings/users", users: @users %>
|
||||
@@ -20,6 +20,6 @@
|
||||
<%= render "account/settings/export" if Current.user.admin? || Current.user.owner? %>
|
||||
<%= render "account/settings/cancellation" %>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<%= render "account/settings/subscription_panel" if Fizzy.saas? %>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<div class="flex flex-column align-center">
|
||||
<h2 class="divider txt-large margin-none-block full-width">Developer</h2>
|
||||
<p class="margin-none">Manage <%= link_to "personal access tokens", my_access_tokens_path, class: "btn btn--plain txt-link" %> used with the Fizzy developer API.</p>
|
||||
</div>
|
||||
<section class="settings__section flex flex-column align-center">
|
||||
<header>
|
||||
<h2 class="divider">Developer</h2>
|
||||
<div>Manage <%= link_to "personal access tokens", my_access_tokens_path, class: "btn btn--plain txt-link" %> used with the Fizzy developer API.</div>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
<header class="margin-block-start-double">
|
||||
<h2 class="divider txt-large">Export your data</h2>
|
||||
<p class="margin-none-block">Download an archive of your Fizzy data.</p>
|
||||
</header>
|
||||
<section class="settings__section">
|
||||
<header>
|
||||
<h2 class="divider">Export your data</h2>
|
||||
<div>Download an archive of your Fizzy data.</div>
|
||||
</header>
|
||||
|
||||
<div data-controller="dialog" data-dialog-modal-value="true">
|
||||
<button type="button" class="btn" data-action="dialog#open">Begin export...</button>
|
||||
<div data-controller="dialog" data-dialog-modal-value="true">
|
||||
<button type="button" class="btn" data-action="dialog#open">Begin export...</button>
|
||||
|
||||
<dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
|
||||
<h2 class="margin-none txt-large">Export your data</h2>
|
||||
<p class="margin-none-block-start">This will generate a ZIP archive of all cards you have access to.</p>
|
||||
<p>When ready, we'll email you a download link (expires in 24 hours).</p>
|
||||
<dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
|
||||
<h2 class="margin-none txt-large">Export your data</h2>
|
||||
<p class="margin-none-block-start">This will generate a ZIP archive of all cards you have access to.</p>
|
||||
<p>When ready, we'll email you a download link (expires in 24 hours).</p>
|
||||
|
||||
<div class="flex gap justify-center">
|
||||
<%= button_to "Start export", user_data_exports_path(@user), method: :post, class: "btn btn--link", form: { data: { action: "submit->dialog#close" } } %>
|
||||
<button type="button" class="btn" data-action="dialog#close">Cancel</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
<div class="flex gap justify-center">
|
||||
<%= button_to "Start export", user_data_exports_path(@user), method: :post, class: "btn btn--link", form: { data: { action: "submit->dialog#close" } } %>
|
||||
<button type="button" class="btn" data-action="dialog#close">Cancel</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<section>
|
||||
<strong class="divider txt-large">Appearance</strong>
|
||||
<section class="settings__section">
|
||||
<header>
|
||||
<h2 class="divider">Appearance</h2>
|
||||
</header>
|
||||
|
||||
<div class="theme-switcher flex gap max-width justify-center txt-small margin-block-start-half">
|
||||
<label class="btn theme-switcher__btn">
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
<div class="flex flex-column gap align-center margin-block-double">
|
||||
<section class="settings__section">
|
||||
<% url = session_transfer_url(user.identity.transfer_id, script_name: nil) %>
|
||||
|
||||
<label class="flex flex-column gap full-width">
|
||||
<header>
|
||||
<strong class="divider txt-large">Devices</strong>
|
||||
<p class="margin-none" id="session_transfer_label">Link to automatically log in on another device.</p>
|
||||
</header>
|
||||
<span class="flex align-center gap margin-inline">
|
||||
<input type="text" class="input fill-white" id="session_transfer_url" value="<%= url %>" aria-labelledby="session_transfer_label" readonly>
|
||||
</span>
|
||||
</label>
|
||||
<header>
|
||||
<h2 class="divider">Devices</h2>
|
||||
<p class="margin-none" id="session_transfer_label">Link to automatically log in on another device.</p>
|
||||
</header>
|
||||
|
||||
<div class="flex align-center gap">
|
||||
<input type="text" class="input fill-white" id="session_transfer_url" value="<%= url %>" aria-labelledby="session_transfer_label" readonly>
|
||||
|
||||
<div class="flex justify-center gap">
|
||||
<div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
|
||||
<%= tag.button class: "btn", data: { action: "dialog#open", controller: "tooltip" } do %>
|
||||
<%= icon_tag "qr-code" %>
|
||||
@@ -35,4 +32,4 @@
|
||||
<span class="for-screen-reader">Copy auto-login link</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<% @page_title = @user.name %>
|
||||
<% me_or_you = Current.user == @user ? "me" : @user.first_name %>
|
||||
|
||||
<div class="profile-layout">
|
||||
<section class="panel shadow txt-align-center" style="--panel-size: 45ch;">
|
||||
<div class="settings settings--profile">
|
||||
<div class="settings__panel panel shadow txt-align-center">
|
||||
<div class="flex flex-column gap position-relative">
|
||||
<% if Current.user == @user %>
|
||||
<%= link_to edit_user_path(@user), class: "user-edit-link btn", data: { controller: "tooltip" } do %>
|
||||
@@ -46,15 +46,15 @@
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<% if Current.user == @user %>
|
||||
<section class="panel shadow" style="--panel-size: 45ch;">
|
||||
<div class="settings__panel panel shadow">
|
||||
<%= render "users/theme" %>
|
||||
<%= render "users/transfer", user: @user %>
|
||||
<%= render "users/access_tokens" %>
|
||||
<%= render "users/data_export" %>
|
||||
</section>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user