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

Add skip link functionality to dashboard pages (#13115)

Browse source 
* add skip link functionality to dashboard pages

* add skip link to listings dashboard

* add missed follow users dashboard
This commit is contained in:
Suzanne Aitchison 2021-03-25 08:45:01 +00:00 • committed by GitHub
parent 000a30d8d7
commit e382a086bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 236 additions and 224 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/views/collections/index.html.erb
View file

@ -4,7 +4,7 @@
<%= render "collections/meta", title_string: title_string %>
<% end %>
<div class="crayons-layout crayons-layout--1-col">
<main id="main-content" class="crayons-layout crayons-layout--1-col">
<header class="px-2 m:px-0">
<h1><%= title_string %></h1>
</header>
@ -22,4 +22,4 @@
<p>This user doesn't have any series</p>
<% end %>
</div>
</div>
</main>

84
app/views/dashboards/followers.html.erb
View file

@ -1,50 +1,52 @@
<% title("Dashboard - #{community_name}") %>
<main id="index-container"
data-params="<%= params.to_json(only: %i[which per_page]) %>"
data-which="followers">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Followers</h1>
<%= render "actions_mobile" %>
</header>
<div id="index-container"
data-params="<%= params.to_json(only: %i[which per_page]) %>"
data-which="followers">
<main id="main-content">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Followers</h1>
<%= render "actions_mobile" %>
</header>
<div class="crayons-layout crayons-layout--2-cols">
<aside class="crayons-layout__sidebar-left">
<%= render "actions" %>
</aside>
<div class="crayons-layout crayons-layout--2-cols">
<aside class="crayons-layout__sidebar-left">
<%= render "actions" %>
</aside>
<div class="crayons-layout__content" id="user-dashboard">
<% if @follows.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
<% @follows.each do |follow| %>
<% user = follow.follower %>
<% if user %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
<img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" />
</a>
<div class="crayons-layout__content" id="user-dashboard">
<% if @follows.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
<% @follows.each do |follow| %>
<% user = follow.follower %>
<% if user %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
<img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" />
</a>
<div class="pl-4 s:pl-0 self-center">
<h3 class="s:mb-1 p-0">
<a href="<%= user.path %>">
<%= user.name %>
</a>
</h3>
<div class="pl-4 s:pl-0 self-center">
<h3 class="s:mb-1 p-0">
<a href="<%= user.path %>">
<%= user.name %>
</a>
</h3>
<p class="s:mb-4">
<a href="<%= user.path %>" class="crayons-link crayons-link--secondary">
@<%= user.username %>
</a>
</p>
<p class="s:mb-4">
<a href="<%= user.path %>" class="crayons-link crayons-link--secondary">
@<%= user.username %>
</a>
</p>
</div>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
<% else %>
<div class="p-9 crayons-card crayons-card--secondary align-center fs-l">You don't have any followers yet...</div>
<% end %>
<%= render "sublist" %>
</div>
<% else %>
<div class="p-9 crayons-card crayons-card--secondary align-center fs-l">You don't have any followers yet...</div>
<% end %>
<%= render "sublist" %>
</div>
</div>
<div>
</main>
</main>
</div>

82
app/views/dashboards/following_organizations.html.erb
View file

@ -1,49 +1,51 @@
<% title("Dashboard - #{community_name}") %>
<main id="index-container"
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following organizations</h1>
<%= render "actions_mobile" %>
</header>
<div id="index-container"
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<main id="main-content">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following organizations</h1>
<%= render "actions_mobile" %>
</header>
<div class="crayons-layout crayons-layout--2-cols">
<aside class="crayons-layout__sidebar-left">
<%= render "actions" %>
</aside>
<div class="crayons-layout crayons-layout--2-cols">
<aside class="crayons-layout__sidebar-left">
<%= render "actions" %>
</aside>
<div class="crayons-layout__content" id="user-dashboard">
<div class="crayons-layout__content" id="user-dashboard">
<% if @followed_organizations.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
<% @followed_organizations.each do |follow| %>
<% organization = follow.followable %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="<%= organization.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
<img alt="<%= organization.name %> logo" class="crayons-logo__image" src="<%= Images::Profile.call(organization.profile_image_url, length: 60) %>" />
</a>
<% if @followed_organizations.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
<% @followed_organizations.each do |follow| %>
<% organization = follow.followable %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="<%= organization.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
<img alt="<%= organization.name %> logo" class="crayons-logo__image" src="<%= Images::Profile.call(organization.profile_image_url, length: 60) %>" />
</a>
<div class="pl-4 s:pl-0 self-center">
<h3 class="s:mb-1 p-0">
<a href="<%= organization.path %>">
<%= organization.name %>
</a>
</h3>
<div class="pl-4 s:pl-0 self-center">
<h3 class="s:mb-1 p-0">
<a href="<%= organization.path %>">
<%= organization.name %>
</a>
</h3>
<p>
<a href="<%= organization.path %>" class="crayons-link crayons-link--secondary">
@<%= organization.username %>
</a>
</p>
<p>
<a href="<%= organization.path %>" class="crayons-link crayons-link--secondary">
@<%= organization.username %>
</a>
</p>
</div>
</div>
</div>
<% end %>
</div>
<% else %>
<div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any organizations yet...</div>
<% end %>
<%= render "sublist" %>
<% end %>
</div>
<% else %>
<div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any organizations yet...</div>
<% end %>
<%= render "sublist" %>
</div>
</div>
</div>
</main>
</main>
</div>

82
app/views/dashboards/following_podcasts.html.erb
View file

@ -1,49 +1,51 @@
<% title("Dashboard - #{community_name}") %>
<main id="index-container"
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following podcasts</h1>
<%= render "actions_mobile" %>
</header>
<div id="index-container"
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<main id="main-content">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following podcasts</h1>
<%= render "actions_mobile" %>
</header>
<div class="crayons-layout crayons-layout--2-cols">
<aside class="crayons-layout__sidebar-left">
<%= render "actions" %>
</aside>
<div class="crayons-layout crayons-layout--2-cols">
<aside class="crayons-layout__sidebar-left">
<%= render "actions" %>
</aside>
<div class="crayons-layout__content" id="user-dashboard">
<div class="crayons-layout__content" id="user-dashboard">
<% if @followed_podcasts.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
<% @followed_podcasts.each do |follow| %>
<% podcast = follow.followable %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="/<%= podcast.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
<img alt="<%= podcast.name %> logo" class="crayons-logo__image" src="<%= podcast.image_url %>" />
</a>
<% if @followed_podcasts.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
<% @followed_podcasts.each do |follow| %>
<% podcast = follow.followable %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="/<%= podcast.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
<img alt="<%= podcast.name %> logo" class="crayons-logo__image" src="<%= podcast.image_url %>" />
</a>
<div class="pl-4 s:pl-0 self-center">
<h3 class="s:mb-1 p-0">
<a href="/<%= podcast.path %>">
<%= podcast.name %>
</a>
</h3>
<div class="pl-4 s:pl-0 self-center">
<h3 class="s:mb-1 p-0">
<a href="/<%= podcast.path %>">
<%= podcast.name %>
</a>
</h3>
<p>
<a href="/<%= podcast.path %>" class="crayons-link crayons-link--secondary">
@<%= podcast.name %>
</a>
</p>
<p>
<a href="/<%= podcast.path %>" class="crayons-link crayons-link--secondary">
@<%= podcast.name %>
</a>
</p>
</div>
</div>
</div>
<% end %>
</div>
<% else %>
<div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any podcasts yet...</div>
<% end %>
<%= render "sublist" %>
<% end %>
</div>
<% else %>
<div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any podcasts yet...</div>
<% end %>
<%= render "sublist" %>
</div>
</div>
</div>
</main>
</main>
</div>

106
app/views/dashboards/following_tags.html.erb
View file

@ -1,62 +1,64 @@
<% title("Dashboard - #{community_name}") %>
<main id="index-container"
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following tags</h1>
<%= render "actions_mobile" %>
</header>
<div id="index-container"
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<main id="main-content">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following tags</h1>
<%= render "actions_mobile" %>
</header>
<div class="crayons-layout crayons-layout--2-cols">
<aside class="crayons-layout__sidebar-left">
<%= render "actions" %>
</aside>
<div class="crayons-layout crayons-layout--2-cols">
<aside class="crayons-layout__sidebar-left">
<%= render "actions" %>
</aside>
<div class="crayons-layout__content mb-5" id="user-dashboard">
<% if @followed_tags.any? %>
<%= javascript_packs_with_chunks_tag "dashboardTagsDisableUnchangedButtons", defer: true %>
<div class="crayons-layout__content mb-5" id="user-dashboard">
<% if @followed_tags.any? %>
<%= javascript_packs_with_chunks_tag "dashboardTagsDisableUnchangedButtons", defer: true %>
<div class="crayons-notice p-4 px-6 mb-4 mx-2 m:mx-0">
Adjust tag weight to modify your home feed. Higher values mean more appearances for that tag.
<span class="crayons-indicator crayons-indicator--outlined crayons-indicator--accent ml-3">Default 1.0</span>
</div>
<div id="following-wrapper" class="grid gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 px-2 m:px-0">
<% negative_follow_shown_once = false %>
<% @followed_tags.each do |follow| %>
<% tag = follow.followable %>
<% if tag %>
<% color = Color::CompareHex.new([tag.bg_color_hex || "#0000000", tag.text_color_hex || "#ffffff"]).brightness(0.8) %>
<div class="crayons-card branded-2 p-4 m:p-6 m:pt-4 flex flex-col single-article break-word content-center <% if follow.explicit_points < 0 %>opacity-75<% end %>" style="border-top-color: <%= color %>;" id="follows-<%= follow.id %>">
<h3 class="s:mb-1 -ml-1 p-0 fw-medium">
<a href="/t/<%= tag.name %>" class="crayons-tag crayons-tag--l">
<span class="crayons-tag__prefix">#</span><%= tag.name %>
</a>
<% if follow.explicit_points < 0 %>
<span class="crayons-indicator crayons-indicator--critical crayons-indicator--outlined" title="This tag has negative follow weight">Anti-follow</span>
<div class="crayons-notice p-4 px-6 mb-4 mx-2 m:mx-0">
Adjust tag weight to modify your home feed. Higher values mean more appearances for that tag.
<span class="crayons-indicator crayons-indicator--outlined crayons-indicator--accent ml-3">Default 1.0</span>
</div>
<div id="following-wrapper" class="grid gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 px-2 m:px-0">
<% negative_follow_shown_once = false %>
<% @followed_tags.each do |follow| %>
<% tag = follow.followable %>
<% if tag %>
<% color = Color::CompareHex.new([tag.bg_color_hex || "#0000000", tag.text_color_hex || "#ffffff"]).brightness(0.8) %>
<div class="crayons-card branded-2 p-4 m:p-6 m:pt-4 flex flex-col single-article break-word content-center <% if follow.explicit_points < 0 %>opacity-75<% end %>" style="border-top-color: <%= color %>;" id="follows-<%= follow.id %>">
<h3 class="s:mb-1 -ml-1 p-0 fw-medium">
<a href="/t/<%= tag.name %>" class="crayons-tag crayons-tag--l">
<span class="crayons-tag__prefix">#</span><%= tag.name %>
</a>
<% if follow.explicit_points < 0 %>
<span class="crayons-indicator crayons-indicator--critical crayons-indicator--outlined" title="This tag has negative follow weight">Anti-follow</span>
<% end %>
</h3>
<p class="grid-cell__summary truncate-at-2 mb-4 fs-m h-50">
<%= strip_tags(tag.short_summary) %>
</p>
<%= fields(follow) do |f| %>
<%= f.hidden_field(:id, name: "follows[][id]", form: "follows_update_form") %>
<%= f.number_field(:explicit_points, step: :any, required: true, class: "crayons-textfield flex-1 fs-s", name: "follows[][explicit_points]", form: "follows_update_form") %>
<% end %>
</h3>
<p class="grid-cell__summary truncate-at-2 mb-4 fs-m h-50">
<%= strip_tags(tag.short_summary) %>
</p>
<%= fields(follow) do |f| %>
<%= f.hidden_field(:id, name: "follows[][id]", form: "follows_update_form") %>
<%= f.number_field(:explicit_points, step: :any, required: true, class: "crayons-textfield flex-1 fs-s", name: "follows[][explicit_points]", form: "follows_update_form") %>
<% end %>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div>
<%= form_with url: bulk_update_follows_path, method: :patch, local: true, class: "sticky bg-base-10 pt-3 pb-1 z-elevate", html: { style: "bottom: 0;margin-left:-1px"}, id: "follows_update_form" do |f| %>
<button type="submit" class="crayons-btn crayons-btn--m mb-3" name="commit">Update Weights</button>
<%= form_with url: bulk_update_follows_path, method: :patch, local: true, class: "sticky bg-base-10 pt-3 pb-1 z-elevate", html: { style: "bottom: 0;margin-left:-1px" }, id: "follows_update_form" do |f| %>
<button type="submit" class="crayons-btn crayons-btn--m mb-3" name="commit">Update Weights</button>
<% end %>
<% else %>
<div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any tags yet...</div>
<% end %>
<% else %>
<div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any tags yet...</div>
<% end %>
<%= render "sublist" %>
<%= render "sublist" %>
</div>
</div>
</div>
</main>
</main>
</div>

84
app/views/dashboards/following_users.html.erb
View file

@ -1,51 +1,53 @@
<% title("Dashboard - #{community_name}") %>
<main id="index-container"
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following users</h1>
<%= render "actions_mobile" %>
</header>
<div id="index-container"
data-params="<%= params.to_json(only: %i[action per_page]) %>"
data-which="following">
<main id="main-content">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following users</h1>
<%= render "actions_mobile" %>
</header>
<div class="crayons-layout crayons-layout--2-cols">
<aside class="crayons-layout__sidebar-left">
<%= render "actions" %>
</aside>
<div class="crayons-layout crayons-layout--2-cols">
<aside class="crayons-layout__sidebar-left">
<%= render "actions" %>
</aside>
<div class="crayons-layout__content" id="user-dashboard">
<div class="crayons-layout__content" id="user-dashboard">
<% if @follows.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
<% @follows.each do |follow| %>
<% user = follow.followable %>
<% if user %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
<img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" />
</a>
<% if @follows.any? %>
<div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
<% @follows.each do |follow| %>
<% user = follow.followable %>
<% if user %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
<img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" />
</a>
<div class="pl-4 s:pl-0 self-center">
<h3 class="s:mb-1 p-0">
<a href="<%= user.path %>">
<%= user.name %>
</a>
</h3>
<div class="pl-4 s:pl-0 self-center">
<h3 class="s:mb-1 p-0">
<a href="<%= user.path %>">
<%= user.name %>
</a>
</h3>
<p class="s:mb-4">
<a href="<%= user.path %>" class="crayons-link crayons-link--secondary">
@<%= user.username %>
</a>
</p>
<p class="s:mb-4">
<a href="<%= user.path %>" class="crayons-link crayons-link--secondary">
@<%= user.username %>
</a>
</p>
</div>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
<% else %>
<div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any users...</div>
<% end %>
<%= render "sublist" %>
</div>
<% else %>
<div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any users...</div>
<% end %>
<%= render "sublist" %>
</div>
</div>
</div>
</main>
</main>
</div>

2
app/views/dashboards/show.html.erb
View file

@ -1,6 +1,6 @@
<% title "Dashboard" %>
<main>
<main id="main-content">
<header class="crayons-layout">
<h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard</h1>
<%= render "actions_mobile" %>

16
app/views/listings/dashboard.html.erb
View file

@ -1,9 +1,11 @@
<% title "Listings Dashboard" %>
<div id="listings-dashboard"
data-listings="<%= @listings_json %>"
data-usercredits="<%= @user_credits %>"
data-orglistings="<%= @org_listings_json %>"
data-orgs="<%= @orgs_json %>">
</div>
<%= javascript_packs_with_chunks_tag "listingDashboard", defer: true %>
<main id="main-content">
<div id="listings-dashboard"
data-listings="<%= @listings_json %>"
data-usercredits="<%= @user_credits %>"
data-orglistings="<%= @org_listings_json %>"
data-orgs="<%= @orgs_json %>">
</div>
<%= javascript_packs_with_chunks_tag "listingDashboard", defer: true %>
</main>