Tabs (#14738)
* sliding tabs * Add aria-label to the navigation This supports the cypress tests, as well as retaining existing accessibility features. * Adapt feedNavigation cypress test to handle new navigation layout Before looking for week, month, year, or infinity top feeds, select "Top" and wait for the page refresh. * increasing tappable area + making foucs outline visible Co-authored-by: Dan Uber <dan@forem.com>
This commit is contained in:
ludwiczakpawel
GitHub
parent
7147ae4053
commit
0b547bf8cd
9 changed files with 259 additions and 125 deletions
|
|
@ -171,3 +171,80 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-navigation {
|
||||
--tab-horizontal-padding: var(--su-3);
|
||||
--tab-vertical-padding: var(--su-2);
|
||||
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
// !important here because reset.scss is screwed up a little for ul,ol elements... gotta fix it one day...
|
||||
padding: var(--su-1) 0 !important; // padding to improve tapable
|
||||
margin: calc(-1 * var(--su-1)) 0 !important;
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
display: block;
|
||||
overflow-x: unset;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
|
||||
color: var(--base-70);
|
||||
position: relative;
|
||||
border-radius: var(--radius);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
display: flex;
|
||||
color: var(--base-90);
|
||||
white-space: unset;
|
||||
padding: var(--tab-vertical-padding) var(--tab-vertical-padding);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-brand);
|
||||
background: var(--base-inverted-a50);
|
||||
}
|
||||
}
|
||||
|
||||
&--current {
|
||||
font-weight: var(--fw-bold);
|
||||
color: var(--base-100);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
background: var(--base-inverted);
|
||||
&:hover {
|
||||
background: var(--base-inverted);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-navigation--horizontal {
|
||||
@media (min-width: $breakpoint-s) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.crayons-navigation__item {
|
||||
@media (min-width: $breakpoint-s) {
|
||||
display: inline-flex;
|
||||
color: var(--base-70);
|
||||
padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-brand);
|
||||
}
|
||||
|
||||
&--current {
|
||||
color: var(--base-100);
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
background: var(--base-inverted-a50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,17 +14,7 @@
|
|||
|
||||
// Base
|
||||
--base: #090909;
|
||||
|
||||
--base-a90: #{rgba(#090909, 0.9)};
|
||||
--base-a80: #{rgba(#090909, 0.8)};
|
||||
--base-a70: #{rgba(#090909, 0.7)};
|
||||
--base-a60: #{rgba(#090909, 0.6)};
|
||||
--base-a50: #{rgba(#090909, 0.5)};
|
||||
--base-a40: #{rgba(#090909, 0.4)};
|
||||
--base-a30: #{rgba(#090909, 0.3)};
|
||||
--base-a20: #{rgba(#090909, 0.2)};
|
||||
--base-a10: #{rgba(#090909, 0.1)};
|
||||
--base-a5: #{rgba(#090909, 0.05)};
|
||||
--base-inverted: #fff;
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #242424;
|
||||
|
|
@ -37,7 +27,28 @@
|
|||
--base-20: #d6d6d7;
|
||||
--base-10: #efefef;
|
||||
--base-0: #f9f9f9;
|
||||
--base-inverted: #fff;
|
||||
|
||||
--base-a90: #{rgba(#090909, 0.9)};
|
||||
--base-a80: #{rgba(#090909, 0.8)};
|
||||
--base-a70: #{rgba(#090909, 0.7)};
|
||||
--base-a60: #{rgba(#090909, 0.6)};
|
||||
--base-a50: #{rgba(#090909, 0.5)};
|
||||
--base-a40: #{rgba(#090909, 0.4)};
|
||||
--base-a30: #{rgba(#090909, 0.3)};
|
||||
--base-a20: #{rgba(#090909, 0.2)};
|
||||
--base-a10: #{rgba(#090909, 0.1)};
|
||||
--base-a5: #{rgba(#090909, 0.05)};
|
||||
|
||||
--base-inverted-a90: #{rgba(#fff, 0.9)};
|
||||
--base-inverted-a80: #{rgba(#fff, 0.8)};
|
||||
--base-inverted-a70: #{rgba(#fff, 0.7)};
|
||||
--base-inverted-a60: #{rgba(#fff, 0.6)};
|
||||
--base-inverted-a50: #{rgba(#fff, 0.5)};
|
||||
--base-inverted-a40: #{rgba(#fff, 0.4)};
|
||||
--base-inverted-a30: #{rgba(#fff, 0.3)};
|
||||
--base-inverted-a20: #{rgba(#fff, 0.2)};
|
||||
--base-inverted-a10: #{rgba(#fff, 0.1)};
|
||||
--base-inverted-a5: #{rgba(#fff, 0.05)};
|
||||
|
||||
// Accent colors
|
||||
--accent-brand: #3b49df;
|
||||
|
|
|
|||
|
|
@ -9,31 +9,42 @@
|
|||
--theme-color: #ffffff;
|
||||
|
||||
// Base
|
||||
--base: #ffffff;
|
||||
|
||||
--base-a90: #{rgba(#ffffff, 0.9)};
|
||||
--base-a80: #{rgba(#ffffff, 0.8)};
|
||||
--base-a70: #{rgba(#ffffff, 0.7)};
|
||||
--base-a60: #{rgba(#ffffff, 0.6)};
|
||||
--base-a50: #{rgba(#ffffff, 0.5)};
|
||||
--base-a40: #{rgba(#ffffff, 0.4)};
|
||||
--base-a30: #{rgba(#ffffff, 0.3)};
|
||||
--base-a20: #{rgba(#ffffff, 0.2)};
|
||||
--base-a10: #{rgba(#ffffff, 0.1)};
|
||||
--base-a5: #{rgba(#ffffff, 0.05)};
|
||||
--base: #fff;
|
||||
--base-inverted: #000;
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #e3e3e3;
|
||||
--base-80: #c8c8c8;
|
||||
--base-70: #adadad;
|
||||
--base-60: #939393;
|
||||
--base-50: #ffffff;
|
||||
--base-40: #626262;
|
||||
--base-30: #4b4b4b;
|
||||
--base-20: #353535;
|
||||
--base-10: #1c1c1c;
|
||||
--base-0: #0a0a0a;
|
||||
--base-inverted: #000000;
|
||||
--base-90: #efefef;
|
||||
--base-80: #d6d6d7;
|
||||
--base-70: #bdbdbd;
|
||||
--base-60: #a3a3a3;
|
||||
--base-50: #8a8a8a;
|
||||
--base-40: #717171;
|
||||
--base-30: #575757;
|
||||
--base-20: #3d3d3d;
|
||||
--base-10: #242424;
|
||||
--base-0: #090909;
|
||||
|
||||
--base-a90: #{rgba(#fff, 0.9)};
|
||||
--base-a80: #{rgba(#fff, 0.8)};
|
||||
--base-a70: #{rgba(#fff, 0.7)};
|
||||
--base-a60: #{rgba(#fff, 0.6)};
|
||||
--base-a50: #{rgba(#fff, 0.5)};
|
||||
--base-a40: #{rgba(#fff, 0.4)};
|
||||
--base-a30: #{rgba(#fff, 0.3)};
|
||||
--base-a20: #{rgba(#fff, 0.2)};
|
||||
--base-a10: #{rgba(#fff, 0.1)};
|
||||
--base-a5: #{rgba(#fff, 0.05)};
|
||||
|
||||
--base-inverted-a90: #{rgba(#000, 0.9)};
|
||||
--base-inverted-a80: #{rgba(#000, 0.8)};
|
||||
--base-inverted-a70: #{rgba(#000, 0.7)};
|
||||
--base-inverted-a60: #{rgba(#000, 0.6)};
|
||||
--base-inverted-a50: #{rgba(#000, 0.5)};
|
||||
--base-inverted-a40: #{rgba(#000, 0.4)};
|
||||
--base-inverted-a30: #{rgba(#000, 0.3)};
|
||||
--base-inverted-a20: #{rgba(#000, 0.2)};
|
||||
--base-inverted-a10: #{rgba(#000, 0.1)};
|
||||
--base-inverted-a5: #{rgba(#000, 0.05)};
|
||||
|
||||
// Accent colors
|
||||
--accent-brand: #2eff7b;
|
||||
|
|
|
|||
|
|
@ -10,17 +10,7 @@
|
|||
|
||||
// Base
|
||||
--base: #f9f9f9;
|
||||
|
||||
--base-a90: #{rgba(#f9f9f9, 0.9)};
|
||||
--base-a80: #{rgba(#f9f9f9, 0.8)};
|
||||
--base-a70: #{rgba(#f9f9f9, 0.7)};
|
||||
--base-a60: #{rgba(#f9f9f9, 0.6)};
|
||||
--base-a50: #{rgba(#f9f9f9, 0.5)};
|
||||
--base-a40: #{rgba(#f9f9f9, 0.4)};
|
||||
--base-a30: #{rgba(#f9f9f9, 0.3)};
|
||||
--base-a20: #{rgba(#f9f9f9, 0.2)};
|
||||
--base-a10: #{rgba(#f9f9f9, 0.1)};
|
||||
--base-a5: #{rgba(#f9f9f9, 0.05)};
|
||||
--base-inverted: #000;
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #efefef;
|
||||
|
|
@ -33,7 +23,28 @@
|
|||
--base-20: #3d3d3d;
|
||||
--base-10: #242424;
|
||||
--base-0: #090909;
|
||||
--base-inverted: #000;
|
||||
|
||||
--base-a90: #{rgba(#f9f9f9, 0.9)};
|
||||
--base-a80: #{rgba(#f9f9f9, 0.8)};
|
||||
--base-a70: #{rgba(#f9f9f9, 0.7)};
|
||||
--base-a60: #{rgba(#f9f9f9, 0.6)};
|
||||
--base-a50: #{rgba(#f9f9f9, 0.5)};
|
||||
--base-a40: #{rgba(#f9f9f9, 0.4)};
|
||||
--base-a30: #{rgba(#f9f9f9, 0.3)};
|
||||
--base-a20: #{rgba(#f9f9f9, 0.2)};
|
||||
--base-a10: #{rgba(#f9f9f9, 0.1)};
|
||||
--base-a5: #{rgba(#f9f9f9, 0.05)};
|
||||
|
||||
--base-inverted-a90: #{rgba(#000, 0.9)};
|
||||
--base-inverted-a80: #{rgba(#000, 0.8)};
|
||||
--base-inverted-a70: #{rgba(#000, 0.7)};
|
||||
--base-inverted-a60: #{rgba(#000, 0.6)};
|
||||
--base-inverted-a50: #{rgba(#000, 0.5)};
|
||||
--base-inverted-a40: #{rgba(#000, 0.4)};
|
||||
--base-inverted-a30: #{rgba(#000, 0.3)};
|
||||
--base-inverted-a20: #{rgba(#000, 0.2)};
|
||||
--base-inverted-a10: #{rgba(#000, 0.1)};
|
||||
--base-inverted-a5: #{rgba(#000, 0.05)};
|
||||
|
||||
// Accent colors
|
||||
--accent-brand: #7b78ff;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ function searchMain(substories) {
|
|||
|
||||
function initializeSortingTabs(query) {
|
||||
const sortingTabs = document.querySelectorAll(
|
||||
'#sorting-option-tabs .crayons-tabs__item',
|
||||
'#sorting-option-tabs .crayons-navigation__item',
|
||||
);
|
||||
|
||||
for (let i = 0; i < sortingTabs.length; i++) {
|
||||
|
|
@ -61,12 +61,12 @@ function initializeSortingTabs(query) {
|
|||
|
||||
for (let j = 0; j < sortingTabs.length; j++) {
|
||||
if (sortingTabs[j] !== e.target) {
|
||||
sortingTabs[j].classList.remove('crayons-tabs__item--current');
|
||||
sortingTabs[j].classList.remove('crayons-navigation__item--current');
|
||||
sortingTabs[j].setAttribute('aria-current', '');
|
||||
}
|
||||
}
|
||||
|
||||
e.target.classList.add('crayons-tabs__item--current');
|
||||
e.target.classList.add('crayons-navigation__item--current');
|
||||
e.target.setAttribute('aria-current', 'page');
|
||||
});
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@ function initializeFilters(query, filters) {
|
|||
const filterButts = document.getElementsByClassName('query-filter-button');
|
||||
for (let i = 0; i < filterButts.length; i++) {
|
||||
if (filters === filterButts[i].dataset.filter) {
|
||||
filterButts[i].classList.add('crayons-link--current');
|
||||
filterButts[i].classList.add('crayons-navigation__item--current');
|
||||
}
|
||||
filterButts[i].onclick = function (e) {
|
||||
const currentParams = getQueryParams(document.location.search);
|
||||
|
|
@ -99,10 +99,10 @@ function initializeFilters(query, filters) {
|
|||
);
|
||||
const { className } = e.target;
|
||||
for (let i = 0; i < filterButts.length; i++) {
|
||||
filterButts[i].classList.remove('crayons-link--current');
|
||||
filterButts[i].classList.remove('crayons-navigation__item--current');
|
||||
}
|
||||
if (className.indexOf('crayons-link--current') === -1) {
|
||||
e.target.classList.add('crayons-link--current');
|
||||
if (className.indexOf('crayons-navigation__item--current') === -1) {
|
||||
e.target.classList.add('crayons-navigation__item--current');
|
||||
window.history.replaceState(
|
||||
null,
|
||||
null,
|
||||
|
|
|
|||
|
|
@ -38,41 +38,42 @@
|
|||
<main class="articles-list crayons-layout__content" id="main-content" data-follow-button-container="true">
|
||||
<%= render(partial: "onboardings/task_card") if user_signed_in? %>
|
||||
|
||||
<header class="flex justify-between items-center p-2 px-3 m:p-0 m:px-0 m:pb-2">
|
||||
<h1 class="crayons-subtitle-2">Posts</h1>
|
||||
|
||||
<nav class="crayons-tabs hidden s:flex" aria-label="View posts by">
|
||||
<ul class="crayons-tabs__list">
|
||||
<header class="p-2 px-3 m:p-0 m:px-0 m:mb-2 fs-l">
|
||||
<h1 class="screen-reader-only">Posts</h1>
|
||||
<nav class="-mx-3 m:mx-0 s:flex items-center justify-between" aria-label="View posts by">
|
||||
<ul class="crayons-navigation crayons-navigation--horizontal">
|
||||
<li>
|
||||
<a data-text="Feed" href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"<%= %w[week month year infinity
|
||||
latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>>Feed</a>
|
||||
<a data-text="Feed" href="<%= list_path %>/" class="crayons-navigation__item <%= "crayons-navigation__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"<%= %w[week month year infinity
|
||||
latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>>Feed</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-text="Week" href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>>Week</a>
|
||||
<a data-text="Latest" href="<%= list_path %>/latest" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>>Latest</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-text="Month" href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>>Month</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-text="Year" href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>>Year</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>Infinity</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-text="Latest" href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>>Latest</a>
|
||||
<a data-text="Top" href="<%= list_path %>/top/week"
|
||||
class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") %>"
|
||||
<%= timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>
|
||||
Top
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<% if timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") %>
|
||||
<ul class="crayons-navigation crayons-navigation--horizontal fs-base">
|
||||
<li>
|
||||
<a data-text="Week" href="<%= list_path %>/top/week" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>>Week</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-text="Month" href="<%= list_path %>/top/month" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>>Month</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-text="Year" href="<%= list_path %>/top/year" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>>Year</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>Infinity</a>
|
||||
</li>
|
||||
</ul>
|
||||
<% end %>
|
||||
</nav>
|
||||
|
||||
<select class="crayons-select s:hidden ml-2 s:ml-auto w-auto" id="feed-filter-select" aria-label="feed-filter-select">
|
||||
<option value="<%= list_path %>/" <% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %> selected<% end %>>Feed</option>
|
||||
<option value="<%= list_path %>/top/week" <% if timeframe_check("week") %> selected<% end %>>Week</option>
|
||||
<option value="<%= list_path %>/top/month" <% if timeframe_check("month") %> selected<% end %>>Month</option>
|
||||
<option value="<%= list_path %>/top/year" <% if timeframe_check("year") %> selected<% end %>>Year</option>
|
||||
<option value="<%= list_path %>/top/infinity" <% if timeframe_check("infinity") %> selected<% end %>>Infinity</option>
|
||||
<option value="<%= list_path %>/latest" <% if timeframe_check("latest") %> selected<% end %>>Latest</option>
|
||||
</select>
|
||||
</header>
|
||||
|
||||
<% if user_signed_in? %>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<div class="crayons-layout__sidebar-left search-nav px-3 m:px-0">
|
||||
<a class="query-filter-button crayons-link crayons-link--block" data-filter="class_name:Article" href="javascript:;">
|
||||
<ul class="crayons-navigation">
|
||||
<li><a class="query-filter-button crayons-navigation__item" data-filter="class_name:Article" href="javascript:;">
|
||||
Posts
|
||||
</a>
|
||||
<a class="query-filter-button crayons-link crayons-link--block" data-filter="class_name:PodcastEpisode" href="javascript:;">
|
||||
</a></li>
|
||||
<li><a class="query-filter-button crayons-navigation__item" data-filter="class_name:PodcastEpisode" href="javascript:;">
|
||||
Podcasts
|
||||
</a>
|
||||
<a class="query-filter-button crayons-link crayons-link--block" data-filter="class_name:User" href="javascript:;">
|
||||
</a></li>
|
||||
<li><a class="query-filter-button crayons-navigation__item" data-filter="class_name:User" href="javascript:;">
|
||||
People
|
||||
</a>
|
||||
<a class="query-filter-button crayons-link crayons-link--block" data-filter="class_name:Comment" href="javascript:;">
|
||||
</a></li>
|
||||
<li><a class="query-filter-button crayons-navigation__item" data-filter="class_name:Comment" href="javascript:;">
|
||||
Comments
|
||||
</a>
|
||||
<a class="query-filter-button my-posts-query-button crayons-link crayons-link--block" data-filter="MY_POSTS" href="javascript:;">
|
||||
</a></li>
|
||||
<li><a class="query-filter-button my-posts-query-button crayons-navigation__item" data-filter="MY_POSTS" href="javascript:;">
|
||||
My posts only
|
||||
</a>
|
||||
</div>
|
||||
</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div id="query-wrapper"></div>
|
||||
|
||||
<main id="main-content">
|
||||
<div class="crayons-layout crayons-layout--limited-l crayons-layout--1-col p-4">
|
||||
<div class="crayons-layout crayons-layout--limited-l crayons-layout--1-col p-3 pb-0 s:pb-3">
|
||||
<div class="block m:hidden" id="mobile-search-container">
|
||||
<form accept-charset="UTF-8" method="get" action="/search" role="search">
|
||||
<div class="crayons-fields crayons-fields--horizontal">
|
||||
|
|
@ -18,19 +18,19 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<div class="block s:flex items-center space-between">
|
||||
<h1 class="crayons-title">Search results</h1>
|
||||
<div class="block s:flex items-center justify-between">
|
||||
<h1 class="crayons-title hidden s:block pl-2">Search results</h1>
|
||||
|
||||
<nav id="sorting-option-tabs" class="crayons-tabs crayons-tabs--wrapped ml-auto" aria-label="Search result sort options">
|
||||
<ul class="crayons-tabs__list">
|
||||
<nav id="sorting-option-tabs" aria-label="Search result sort options" class="-mx-3 m:mx-0">
|
||||
<ul class="crayons-navigation crayons-navigation--horizontal">
|
||||
<li>
|
||||
<a data-text="Most Relevant" href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :relevance %>" aria-current="page">Most Relevant</a>
|
||||
<a data-text="Most Relevant" href="javascript:;" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @current_ordering == :relevance %>" aria-current="page">Most Relevant</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-text="Newest" href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :newest %>" data-sort-by="published_at" data-sort-direction="desc">Newest</a>
|
||||
<a data-text="Newest" href="javascript:;" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @current_ordering == :newest %>" data-sort-by="published_at" data-sort-direction="desc">Newest</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-text="Oldest" href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :oldest %>" data-sort-by="published_at" data-sort-direction="asc">Oldest</a>
|
||||
<a data-text="Oldest" href="javascript:;" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @current_ordering == :oldest %>" data-sort-by="published_at" data-sort-direction="asc">Oldest</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -43,8 +43,7 @@
|
|||
data-feed="<%= params[:timeframe] || "base-feed" %>"
|
||||
data-articles-since="<%= Timeframe.datetime_iso8601(params[:timeframe]) %>">
|
||||
|
||||
<div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left">
|
||||
<div class="sidebar-bg" id="sidebar-bg-left"></div>
|
||||
<div class="crayons-layout__sidebar-left search-nav">
|
||||
<%= render "stories/articles_search/nav_menu" %>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,43 +14,43 @@ describe('Home Feed Navigation', () => {
|
|||
it('should show Feed by default', () => {
|
||||
cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
|
||||
cy.findByRole('link', { name: 'Feed' }).as('feed');
|
||||
cy.findByRole('link', { name: 'Week' }).as('week');
|
||||
cy.findByRole('link', { name: 'Month' }).as('month');
|
||||
cy.findByRole('link', { name: 'Year' }).as('year');
|
||||
cy.findByRole('link', { name: 'Infinity' }).as('infinity');
|
||||
cy.findByRole('link', { name: 'Top' }).as('top');
|
||||
cy.findByRole('link', { name: 'Latest' }).as('latest');
|
||||
|
||||
cy.findByRole('link', { name: 'Feed' }).should(
|
||||
'have.attr',
|
||||
'aria-current',
|
||||
'page',
|
||||
);
|
||||
cy.get('@feed').should('have.attr', 'aria-current', 'page');
|
||||
|
||||
cy.get('@week').should('not.have.attr', 'aria-current');
|
||||
cy.get('@month').should('not.have.attr', 'aria-current');
|
||||
cy.get('@year').should('not.have.attr', 'aria-current');
|
||||
cy.get('@infinity').should('not.have.attr', 'aria-current');
|
||||
cy.get('@top').should('not.have.attr', 'aria-current');
|
||||
cy.get('@latest').should('not.have.attr', 'aria-current');
|
||||
});
|
||||
});
|
||||
|
||||
it('should navigate to Week view', () => {
|
||||
it('should navigate to Week view by default for Top', () => {
|
||||
cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
|
||||
cy.findByRole('link', { name: 'Week' }).as('week');
|
||||
cy.get('@week').should('not.have.attr', 'aria-current');
|
||||
cy.get('@week').click();
|
||||
cy.findByRole('link', { name: 'Top' }).as('top');
|
||||
cy.get('@top').click();
|
||||
});
|
||||
|
||||
cy.url().should('contain', '/top/week');
|
||||
// Get a fresh handle to elements, as we've navigated to a new page
|
||||
cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
|
||||
cy.findByRole('link', { name: 'Week' }).should(
|
||||
'have.attr',
|
||||
'aria-current',
|
||||
'page',
|
||||
);
|
||||
cy.findByRole('link', { name: 'Week' }).as('week');
|
||||
|
||||
cy.get('@week').should('have.attr', 'aria-current', 'page');
|
||||
|
||||
cy.get('@week').click(); // should not change the page
|
||||
cy.url().should('contain', '/top/week'); // so the url stays the same
|
||||
});
|
||||
});
|
||||
|
||||
it('should navigate to Month view', () => {
|
||||
cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
|
||||
cy.findByRole('link', { name: 'Top' }).as('top');
|
||||
cy.get('@top').click();
|
||||
});
|
||||
|
||||
// this url check serves to wait for the page transition
|
||||
cy.url().should('contain', '/top/week');
|
||||
|
||||
cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
|
||||
cy.findByRole('link', { name: 'Month' }).as('month');
|
||||
cy.get('@month').should('not.have.attr', 'aria-current');
|
||||
|
|
@ -69,6 +69,14 @@ describe('Home Feed Navigation', () => {
|
|||
});
|
||||
|
||||
it('should navigate to Year view', () => {
|
||||
cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
|
||||
cy.findByRole('link', { name: 'Top' }).as('top');
|
||||
cy.get('@top').click();
|
||||
});
|
||||
|
||||
// this url check serves to wait for the page transition
|
||||
cy.url().should('contain', '/top/week');
|
||||
|
||||
cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
|
||||
cy.findByRole('link', { name: 'Year' }).as('year');
|
||||
cy.get('@year').should('not.have.attr', 'aria-current');
|
||||
|
|
@ -87,6 +95,14 @@ describe('Home Feed Navigation', () => {
|
|||
});
|
||||
|
||||
it('should navigate to Infinity view', () => {
|
||||
cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
|
||||
cy.findByRole('link', { name: 'Top' }).as('top');
|
||||
cy.get('@top').click();
|
||||
});
|
||||
|
||||
// this url check serves to wait for the page transition
|
||||
cy.url().should('contain', '/top/week');
|
||||
|
||||
cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
|
||||
cy.findByRole('link', { name: 'Infinity' }).as('infinity');
|
||||
cy.get('@infinity').should('not.have.attr', 'aria-current');
|
||||
|
|
@ -109,6 +125,14 @@ describe('Home Feed Navigation', () => {
|
|||
cy.findByRole('heading', { name: '#tag1' });
|
||||
cy.findByRole('heading', { name: 'Listings' });
|
||||
|
||||
cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
|
||||
cy.findByRole('link', { name: 'Top' }).as('top');
|
||||
cy.get('@top').click();
|
||||
});
|
||||
|
||||
// this url check serves to wait for the page transition
|
||||
cy.url().should('contain', '/top/week');
|
||||
|
||||
// Week view
|
||||
cy.findByRole('link', { name: 'Week' }).click();
|
||||
cy.url().should('contain', '/top/week');
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue