docbrown/app/views/notifications/index.html.erb

<% title "Notifications" %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="<%= app_url("/notifications") %>" />
  <meta name="description" content="Notifications inbox for <%= community_name %>">
  <meta name="keywords" content="<%= SiteConfig.meta_keywords[:default] %>">

  <meta property="og:type" content="article" />
  <meta property="og:url" content="<%= app_url("/notifications") %>" />
  <meta property="og:title" content="Notifications - <%= community_name %>" />
  <meta property="og:description" content="Notifications inbox for <%= community_name %>" />
  <meta property="og:site_name" content="<%= community_qualified_name %>" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@<%= SiteConfig.social_media_handles["twitter"] %>">
  <meta name="twitter:title" content="Notifications - <%= community_name %>">
  <meta name="twitter:description" content="Notifications inbox for <%= community_name %>">
<% end %>

<script>
  /**
   * A script that tracks clicks for welcome notifications.
   * The notification must have `trackNotification` as its onclick event
   * in order for this to be triggered.
   *
   * @param {Event} The click event on the notification.
   */
  function trackNotification(e) {
    let title = e.target.parentElement.id
    ahoy.track("Clicked Welcome Notification", { title });
  }
</script>

<% 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>
    </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_list", params: params %>
    </div>

    <%# new or less active users that don't have a page worth of notifications
        won't be shown the "load more" button %>
    <% if @notifications.size >= @initial_page_size %>
      <div class="load-more-wrapper">
        <button id="load-more-button" type="button" class="crayons-btn crayons-btn--secondary">
          Load More
        </button>
      </div>
    <% end %>

    <div class="side-bar sidebar-additional"></div>
  </div>
  <%= render "articles/fitvids" %>
<% else %>
  <%= render "devise/registrations/registration_form" %>
<% end %>