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

Home Feed Tabs - Crayonsified (#7976)

Browse source 
* flare tag line height

* .

* new tabs on home

* instantclick

* Some JS cleanup for mobile view select event handler.

* eslint cleanup

* select arrow color

* quotes

* quotes

* .

* .

* omg

* .

* finally

* focus visible

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
This commit is contained in:
ludwiczakpawel 2020-05-27 14:48:18 +02:00 • committed by GitHub
parent acb35afe03
commit 975ddc61c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 114 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
app/assets/javascripts/initializers/initializeDrawerSliders.js
View file

@ -1,57 +1,72 @@
function initializeDrawerSliders() {
if(!initializeSwipeGestures.called) {
swipeState = "middle";
initializeSwipeGestures();
}
if (document.getElementById("on-page-nav-controls")){
if (document.getElementById("sidebar-bg-left")){
document.getElementById("sidebar-bg-left").onclick = function(){
swipeState = "middle";
slideSidebar("left","outOfView");
}
}
if (document.getElementById("sidebar-bg-right")){
document.getElementById("sidebar-bg-right").onclick = function(){
swipeState = "middle";
slideSidebar("right","outOfView");
}
}
/* global swipeState InstantClick initializeSwipeGestures slideSidebar */
if (document.getElementById("on-page-nav-butt-left")){
document.getElementById("on-page-nav-butt-left").onclick = function(){
swipeState = "left"
slideSidebar("left","intoView");
}
}
if (document.getElementById("on-page-nav-butt-right")){
document.getElementById("on-page-nav-butt-right").onclick = function(){
swipeState = "right"
slideSidebar("right","intoView");
}
}
InstantClick.on('change', function() {
document.getElementsByTagName('body')[0].classList.remove('modal-open');
slideSidebar("right","outOfView");
slideSidebar("left","outOfView");
});
listenForNarrowMenuClick();
function listenForNarrowMenuClick(event) {
let navLinks = document.getElementsByClassName('narrow-nav-menu');
let narrowFeedButt = document.getElementById('narrow-feed-butt');
for (let i = 0; i < navLinks.length; i++) {
document.getElementById('narrow-nav-menu').classList.remove('showing');
}
if (narrowFeedButt) {
narrowFeedButt.onclick = (_event) => {
document.getElementById('narrow-nav-menu').classList.add('showing');
};
}
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].onclick = (_event) => {
document.getElementById('narrow-nav-menu').classList.remove('showing');
};
}
}
function listenForNarrowMenuClick(event) {
var navLinks = document.getElementsByClassName("narrow-nav-menu");
var narrowFeedButt = document.getElementById("narrow-feed-butt");
for (var i = 0; i < navLinks.length; i++) {
document.getElementById("narrow-nav-menu").classList.remove("showing");
function initializeDrawerSliders() {
if (!initializeSwipeGestures.called) {
swipeState = 'middle'; // eslint-disable-line no-global-assign
initializeSwipeGestures();
}
if (narrowFeedButt) {
narrowFeedButt.onclick = function(){
document.getElementById("narrow-nav-menu").classList.add("showing");
if (document.getElementById('on-page-nav-controls')) {
if (document.getElementById('sidebar-bg-left')) {
document.getElementById('sidebar-bg-left').onclick = (_event) => {
swipeState = 'middle'; // eslint-disable-line no-global-assign
slideSidebar('left', 'outOfView');
};
}
}
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].onclick = function(event){
document.getElementById("narrow-nav-menu").classList.remove("showing");
if (document.getElementById('sidebar-bg-right')) {
document.getElementById('sidebar-bg-right').onclick = (_event) => {
swipeState = 'middle'; // eslint-disable-line no-global-assign
slideSidebar('right', 'outOfView');
};
}
if (document.getElementById('on-page-nav-butt-left')) {
document.getElementById('on-page-nav-butt-left').onclick = (_event) => {
swipeState = 'left'; // eslint-disable-line no-global-assign
slideSidebar('left', 'intoView');
};
}
if (document.getElementById('on-page-nav-butt-right')) {
document.getElementById('on-page-nav-butt-right').onclick = (_event) => {
swipeState = 'right'; // eslint-disable-line no-global-assign
slideSidebar('right', 'intoView');
};
}
InstantClick.on('change', (_event) => {
document.getElementsByTagName('body')[0].classList.remove('modal-open');
slideSidebar('right', 'outOfView');
slideSidebar('left', 'outOfView');
});
listenForNarrowMenuClick();
}
}
const feedFilterSelect = document.getElementById('feed-filter-select');
if (feedFilterSelect) {
feedFilterSelect.addEventListener('change', (event) => {
const url = event.target.value;
InstantClick.preload(url);
InstantClick.display(url);
});
}
}

2
app/assets/stylesheets/components/forms.scss
View file

@ -122,7 +122,7 @@
position: relative;
outline: none;
@extend %form-styling;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16l-6-6h12l-6 6z' fill='%2308090A'/%3E%3C/svg%3E");
background-image: var(--select-icon);
background-position: calc(100% - var(--su-2)) calc(50% - 1px);
background-repeat: no-repeat;

1
app/assets/stylesheets/components/tabs.scss
View file

@ -22,7 +22,6 @@
padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
display: inline-block;
text-align: center;
outline: none;
font-size: var(--font-size);
line-height: var(--su-6);
text-decoration: none;

5
app/assets/stylesheets/config/_colors.scss
View file

@ -202,7 +202,7 @@
--tab-muted-bg-hover: var(--base-a10);
--tab-muted-bg-current: var(--base-20);
--tab-pill-color-current: var(--base-inverted);
// Tags
--tag-color: var(--base-70);
--tag-color-hover: var(--base-100);
@ -210,4 +210,7 @@
// Story
--story-comments-bg: var(--base-0);
--story-border: transparent;
// Select icon
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMDgwOTBBIi8+Cjwvc3ZnPg==);
}

5
app/assets/stylesheets/themes/hacker.scss
View file

@ -192,7 +192,7 @@
--tab-muted-bg-hover: var(--base-a10);
--tab-muted-bg-current: var(--base-20);
--tab-pill-color-current: var(--base-inverted);
// Tags
--tag-color: var(--base-70);
--tag-color-hover: var(--base-100);
@ -200,4 +200,7 @@
// Story
--story-comments-bg: #0d0d0d;
--story-border: rgba(255, 255, 255, 0.2);
// Select icon
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMkVGRjdCIi8+Cjwvc3ZnPg==);
}

