work on buttons and tags

assets/css/application.scss

@@ -45,6 +45,7 @@ $fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
 @import "~views/communication";
 @import "~views/footer";
 @import "~views/header";
+@import "~views/image";
 @import "~views/markdown";
 @import "~views/metabar";
 @import "~views/pagination";

assets/css/common/_measurements.scss

@@ -24,14 +24,19 @@ $font-family-monospace: "Droid Sans Mono", monospace;
   --navbar-input-width: 18vw;
   --navbar-input-max-width: 22rem;
 
+  --button-height: 2rem;
   --button-group-height: 2rem;
   --button-group-tall-height: 2.5rem;
   --button-group-small-height: 1.5rem;
 
+  --tag-height: calc(1em * 2);
+  --tag-border-width: 0;
+
   --column-left-width: 360px;
 
   --border-radius-outer: 0.35rem;
   --border-radius-inner: 0.25rem;
+  --border-radius-tag: 0.2rem;
 
   --media-container-width: 225px;
   --media-tiny-container-width: 50px;
@@ -54,6 +59,7 @@ $font-family-monospace: "Droid Sans Mono", monospace;
   --font-size: 14px;
   --font-tiny-size: 12px;
   --font-header-size: 16px;
+  --font-icon-size: 2rem;
   --font-h1-size: 1.75rem;
   --font-h2-size: 1.5rem;
   --font-h3-size: 1.35rem;

assets/css/elements/_block.scss

@@ -85,6 +85,7 @@
   line-height: var(--block-header-height);
   padding: 0 var(--padding-normal);
   font-size: var(--font-header-size);
+  margin-bottom: var(--padding-small);
 
   & > .fa {
     margin-right: var(--padding-normal);
@@ -100,6 +101,14 @@
   color: var(--link-color) !important;
 }
 
