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

Update search menu to use Crayons styling, v2 (#10347)

Browse source 
* Replace old query style with crayons link block

* Add Crayons layout

* Rename nav file and refactor how it's referenced in parent file

* Rename sidebar file

* style updates

* more changes

* podcasts

* .

* code format

Co-authored-by: Lisa Sy <lisasyis@gmail.com>
This commit is contained in:
ludwiczakpawel 2020-09-16 22:03:34 +02:00 • committed by GitHub
parent 3e09a7768f
commit 4bf69e64c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 56 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
app/assets/javascripts/utilities/buildArticleHTML.js
View file

@ -4,37 +4,23 @@
function buildArticleHTML(article) {
if (article && article.class_name === 'PodcastEpisode') {
return (
'<div class="single-article single-article-small-pic single-article-single-podcast">\
<div class="small-pic">\
<a href="/' +
article.podcast.slug +
'" class="small-pic-link-wrapper">\
<img src="' +
article.podcast.image_url +
'" alt="' +
article.podcast.title +
' image">\
</a>\
</div>\
<a href="' +
article.path +
'" class="small-pic-link-wrapper index-article-link" id="article-link-' +
article.id +
'">\
<div class="content">\
<h3><span class="tag-identifier">podcast</span>' +
article.title +
'</h3>\
</div>\
</a>\
<h4><a href="/' +
article.podcast.slug +
'">' +
article.podcast.title +
'</a></h4>\
</div>'
);
return `<article class="crayons-story crayons-podcast-episode mb-2">
<div class="crayons-story__body flex flex-start">
<a href="${article.podcast.slug}" class="crayons-podcast-episode__cover">
<img src="${article.podcast.image_url}" alt="${article.podcast.title}" />
</a>
<div class="pt-2 flex-1">
<p class="crayons-podcast-episode__author">
${article.podcast.title}
</p>
<h2 class="crayons-podcast-episode__title crayons-story__title mb-0">
<a href="${article.path}" id="article-link-${article.id}">
${article.podcast.title}
</a>
</h2>
</div>
</div>
</article>`;
}
if (article) {

56
app/assets/stylesheets/widgets.scss
View file

@ -63,10 +63,6 @@
&:hover {
opacity: 1;
}
h4 {
margin: 0;
}
&.showing {
display: block;
}
@ -267,51 +263,6 @@
}
}
// Filtering / todo: replace with tabs?
.query-filter-button {
font-size: 15px;
font-weight: bold;
background: transparent;
border: 0px;
display: block;
padding: 6px 8px;
width: calc(100% - 16px);
text-align: left;
border-radius: 0px;
color: var(--body-color);
cursor: pointer;
&:hover {
@include themeable(
background,
theme-container-background-hover,
lighten($bold-blue, 38%)
);
}
&.selected {
@include themeable(
background,
theme-container-accent-background,
lighten($bold-blue, 10%)
);
color: var(--card-color);
}
&.query-type-filter-button {
&:hover {
@include themeable(
background,
theme-container-background-hover,
$light-green
);
}
&.selected {
@include themeable(
background,
theme-container-accent-background,
darken($light-green, 10%)
);
}
}
}
p {
margin: 8px 0;
}
@ -393,13 +344,6 @@
}
}
.query-filter-button {
box-sizing: border-box;
display: inline-block;
padding: var(--su-2) 0;
width: 100%;
}
// Sidebar sponsors
.sidebar-sponsor {
color: var(--card-color-tertiary);

8
app/views/articles/_search.html.erb
View file

@ -70,7 +70,7 @@
var filterButts = document.getElementsByClassName("query-filter-button");
for (var i = 0; i < filterButts.length; i++) {
if (filters == filterButts[i].dataset.filter) {
filterButts[i].classList.add("selected");
filterButts[i].classList.add("crayons-link--current");
}
filterButts[i].onclick = function (e) {
var currentParams = getQueryParams(document.location.search);
@ -86,10 +86,10 @@
window.history.pushState(null, null, "/search?q=" + query + "&filters=" + filters + sortString);
var className = e.target.className;
for (var i = 0; i < filterButts.length; i++) {
filterButts[i].classList.remove("selected");
filterButts[i].classList.remove("crayons-link--current");
}
if (className.indexOf("selected") == -1) {
e.target.classList.add("selected");
if (className.indexOf("crayons-link--current") == -1) {
e.target.classList.add("crayons-link--current");
window.history.replaceState(null, null, "/search?q=" + query + "&filters=" + filters + sortString);
search(query, filters, sortBy, sortDirection);
} else {

30
app/views/articles/search.html.erb
View file

@ -2,22 +2,29 @@
<%= render "articles/search/meta" %>
<% end %>
<div id="query-wrapper"></div>
<div class="home sub-home" id="index-container"
<header class="crayons-layout crayons-layout--limited crayons-layout--1-col p-4 block s:flex items-center space-between">
<h1 class="fs-2xl s:fs-3xl">Search results</h1>
<nav id="sorting-option-tabs" class="crayons-tabs ml-auto">
<a href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :relevance %>">Most Relevant</a>
<a 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 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>
</nav>
</header>
<div class="crayons-layout crayons-layout--limited crayons-layout--2-cols pt-0" id="index-container"
data-params="<%= params.to_json(only: %i[tag username q]) %>" data-which="<%= @list_of %>"
data-tag=""
data-feed="<%= params[:timeframe] || "base-feed" %>"
data-articles-since="<%= Timeframer.new(params[:timeframe]).datetime&.iso8601 %>">
<%= render "articles/search/sidebar" %>
<div class="articles-list" id="articles-list">
<div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left">
<div class="sidebar-bg" id="sidebar-bg-left"></div>
<%= render "articles/search/nav_menu" %>
</div>
<div class="articles-list crayons-layout__content" id="articles-list">
<div id="banner-section"></div>
<div class="flex-1 flex items-center justify-between">
<h2 class="fs-l fw-heavy">Results</h2>
<nav id="sorting-option-tabs" class="crayons-tabs hidden s:flex">
<a href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :relevance %>">Most Relevant</a>
<a 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 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>
</nav>
</div>
<div class="substories" id="substories">
<div class="query-results-nothing">
<div class="query-results-loader"></div>
@ -28,7 +35,6 @@
loading...
</div>
</div>
<%= render "articles/search/sidebar_additional" %>
</div>
<%= render "articles/search" %>

17
app/views/articles/search/_nav_menu.html.erb Normal file
View file

@ -0,0 +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:;">
Posts
</a>
<a class="query-filter-button crayons-link crayons-link--block" 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:;">
People
</a>
<a class="query-filter-button crayons-link crayons-link--block" 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:;">
My posts only
</a>
</div>

18
app/views/articles/search/_sidebar.html.erb
View file

@ -1,18 +0,0 @@
<div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left">
<div class="sidebar-bg" id="sidebar-bg-left"></div>
<div class="side-bar">
<div class="widget fixed-widget">
<header>
<h4>search results</h4>
</header>
<div class="widget-body" style="margin-bottom:16px;">
<a class="query-filter-button" data-filter="class_name:Article">POSTS</a>
<a class="query-filter-button" data-filter="class_name:PodcastEpisode">PODCASTS</a>
<a class="query-filter-button" data-filter="class_name:User">PEOPLE</a>
<a class="query-filter-button" data-filter="class_name:Comment">COMMENTS</a>
<hr>
<a class="query-filter-button my-posts-query-button" data-filter="MY_POSTS">ONLY MY POSTS</a>
</div>
</div>
</div>
</div>

5
app/views/articles/search/_sidebar_additional.html.erb
View file

@ -1,5 +0,0 @@
<div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right">
<div class="sidebar-bg" id="sidebar-bg-right"></div>
<div class="side-bar sidebar-additional showing" id="sidebar-additional">
</div>
</div>