redesign staff list

assets/css/common/_base.scss

@@ -476,6 +476,7 @@ span.stat {
 @import "~views/profiles";
 @import "~views/pagination";
 @import "~views/search";
+@import "~views/staff";
 @import "~views/stats";
 @import "~views/tags";
 

assets/css/common/_blocks.scss

@@ -171,6 +171,11 @@ a.block__header--single-item, .block__header a {
   border-color: $primary_color;
 }
 
+.block--assistant {
+  background: $assistant_color;
+  border-color: $assistant_border_color;
+}
+
 /* Somewhat dirty workaround for <h*> margins */
 
 .block__content, .block__tab, .block--fixed {

assets/css/views/_profiles.scss

@@ -85,14 +85,6 @@ td.table--stats__sparkline {
   }
 }
 
-.profile-block {
-  display: inline-block;
-  margin: 5px;
-  max-width: 125px;
-  vertical-align: top;
-  b { display: block; }
-}
-
 .profile-about {
   overflow: hidden;
 }

assets/css/views/_staff.scss

@@ -0,0 +1,37 @@
+.staff-block__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-auto-rows: 1fr;
+  grid-gap: 0.5em;
+}
+
+.staff-block__user-card {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
+.staff-block__user {
+  padding: 1em;
+}
+
+.staff-block__info {
+  margin-left: auto;
+}
+
+.profile-block {
+  display: inline-block;
+  vertical-align: top;
+  b { display: block; }
+}
+
+.staff-block__description {
+  margin: 1em 0;
+}
+
+.staff-block__separator {
+  margin: 0.75em 0.5em;
+}
+
+.staff-block__category {
+  margin-top: 1em;
+}

lib/philomena_web/controllers/staff_controller.ex

@@ -32,6 +32,13 @@ defmodule PhilomenaWeb.StaffController do
           users,
           &(&1.role == "assistant" and &1.secondary_role in [nil, ""] and
               &1.hide_default_role == false)
+        ),
+      Others:
+        Enum.filter(
+          users,
+          &(&1.role != "user" and
+              &1.secondary_role not in [nil, "", "Site Developer", "Devops", "Public Relations"] and
+              &1.hide_default_role == true)
         )
     ]
 

lib/philomena_web/templates/staff/index.html.slime

@@ -1,12 +1,49 @@
 h1 Staff
+.block.block--fixed.block--warning
+  h3 Do you wish to submit a report?
+  p
+    strong> 
+      ' Do
+      em not
+    ' PM staff members with your reports. Instead, if you think something breaks
+    = link to: "/pages/rules" do
+      | the rules
+    ' , use the "Report" button, which is included next to all user-created content on the site. This will ensure swift handling of your issue, since most staff members don't check their PMs nearly as vigilantly as the reports queue.
+  p Staff PMs are only for general questions or for getting help with using the site.
+
+.block.block--fixed
+  p
+    ' Before contacting any of the staff members, you should try to ask your question in our
+    = link to: "/pages/discord" do
+      ' Discord
+    ' or
+    = link to: "/pages/irc" do
+      ' IRC channels.
+  p Keep in mind that all staff are unpaid volunteers who donate their time and effort into making sure this site remains organized and operational. Please do not harass them, and try to keep your PMs constructive. We will happily answer your questions, however receiving plenty of PMs for no reason gets tiring and impacts our ability to tend to more important matters, so please make sure you actually have a need to contact a staff member before doing so.
+
 .staff-block
   = for {header, users} <- @categories do
+    - header = to_string(header)
 
     = if Enum.any?(users) do
-      h4 = header
+      div class="block block--fixed staff-block__category #{category_class(header)}" = header
+      p.staff-block__description
+        i.fa.fa-fw.fa-info-circle>
+        = category_description(header)
 
-      = for user <- users do
-        a.profile-block href=Routes.profile_path(@conn, :show, user)
-          = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: user}, class: "avatar--125px"
-          b
-            => user.name
+      .staff-block__grid
+        = for user <- users do
+          .block.flex.flex__grow
+            .block__content.staff-block__user
+              .staff-block__user-card
+                .staff-block__avatar
+                  a.profile-block href=Routes.profile_path(@conn, :show, user)
+                    = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: user}, class: "avatar--125px"
+                    p
+                      b = user.name
+                .staff-block__info
+                  = link to: Routes.conversation_path(@conn, :new, recipient: user.name), class: "button" do
+                    i.fa.fa-envelope>
+                    ' Send PM
+              hr.staff-block__separator
+              p = staff_description(user)

lib/philomena_web/views/staff_view.ex

@@ -1,3 +1,45 @@
 defmodule PhilomenaWeb.StaffView do
   use PhilomenaWeb, :view
+
+  @desc_regex ~r/^([^\n]+)/
+
+  def category_description("Administrators"),
+    do:
+      "High-level staff of the site, typically handling larger-scope tasks, such as technical operation of the site or writing rules and policies."
+
+  def category_description("Technical Team"),
+    do:
+      "Developers and system administrators of the site, people who make sure the site keeps running."
+
+  def category_description("Public Relations"),
+    do: "People handling public announcements, events and such."
+
+  def category_description("Moderators"),
+    do:
+      "The main moderation force of the site, handling a wide range of tasks from maintaining tags to making sure the rules are followed."
+
+  def category_description("Assistants"),
+    do:
+      "Volunteers who help us run the site by taking simpler tasks off the hands of administrators and moderators."
+
+  def category_description("Others"),
+    do:
+      "People associated with the site in some other way, sometimes (but not necessarily) having staff-like permissions."
+
+  def category_description(_), do: "This category has no description provided."
+
+  def category_class("Administrators"), do: "block--danger"
+  def category_class("Technical Team"), do: "block--warning"
+  def category_class("Public Relations"), do: "block--warning"
+  def category_class("Moderators"), do: "block--success"
+  def category_class("Assistants"), do: "block--assistant"
+  def category_class(_), do: ""
+
+  def staff_description(%{description: desc}) when desc not in [nil, ""] do
+    [part] = Regex.run(@desc_regex, desc, capture: :all_but_first)
+    String.slice(part, 0, 240)
+  end
+
+  def staff_description(_),
+    do: "This person didn't provide any description, they seem to need a hug."
 end