diff --git a/assets/css/elements/button.css b/assets/css/elements/button.css index 86aed756..8c1ac3fa 100644 --- a/assets/css/elements/button.css +++ b/assets/css/elements/button.css @@ -5,6 +5,10 @@ background: var(--$(type)-muted-color); } + .button--$(type) a { + color: var(--$(type)-link-color); + } + .button--$(type).button--important { color: var(--text-color) !important; background: var(--$(type)-color); @@ -61,10 +65,6 @@ } @mixin if-phone { - .button > i { - margin-right: 0; - } - .button > span { margin-left: var(--padding-small); } diff --git a/assets/css/views/communication.css b/assets/css/views/communication.css index ee6bb5ba..c3dfe66e 100644 --- a/assets/css/views/communication.css +++ b/assets/css/views/communication.css @@ -52,7 +52,6 @@ } .communication > .block__content:last-of-type { - background: var(--primary-muted-color); border-top-left-radius: 0; border-top-right-radius: 0; } @@ -81,6 +80,25 @@ padding: var(--padding-small); } +.communication__options__staff { + display: flex; + align-items: center; + gap: var(--padding-normal); + margin-top: var(--padding-small); +} + +.communication__options__post-time { + display: flex; + align-items: center; + gap: var(--padding-small); + flex-wrap: wrap; +} + +.communication__options__edit-time { + width: 100%; + margin-bottom: var(--padding-small); +} + @mixin if-mobile { .communication__body__text { margin-top: var(--padding-normal); @@ -96,47 +114,7 @@ min-height: var(--avatar-small-size); min-width: var(--avatar-small-size); } -} -.communication__interaction { - display: inline-block; - background: var(--secondary-muted-color); - color: var(--secondary-link-color) !important; - padding: var(--padding-tiny); - border-radius: var(--border-radius-inner); - margin-left: var(--padding-small); -} - -.communication__interaction:first-child { - margin: 0; -} - -.communication__info { - display: inline-block; - background: var(--information-muted-color); - padding: var(--padding-tiny); - border-radius: var(--border-radius-inner); - margin-left: var(--padding-small); -} - -.communication__info > a { - color: var(--information-link-color); -} - -.togglable-delete-form, .togglable-delete-form-link { - margin-top: var(--padding-small) !important; -} - -.togglable-delete-form-link { - background: var(--danger-muted-color); - color: var(--danger-link-color) !important; -} - -.owner-options { - margin-left: var(--padding-small); -} - -@mixin if-mobile { .communication__options > *:first-child { display: flex; flex-direction: column; diff --git a/assets/css/views/metabar.css b/assets/css/views/metabar.css index a6a85444..485afd11 100644 --- a/assets/css/views/metabar.css +++ b/assets/css/views/metabar.css @@ -66,15 +66,13 @@ .metabar__user-credit { display: flex; - box-sizing: border-box; + flex-direction: row; gap: var(--padding-small); } .metabar__user-credit .image_uploader { display: flex; - align-self: center; align-items: center; - vertical-align: center; gap: var(--padding-small); } diff --git a/assets/css/views/user.css b/assets/css/views/user.css index fabf7dbe..bccce954 100644 --- a/assets/css/views/user.css +++ b/assets/css/views/user.css @@ -1,6 +1,5 @@ .badges { - display: grid; - grid-template-columns: repeat(6, var(--badge-small-size)); + display: flex; gap: var(--padding-small); } diff --git a/lib/philomena_web/templates/comment/_comment.html.slime b/lib/philomena_web/templates/comment/_comment.html.slime index 09f65585..1dc80bfd 100644 --- a/lib/philomena_web/templates/comment/_comment.html.slime +++ b/lib/philomena_web/templates/comment/_comment.html.slime @@ -30,29 +30,30 @@ article.block.communication id="comment_#{@comment.id}" = if can?(@conn, :hide, @comment) do .js-staff-action - = cond do - - @comment.hidden_from_users and not @comment.destroyed_content -> - = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "communication__interaction") do - i.fas.fa-check> - ' Restore + .communication__options__staff + = cond do + - @comment.hidden_from_users and not @comment.destroyed_content -> + = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "communication__interaction") do + i.fas.fa-check> + ' Restore - = if can?(@conn, :delete, @comment) do - = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "communication__interaction") do + = if can?(@conn, :delete, @comment) do + = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "communication__interaction") do + i.fas.fa-times> + ' Delete Contents + + - not @comment.hidden_from_users and not @comment.destroyed_content -> + a.button.button--danger.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}" i.fas.fa-times> - ' Delete Contents + ' Delete - - not @comment.hidden_from_users and not @comment.destroyed_content -> - a.communication__interaction.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}" - i.fas.fa-times> - ' Delete + - true -> - - true -> - - = if can?(@conn, :show, :ip_address) do - .communication__info.js-staff-action - =<> link_to_ip(@conn, @comment.ip) - .communication__info.js-staff-action - =<> link_to_fingerprint(@conn, @comment.fingerprint) + = if can?(@conn, :show, :ip_address) do + .button.button--information.js-staff-action + =<> link_to_ip(@conn, @comment.ip) + .button.button--information.js-staff-action + =<> link_to_fingerprint(@conn, @comment.fingerprint) = form_for :comment, Routes.image_comment_hide_path(@conn, :create, @comment.image_id, @comment), [class: "togglable-delete-form hidden flex", id: "inline-del-form-comment-#{@comment.id}"], fn f -> = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Deletion Reason", id: "inline-del-reason-comment-#{@comment.id}", required: true diff --git a/lib/philomena_web/templates/comment/_comment_options.html.slime b/lib/philomena_web/templates/comment/_comment_options.html.slime index 5f8c3674..459b0492 100644 --- a/lib/philomena_web/templates/comment/_comment_options.html.slime +++ b/lib/philomena_web/templates/comment/_comment_options.html.slime @@ -1,14 +1,14 @@ -div - ' Posted - => pretty_time(@comment.created_at) +.communication__options__post-time + span + ' Posted + => pretty_time(@comment.created_at) - a.communication__interaction href=Routes.image_comment_report_path(@conn, :new, @comment.image, @comment) + a.button.button--primary href=Routes.image_comment_report_path(@conn, :new, @comment.image, @comment) i.fa.fa-flag> ' Report = if not is_nil(@comment.edited_at) and can?(@conn, :show, @comment) do - br - a href=Routes.image_comment_history_path(@conn, :index, @comment.image, @comment) + a.communication__options__edit-time href=Routes.image_comment_history_path(@conn, :index, @comment.image, @comment) ' Edited => pretty_time(@comment.edited_at) @@ -16,26 +16,26 @@ div ' because: => @comment.edit_reason -div +.flex.flex--normal-gap.flex--centered - link_path = Routes.image_path(@conn, :show, @comment.image) <> "#comment_#{@comment.id}" - safe_author = PhilomenaWeb.PostView.markdown_safe_author(@comment) - quote_body = if @comment.hidden_from_users, do: "", else: @comment.body - a.communication__interaction title="Link to comment" href=link_path - i.fa.fa-link> + a.button.button--primary title="Link to comment" href=link_path + i.fa.fa-link ' Link - a.communication__interaction.post-reply.post-reply-quote href=link_path data-reply-url=link_path data-author=safe_author data-post=quote_body - i.fa.fa-quote-right> + a.button.button--primary.post-reply.post-reply-quote href=link_path data-reply-url=link_path data-author=safe_author data-post=quote_body + i.fa.fa-quote-right ' Quote - a.communication__interaction.post-reply href=link_path data-reply-url=link_path data-author=safe_author - i.fa.fa-reply> + a.button.button--primary.post-reply href=link_path data-reply-url=link_path data-author=safe_author + i.fa.fa-reply ' Reply = if can?(@conn, :edit, @comment) do span.owner-options strong - a.communication__interaction href=Routes.image_comment_path(@conn, :edit, @comment.image, @comment) - i.fas.fa-edit> + a.button.button--primary href=Routes.image_comment_path(@conn, :edit, @comment.image, @comment) + i.fas.fa-edit ' Edit diff --git a/lib/philomena_web/templates/comment/_comment_with_image.html.slime b/lib/philomena_web/templates/comment/_comment_with_image.html.slime index 33038f00..d84ab25a 100644 --- a/lib/philomena_web/templates/comment/_comment_with_image.html.slime +++ b/lib/philomena_web/templates/comment/_comment_with_image.html.slime @@ -7,29 +7,29 @@ article.block.communication id="comment_#{@comment.id}" = render PhilomenaWeb.CommentView, "_comment_options.html", comment: @comment, conn: @conn = if can?(@conn, :hide, @comment) do - .js-staff-action + .flex.flex--normal-gap.flex--centered.js-staff-action = cond do - @comment.hidden_from_users and not @comment.destroyed_content -> - = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "communication__interaction") do + = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "button button--success") do i.fas.fa-check> ' Restore = if can?(@conn, :delete, @comment) do - = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "communication__interaction") do + = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "button button--danger") do i.fas.fa-times> ' Delete Contents - not @comment.hidden_from_users and not @comment.destroyed_content -> - a.communication__interaction.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}" + a.button.button--danger.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}" i.fas.fa-times> ' Delete - true -> = if can?(@conn, :show, :ip_address) do - .communication__info.js-staff-action + .button.button--warning.js-staff-action =<> link_to_ip(@conn, @comment.ip) - .communication__info.js-staff-action + .button.button--information.js-staff-action =<> link_to_fingerprint(@conn, @comment.fingerprint) = form_for :comment, Routes.image_comment_hide_path(@conn, :create, @comment.image_id, @comment), [class: "togglable-delete-form hidden flex", id: "inline-del-form-comment-#{@comment.id}"], fn f ->