5
app/assets/stylesheets/themes/minimal.scss
View file

@ -190,7 +190,7 @@
--tab-muted-bg-hover: var(--base-a10);
--tab-muted-bg-current: var(--base-20);
--tab-pill-color-current: var(--base-inverted);
// Tags
--tag-color: var(--base-70);
--tag-color-hover: var(--base-100);
@ -198,4 +198,7 @@
// Story
--story-comments-bg: #fafafa; //hotfix
--story-border: transparent;
// Select icon
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjN2E3YTdhIi8+Cjwvc3ZnPg==);
}

5
app/assets/stylesheets/themes/night.scss
View file

@ -192,7 +192,7 @@
--tab-muted-bg-hover: var(--base-a10);
--tab-muted-bg-current: var(--base-20);
--tab-pill-color-current: var(--base-inverted);
// Tags
--tag-color: var(--base-70);
--tag-color-hover: var(--base-100);
@ -200,4 +200,7 @@
// Story
--story-comments-bg: #151e2a; //hotfix
--story-border: rgba(255, 255, 255, 0.15);
// Select icon
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjYzJjNmNhIi8+Cjwvc3ZnPg==);
}

5
app/assets/stylesheets/themes/pink.scss
View file

@ -190,7 +190,7 @@
--tab-muted-bg-hover: var(--base-a10);
--tab-muted-bg-current: var(--base-20);
--tab-pill-color-current: var(--base-inverted);
// Tags
--tag-color: var(--base-70);
--tag-color-hover: var(--base-100);
@ -198,4 +198,7 @@
// Story
--story-comments-bg: rgba(255, 255, 255, 0.05);
--story-border: var(--accent-brand);
// Select icon
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjNTcxOTJkIi8+Cjwvc3ZnPg==);
}

