maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove bootstrap from admin/feedback and use Crayons (#18892)

Browse source 
* Fix collapse glitch in profile-fields

* Feedback partial progress

* Feedback partial progress

* Removed form-control

* Replaced card with crayons-card
This commit is contained in:
Rajat Talesra 2023-01-04 10:25:27 +05:30 • committed by GitHub
parent 0ae11aa5eb
commit d61d9fbc9d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 116 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/stylesheets/components/buttons.scss
View file

@ -175,6 +175,28 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
--color-inverted-hover: var(--base-inverted);
}
.crayons-btn--success {
--bg: var(--accent-success);
--bg-hover: var(--accent-success-darker);
--color: var(--base-inverted);
--color-hover: var(--base-inverted);
--bg-inverted: var(--accent-success);
--bg-inverted-hover: var(--accent-success-darker);
--color-inverted: var(--base-inverted);
--color-inverted-hover: var(--base-inverted);
}
.crayons-btn--warning {
--bg: var(--accent-warning);
--bg-hover: var(--accent-warning-darker);
--color: var(--base-inverted);
--color-hover: var(--base-inverted);
--bg-inverted: var(--accent-warning);
--bg-inverted-hover: var(--accent-warning-darker);
--color-inverted: var(--base-inverted);
--color-inverted-hover: var(--base-inverted);
}
.crayons-btn--ghost {
--bg: var(--button-ghost-bg);
--bg-hover: var(--button-ghost-bg-hover);

34
app/views/admin/feedback_messages/_abuse_reports.html.erb
View file

@ -1,31 +1,31 @@
<div>
<h2 class="crayons-title mb-4">Abuse reports</h2>
<ul class="nav nav-pills mb-4">
<li class="nav-item">
<a href="<%= admin_reports_path(state: @feedback_type, status: "Open") %>" class="nav-link <%= "active" if @status == "Open" %>">Open/Unresolved</a>
<ul class="crayons-navigation crayons-navigation--horizontal mb-4">
<li>
<a href="<%= admin_reports_path(state: @feedback_type, status: "Open") %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @status == "Open" %>">Open/Unresolved</a>
</li>
<li class="nav-item">
<a href="<%= admin_reports_path(state: @feedback_type, status: "Resolved") %>" class="nav-link <%= "active" if @status == "Resolved" %>">Resolved</a>
<li>
<a href="<%= admin_reports_path(state: @feedback_type, status: "Resolved") %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @status == "Resolved" %>">Resolved</a>
</li>
<li class="nav-item">
<a href="<%= admin_reports_path(state: @feedback_type, status: "Invalid") %>" class="nav-link <%= "active" if @status == "Invalid" %>">Invalid</a>
<li>
<a href="<%= admin_reports_path(state: @feedback_type, status: "Invalid") %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @status == "Invalid" %>">Invalid</a>
</ul>
<div id="vomitReactions">
<div class="crayons-card">
<div class="card-header flex items-center" id="vomitReactionsHeader">
<h4>Flag Reactions</h4>
<button class="btn btn-secondary ml-auto" type="button" data-toggle="collapse" data-target="#vomitReactionsBodyContainer" aria-expanded="false" aria-controls="vomitReactionsBodyContainer">
<button class="crayons-btn crayons-btn--secondary ml-auto" type="button" data-toggle="collapse" data-target="#vomitReactionsBodyContainer" aria-expanded="false" aria-controls="vomitReactionsBodyContainer">
Toggle
</button>
</div>
<div id="vomitReactionsBodyContainer" class="collapse hide" aria-labelledby="vomitReactionsHeader" data-parent="#vomitReactions">
<div class="card-body" style="overflow: scroll; max-height: 500px;">
<div class="crayons-card__body" style="overflow: scroll; max-height: 500px;">
<% @vomits.each do |reaction| %>
<% next if (reaction.reactable_type == "Article" && !reaction.reactable.published) || (reaction.reactable_type == "User" && reaction.reactable&.banished?) %>
<div
class="d-flex justify-content-between"
class="flex justify-content-between"
data-controller="reaction"
data-reaction-id-value="<%= reaction.id %>"
data-reaction-url-value="<%= admin_reaction_path(reaction.id) %>">
@ -39,17 +39,17 @@
<strong><%= reaction.reactable_type %>:</strong>
<a href="<%= reaction.reactable.path %>" target="_blank" rel="noopener"><%= reaction.reactable_type == "User" ? reaction.reactable.username : reaction.reactable.title %></a>
<% if reaction.reactable_type == "User" && reaction.reactable.suspended? %>
<span class="badge badge-danger">Suspended</span>
<span class="c-indicator c-indicator--danger">Suspended</span>
<% end %>
<% if reaction.reactable_type == "User" && reaction.reactable.vomited_on? %>
<span class="badge badge-warning">Flagged</span>
<span class="c-indicator c-indicator--warning">Flagged</span>
<% end %>
</span>
<span>
<% if params[:status] == "Open" || params[:status].blank? %>
<% if reaction.reactable_type == "User" %>
<button
class="btn btn-success btn-sm"
class="crayons-btn crayons-btn--success crayons-btn--s"
type="button"
data-reactable="user"
data-status="confirmed"
@ -59,7 +59,7 @@
</button>
<% else %>
<button
class="btn btn-success btn-sm"
class="crayons-btn crayons-btn--success crayons-btn--s"
type="button"
data-reactable="non-user"
data-status="confirmed"
@ -69,7 +69,7 @@
</button>
<% end %>
<button
class="btn btn-danger btn-sm"
class="crayons-btn crayons-btn--danger crayons-btn--s"
type="button"
data-altstatus="invalid"
data-reaction-target="invalid"
@ -79,7 +79,7 @@
<% end %>
<% if params[:status] == "Resolved" %>
<button
class="btn btn-warning text-white btn-sm"
class="crayons-btn crayons-btn--warning crayons-btn--s"
type="button"
data-altstatus="invalid"
data-reaction-target="invalid"
@ -88,7 +88,7 @@
</button>
<% elsif params[:status] == "Invalid" %>
<button
class="btn btn-success btn-sm"
class="crayons-btn crayons-btn--success crayons-btn--s"
type="button"
data-status="confirmed"
data-reaction-target="confirmed"

88
app/views/admin/feedback_messages/_feedback_message.html.erb
View file

@ -15,9 +15,9 @@
</div>
</div>
<div id="collapse<%= feedback_message.id %>" class="collapse show" aria-labelledby="header<%= feedback_message.id %>" data-parent="#accordion-<%= feedback_message.id %>">
<div class="card-body">
<div class="row">
<div class="col-9">
<div class="crayons-card__body">
<div class="flex flex-wrap -mx-4">
<div class="w-75 max-w-75 px-4">
<h5 class="fw-bold">
<% if feedback_message.offender %>
Reporter and Affected:
@ -52,12 +52,12 @@
<% end %>
</div>
<div class="col-3">
<div class="w-25 max-w-25 px-4">
<h3 class="report__tags">
<span class="badge badge-warning float-right"><%= feedback_message.category.titleize %></span>
<span class="c-indicator c-indicator--warning float-right"><%= feedback_message.category.titleize %></span>
</h3>
</div>
<div class="col-12">
<div class="w-100 max-w-100 px-4">
<% if feedback_message.offender %>
<h5 class="fw-bold">
Message from Offender:
@ -71,7 +71,7 @@
</h5>
<p>
<% if feedback_message.message.blank? %>
<span class="font-italic">No message was left.</span>
<span class="fs-italic">No message was left.</span>
<% else %>
<%= feedback_message.message %>
<% end %>
@ -80,8 +80,8 @@
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<div class="flex flex-wrap -mx-4">
<div class="w-100 max-w-100 px-4">
<h5 class="fw-bold">Previous Emails:</h5>
<div class="previous__emails__container">
<% if feedback_message_emails.any? %>
@ -100,8 +100,8 @@
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<div class="flex flex-wrap -mx-4">
<div class="w-100 max-w-100 px-4">
<h4 class="fw-bold">Email Form:</h4>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item">
@ -119,48 +119,48 @@
<div class="crayons-notice crayons-notice--info" aria-live="polite">Please note that all users who report abuse receive an automatic confirmation email. You can send an additional, follow-up email to this user by using the form below.</div>
<br>
<h5 class="fw-bold">Send To:</h5>
<%= email_field_tag :reporter_email_to, feedback_message.reporter&.email, class: "form-control my-1", id: "reporter__emailto__#{feedback_message.id}", required: true %>
<%= email_field_tag :reporter_email_to, feedback_message.reporter&.email, class: "crayons-textfield my-1", id: "reporter__emailto__#{feedback_message.id}", required: true %>
<h5 class="fw-bold">Subject:</h5>
<%= text_field_tag :reporter_email_subject, reporter_email_details[:subject], class: "form-control my-1", id: "reporter__subject__#{feedback_message.id}" %>
<%= text_field_tag :reporter_email_subject, reporter_email_details[:subject], class: "crayons-textfield my-1", id: "reporter__subject__#{feedback_message.id}" %>
<h5 class="fw-bold">Body:</h5>
<%= text_area_tag :reporter_email_body, reporter_email_details[:body], class: "form-control my-1", style: "height: 300px;", id: "reporter__body__#{feedback_message.id}" %>
<%= text_area_tag :reporter_email_body, reporter_email_details[:body], class: "crayons-textfield my-1", style: "height: 300px;", id: "reporter__body__#{feedback_message.id}" %>
</div>
<div role="tabcard" class="tab-pane fade" data-id="<%= feedback_message.id %>" data-userType="offender" id="offender-<%= feedback_message.id %>">
<h5 class="fw-bold">Send To:</h5>
<%= email_field_tag :offender_email_to, feedback_message.offender&.email, class: "form-control my-1", id: "offender__emailto__#{feedback_message.id}", required: true %>
<%= email_field_tag :offender_email_to, feedback_message.offender&.email, class: "crayons-textfield my-1", id: "offender__emailto__#{feedback_message.id}", required: true %>
<h5 class="fw-bold">Subject:</h5>
<%= text_field_tag :offender_email_subject, offender_email_details[:subject], class: "form-control my-1", id: "offender__subject__#{feedback_message.id}" %>
<%= text_field_tag :offender_email_subject, offender_email_details[:subject], class: "crayons-textfield my-1", id: "offender__subject__#{feedback_message.id}" %>
<h5 class="fw-bold">Body:</h5>
<%= text_area_tag :offender_email_body, offender_email_details[:body], class: "form-control my-1", style: "height: 300px;", id: "offender__body__#{feedback_message.id}" %>
<%= text_area_tag :offender_email_body, offender_email_details[:body], class: "crayons-textfield my-1", style: "height: 300px;", id: "offender__body__#{feedback_message.id}" %>
</div>
<div role="tabcard" class="tab-pane fade" data-id="<%= feedback_message.id %>" data-userType="affected" id="affected-<%= feedback_message.id %>">
<h5 class="fw-bold">Send To:</h5>
<%= email_field_tag :affected_email_to, feedback_message.affected&.email, class: "form-control my-1", id: "affected__emailto__#{feedback_message.id}", required: true %>
<%= email_field_tag :affected_email_to, feedback_message.affected&.email, class: "crayons-textfield my-1", id: "affected__emailto__#{feedback_message.id}", required: true %>
<h5 class="fw-bold">Subject:</h5>
<%= text_field_tag :affected_email_subject, affected_email_details[:subject], class: "form-control my-1", id: "affected__subject__#{feedback_message.id}" %>
<%= text_field_tag :affected_email_subject, affected_email_details[:subject], class: "crayons-textfield my-1", id: "affected__subject__#{feedback_message.id}" %>
<h5 class="fw-bold">Body:</h5>
<%= text_area_tag :affected_email_body, affected_email_details[:body], class: "form-control my-1", style: "height: 300px;", id: "affected__body__#{feedback_message.id}" %>
<%= text_area_tag :affected_email_body, affected_email_details[:body], class: "crayons-textfield my-1", style: "height: 300px;", id: "affected__body__#{feedback_message.id}" %>
</div>
</div>
<button class="btn btn-primary" type="button" id="send__email__btn__<%= feedback_message.id %>">Send Email ✉️</button>
<button class="c-btn c-btn--primary" type="button" id="send__email__btn__<%= feedback_message.id %>">Send Email ✉️</button>
</div>
</div>
<div class="email__alert alert w-100 mt-2 d-none" id="email__alert__<%= feedback_message.id %>">
<div class="email__alert crayons-notice w-100 mt-2 d-none" id="email__alert__<%= feedback_message.id %>">
</div>
<div class="row my-3">
<div class="col-12">
<div class="flex flex-wrap -mx-4 my-3">
<div class="w-100 max-w-100 px-4">
<h3>Status:</h3>
<%= f.select :status, %w[Open Invalid Resolved], {}, id: "status__#{feedback_message.id}" %>
<button class="btn btn-primary d-block mt-3" type="button" id="save__status__<%= feedback_message.id %>">Save Status</button>
<button class="c-btn c-btn--primary block mt-3" type="button" id="save__status__<%= feedback_message.id %>">Save Status</button>
</div>
</div>
<div class="row my-3">
<div class="col-12">
<div class="flex flex-wrap -mx-4 my-3">
<div class="w-100 max-w-100 px-4">
<h3>Notes:</h3>
<div class="notes__container" id="notes__<%= feedback_message.id %>">
<div id="notes__<%= feedback_message.id %>">
<% feedback_message.notes&.order(:created_at)&.each do |note| %>
<div class="border border-info bg-light rounded my-2 p-2">
<span class="badge badge-info float-right">
<div class="notes__border my-2 p-2">
<span class="c-indicator c-indicator--info float-right">
<%= time_ago_in_words note.created_at %> ago
</span>
<h5 class="font-weight-bold">
@ -184,13 +184,13 @@
class="notefield"
id="note__content__<%= feedback_message.id %>"
required>
<button class="btn btn-primary" type="button" id="note__submit__<%= feedback_message.id %>">Submit Note 📝</button>
<button class="c-btn c-btn--primary" type="button" id="note__submit__<%= feedback_message.id %>">Submit Note 📝</button>
</div>
</div>
</div>
<div class="row">
<div class="col-12 d-flex justify-content-end">
<button class="btn btn-primary" type="button" id="minimize__report__button__<%= feedback_message.id %>">
<div class="flex flex-wrap -mx-4">
<div class="w-100 max-w-100 px-4 flex justify-content-end">
<button class="c-btn c-btn--primary" type="button" id="minimize__report__button__<%= feedback_message.id %>">
Minimize Report
</button>
</div>
@ -235,14 +235,14 @@
});
function successfulEmail(alert) {
alert.classList.remove("d-none");
alert.classList.add('alert-success');
alert.classList.remove("hidden");
alert.classList.add('crayons-notice--success');
alert.innerHTML = "Email sent successfully! Refresh to see";
}
function failedEmail(alert) {
alert.classList.remove("d-none");
alert.classList.add('alert-danger');
alert.classList.remove("hidden");
alert.classList.add('crayons-notice--danger');
alert.innerHTML = "Email failed to send, see console or Honeybadger for errors";
}
@ -255,14 +255,14 @@
var subjectLine = document.getElementById(userType + "__subject__" + id).value;
var emailBody = document.getElementById(userType + "__body__" + id).value;
alert.classList.add("d-none");
alert.classList.remove("alert-warning");
alert.classList.remove("alert-success");
alert.classList.remove("alert-danger");
alert.classList.add("hidden");
alert.classList.remove("crayons-notice--warning");
alert.classList.remove("crayons-notice--success");
alert.classList.remove("crayons-notice--danger");
if (emailToAddress === "") {
alert.classList.remove("d-none");
alert.classList.add("alert-warning");
alert.classList.remove("hidden");
alert.classList.add("crayons-notice--warning");
alert.innerHTML = "Email can't be blank!"
return
}

