filters and communications

assets/css/common/mixins.css

@@ -64,3 +64,23 @@
     color var(--transition-animation-duration) ease,
     background var(--transition-animation-duration) ease;
 }
+
+@define-mixin no-bottom-border-radius {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+@define-mixin no-top-border-radius {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+@define-mixin first-last-child-border-radius $classname {
+  .$(classname) > *:first-child {
+    @mixin no-top-border-radius;
+  }
+
+  $(classname) > *:last-child {
+    @mixin no-bottom-border-radius;
+  }
+}

assets/css/elements/button.css

@@ -103,7 +103,7 @@
   width: fit-content;
   font-weight: bold;
   font-size: var(--font-size);
-  background: var(--primary-muted-color);
+  background: var(--secondary-dark-color);
   color: var(--link-color);
   border-radius: var(--border-radius-inner);
   padding: 0 var(--padding-small);
@@ -117,7 +117,7 @@
 .button:active {
   @mixin animated-transition;
   color: var(--text-color);
-  background: var(--primary-dark-color);
+  background: var(--secondary-muted-color);
   border-radius: var(--border-radius-inner);
   cursor: pointer;
 }

assets/css/elements/list.css

@@ -1,10 +1,23 @@
 ul,
 ol {
-  padding: 0;
-  list-style-type: none;
+  display: flex;
+  flex-flow: column;
+  gap: var(--padding-small);
+  margin: 0;
+  margin-left: var(--padding-small);
+  padding-inline-start: var(--padding-normal);
+}
+
+li > ul,
+li > ol {
+  padding-top: var(--padding-small);
 }
 
 .horizontal-list {
   display: flex;
+  flex-flow: row;
   gap: var(--padding-normal);
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }

assets/css/elements/media.css

@@ -110,6 +110,7 @@
 
 .image-container {
   display: flex;
+  position: relative;
   flex-direction: column;
   align-items: center;
   justify-content: center;

assets/css/elements/table.css

@@ -1,27 +1,59 @@
-.table {
+.table,
+.communication__body__text table {
   border-collapse: collapse;
   width: 100%;
 }
 
-.table > thead {
-  border-radius: var(--border-radius-inner);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.table > tbody {
-  border-radius: var(--border-radius-inner);
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.table td,
-th {
-  padding: var(--padding-small);
-  border: 1px solid var(--secondary-muted-color);
-  text-align: left;
+.table thead,
+.communication__body__text table thead {
+  background: var(--secondary-muted-color);
 }
 
 .table th {
   background: var(--secondary-color);
+  padding: var(--padding-normal) var(--padding-small);
+}
+
+.table td,
+.table th {
+  padding: var(--padding-small);
+  text-align: left;
+}
+
+.communication__body__text table th {
+  background: var(--secondary-color);
+  padding: var(--padding-normal) var(--padding-small);
+}
+
+.communication__body__text table td,
+.communication__body__text table th {
+  padding: var(--padding-small);
+  text-align: left;
+}
+
+.table tr,
+.communication__body__text table tr {
+  border-bottom: 1px solid var(--secondary-muted-color);
+}
+
+.table thead th:last-child {
+  border-top-right-radius: var(--border-radius-inner);
+}
+
+.table thead th:first-child {
+  border-top-left-radius: var(--border-radius-inner);
+}
+
+.communication__body__text table thead th:first-child {
+  border-top-left-radius: var(--border-radius-inner);
+}
+
+.communication__body__text table thead th:last-child {
+  border-top-right-radius: var(--border-radius-inner);
+}
+
+.table tbody,
+.communication__body__text table tbody {
+  border-top: 2px solid var(--secondary-muted-color);
+  border-bottom: 2px solid var(--secondary-muted-color);
 }

assets/css/views/markdown.css

@@ -31,3 +31,43 @@
 .walloftext {
   line-height: var(--readable-line-height);
 }
+
+pre,
+code {
+  font-family: var(--font-family-monospace);
+  background: var(--background-color);
+  border: 1px solid var(--primary-border-color);
+  border-radius: var(--border-radius-inner);
+  padding: calc(var(--padding-tiny) / 2) var(--padding-tiny);
+}
+
+pre {
+  padding: var(--padding-small);
+  line-height: var(--readable-line-height);
+  margin: var(--padding-small);
+  margin-right: 0;
+}
+
+pre code {
+  border: 0;
+  background: 0;
+  padding: 0;
+}
+
+blockquote {
+  position: relative;
+  margin: 0;
+  padding: var(--padding-normal);
+}
+
+blockquote:before {
+  content: "";
+  display: block;
+  position: absolute;
+  background: var(--secondary-color);
+  border-radius: var(--border-radius-inner);
+  width: var(--padding-tiny);
+  height: 100%;
+  left: 0;
+  top: 0;
+}

lib/philomena_web/templates/filter/_filter.html.slime

@@ -1,39 +1,59 @@
-.filter
-  h3
-    = @filter.name
+.block
+  .block__content
+    h3 = @filter.name
 
-  = if @filter.user do
-    p
-      ' Maintained by
-      = render PhilomenaWeb.UserAttributionView, "_user.html", object: @filter, conn: @conn
+    .flex.flex--row
+      .button__group--standalone
+        = link to: ~p"/filters/#{@filter}" do
+          i.fa.fa-eye>
+          | View this filter
+        .separator--vertical
+        = link to: ~p"/filters/new?#{[based_on: @filter]}" do
+          i.fa.fa-copy>
+          | Copy and customize
 
-  = if @filter.system do
-    p
-      ' Maintained by staff
-
-  .filter-options
-    ul
-      li
-        ' Spoilers
-        = length(@filter.spoilered_tag_ids)
-        ' , hides
-        = length(@filter.hidden_tag_ids)
-
-      li
-        = link "View this filter", to: ~p"/filters/#{@filter}", class: "button"
-      li
-        = link "Copy and Customize", to: ~p"/filters/new?#{[based_on: @filter]}", class: "button"
 
       = if can?(@conn, :edit, @filter) do
-        li
-          = link "Edit this filter", to: ~p"/filters/#{@filter}/edit", class: "button"
+        .button__group--standalone.button__group--warning
+          = link to: ~p"/filters/#{@filter}/edit" do
+            i.fa.fa-edit>
+            | Edit this filter
 
       = if @filter.id == @conn.assigns.current_filter.id do
-        li
-          strong Your current filter
+        .button__group--standalone.button__group--success
+          a
+            i.fa.fa-check>
+            | Your current filter
       - else
-        li
-          = button_to "Use this filter", ~p"/filters/current?#{[id: @filter]}", method: "put", class: "button"
+        .button__group--standalone
+          = button_to ~p"/filters/current?#{[id: @filter]}", method: "put", class: "button" do
+            i.fa.fa-arrow-right-to-bracket>
+            | Use this filter
+
+    = cond do
+      - @filter.user ->
+        p
+          i.fa.fa-wrench.icon--fixed>
+          ' Maintained by
+          = render PhilomenaWeb.UserAttributionView, "_user.html", object: @filter, conn: @conn
+      - @filter.system ->
+        p
+          i.fa.fa-wrench.icon--fixed>
+          ' Maintained by site staff
+      - true ->
+        p
+          ' Unknown maintainer
     p
+      i.fa.fa-shield.icon--fixed>
+      ' Spoilers
+      => length(@filter.spoilered_tag_ids)
+      ' tag(s)
+    p
+      i.fa.fa-eye-slash.icon--fixed>
+      ' Hides
+      => length(@filter.hidden_tag_ids)
+      ' tag(s)
+    p
+      i.fa.fa-circle-info.icon--fixed>
       em
         = @filter.description

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

@@ -27,12 +27,15 @@
   = if !@conn.params["fq"] do
     h2 My Filters
     = if @current_user do
-      p
-        = link("Click here to make a new filter from scratch", to: ~p"/filters/new")
+      = link to: ~p"/filters/new", class: "button" do
+        i.fa.fa-plus>
+        | Click here to make a new filter from scratch
+      br
       = for filter <- @my_filters do
         = render PhilomenaWeb.FilterView, "_filter.html", conn: @conn, filter: filter
     - else
       p
+        i.fa.fa-circle-info.icon--fixed>
         ' If you're logged in, you can create and maintain custom filters here.
 
     h2 Global Filters

lib/philomena_web/templates/user_attribution/_user.html.slime

@@ -2,7 +2,7 @@
   strong<>
     - icon = user_icon(@object.user)
     = if icon do
-      i class="fa #{icon}">
+      i> class="fa #{icon}"
     = link(@object.user.name, to: ~p"/profiles/#{@object.user}")
   = if assigns[:awards] do
     = render PhilomenaWeb.ProfileView, "_awards.html", awards: @object.user.awards

lib/philomena_web/views/app_view.ex

@@ -102,7 +102,17 @@ defmodule PhilomenaWeb.AppView do
     end
   end
 
-  def button_to(text, route, args \\ []) do
+  def button_to(route, args \\ [], do: fun) do
+    method = Keyword.get(args, :method, "get")
+    class = Keyword.get(args, :class, nil)
+    data = Keyword.get(args, :data, [])
+
+    form_for(nil, route, [method: method, class: "button_to"], fn _f ->
+      submit([class: class, data: data], do: fun)
+    end)
+  end
+
+  def button_to(text, route, args) do
     method = Keyword.get(args, :method, "get")
     class = Keyword.get(args, :class, nil)
     data = Keyword.get(args, :data, [])