Update nav menu in Notification to use crayons-link styling (#10196) [deploy]
* Move nav code into partials * Update small styling with new nav menu
This commit is contained in:
Lisa Sy
GitHub
parent
ee1af652c0
commit
b05c319c2f
4 changed files with 95 additions and 111 deletions
|
|
@ -435,6 +435,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
.notification-nav {
|
||||
margin-bottom: var(--su-4);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
color: var(--base-80);
|
||||
}
|
||||
|
||||
.crayons-link {
|
||||
margin-bottom: var(--su-1);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notifications-filter__list {
|
||||
li {
|
||||
margin-bottom: var(--su-1);
|
||||
|
|
|
|||
35
app/views/notifications/_nav_menu.html.erb
Normal file
35
app/views/notifications/_nav_menu.html.erb
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<nav class="notification-nav">
|
||||
<% if @organizations.present? %>
|
||||
<header class="pl-2 mb-2">
|
||||
<h4>
|
||||
<%= @user.name %>
|
||||
</h4>
|
||||
</header>
|
||||
<% end %>
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].blank? %>" href="/notifications">
|
||||
All
|
||||
</a>
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
|
||||
Comments
|
||||
</a>
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
|
||||
Posts
|
||||
</a>
|
||||
</nav>
|
||||
<nav class="notification-nav">
|
||||
<% if @organizations.present? %>
|
||||
<% @organizations.each do |org| %>
|
||||
<header class="pl-2 mb-2">
|
||||
<h4>
|
||||
<%= org.name %>
|
||||
</h4>
|
||||
</header>
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
|
||||
All
|
||||
</a>
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
|
||||
Comments
|
||||
</a>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</nav>
|
||||
38
app/views/notifications/_nav_menu_filter.html.erb
Normal file
38
app/views/notifications/_nav_menu_filter.html.erb
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<section class="notifications-filter__dropdown s:flex-col">
|
||||
<% if @organizations.present? %>
|
||||
<div class="p-2 s:inline-flex">
|
||||
<select id="notifications-filter__select" class="crayons-select">
|
||||
<option value="/notifications"><%= @user.name %></option>
|
||||
<% @organizations.each do |org| %>
|
||||
<option value="/notifications/org/<%= org.id %>" <%= "selected" if params[:org_id].to_i == org.id %>><%= org.name %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="s:inline-flex">
|
||||
<nav class="crayons-tabs notifications-filter__tabs <%= "hidden" if params[:org_id].present? %>">
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].blank? %>" href="/notifications">
|
||||
All
|
||||
</a>
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
|
||||
Comments
|
||||
</a>
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
|
||||
Posts
|
||||
</a>
|
||||
</nav>
|
||||
<% if @organizations.present? %>
|
||||
<% @organizations.each do |org| %>
|
||||
<nav class="crayons-tabs notifications-filter__tabs <%= "hidden" unless params[:org_id].to_i == org.id %>">
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
|
||||
All
|
||||
</a>
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
|
||||
Comments
|
||||
</a>
|
||||
</nav>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -42,119 +42,10 @@
|
|||
<% if user_signed_in? %>
|
||||
<div class="home" id="notifications-container">
|
||||
<div class="side-bar">
|
||||
<div class="crayons-card">
|
||||
<header class="crayons-card__header">
|
||||
<h3 class="crayons-card__title">Filter</h3>
|
||||
</header>
|
||||
<div class="crayons-card__body widget-body">
|
||||
<section class="crayons-card__inner-section">
|
||||
<% if @organizations.present? %>
|
||||
<header class="crayons-card__subheader">
|
||||
<h4 class="crayons-card__subheader__title">
|
||||
<%= @user.name %>
|
||||
</h4>
|
||||
</header>
|
||||
<% end %>
|
||||
<ul class="notifications-filter__list">
|
||||
<li>
|
||||
<a class="notifications-filter__list--item <%= "selected" if params[:filter].blank? %>" href="/notifications">
|
||||
All
|
||||
<div class="notifications-filter__icon">
|
||||
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
|
||||
Comments
|
||||
<div class="notifications-filter__icon">
|
||||
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
</li>
|
||||
<a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
|
||||
Posts
|
||||
<div class="notifications-filter__icon">
|
||||
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="crayons-card__inner-section">
|
||||
<% if @organizations.present? %>
|
||||
<% @organizations.each do |org| %>
|
||||
<header class="crayons-card__subheader">
|
||||
<h4 class="crayons-card__subheader__title">
|
||||
<%= org.name %>
|
||||
</h4>
|
||||
</header>
|
||||
<ul class="notifications-filter__list">
|
||||
<li>
|
||||
<a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
|
||||
All
|
||||
<div class="notifications-filter__icon">
|
||||
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
|
||||
Comments
|
||||
<div class="notifications-filter__icon">
|
||||
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<%= render "notifications/nav_menu" %>
|
||||
</div>
|
||||
<div class="articles-list" id="articles-list">
|
||||
|
||||
<section class="notifications-filter__dropdown s:flex-col">
|
||||
<% if @organizations.present? %>
|
||||
<div class="p-2 s:inline-flex">
|
||||
<select id="notifications-filter__select" class="crayons-select">
|
||||
<option value="/notifications"><%= @user.name %></option>
|
||||
<% @organizations.each do |org| %>
|
||||
<option value="/notifications/org/<%= org.id %>" <%= "selected" if params[:org_id].to_i == org.id %>><%= org.name %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="s:inline-flex">
|
||||
<nav class="crayons-tabs notifications-filter__tabs <%= "hidden" if params[:org_id].present? %>">
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].blank? %>" href="/notifications">
|
||||
All
|
||||
</a>
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
|
||||
Comments
|
||||
</a>
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
|
||||
Posts
|
||||
</a>
|
||||
</nav>
|
||||
<% if @organizations.present? %>
|
||||
<% @organizations.each do |org| %>
|
||||
<nav class="crayons-tabs notifications-filter__tabs <%= "hidden" unless params[:org_id].to_i == org.id %>">
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
|
||||
All
|
||||
</a>
|
||||
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
|
||||
Comments
|
||||
</a>
|
||||
</nav>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</section>
|
||||
<%= render "notifications/nav_menu_filter" %>
|
||||
<%= render "notifications_list", params: params %>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue