Update left sidebar links with new Crayons components (#15757)
* update * hamburger fix * Update app/views/shared/_hamburger.html.erb Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * updates * spec * social media icons * reading list counter Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
This commit is contained in:
ludwiczakpawel
GitHub
parent
8a7e5a5566
commit
9b7503fde3
16 changed files with 56 additions and 148 deletions
|
|
@ -85,9 +85,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-navigation-links .crayons-icon svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
.sidebar-navigation-link .c-link__icon {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
|
|
|
|||
|
|
@ -2,28 +2,24 @@
|
|||
|
||||
.hamburger {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
inset: 0;
|
||||
z-index: var(--z-drawer);
|
||||
display: none;
|
||||
|
||||
&__content {
|
||||
background: var(--card-bg);
|
||||
max-width: var(--layout-drawer-width);
|
||||
width: 90%;
|
||||
z-index: 1000;
|
||||
z-index: var(--z-elevate);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&__header {
|
||||
min-height: var(--header-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 var(--su-1) 0 var(--su-4);
|
||||
padding: 0 var(--su-2) 0 var(--su-4);
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--base-a10);
|
||||
}
|
||||
|
|
@ -33,11 +29,7 @@
|
|||
background: var(--base-100);
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
body[data-left-nav-state='open'] & {
|
||||
|
|
|
|||
|
|
@ -56,11 +56,7 @@
|
|||
var(--indicator-critical-color)
|
||||
);
|
||||
|
||||
// Circle, no text
|
||||
&--bullet {
|
||||
width: var(--su-3);
|
||||
height: var(--su-3);
|
||||
padding: 0;
|
||||
border-radius: 100%;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
&.c-link--block {
|
||||
.c-link__icon {
|
||||
margin-right: var(--su-2);
|
||||
margin-left: calc(var(--su-1) * -1);
|
||||
margin-left: calc(var(--su-2) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -288,58 +288,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Left Side bar navigation links
|
||||
// Pulling this out of context because Nick says so: https://github.com/thepracticaldev/dev.to/pull/5918/commits/f1642e62accbdaff72dc7762e1e1ffd4e40027b0
|
||||
.sidebar-nav-element {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-m) {
|
||||
.sidebar-nav-link-follow {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
.sidebar-nav-link-follow {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 0px;
|
||||
vertical-align: -8px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
img.nav-emoji {
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
a.sidebar-nav-link {
|
||||
@include sidebar-link;
|
||||
color: var(--link-color);
|
||||
font-weight: 400;
|
||||
|
||||
&.sidebar-nav-link-tag {
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
a.sidebar-nav-link-follow {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Todo: Not really sure what that is.. some sort of sponsorship widget...
|
||||
.sidebar-sponsorship-level {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -30,12 +30,6 @@ GreyWithNumber.story = {
|
|||
name: 'grey with number',
|
||||
};
|
||||
|
||||
export const GreyBullet = () => (
|
||||
<span className="crayons-indicator crayons-indicator--bullet" />
|
||||
);
|
||||
|
||||
GreyBullet.story = { name: 'grey bullet' };
|
||||
|
||||
export const Accent = () => (
|
||||
<span className="crayons-indicator crayons-indicator--accent">Label</span>
|
||||
);
|
||||
|
|
@ -60,12 +54,6 @@ AccentWithNumber.story = {
|
|||
name: 'accent with number',
|
||||
};
|
||||
|
||||
export const AccentBullet = () => (
|
||||
<span className="crayons-indicator crayons-indicator--accent crayons-indicator--bullet" />
|
||||
);
|
||||
|
||||
AccentBullet.story = { name: 'accent bullet' };
|
||||
|
||||
export const Critical = () => (
|
||||
<span className="crayons-indicator crayons-indicator--critical">Label</span>
|
||||
);
|
||||
|
|
@ -92,14 +80,6 @@ CriticalWithNumber.story = {
|
|||
name: 'critical with number',
|
||||
};
|
||||
|
||||
export const CriticalWithBullet = () => (
|
||||
<span className="crayons-indicator crayons-indicator--critical crayons-indicator--bullet" />
|
||||
);
|
||||
|
||||
CriticalWithBullet.story = {
|
||||
name: 'critical bullet',
|
||||
};
|
||||
|
||||
export const Inverted = () => (
|
||||
<span className="crayons-indicator crayons-indicator--inverted">Label</span>
|
||||
);
|
||||
|
|
@ -123,9 +103,3 @@ export const InvertedWithNumber = () => (
|
|||
InvertedWithNumber.story = {
|
||||
name: 'inverted with number',
|
||||
};
|
||||
|
||||
export const InvertedBullet = () => (
|
||||
<span className="crayons-indicator crayons-indicator--inverted crayons-indicator--bullet" />
|
||||
);
|
||||
|
||||
InvertedBullet.story = { name: 'inverted bullet' };
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { h, Fragment } from 'preact';
|
||||
import ahoy from 'ahoy.js';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from '@crayons';
|
||||
|
||||
export const TagsFollowed = ({ tags = [] }) => {
|
||||
const trackSidebarTagClick = (event) => {
|
||||
|
|
@ -12,20 +13,15 @@ export const TagsFollowed = ({ tags = [] }) => {
|
|||
<Fragment>
|
||||
{tags.map(({ name, id, points }) =>
|
||||
points >= 1 ? (
|
||||
<div
|
||||
<Link
|
||||
key={id}
|
||||
className="sidebar-nav-element"
|
||||
id={`sidebar-element-${name}`}
|
||||
title={`${name} tag`}
|
||||
onClick={trackSidebarTagClick}
|
||||
block
|
||||
href={`/t/${name}`}
|
||||
>
|
||||
<a
|
||||
title={`${name} tag`}
|
||||
onClick={trackSidebarTagClick}
|
||||
className="crayons-link crayons-link--block"
|
||||
href={`/t/${name}`}
|
||||
>
|
||||
{`#${name}`}
|
||||
</a>
|
||||
</div>
|
||||
{`#${name}`}
|
||||
</Link>
|
||||
) : null,
|
||||
)}
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<% default_nav_links = NavigationLink.default_section.ordered.to_a %>
|
||||
<% other_nav_links = NavigationLink.other_section.ordered.to_a %>
|
||||
|
||||
<nav class="mb-6 <% unless user_signed_in? %>mt-4<% end %>" id="main-navigation" aria-label="<%= community_name %>">
|
||||
<nav class="mb-4 <% unless user_signed_in? %>mt-4<% end %>" id="main-navigation" aria-label="<%= community_name %>">
|
||||
<ul class="default-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
|
||||
<li>
|
||||
<a href="<%= root_path %>" class="crayons-link crayons-link--block">
|
||||
<%= inline_svg_tag("twemoji/house.svg", class: "crayons-icon crayons-icon--default", aria_hidden: true) %>
|
||||
<a href="<%= root_path %>" class="c-link c-link--block c-link--icon-left">
|
||||
<%= inline_svg_tag("twemoji/house.svg", class: "crayons-icon crayons-icon--default c-link__icon", aria_hidden: true) %>
|
||||
<%= t("views.main.home") %>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<% unless user_signed_in? %>
|
||||
<a href="<%= sign_up_path %>" class="crayons-link crayons-link--block fw-bold">
|
||||
<%= inline_svg_tag("twemoji/handshake.svg", class: "crayons-icon crayons-icon--default", aria_hidden: true) %>
|
||||
<a href="<%= sign_up_path %>" class="c-link c-link--block c-link--icon-left fw-bold">
|
||||
<%= inline_svg_tag("twemoji/handshake.svg", class: "crayons-icon crayons-icon--default c-link__icon", aria_hidden: true) %>
|
||||
<%= t("views.main.signup") %>
|
||||
</a>
|
||||
<% end %>
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
</nav>
|
||||
|
||||
<% if other_nav_links.any? %>
|
||||
<nav class="mb-6 <%= "mt-4" if user_signed_in? %>" aria-labelledby="other-nav-heading">
|
||||
<h2 id="other-nav-heading" class="mt-6 mb-2 fs-base">
|
||||
<nav class="mb-4" aria-labelledby="other-nav-heading">
|
||||
<h2 id="other-nav-heading" class="crayons-subtitle-3 py-2 pl-3">
|
||||
<%= t("views.main.nav.other") %>
|
||||
</h2>
|
||||
<ul class="other-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
|
||||
|
|
@ -36,6 +36,6 @@
|
|||
</nav>
|
||||
<% end %>
|
||||
|
||||
<div class="flex justify-start mb-6">
|
||||
<div class="flex justify-start mb-4">
|
||||
<%= render partial: "layouts/social_media" %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<% if !link.display_only_when_signed_in || (link.display_only_when_signed_in && user_signed_in?) %>
|
||||
<li>
|
||||
<a href="<%= link.url %>" class="sidebar-navigation-link crayons-link crayons-link--block">
|
||||
<span class="crayons-icon crayons-icon--default">
|
||||
<a href="<%= link.url %>" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||||
<span class="c-link__icon">
|
||||
<%= link.icon.html_safe %>
|
||||
</span>
|
||||
<%= t("views.main.nav_name.#{link.name}", default: link.name) %>
|
||||
<% if link.url.include?("readinglist") %>
|
||||
<span id="reading-list-count" class="crayons-indicator"></span>
|
||||
<span id="reading-list-count" class="crayons-indicator ml-2 self-center"></span>
|
||||
<% end %>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,20 @@
|
|||
<nav class="mb-6" aria-label="Secondary sidebar nav">
|
||||
<% if user_signed_in? %>
|
||||
<header class="p-2 pr-0 flex items-center justify-between">
|
||||
<h3 class="crayons-subtitle-3"><%= t("views.main.tags.my_tags") %></h3>
|
||||
<a id="tag-priority-link" href="/dashboard/following_tags" class="crayons-btn crayons-btn--icon crayons-btn--ghost-dimmed" aria-label="<%= t("views.main.tags.aria_label") %>" title="<%= t("views.main.tags.aria_label") %>">
|
||||
<header class="pt-2 pl-3 pb-0 pr-0 flex items-center justify-between">
|
||||
<h2 class="crayons-subtitle-3"><%= t("views.main.tags.my_tags") %></h2>
|
||||
<a id="tag-priority-link" href="<%= dashboard_following_tags_path %>" class="c-link c-link--block c-link--icon-alone" aria-label="<%= t("views.main.tags.aria_label") %>" title="<%= t("views.main.tags.aria_label") %>">
|
||||
<%= inline_svg_tag("cog.svg", class: "crayons-icon") %>
|
||||
</a>
|
||||
</header>
|
||||
<div id="sidebar-nav-followed-tags" class="overflow-y-auto mb-2 sidebar-nav-followed-tags" style="max-height: 42vh;"></div>
|
||||
<div id="sidebar-nav-followed-tags" class="overflow-y-auto -m-1 p-1 mb-2 sidebar-nav-followed-tags" style="max-height: 42vh;"></div>
|
||||
<% else %>
|
||||
<h3 class="crayons-subtitle-3 p-2"><%= t("views.main.tags.popular_tags") %></h3>
|
||||
<div id="sidebar-nav-default-tags" class="overflow-y-auto" style="max-height: 42vh">
|
||||
<% Tag.supported.order(hotness_score: :desc).limit(30).pluck(:id, :name).each do |tag_array| %>
|
||||
<div class="sidebar-nav-element" id="default-sidebar-element-<%= tag_array.second %>">
|
||||
<a class="crayons-link crayons-link--block py-2 px-2" href="<%= tag_path(tag_array.second) %>">
|
||||
<a class="c-link c-link--block" href="<%= tag_path(tag_array.second) %>">
|
||||
#<%= tag_array.second %>
|
||||
</a>
|
||||
<a class="follow-action-button sidebar-nav-link-follow crayons-btn crayons-btn--s"
|
||||
href="#" id="sidebar-nav-link-follow-<%= tag_array.second %>"
|
||||
data-info='{"id":<%= tag_array.first %>,"className":"Tag", "name": "<%= tag_array.second %>"}'>
|
||||
<%= t("views.main.tags.follow") %>
|
||||
</a>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<a
|
||||
href="<%= "https://#{social_media_type}.com/#{handle}" %>"
|
||||
target="_blank"
|
||||
class="crayons-link crayons-link--secondary mx-2"
|
||||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||||
rel="noopener">
|
||||
<%= inline_svg_tag("#{social_media_type}.svg", aria: true, title: social_media_type.capitalize, class: "crayons-icon") %>
|
||||
<%= inline_svg_tag("#{social_media_type}.svg", aria: true, title: social_media_type.capitalize, class: "crayons-icon c-link__icon") %>
|
||||
</a>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div class="crayons-card crayons-card--secondary p-4">
|
||||
<h2 class="fs-l fw-bold mb-2">
|
||||
<h2 class="crayons-subtitle-2 lh-tight mb-4">
|
||||
<%= render "shared/authentication_title" %>
|
||||
</h2>
|
||||
<p class="color-base-70 mb-4">
|
||||
<% if Settings::Community.tagline.present? %>
|
||||
<% if Settings::Community.tagline.present? %>
|
||||
<p class="color-base-70 mb-4">
|
||||
<%= Settings::Community.tagline %>
|
||||
<% end %>
|
||||
</p>
|
||||
</p>
|
||||
<% end %>
|
||||
<div>
|
||||
<a href="<%= sign_up_path(state: "new-user") %>" class="crayons-btn w-100 mb-2" aria-label="<%= t("views.auth.create.aria_label") %>"><%= t("views.auth.create.text") %></a>
|
||||
<a href="<%= sign_up_path %>" class="crayons-btn crayons-btn--ghost-brand w-100" aria-label="<%= t("views.auth.login.aria_label") %>"><%= t("views.auth.login.text") %></a>
|
||||
<a href="<%= sign_up_path(state: "new-user") %>" class="c-cta c-cta--branded justify-center w-100 mb-1" aria-label="<%= t("views.auth.create.aria_label") %>"><%= t("views.auth.create.text") %></a>
|
||||
<a href="<%= sign_up_path %>" class="c-link c-link--block justify-center" aria-label="<%= t("views.auth.login.aria_label") %>"><%= t("views.auth.login.text") %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<header class="hamburger__content__header">
|
||||
<h2 class="fs-l fw-bold flex-1 break-word lh-tight"><%= community_name.to_s %></h2>
|
||||
|
||||
<button class="crayons-btn crayons-btn--ghost crayons-btn--icon-rounded js-hamburger-trigger shrink-0">
|
||||
<%= inline_svg_tag("x.svg", aria: true, class: "crayons-icon", title: t("views.hamburger.icon_close")) %>
|
||||
<button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="<%= t("views.hamburger.icon_close") %>">
|
||||
<%= inline_svg_tag("x.svg", aria_hidden: true, class: "crayons-icon c-btn__icon", title: t("views.hamburger.icon_close")) %>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,5 +73,5 @@ en:
|
|||
step_5: "For Empowering Community 🌱"
|
||||
tagline: Log in to customize your experience and get involved.
|
||||
title:
|
||||
text_html: <a href="/">%{name}</a> is a community of %{maybe_size}amazing %{label}
|
||||
text_html: <a href="/" class="c-link c-link--branded">%{name}</a> is a community of %{maybe_size}amazing %{label}
|
||||
size: "%{num} "
|
||||
|
|
|
|||
|
|
@ -73,5 +73,5 @@ fr:
|
|||
step_5: "For Empowering Community 🌱"
|
||||
tagline: Log in to customize your experience and get involved.
|
||||
title:
|
||||
text_html: <a href="/">%{name}</a> is a community of %{maybe_size}amazing %{label}
|
||||
text_html: <a href="/" class="c-link c-link--branded">%{name}</a> is a community of %{maybe_size}amazing %{label}
|
||||
size: "%{num} "
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ RSpec.describe "User visits a homepage", type: :system do
|
|||
find("body")["data-user"]
|
||||
|
||||
within("#sidebar-nav-followed-tags") do
|
||||
expect(all(".crayons-link--block").map(&:text).sort).to eq(%w[#javascript #go #ruby].sort)
|
||||
expect(all(".c-link--block").map(&:text).sort).to eq(%w[#javascript #go #ruby].sort)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue