further work

assets/css/application.css

@@ -39,6 +39,7 @@
 
 /* Style elements specific to certain pages. */
 @import "views/admin";
+@import "views/approval";
 @import "views/burger";
 @import "views/communication";
 @import "views/footer";

assets/css/common/measurements.css

@@ -19,11 +19,14 @@ $font-family-monospace: "Droid Sans Mono", monospace;
 
   --navbar-size: 4rem;
   --navbar-secondary-size: 2.5rem;
-  --navbar-avatar-size: 2.5rem;
   --navbar-input-size: 2rem;
   --navbar-input-width: 18vw;
   --navbar-input-max-width: 22rem;
 
+  --avatar-navbar-size: 2.5rem;
+  --avatar-small-size: 6rem;
+  --avatar-large-size: 8rem;
+
   --button-height: 2rem;
   --button-group-height: 2rem;
   --button-group-tall-height: 2.5rem;
@@ -37,6 +40,7 @@ $font-family-monospace: "Droid Sans Mono", monospace;
   --border-radius-outer: 0.35rem;
   --border-radius-inner: 0.25rem;
   --border-radius-tag: 0.2rem;
+  --border-radius-avatar: 100%;
 
   --media-container-width: 225px;
   --media-tiny-container-width: 50px;

assets/css/elements/avatar.css

@@ -1,6 +1,21 @@
-.avatar--navbar {
+@define-mixin avatar-size $size {
-  width: var(--navbar-avatar-size);
+  .avatar--$(size) {
-  height: var(--navbar-avatar-size);
+    width: var(--avatar-$(size)-size);
-  border-radius: 100%;
+    height: var(--avatar-$(size)-size);
-  overflow: hidden;
+    border-radius: var(--border-radius-avatar);
+    overflow: hidden;
+  }
+
+  .avatar--$(size) img {
+    max-width: var(--avatar-$(size)-size);
+    height: var(--avatar-$(size)-size);
+  }
 }
+
+.avatar--square {
+  border-radius: 0;
+}
+
+@mixin avatar-size navbar;
+@mixin avatar-size small;
+@mixin avatar-size large;

assets/css/elements/base.css

@@ -31,6 +31,10 @@ a:hover {
   color: var(--link-hover-color);
 }
 
+hr {
+  border-color: var(--primary-border-color);
+}
+
 .hidden {
   display: none !important;
 }

assets/css/elements/block.css

@@ -23,6 +23,10 @@
   .block--$(type) a:hover {
     color: var(--link-hover-color);
   }
+
+  .block--$(type) hr {
+    border-color: var(--$(type)-border-color);
+  }
 }
 
 .block {
@@ -43,7 +47,11 @@
   border-radius: 0;
 }
 
-.block__content {
+.block--borderless .block__header {
+  padding: 0;
+}
+
+.block__content, .block__tab {
   border: 1px solid var(--primary-border-color);
   border-radius: var(--border-radius-outer);
   padding: var(--padding-normal);
@@ -127,11 +135,18 @@
 .block__header--js-tabbed {
   display: flex;
   padding: 0;
+  gap: var(--padding-normal);
+}
+
+@mixin if-mobile {
+  .block__header--js-tabbed {
+    gap: 0;
+    justify-content: space-between;
+  }
 }
 
 .block__header--js-tabbed a {
   display: block;
-  color: var(--text-color);
   padding: 0 var(--padding-normal);
 }
 

assets/css/elements/button.css

@@ -58,6 +58,16 @@
   margin-right: var(--padding-small);
 }
 
+@mixin if-phone {
+  .button > i {
+    margin-right: 0;
+  }
+
+  .button > span {
+    margin-left: var(--padding-small);
+  }
+}
+
 .button--important {
   background: var(--primary-color);
   box-shadow: 0 -1px var(--primary-dark-color) inset;
@@ -132,6 +142,8 @@
   background: var(--primary-muted-color);
 }
 
+@mixin button-type primary;
+@mixin button-type secondary;
 @mixin button-type success;
 @mixin button-type warning;
 @mixin button-type danger;

assets/css/elements/media.css

@@ -128,12 +128,12 @@
   max-width: 100%;
 }
 
-.media-tiny-container {
+.media-tiny-container, .media-tiny-container img {
   width: var(--media-tiny-container-width);
   height: var(--media-tiny-container-width);
 }
 
-.thumb_tiny {
+.thumb_tiny, .thumb_tiny img {
   max-width: var(--media-tiny-container-width);
   max-height: var(--media-tiny-container-width);
 }

assets/css/options/wide-searchbar.css

@@ -0,0 +1,12 @@
+:root {
+  --navbar-input-width: 100%;
+  --navbar-input-max-width: 100%;
+}
+
+form.header__search {
+  flex: 1 0 auto;
+}
+
+header > .flex__grow {
+  display: none;
+}

assets/css/themes/dark-blue.css

@@ -53,6 +53,7 @@ $spoiler-color: #0f0f0f;
   --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 10));
   --primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 10));
   --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 20));
+  --primary-link-color: var(--link-color); /* for consistency */
 
   --secondary-color: $secondary-color;
   --secondary-border-color: hsl(from $secondary-color h s calc(l + 10));

assets/css/themes/light-blue.css

@@ -53,6 +53,7 @@ $spoiler-color: #0f0f0f;
   --primary-border-color: hsl(from $primary-color h calc(s + 20) calc(l - 30));
   --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 10));
   --primary-dark-color: hsl(from $primary-color h calc(s - 10) calc(l + 30));
+  --primary-link-color: var(--link-color); /* for consistency */
 
   --secondary-color: $secondary-color;
   --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));

assets/css/views/staff.css

@@ -23,7 +23,10 @@
 .profile-block {
   display: inline-block;
   vertical-align: top;
-  b { display: block; }
+}
+
+.profile-block b {
+  display: block;
 }
 
 .staff-block__description {

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

@@ -1,8 +1,9 @@
+.separator--vertical.separator--secondary
+
 = if present?(@conn.params["hidden"]) do
   a href=@route.(Keyword.delete(@params, :hidden)) title="Hide Hidden Images"
     i.fa.fa-eye-slash>
     span.hidden--mobile Hide Hidden
-
 - else
   a href=@route.(Keyword.put(@params, :hidden, "1")) title="Show Hidden Images"
     i.fa.fa-eye-slash>

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

@@ -2,22 +2,25 @@
 
 #image_options_area
   .block__header.block__header--js-tabbed
-    a href="#" data-click-tab="reporting" data-load-tab=Routes.image_reporting_path(@conn, :show, @image)
+    a.button.button--primary href="#" data-click-tab="reporting" data-load-tab=Routes.image_reporting_path(@conn, :show, @image)
       i.fa.fa-exclamation-triangle>
       | Report
-    a href="#" data-click-tab="sharing"
+    a.button.button--primary href="#" data-click-tab="sharing"
       i.fa.fa-share>
       | Share
-    a href="#" data-click-tab="favoriters" data-load-tab=Routes.image_favorite_path(@conn, :index, @image)
+    a.button.button--primary href="#" data-click-tab="favoriters" data-load-tab=Routes.image_favorite_path(@conn, :index, @image)
       i.fa.fa-star>
-      | List favoriters
+      span.hidden--phone
+        | List favoriters
+      span.hidden--desktop.hidden--tablet
+        | Faves
     = if display_mod_tools? and not hide_staff_tools?(@conn) do
-      a href="#" data-click-tab="replace"
+      a.button.button--danger href="#" data-click-tab="replace"
-        i.fa.fa-upload>
+        i.fa.fa-upload
-        | Replace
+        span.hidden--phone Replace
-      a href="#" data-click-tab="administration"
+      a.button.button--warning href="#" data-click-tab="administration"
-        i.fa.fa-toolbox>
+        i.fa.fa-toolbox
-        | Manage
+        span.hidden--phone Manage
         = if present?(@image.scratchpad) do
           i.fa.fa-sticky-note.fa--important<
           i.fa.fa-exclamation.fa--important

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

@@ -24,7 +24,6 @@ elixir:
     .flex__row
       .button__group--standalone
         = random_button @conn, params
-        .separator--vertical.separator--secondary
         = hidden_toggle @conn, route, params
       = deleted_toggle @conn, route, params
       = if can?(@conn, :batch_update, Tag) do

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

@@ -15,7 +15,7 @@ article.block.communication
 
   .block__content.flex.flex--no-wrap
     .flex__fixed.spacing--right
-      = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @message.from}, conn: @conn, class: "avatar--100px"
+      = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @message.from}, conn: @conn, class: "avatar--small"
 
     .flex__grow.communication__body
 

lib/philomena_web/templates/profile/show.html.slime

@@ -1,6 +1,6 @@
 .profile-top
   .profile-top__avatar
-    - avatar = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @user}, class: "avatar--125px"
+    - avatar = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @user}, class: "avatar--large"
     = if current?(@user, @conn.assigns.current_user) do
       = link avatar, to: Routes.avatar_path(@conn, :edit, profile: true), title: "Change avatar"
     - else

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

@@ -38,7 +38,7 @@ h1 Staff
               .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"
+                    = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: user}, class: "avatar--large"
                     p
                       b = user.name
                 .staff-block__info

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

@@ -1,4 +1,4 @@
 = if !!@object.user and !anonymous?(@object) do
-  = user_avatar(@object, assigns[:class] || "avatar--100px")
+  = user_avatar(@object, assigns[:class] || "avatar--small")
 - else
-  = anonymous_avatar(anonymous_name(@object), assigns[:class] || "avatar--100px")
+  = anonymous_avatar(anonymous_name(@object), assigns[:class] || "avatar--small")

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

@@ -1,2 +1,2 @@
 = if !!@object.user do
-  = user_avatar(@object, assigns[:class] || "avatar--100px")
+  = user_avatar(@object, assigns[:class] || "avatar--small")

lib/philomena_web/views/user_attribution_view.ex

@@ -40,7 +40,7 @@ defmodule PhilomenaWeb.UserAttributionView do
     end
   end
 
-  def anonymous_avatar(name, class \\ "avatar--100px") do
+  def anonymous_avatar(name, class \\ "avatar--small") do
     class = Enum.join(["image-constrained", class], " ")
 
     content_tag :div, class: class do
@@ -48,7 +48,7 @@ defmodule PhilomenaWeb.UserAttributionView do
     end
   end
 
-  def user_avatar(object, class \\ "avatar--100px")
+  def user_avatar(object, class \\ "avatar--small")
 
   def user_avatar(%{user: nil} = object, class),
     do: anonymous_avatar(anonymous_name(object), class)