7
app/views/admin/feedback_messages/_style.html.erb
View file

@ -33,4 +33,11 @@
display: grid;
justify-items: end;
}
.notes__border{
border-style: solid;
border-width: 1px;
border-color: #17a2b8;
background-color: var(--base-0);
border-radius: 0.25rem;
}
</style>

16
app/views/admin/feedback_messages/index.html.erb
View file

@ -1,22 +1,22 @@
<%= render "style" %>
<h2 class="crayons-title mb-6">Suspicious activity</h2>
<h1 class="crayons-title mb-6">Suspicious activity</h1>
<div class="grid gap-6">
<%= render "abuse_reports" %>
<div class="crayons-card p-4">
<%= search_form_for @q, url: admin_feedback_messages_path, class: "form-inline crayons-card crayons-card--secondary p-4" do |f| %>
<%= search_form_for @q, url: admin_feedback_messages_path, class: "flex flex-row flex-wrap items-center crayons-card crayons-card--secondary p-3" do |f| %>
<%= f.label :reported_url_cont, "Reported URL", class: "sr-only" %>
<%= f.search_field :reported_url_cont, placeholder: "Reported URL", class: "form-control mr-2" %>
<%= f.label :reported_url_cont, "Reported URL", class: "crayons-field__label m-1 screen-reader-only" %>
<%= f.search_field :reported_url_cont, placeholder: "Reported URL", class: "crayons-textfield w-auto m-1" %>
<%= f.label :reporter_username_cont, "Reporter", class: "sr-only" %>
<%= f.search_field :reporter_username_cont, placeholder: "Reporter", class: "form-control mr-2" %>
<%= f.label :reporter_username_cont, "Reporter", class: "crayons-field__label m-1 screen-reader-only" %>
<%= f.search_field :reporter_username_cont, placeholder: "Reporter", class: "crayons-textfield w-auto m-1" %>
<%= f.select(:status_eq, options_for_select(%w[Open Invalid Resolved], @q.status_eq), { include_blank: true }, class: "custom-select mr-2") %>
<%= f.select(:status_eq, options_for_select(%w[Open Invalid Resolved], @q.status_eq), { include_blank: true }, class: "crayons-select w-auto m-1") %>
<%= f.submit "Search", class: "btn btn-secondary" %>
<%= f.submit "Search", class: "crayons-btn crayons-btn--secondary m-1" %>
<% end %>
<div class="pt-4 px-2 pb-4">

