editor styling + media list styling

assets/css/elements/block.css

@@ -59,8 +59,7 @@
   border-bottom-right-radius: var(--border-radius-outer) !important;
 }
 
-.block__content,
-.block__tab {
+.block__content {
   border-radius: var(--border-radius-outer);
   padding: var(--padding-normal);
   background: var(--primary-dark-color);
@@ -146,14 +145,10 @@
   margin-top: 0;
 }
 
-.block__tab {
-  padding: var(--padding-normal);
-}
-
 .block__header--js-tabbed {
   display: flex;
   padding: 0;
-  gap: var(--padding-normal);
+  gap: var(--padding-small);
 }
 
 @mixin if-mobile {
@@ -169,11 +164,11 @@
 }
 
 .block__header--js-tabbed a:hover {
-  background: var(--background-color);
+  background: var(--primary-dark-color);
 }
 
 .block__header--js-tabbed .selected {
-  background: var(--background-color);
+  background: var(--primary-dark-color);
 }
 
 .block--spaced-top {

assets/css/elements/form.css

@@ -4,6 +4,10 @@ form .field {
   margin-bottom: var(--padding-normal);
 }
 
+form .field:last-child {
+  margin-bottom: 0;
+}
+
 form .form--two-column {
   display: grid;
   grid: inherit;

assets/css/elements/input.css

@@ -1,16 +1,17 @@
 .input {
-  border: 1px solid var(--secondary-border-color);
+  border: 1px solid var(--invisible-color);
+  background: var(--primary-dark-color);
   border-radius: var(--border-radius-inner);
-  background: var(--secondary-dark-color);
   color: var(--text-color);
   padding: var(--padding-small);
   box-sizing: border-box;
   font-family: var(--font-family-monospace);
+  box-shadow: 0;
 }
 
 .input:hover,
 .input:focus {
-  background: var(--secondary-muted-color);
+  background: var(--secondary-dark-color);
 }
 
 .input:focus {
@@ -31,6 +32,13 @@
   cursor: text;
 }
 
+textarea.input:hover,
+textarea.input:focus,
+.input--text:hover,
+.input--text:focus {
+  border: 1px solid var(--secondary-border-color);
+}
+
 input[type="file"] {
   padding-top: var(--padding-small);
 }

assets/css/elements/media.css

@@ -165,3 +165,9 @@
 .image-scaled {
   max-width: 100%;
 }
+
+@mixin if-phone {
+  .media-box__header--link-row {
+    grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr;
+  }
+}

assets/css/options/compatibility.css

@@ -33,7 +33,7 @@ nav.header__secondary > * {
 @mixin legacy-flex-gap block__header--js-tabbed, var(--padding-normal);
 @mixin legacy-flex-gap field, var(--padding-normal);
 @mixin legacy-flex-gap horizontal-list, var(--padding-normal);
-@mixin legacy-flex-gap communication-edit__actions, var(--padding-normal);
+@mixin legacy-flex-gap communication__edit-actions, var(--padding-normal);
 @mixin legacy-flex-gap header__link--user, var(--padding-normal);
 @mixin legacy-flex-gap tag-list, var(--padding-small);
 @mixin legacy-flex-gap tagsinput, var(--padding-small);

assets/css/options/extra-interaction-info.css

@@ -0,0 +1,7 @@
+.interaction--optional {
+  display: inherit !important;
+}
+
+.media-box__header--link-row {
+  grid-template-columns: 0.5fr 1.5fr 1fr 1.5fr 1fr 1fr 1fr;
+}

assets/css/themes/dark-blue.css

@@ -78,6 +78,9 @@ $spoiler-color: #0f0f0f;
   --spoiler-color: $spoiler-color;
   --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
 
+  /* The invisible color */
+  --invisible-color: #00000000;
+
   /* Type (information category) colors */
   @mixin type-color success, $success-color;
   @mixin type-color warning, $warning-color;

assets/css/themes/dark-purple.css

@@ -78,6 +78,9 @@ $spoiler-color: #0f0f0f;
   --spoiler-color: $spoiler-color;
   --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
 
+  /* The invisible color */
+  --invisible-color: #00000000;
+
   /* Type (information category) colors */
   @mixin type-color success, $success-color;
   @mixin type-color warning, $warning-color;

assets/css/themes/light-blue.css

@@ -78,6 +78,9 @@ $spoiler-color: #0f0f0f;
   --spoiler-color: $spoiler-color;
   --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
 
+  /* The invisible color */
+  --invisible-color: #00000000;
+
   /* Type (information category) colors */
   @mixin type-color success, $success-color;
   @mixin type-color warning, $warning-color;

assets/css/views/communication.css

@@ -1,32 +1,42 @@
 .communication__toolbar {
+  display: flex;
+  flex-wrap: wrap;
   font-size: var(--font-size);
-  background: var(--secondary-color);
-  padding: 0 var(--padding-small);
+  background: var(--primary-dark-color);
+  padding: var(--padding-small);
   line-height: var(--block-header-height);
-  border: 1px solid var(--secondary-border-color);
-  border-bottom: 0;
-  box-sizing: border-box;
+  border-bottom: 1px solid var(--primary-border-color);
 }
 
 .communication__toolbar__button {
-  color: var(--text-color);
+  color: var(--text-color) !important;
   background: 0;
   border: 0;
-  padding: var(--padding-small);
+  border-radius: var(--border-radius-inner);
+  padding: 0 var(--padding-small);
 }
 
 .communication__toolbar__button:hover {
   background: var(--secondary-muted-color);
 }
 
-.communication-edit__actions {
+.communication__edit-tab {
+  border-radius: var(--border-radius-inner);
+  overflow: hidden;
+}
+
+.communication__edit-tab textarea {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.communication__edit-actions {
   display: flex;
   flex-direction: row;
   line-height: var(--block-header-height);
   border: 0;
-  margin: var(--padding-normal);
-  margin-top: 0;
-  gap: var(--padding-normal);
+  gap: var(--padding-small);
+  margin-top: var(--padding-small);
 }
 
 .communication__anonymous {

assets/css/views/interaction.css

@@ -6,6 +6,10 @@
     width: 1rem;
   }
 
+  .interaction--$(type).interaction--nohover:hover {
+    color: var(--$(type)-color) !important;
+  }
+
   .interaction--$(type).active,
   .interaction--$(type):hover {
     color: var(--text-color) !important;
@@ -13,6 +17,14 @@
   }
 }
 
+.interaction--optional {
+  display: none;
+}
+
+.interaction--nohover:hover {
+  background: 0 !important;
+}
+
 @mixin interaction-type fave;
 @mixin interaction-type upvote;
 @mixin interaction-type downvote;

lib/philomena_web/templates/admin/report/show.html.slime

@@ -4,7 +4,7 @@ p
 
 article.block.communication
   .block__content.flex.flex--no-wrap
-    = render PhilomenaWeb.CommunicationView, "_body.html", object: @report, body: @body, conn: @conn
+    = render PhilomenaWeb.CommunicationView, "_body.html", object: @report, body: @body, conn: @conn, name: "report"
 
   .block__content.communication__options
     .flex.flex--wrap.flex--spaced-out

lib/philomena_web/templates/communication/_body.html.slime

@@ -1,7 +1,7 @@
 elixir:
   anon = is_nil(assigns[:noanon]) or @noanon == false
   options = if is_nil(assigns[:options]), do: "", else: @options
-  deleted = Map.has_key?(@object, :hidden_from_users) and @object.hidden_from_users == true
+  deleted = if Map.has_key?(@object, :hidden_from_users), do: @object.hidden_from_users == true, else: false
   hidden_if_deleted = if deleted, do: "hidden", else: ""
   deleted_class = if deleted, do: "communication--deleted", else: ""
 
@@ -13,7 +13,6 @@ elixir:
     = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @object, conn: @conn
   - true ->
     = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: @object, conn: @conn, class: "avatar--small"
-
 - username = if anon do
   = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @object, awards: true, conn: @conn
 - else

lib/philomena_web/templates/conversation/message/_form.html.slime

@@ -1,7 +1,7 @@
 = form_for @changeset, ~p"/conversations/#{@conversation}/messages", fn f ->
   .block
-    .communication-edit__wrap
+    .communication__edit-wrap
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_icon: "pencil-alt", action_text: "Reply"
 
-    .block__content.communication-edit__actions
+    .block__content.communication__edit-actions
       = submit "Send", class: "button", autocomplete: "off", data: [disable_with: raw("Sending…")]

lib/philomena_web/templates/conversation/new.html.slime

@@ -38,5 +38,5 @@ h1 New Conversation
     div
       = render PhilomenaWeb.MarkdownView, "_input.html", changeset: @changeset, conn: @conn, f: fm, action_icon: "pencil-alt", action_text: "Compose"
 
-  .block__content.communication-edit__actions
+  .block__content.communication__edit-actions
     = submit "Send", class: "button", autocomplete: "off", data: [disable_with: "Sending..."]

lib/philomena_web/templates/image/_image_box.html.slime

@@ -23,16 +23,17 @@ elixir:
     .media-box__header--link-row
       a.interaction--fave href="#" rel="nofollow" data-image-id=@image.id
         i.fa.fa-star title="Fave!"
+      span.interaction--fave.interaction--nohover.interaction--optional.hidden--phone = shorten_number(@image.faves_count)
       a.interaction--upvote href="#" rel="nofollow" data-image-id=@image.id
         i.fa.fa-arrow-up title="Yay!"
-      span.score title="Score" data-image-id=@image.id = @image.score
+      span.score title="Score" data-image-id=@image.id = shorten_number(@image.score)
       a.interaction--downvote href="#" rel="nofollow" data-image-id=@image.id
         i.fa.fa-arrow-down title="Neigh!"
+      a.interaction--hide.interaction--optional.hidden--phone href="#" rel="nofollow" data-image-id=@image.id
+        i.fa.fa-eye-slash title="Hide"
       a.interaction--comment href="/#{@image.id}#comments" title="Comments"
         i.fa.fa-comments>
         = if @image.comments_count > 0 do
-          span.comments-count data-image-id=@image.id = @image.comments_count
-      /a.interaction--hide href="#" rel="nofollow" data-image-id=@image.id
-        i.fa.fa-eye-slash title="Hide"
+          span.comments-count data-image-id=@image.id = shorten_number(@image.comments_count)
   .media-box__content class=size_class
     = render PhilomenaWeb.ImageView, "_image_container.html", link: link, image: @image, size: @size, conn: @conn

lib/philomena_web/templates/image/comment/_form.html.slime

@@ -9,6 +9,6 @@
     div
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for above-rating stuff."
 
-    .block.communication-edit__actions
+    .block.communication__edit-actions
       => submit "Post", class: "button button--important button--success", data: [disable_with: raw("Posting…")]
       = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f

lib/philomena_web/templates/image/comment/edit.html.slime

@@ -4,12 +4,12 @@
       p Oops, something went wrong! Please check the errors below.
 
   .block
-    .communication-edit__wrap
+    .communication__edit-wrap
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for above-rating stuff."
 
     .block__content.field
       = text_input f, :edit_reason, class: "input input--wide", placeholder: "Reason for edit"
       = error_tag f, :edit_reason
 
-    .block__content.communication-edit__actions
+    .block__content.communication__edit-actions
       => submit "Edit", class: "button", data: [disable_with: raw("Posting…")]

lib/philomena_web/templates/image/description/_form.html.slime

@@ -3,7 +3,6 @@
     .alert.alert-danger
       p Oops, something went wrong! Please check the errors below.
 
-  = render PhilomenaWeb.MarkdownView, "_help.html", conn: @conn
   = render PhilomenaWeb.MarkdownView, "_toolbar.html", conn: @conn
 
   .field

lib/philomena_web/templates/image/new.html.slime

@@ -80,7 +80,7 @@
 
   .field
     .block
-      .communication-edit__wrap
+      .communication__edit-wrap
         = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_icon: "pencil-alt", action_text: "Description", placeholder: "Describe this image in plain words - this should generally be info about the image that doesn't belong in the tags or source.", name: :description, class: "js-image-descr-input", required: false
 
   = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f, label: "Post anonymously"

lib/philomena_web/templates/markdown/_help.html.slime

@@ -1,17 +0,0 @@
-.editor-syntax-reference
-  strong<> Syntax quick reference:
-
-  span
-    strong> **bold**
-    em> *italic*
-    span.spoiler> ||hide text||
-    code> `code`
-    ins> __underline__
-    del> ~~strike~~
-    sup> ^sup^
-    sub %sub%
-
-  p
-    a href="/pages/markdown"
-      i.fa.fa-question-circle>
-      strong Detailed syntax guide

lib/philomena_web/templates/markdown/_input.html.slime

@@ -6,21 +6,20 @@
 - is_required = assigns[:required]
 - input_classes = assigns[:class]
 .block__header.block__header--js-tabbed
-  a.selected href="#" data-click-tab="write"
+  a.button.selected href="#" data-click-tab="write"
     i.fa> class="fa-#{action_icon}"
     = action_text
 
-  a href="#" data-click-tab="preview"
-    i.fa.fa-cog.icon--padded.small.fa-spin.js-preview-loading.hidden> title=raw('Loading preview…')
-    i.fa.fa-eye.icon--padded.small.js-preview-idle>
+  a.button href="#" data-click-tab="preview"
+    i.fa.fa-cog.fa-spin.js-preview-loading.hidden> title=raw('Loading preview…')
+    i.fa.fa-eye.js-preview-idle>
     | Preview
 
-.block__tab.communication-edit__tab.selected.js-preview-input-wrapper data-tab="write"
-  = render PhilomenaWeb.MarkdownView, "_help.html", conn: @conn
+.block__tab.communication__edit-tab.selected.js-preview-input-wrapper data-tab="write"
   = render PhilomenaWeb.MarkdownView, "_toolbar.html", conn: @conn
 
   .field
     = textarea form, field_name, class: add_classes("input input--wide input--text input--resize-vertical js-toolbar-input js-preview-input", input_classes), placeholder: field_placeholder, required: required?(is_required)
     = error_tag form, field_name
 
-.block__tab.communication-edit__tab.hidden.js-preview-content data-tab="preview"
+.block__tab.block__content.communication__edit-tab.hidden.js-preview-content data-tab="preview"

lib/philomena_web/templates/markdown/_toolbar.html.slime

@@ -1,4 +1,4 @@
-.communication__toolbar.flex.flex--wrap
+.communication__toolbar
   button.communication__toolbar__button tabindex="-1" type="button" title="bold (ctrl+b)" data-syntax-id="bold"
     strong
       | B
@@ -23,14 +23,15 @@
   button.communication__toolbar__button tabindex="-1" type="button" title="subscript" data-syntax-id="subscript"
     sub
       | sub
-  .separator--vertical.separator--secondary
   button.communication__toolbar__button tabindex="-1" type="button" title="insert blockquote" data-syntax-id="quote"
     i.fa.fa-quote-right
   button.communication__toolbar__button tabindex="-1" type="button" title="insert hyperlink (ctrl+l)" data-syntax-id="link"
     i.fa.fa-link
   button.communication__toolbar__button tabindex="-1" type="button" title="insert image (ctrl+k)" data-syntax-id="image"
     i.fa.fa-image
-  .separator--vertical.separator--secondary
   button.communication__toolbar__button tabindex="-1" type="button" title="Text you want the parser to ignore" data-syntax-id="escape"
     span
       | escape
+  .flex__spacer
+  a.communication__toolbar__button href="/pages/markdown"
+    i.fa.fa-question-circle

lib/philomena_web/templates/message/_message.html.slime

@@ -14,10 +14,4 @@ article.block.communication
                   ' Approve
 
   .block__content.flex.flex--no-wrap
-    = render PhilomenaWeb.CommunicationView, "_body.html", object: %{user: @message.from}, noanon: true, body: @body, conn: @conn, name: "message"
-
-  .block__content.communication__options
-    .flex.flex--wrap.flex--spaced-out
-      div
-        ' Posted
-        = pretty_time(@message.created_at)
+    = render PhilomenaWeb.CommunicationView, "_body.html", object: %{user: @message.from, created_at: @message.created_at}, noanon: true, body: @body, conn: @conn, name: "message"

lib/philomena_web/templates/profile/description/edit.html.slime

@@ -17,5 +17,5 @@ h1 Updating Profile Description
     div
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_text: "About Me", placeholder: "Description (up to 10000 characters)", name: :description, required: false
 
-    .block.communication-edit__actions
+    .block.communication__edit-actions
       => submit "Update", class: "button button--important button--success"

lib/philomena_web/templates/profile/scratchpad/edit.html.slime

@@ -8,5 +8,5 @@ h1 Updating Moderation Scratchpad
     div
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_text: "Scratchpad", placeholder: "Scratchpad Contents", name: :scratchpad, required: false
 
-    .block.communication-edit__actions
+    .block.communication__edit-actions
       => submit "Update", class: "button button--important button--success"

lib/philomena_web/templates/topic/new.html.slime

@@ -14,7 +14,7 @@
     = inputs_for f, :posts, fn fp ->
         = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: fp, action_icon: "pencil-alt", action_text: "First Post", placeholder: "Please read the site rules before posting and use ||spoilers|| for NSFW stuff in SFW forums."
 
-    .block__content.communication-edit__wrap
+    .block__content.communication__edit-wrap
       = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f, label: "Post anonymously"
 
       = inputs_for f, :poll, fn fp ->
@@ -24,5 +24,5 @@
           .toggle-box-container
             = render PhilomenaWeb.Topic.PollView, "_form.html", Map.put(assigns, :f, fp)
 
-    .block__content.communication-edit__actions
+    .block__content.communication__edit-actions
       = submit "Post", class: "button", data: [disable_with: raw("Posting…")]

lib/philomena_web/templates/topic/post/_form.html.slime

@@ -7,7 +7,7 @@
     div
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for NSFW stuff in SFW forums."
 
-    .block__content.communication-edit__actions
+    .block__content.communication__edit-actions
       => submit "Post", class: "button", data: [disable_with: raw("Posting…")]
 
       = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f

lib/philomena_web/templates/topic/post/edit.html.slime

@@ -4,7 +4,7 @@
       p Oops, something went wrong! Please check the errors below.
 
   .block
-    .communication-edit__wrap
+    .communication__edit-wrap
       .field
         = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for NSFW stuff in SFW forums."
 
@@ -12,5 +12,5 @@
         = text_input f, :edit_reason, class: "input input--wide", placeholder: "Reason for edit"
         = error_tag f, :edit_reason
 
-    .block__content.communication-edit__actions
+    .block__content.communication__edit-actions
       => submit "Edit", class: "button", data: [disable_with: raw("Posting…")]

lib/philomena_web/views/app_view.ex

@@ -258,4 +258,9 @@ defmodule PhilomenaWeb.AppView do
   def get_flash(_, _key), do: %{}
 
   def site_name, do: gettext("Philomena Site")
+
+  def shorten_number(n) when n >= 1_000_000_000, do: "#{Float.floor(n / 1_000_000_000, 1)}B"
+  def shorten_number(n) when n >= 1_000_000, do: "#{Float.floor(n / 1_000_000, 1)}M"
+  def shorten_number(n) when n >= 1_000, do: "#{Float.floor(n / 1_000, 1)}K"
+  def shorten_number(n), do: n
 end

priv/repo/seeds/pages/rules.md

@@ -0,0 +1 @@
+PLACEHOLDER