76
app/views/articles/index.html.erb
View file

@ -35,58 +35,40 @@
<%= render "articles/sidebar" %>
<%# BEGIN Feed menu bar %>
<div class="articles-list" id="articles-list">
<%= render(partial: "onboardings/task_card") if user_signed_in? %>
<div class="on-page-nav-controls" id="on-page-nav-controls">
<div class="on-page-nav-label">
<div class="wide-nav-links">
<a class="nav-chronofiter-link <%= "selected" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>" href="<%= list_path %>/">
FEED
</a>
<span class="separator"></span>
<a class="nav-chronofiter-link <%= "selected" if timeframe_check("week") %>" href="<%= list_path %>/top/week">
WEEK
</a>
<a class="nav-chronofiter-link <%= "selected" if timeframe_check("month") %>" href="<%= list_path %>/top/month">
MONTH
</a>
<a class="nav-chronofiter-link <%= "selected" if timeframe_check("year") %>" href="<%= list_path %>/top/year">
YEAR
</a>
<a class="nav-chronofiter-link <%= "selected" if timeframe_check("infinity") %>" href="<%= list_path %>/top/infinity">
INFINITY
</a>
<span class="separator"></span>
<a class="nav-chronofiter-link <%= "selected" if timeframe_check("latest") %>" href="<%= list_path %>/latest">
LATEST
</a>
</div>
<div class="narrow-nav-select" aria-label="feed-filter-select">
<% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %>
<button type="button" id="narrow-feed-butt">&lt;MY <%= community_name %> FEED&gt;</button>
<% elsif timeframe_check('week') %>
<button type="button" id="narrow-feed-butt">&lt;PAST WEEK&gt;</button>
<% elsif timeframe_check('month') %>
<button type="button" id="narrow-feed-butt">&lt;PAST MONTH&gt;</button>
<% elsif timeframe_check('year') %>
<button type="button" id="narrow-feed-butt">&lt;PAST YEAR&gt;</button>
<% elsif timeframe_check('infinity') %>
<button type="button" id="narrow-feed-butt">&lt;INFINITY&gt;</button>
<% elsif timeframe_check('latest') %>
<button type="button" id="narrow-feed-butt">&lt;LATEST&gt;</button>
<% end %>
</div>
<header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls">
<button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block l:hidden" id="on-page-nav-butt-left" aria-label="nav-button-left">
<%= inline_svg_tag("stack.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Left sidebar") %>
</button>
<div class="flex-1 flex items-center justify-between">
<h2 class="fs-l fw-heavy">Posts</h2>
<nav class="crayons-tabs hidden s:flex">
<a href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>">Feed</a>
<a href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>">Week</a>
<a href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>">Month</a>
<a href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>">Year</a>
<a href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>">Infinity</a>
<a href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>">Latest</a>
</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>
</div>
<button type="button" class="on-page-nav-butt on-page-nav-butt-left" id="on-page-nav-butt-left" aria-label="nav-button-left">
<img src="<%= asset_path "stack.svg" %>" alt="left-sidebar-nav">
<button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden" id="on-page-nav-butt-right" aria-label="nav-button-right">
<%= inline_svg_tag("lightning.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Right sidebar") %>
</button>
<button type="button" class="on-page-nav-butt on-page-nav-butt-right" id="on-page-nav-butt-right" aria-label="nav-button-right">
<img src="<%= asset_path "lightning.svg" %>" alt="right-sidebar-nav">
</button>
</div>
<%# END Feed menu bar %>
</header>
<% if user_signed_in? %>
<div id="homepage-feed"></div>