34
app/views/admin/profile_fields/_grouped_profile_fields.html.erb
View file

@ -1,6 +1,6 @@
<% @grouped_profile_fields.each do |group| %>
<article id="profile-field-group-<%= group.id %>" class="flex flex-wrap -mx-4 my-3">
<div class="card w-100">
<div class="crayons-card w-100">
<div class="card-header">
<div class="card-header__information">
<div class="fw-bold fs-l"><%= group.name %></div>
@ -21,24 +21,26 @@
</div>
</div>
<div id="<%= dom_safe_name(group.name) %>BodyContainer" class="collapse hide p-3" aria-labelledby="<%= dom_safe_name(group.name) %>Header">
<div id="<%= dom_safe_name(group.name) %>BodyContainer" class="collapse hide" aria-labelledby="<%= dom_safe_name(group.name) %>Header">
<% if group.profile_fields.empty? %>
<div> There are no profile fields configured for this group. </div>
<div class="m-3"> There are no profile fields configured for this group. </div>
<% else %>
<% group.profile_fields.each do |field| %>
<details class="crayons-card mb-4" id="profile-field-<%= field.id %>">
<summary class="crayons-subtitle-2 p-5"><%= field.label %></summary>
<div id="<%= field.attribute_name %>_container" class="p-5 pt-0">
<div class="flex flex-col p-6 mb-6 gap-1">
<%= form_for [:admin, field] do |form| %>
<%= render "profile_field_form", form: form, group: group %>
<%= form.submit class: "c-btn c-btn--primary mt-4" %>
<% end %>
<%= button_to "Delete Profile Field", admin_profile_field_path(field), data: { confirm: "Are you sure?" }, method: :delete, class: "crayons-btn crayons-btn--danger mt-4 mx-auto" %>
<div class="m-3">
<% group.profile_fields.each do |field| %>
<details class="crayons-card mb-4" id="profile-field-<%= field.id %>">
<summary class="crayons-subtitle-2 p-5"><%= field.label %></summary>
<div id="<%= field.attribute_name %>_container" class="p-5 pt-0">
<div class="flex flex-col p-6 mb-6 gap-1">
<%= form_for [:admin, field] do |form| %>
<%= render "profile_field_form", form: form, group: group %>
<%= form.submit class: "c-btn c-btn--primary mt-4" %>
<% end %>
<%= button_to "Delete Profile Field", admin_profile_field_path(field), data: { confirm: "Are you sure?" }, method: :delete, class: "crayons-btn crayons-btn--danger mt-4 mx-auto" %>
</div>
</div>
</div>
</details>
<% end %>
</details>
<% end %>
</div>
<% end %>
</div>
</div>