PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2025-01-20 06:37:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

better styling

Browse source
This commit is contained in:
Luna D. 2024-05-07 22:52:17 +02:00
parent 9d4e87efc5
commit 1a741bd80d
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
7 changed files with 66 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/css/elements/button.css
View file

@ -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);
}

60
assets/css/views/communication.css
View file

@ -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;

4
assets/css/views/metabar.css
View file

@ -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);
}

3
assets/css/views/user.css
View file

@ -1,6 +1,5 @@
.badges {
display: grid;
grid-template-columns: repeat(6, var(--badge-small-size));
display: flex;
gap: var(--padding-small);
}

39
lib/philomena_web/templates/comment/_comment.html.slime
View file

@ -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

30
lib/philomena_web/templates/comment/_comment_options.html.slime
View file

@ -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

12
lib/philomena_web/templates/comment/_comment_with_image.html.slime
View file

@ -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 ->