+.block__header__buttons {
+  display: flex;
+  gap: var(--padding-normal);
+  line-height: var(--block-header-height);
+  font-size: var(--font-size);
+  padding: 0 var(--padding-normal);
+}
+
 .block--fixed {
   padding: var(--padding-normal);
   border-radius: var(--border-radius-inner);

assets/css/elements/_button.scss

@@ -1,14 +1,17 @@
 @mixin button-type($type) {
   .button--#{$type} {
+    color: var(--#{$type}-link-color) !important;
     border-color: var(--#{$type}-border-color);
+    background: var(--#{$type}-dark-color);
 
     &.button--important {
-      background: var(--#{$type}-color) !important;
+      color: var(--text-color) !important;
+      background: var(--#{$type}-color);
       box-shadow: 0 -1px var(--#{$type}-dark-color) inset;
     }
 
-    &.button:hover {
-      background: var(--#{$type}-dark-color) !important;
+    &:hover {
+      background: var(--#{$type}-muted-color) !important;
     }
   }
 
@@ -30,25 +33,31 @@
 
 .button {
   @include animated-transition;
-  display: block;
+  display: flex;
+  flex: 0 1 auto;
   width: fit-content;
   font-weight: bold;
-  background: var(--background-color);
-  color: var(--text-color) !important;
-  font-size: var(--padding-normal);
-  padding: var(--padding-small);
+  font-size: var(--font-size);
+  background: var(--primary-dark-color);
+  color: var(--text-color);
   border: 1px solid var(--primary-border-color);
   border-radius: var(--border-radius-inner);
-  box-sizing: border-box;
+  padding: 0 var(--padding-small);
   overflow: hidden;
+  line-height: var(--button-height);
+  align-items: center;
 
   &:hover {
     @include animated-transition;
-    background: var(--primary-dark-color);
+    background: var(--primary-muted-color);
     cursor: pointer;
   }
 }
 
+.button > i {
+  margin-right: var(--padding-small);
+}
+
 .button--important {
   background: var(--primary-color);
   box-shadow: 0 -1px var(--primary-dark-color) inset;
@@ -116,6 +125,16 @@
   border-width: 0;
 }
 
+.block__header__buttons .button {
+  color: var(--link-color);
+  border-width: 0 !important;
+  background: 0;
+
+  &:hover {
+    background: var(--primary-muted-color);
+  }
+}
+
 @include button-type(success);
 @include button-type(warning);
 @include button-type(danger);

assets/css/views/_image.scss

@@ -0,0 +1,17 @@
+.image-description {
+  margin-top: var(--padding-normal);
+}
+
+.image_sources {
+  display: grid;
+  grid-template-columns: var(--font-icon-size) auto;
+  gap: var(--padding-small);
+}
+
+.image_source__icon, .image_source__link {
+  overflow: hidden;
+}
+
+.image_source__icon {
+  justify-self: center;
+}

assets/css/views/_pagination.scss

@@ -14,13 +14,17 @@
 
 .pagination a {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto;
   gap: var(--padding-tiny);
   align-items: center;
   padding: 0 var(--padding-small);
   font-weight: bold;
 }
 
+.pagination .with-icon {
+  grid-template-columns: auto auto;
+}
+
 .page__info {
   align-self: center;
 }

assets/css/views/_tag.scss

@@ -21,18 +21,18 @@
 .tag-list {
   @extend .flex__row;
   flex-wrap: wrap;
+  gap: var(--padding-small);
   margin-bottom: var(--padding-normal);
 }
 
 .tag {
   display: inline-table;
   width: fit-content;
-  line-height: var(--padding-large);
-  margin-right: var(--padding-small);
-  margin-bottom: var(--padding-small);
+  line-height: var(--tag-height);
   color: var(--tag-default-text-color);
   background: var(--tag-default-color);
-  border: 1px solid var(--tag-default-border-color);
+  border-radius: var(--border-radius-tag);
+  border: var(--tag-border-width) solid var(--tag-default-border-color);
   font-weight: bold;
 
   a {
@@ -70,6 +70,9 @@
   background: var(--tag-default-border-color);
   color: var(--text-color);
   padding: 0 var(--padding-small);
+  overflow: hidden;
+  border-top-right-radius: var(--border-radius-tag);
+  border-bottom-right-radius: var(--border-radius-tag);
 }
 
 .tag__dropdown__link {
@@ -86,3 +89,15 @@
   font-size: var(--font-tiny-size);
   text-align: center;
 }
+
+.tag-info__controls {
+  display: flex;
+}
+
+.tag-info__controls > .tag {
+  margin-right: var(--padding-normal);
+}
+
+.js-imagelist-info {
+  margin-bottom: var(--padding-normal);
+}

lib/philomena_web/templates/admin/approval/_approvals.html.slime

@@ -26,9 +26,9 @@
           span = pretty_time(image.created_at)
         .approval-items--footer
           = if can?(@conn, :approve, image) do
-            = button_to "Approve", Routes.image_approve_path(@conn, :create, image), method: "post", class: "button button--state-success"
+            = button_to "Approve", Routes.image_approve_path(@conn, :create, image), method: "post", class: "button button--success"
           = if can?(@conn, :hide, image) do
             = form_for :image, Routes.image_delete_path(@conn, :create, image), [method: "post"], fn f ->
               .field.field--inline
                 = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Rule violation", required: true
-                = submit "Delete", class: "button button--state-danger button--separate-left"
+                = submit "Delete", class: "button button--danger button--separate-left"

lib/philomena_web/templates/admin/user/force_filter/new.html.slime

@@ -6,4 +6,4 @@ h1
   .field
     => text_input f, :forced_filter_id, placeholder: "Filter ID", class: "input", required: true
   .field
-    = submit "Force", class: "button button--state-primary"
+    = submit "Force", class: "button button--primary"

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

@@ -27,7 +27,7 @@ elixir:
             => select f, :sd, ["Descending": "desc", "Ascending": "asc"], class: "input"
 
           .field
-          = submit "Search", class: "button button--state-primary"
+          = submit "Search", class: "button button--primary"
     .block
       .block__header
         a href="/galleries/new" title="Create Gallery"

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

@@ -98,32 +98,32 @@
           = label f, :deletion_reason, "Deletion reason (cannot be empty)"
           .field.field--inline
             = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Rule violation", required: true
-            = submit "Delete", class: "button button--state-danger button--separate-left"
+            = submit "Delete", class: "button button--danger button--separate-left"
       - else
         = form_for @changeset, Routes.image_delete_path(@conn, :update, @image), [method: "put"], fn f ->
           = label f, :deletion_reason, "Deletion reason (cannot be empty)"
           .field.field--inline
             = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Rule violation", required: true
-            = submit "Change hide reason", class: "button button--state-danger button--separate-left"
+            = submit "Change hide reason", class: "button button--danger button--separate-left"
 
       .flex.flex--spaced-out.flex--wrap
         = if not @image.hidden_from_users do
           = form_for @changeset, Routes.image_feature_path(@conn, :create, @image), [method: "post"], fn _f ->
             .field
               p Marks the image as featured
-              = submit "Feature", data: [confirm: "Are you really, really sure?"], class: "button button--state-success"
+              = submit "Feature", data: [confirm: "Are you really, really sure?"], class: "button button--success"
         - else
-          = button_to "Restore", Routes.image_delete_path(@conn, :delete, @image), method: "delete", class: "button button--state-success"
+          = button_to "Restore", Routes.image_delete_path(@conn, :delete, @image), method: "delete", class: "button button--success"
 
         = form_for @changeset, Routes.image_repair_path(@conn, :create, @image), [method: "post"], fn _f ->
           .field
-            = submit "Repair", class: "button button--state-success"
+            = submit "Repair", class: "button button--success"
 
         = form_for @changeset, Routes.image_hash_path(@conn, :delete, @image), [method: "delete"], fn _f ->
           .field
             p Allows reuploading the image
             .flex.flex--end-bunched
-              = submit "Clear hash", data: [confirm: "Are you really, really sure?"], class: "button button--state-danger"
+              = submit "Clear hash", data: [confirm: "Are you really, really sure?"], class: "button button--danger"
 
       br
       .flex.flex--spaced-out
@@ -146,6 +146,6 @@
       .flex.flex--spaced-out
         = link "Lock specific tags", to: Routes.image_tag_lock_path(@conn, :show, @image), class: "button"
         = if not @image.approved and can?(@conn, :approve, @image) do
-          = button_to "Approve image", Routes.image_approve_path(@conn, :create, @image), method: "post", class: "button button--state-success", data: [confirm: "Are you sure?"]
+          = button_to "Approve image", Routes.image_approve_path(@conn, :create, @image), method: "post", class: "button button--success", data: [confirm: "Are you sure?"]
         = if @image.hidden_from_users and can?(@conn, :destroy, @image) do
-          = button_to "Destroy image", Routes.image_destroy_path(@conn, :create, @image), method: "post", class: "button button--state-danger", data: [confirm: "This action is IRREVERSIBLE. Are you sure?"]
+          = button_to "Destroy image", Routes.image_destroy_path(@conn, :create, @image), method: "post", class: "button button--danger", data: [confirm: "This action is IRREVERSIBLE. Are you sure?"]

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

@@ -62,7 +62,7 @@
             | )
         = if can?(@conn, :hide, @image) and not hide_staff_tools?(@conn) do
           = form_for @changeset, Routes.image_source_history_path(@conn, :delete, @image), [method: "delete"], fn _f ->
-            a.button.button--state-danger.button--inline type="submit" data-confirm="Are you really, really sure?" title="Wipe sources"
+            a.button.button--danger.button--inline type="submit" data-confirm="Are you really, really sure?" title="Wipe sources"
               i.fas.fa-eraser>
               ' Wipe
     .block__content.flex.flex--wrap.flex--column

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

@@ -24,6 +24,7 @@ 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/image/new.html.slime

@@ -67,9 +67,9 @@
     = render PhilomenaWeb.TagView, "_tag_editor.html", f: f, name: :tag_input, type: :upload
     = error_tag f, :tag_input
 
-    button.button.button--state-success.button--separate-left.button--bold id="tagsinput-save" type="button" title="This button saves the tags listed above to your browser, allowing you to retrieve them again by clicking the Load button" Save
-    button.button.button--state-warning.button--separate-left.button--bold id="tagsinput-load" type="button" title="This button loads any saved tags from your browser" Load
-    button.button.button--state-danger.button--separate-left.button--bold id="tagsinput-clear" type="button" title="This button will clear the list of tags above" Clear
+    button.button.button--success.button--separate-left.button--bold id="tagsinput-save" type="button" title="This button saves the tags listed above to your browser, allowing you to retrieve them again by clicking the Load button" Save
+    button.button.button--warning.button--separate-left.button--bold id="tagsinput-load" type="button" title="This button loads any saved tags from your browser" Load
+    button.button.button--danger.button--separate-left.button--bold id="tagsinput-clear" type="button" title="This button will clear the list of tags above" Clear
 
     p You can mouse over tags below to view a description, and click to add. Short tag names can be used and will expand to full.
 

lib/philomena_web/templates/pagination/_pagination.html.slime

@@ -3,11 +3,11 @@
 = if @page.total_pages > 1 do
   nav.pagination.hidden--mobile
     = if not first_page?(@page) do
-      = link to: first_page_path(@page, @route, params) do
+      = link to: first_page_path(@page, @route, params), class: "with-icon" do
         i.fa.fa-backward>
         ' First
       .separator--vertical.separator--secondary
-      = link to: prev_page_path(@page, @route, params), class: "js-prev" do
+      = link to: prev_page_path(@page, @route, params), class: "js-prev with-icon" do
         i.fa.fa-chevron-left>
         ' Prev
       .separator--vertical.separator--secondary
@@ -30,11 +30,11 @@
 
     = if not last_page?(@page) do
       .separator--vertical.separator--secondary
-      = link to: next_page_path(@page, @route, params), class: "js-next" do
+      = link to: next_page_path(@page, @route, params), class: "js-next with-icon" do
         ' Next
         i.fa.fa-chevron-right
       .separator--vertical.separator--secondary
-      = link to: last_page_path(@page, @route, params) do
+      = link to: last_page_path(@page, @route, params), class: "with-icon" do
         ' Last
         i.fa.fa-fast-forward
 
@@ -49,10 +49,10 @@
         ' Prev
       .separator--vertical.separator--secondary
     - else
-      = link to: first_page_path(@page, @route, params) do
+      = link to: first_page_path(@page, @route, params), class: "with-icon" do
         i.fa.fa-backward>
         ' First
-      = link to: prev_page_path(@page, @route, params), class: "js-prev" do
+      = link to: prev_page_path(@page, @route, params), class: "js-prev with-icon" do
         i.fa.fa-chevron-left>
         ' Prev
 
@@ -89,10 +89,10 @@
         i.fa.fa-fast-forward
     - else
       .separator--vertical.separator--secondary
-      = link to: next_page_path(@page, @route, params), class: "js-next" do
+      = link to: next_page_path(@page, @route, params), class: "js-next with-icon" do
         ' Next
         i.fa.fa-chevron-right
       .separator--vertical.separator--secondary
-      = link to: last_page_path(@page, @route, params) do
+      = link to: last_page_path(@page, @route, params), class: "with-icon" do
         ' Last
         i.fa.fa-fast-forward

lib/philomena_web/templates/search/_form.html.slime

@@ -120,7 +120,7 @@ h1 Search
       = PhilomenaWeb.TagView.quick_tags(@conn)
 
   .field.field--inline.flex-wrap
-    = submit "Search", class: "button button--state-primary"
+    = submit "Search", class: "button button--primary"
     /= submit_tag "I'm Feeling Poni", class: 'button button--separate-left spacing-right', name: 'random_image'
 
     elixir:

lib/philomena_web/templates/tag/_tag_editor.html.slime

@@ -10,8 +10,8 @@ elixir:
   = textarea @f, @name, html_options
   .js-taginput.input.input--wide.tagsinput.hidden class="js-taginput-fancy" data-click-focus=".js-taginput-input.js-taginput-#{@name}"
     input.input class="js-taginput-input js-taginput-#{@name}" id="taginput-fancy-#{@name}" type="text" placeholder="add a tag" autocomplete="off" autocapitalize="none" data-ac="true" data-ac-min-length="3" data-ac-source="/autocomplete/tags?term="
-button.button.button--state-primary.button--bold class="js-taginput-show" data-click-show=".js-taginput-fancy,.js-taginput-hide" data-click-hide=".js-taginput-plain,.js-taginput-show" data-click-focus=".js-taginput-input.js-taginput-#{@name}"
+button.button.button--primary.button--bold class="js-taginput-show" data-click-show=".js-taginput-fancy,.js-taginput-hide" data-click-hide=".js-taginput-plain,.js-taginput-show" data-click-focus=".js-taginput-input.js-taginput-#{@name}"
   = hidden_input :fuck_ie, :fuck_ie, value: "fuck_ie"
   ' Fancy Editor
-button.hidden.button.button--state-primary.button--bold class="js-taginput-hide" data-click-show=".js-taginput-plain,.js-taginput-show" data-click-hide=".js-taginput-fancy,.js-taginput-hide" data-click-focus=".js-taginput-plain.js-taginput-#{@name}"
+button.hidden.button.button--primary.button--bold class="js-taginput-hide" data-click-show=".js-taginput-plain,.js-taginput-show" data-click-hide=".js-taginput-fancy,.js-taginput-hide" data-click-focus=".js-taginput-plain.js-taginput-#{@name}"
   ' Plain Editor

lib/philomena_web/templates/tag/_tag_info_row.html.slime

@@ -6,13 +6,14 @@
       | no spoiler image
 
   .flex__grow
-    = render PhilomenaWeb.TagView, "_tag.html", tag: @tag, conn: @conn
-    .flex__row
+    .tag-info__controls 
+      = render PhilomenaWeb.TagView, "_tag.html", tag: @tag, conn: @conn
       .button__group--standalone
         = link "Tag changes", to: Routes.tag_tag_change_path(@conn, :index, @tag), class: "detail-link"
       = if manages_tags?(@conn) do
         .button__group--standalone.button__group--warning
           = link "Edit details", to: Routes.tag_path(@conn, :edit, @tag), class: "detail-link"
+          .separator--vertical.separator--warning
           = link "Usage", to: Routes.tag_detail_path(@conn, :index, @tag), class: "detail-link"
       = if manages_dnp?(@conn) do
         .button__group--standalone.button__group--danger

lib/philomena_web/templates/tag/edit.html.slime

@@ -35,7 +35,7 @@ p = link "Edit image", to: Routes.tag_image_path(@conn, :edit, @tag)
     = render PhilomenaWeb.TagView, "_tag_editor.html", f: f, name: :implied_tag_list, type: :edit, conn: @conn
 
   br
-  = submit "Save Tag", class: "button button--state-primary"
+  = submit "Save Tag", class: "button button--primary"
 
 br
 br
@@ -47,7 +47,7 @@ br
       = button_to "Rebuild index", Routes.tag_reindex_path(@conn, :create, @tag), method: "post", class: "button", data: [confirm: "Are you really, really sure?", disable_with: raw("Reindexing…")]
       p Use this if the tag displays the wrong number of images or returns the wrong search results.
 
-      = button_to "Destroy tag", Routes.tag_path(@conn, :delete, @tag), method: "delete", class: "button button--state-danger", data: [confirm: "Are you really, really sure?", disable_with: raw("Deleting…")]
+      = button_to "Destroy tag", Routes.tag_path(@conn, :delete, @tag), method: "delete", class: "button button--danger", data: [confirm: "Are you really, really sure?", disable_with: raw("Deleting…")]
       p
         strong Irreversible. Use with extreme caution!
       ul

lib/philomena_web/templates/topic/poll/_display.html.slime

@@ -31,6 +31,6 @@
   .block__tab.hidden data-tab="voters"
     p Loading…
   .block__tab.hidden data-tab="administration"
-    a.button.button--state-warning.js-staff-action> href=Routes.forum_topic_poll_path(@conn, :edit, @forum, @topic)
+    a.button.button--warning.js-staff-action> href=Routes.forum_topic_poll_path(@conn, :edit, @forum, @topic)
       i.fa.fa-edit>
       | Edit

lib/philomena_web/templates/topic/poll/_vote_form.html.slime

@@ -19,6 +19,6 @@
       ' Voting ends
       = pretty_time(@poll.active_until)
 
-  button.button.button--state-success>
+  button.button.button--success>
     i.fa.fa-check>
     ' Vote