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

Remove bootstrap library fully with some minor fixes (#18945)

Browse source 
* Minor fixes

* Replaced justify-content-between with justify-content

* Override all heading tags, paragraph tag

* Fixed a tag underline css

* Removed bootstrap library

* Removed duplicate crayons-select class
This commit is contained in:
Rajat Talesra 2023-01-16 20:07:12 +05:30 • committed by GitHub
parent 3792591507
commit 4ae1721848
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 85 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
app/assets/stylesheets/admin.scss
View file

@ -11,6 +11,58 @@ label {
margin-bottom: 0 !important;
}
h1 {
font-size: 2.5rem;
font-weight: 500;
line-height: 1.2;
}
h2 {
font-size: 2rem;
font-weight: 500;
line-height: 1.2;
}
h3 {
font-size: 1.75rem;
font-weight: 500;
line-height: 1.2;
}
h4 {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.2;
}
h5 {
font-size: 1.25rem;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0.5rem;
}
h6 {
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0.5rem;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0,0,0,.1);
}
a:hover {
color: var(--link-branded-color-hover);
text-decoration: underline var(--link-branded-color-hover) solid 1px;
}
.pagination {
justify-content: right;

2
app/assets/stylesheets/config/_import.scss vendored
View file

@ -160,7 +160,7 @@ $z-indexes: (
@each $name, $value in $values {
.#{$prefix}#{$separator}#{$name} {
@each $property in $properties {
#{$property}: $value !important; // TODO: Remove !important once we drop Bootstrap as dependency. More: https://forem-team.slack.com/archives/C01K9U7UATV/p1642687819005100
#{$property}: $value
}
}
}

2
app/views/admin/badge_achievements/index.html.erb
View file

@ -39,7 +39,7 @@
<td><%= badge_achievement.user.username %></td>
<td><%= badge_achievement.badge.title %></td>
<h5>
<td class="justify-content-center">
<td class="justify-center">
<img class="mx-auto mt-3" width="40" height="40" src="<%= badge_achievement.badge.badge_image %>" alt="badge image" loading="lazy" />
</td>
<td>

4
app/views/admin/badges/index.html.erb
View file

@ -17,8 +17,8 @@
<% @badges.each do |badge| %>
<tr>
<td><%= link_to badge.title, edit_admin_badge_path(badge.id) %></td>
<td class="justify-content-center"><%= badge.slug %></td>
<td class="justify-content-center">
<td class="justify-center"><%= badge.slug %></td>
<td class="justify-center">
<img class="mx-auto mt-3" width="40" height="40" src="<%= badge.badge_image %>" alt="badge image" loading="lazy" />
</td>
</tr>

6
app/views/admin/broadcasts/_form.html.erb
View file

@ -11,16 +11,16 @@
<div class="crayons-field">
<%= label_tag :type_of, "Type", class: "crayons-field__label" %>
<%= select_tag :type_of, options_for_select(%w[Welcome Announcement], selected: @broadcast.type_of), class: "crayons-select"%>
<%= select_tag :type_of, options_for_select(%w[Welcome Announcement], selected: @broadcast.type_of), class: "crayons-select" %>
</div>
<div class="crayons-field">
<%= label_tag :banner_style, "Banner Style", class: "crayons-field__label" %>
<%= select_tag :banner_style, options_for_select(%w[default brand success warning error], selected: @broadcast.banner_style), include_blank: true, class: "crayons-select"%>
<%= select_tag :banner_style, options_for_select(%w[default brand success warning error], selected: @broadcast.banner_style), include_blank: true, class: "crayons-select" %>
</div>
<div class="crayons-field">
<%= label_tag :active, "Active", class: "crayons-field__label" %>
<%= select_tag :active, options_for_select([false, true], selected: @broadcast.active), class: "crayons-select"%>
<%= select_tag :active, options_for_select([false, true], selected: @broadcast.active), class: "crayons-select" %>
</div>
</div>

2
app/views/admin/broadcasts/index.html.erb
View file

@ -32,7 +32,7 @@
<% @broadcasts.each do |broadcast| %>
<tr>
<td><%= link_to broadcast.title, admin_broadcast_path(broadcast.id) %></td>
<td class="justify-content-center">
<td class="justify-center">
<div class="c-indicator c-indicator--<%= broadcast.active? ? "success" : "warning" %>">
<%= broadcast.active? ? "Active" : "Inactive" %>
</div>

2
app/views/admin/data_update_scripts/index.html.erb
View file

@ -30,7 +30,7 @@
</td>
<td><%= script.created_at %></td>
<td id="data_update_script_<%= script.id %>_run_at" class="whitespace-nowrap"><%= script.run_at %></td>
<td id="data_update_script_<%= script.id %>_status" class="data_update_script__status justify-content-center">
<td id="data_update_script_<%= script.id %>_status" class="data_update_script__status justify-center">
<%= script.status %>
<% if script.error.present? %>
<div id="data_update_script_<%= script.id %>_error" class="fs-xs"><%= script.error %></div>

2
app/views/admin/display_ads/index.html.erb
View file

@ -9,7 +9,7 @@
<%= text_field_tag(:search, params[:search], aria: { label: "Search" }, class: "crayons-header--search-input crayons-textfield", placeholder: "Search") %>
<% end %>
<div class="ml-auto">
<div class="justify-content-end">
<div class="justify-end">
<%= link_to "Make A New Display Ad", new_admin_display_ad_path, class: "crayons-btn" %>
</div>
</div>

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

@ -22,7 +22,7 @@
<% next if (reaction.reactable_type == "Article" && !reaction.reactable.published) || (reaction.reactable_type == "User" && reaction.reactable&.banished?) %>
<div
class="flex justify-content-between"
class="flex justify-between"
data-controller="reaction"
data-reaction-id-value="<%= reaction.id %>"
data-reaction-url-value="<%= admin_reaction_path(reaction.id) %>">

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

@ -191,7 +191,7 @@
</div>
</div>
<div class="flex flex-wrap -mx-4">
<div class="w-100 max-w-100 px-4 flex justify-content-end">
<div class="w-100 max-w-100 px-4 flex justify-end">
<button class="c-btn c-btn--primary" type="button" id="minimize__report__button__<%= feedback_message.id %>">
Minimize Report
</button>

6
app/views/admin/gdpr_delete_requests/index.html.erb
View file

@ -1,10 +1,10 @@
<%= javascript_packs_with_chunks_tag "admin/users/gdprDeleteRequests", defer: true %>
<div id="gdpr-delete-requests-content" class="crayons-card overflow-admin-main-layout-padding p-4 m:p-0">
<header class="flex flex-col l:flex-row justify-content-between l:items-center p-0 m:p-7 pb-4">
<header class="flex flex-col l:flex-row justify-between l:items-center p-0 m:p-7 pb-4">
<h1 class="crayons-title ml-3 l:ml-0">Members<span class="screen-reader-only"> (GDPR Delete Requests)</span></h1>
<%= form_with url: admin_gdpr_delete_requests_path, method: :get, local: true, class: "grow-1 mb-3 m:mb-0" do |f| %>
<div class="hidden m:flex flex-col m:flex-row justify-content-between p-3 xl:px-0">
<div class="flex grow-1 justify-content-end">
<div class="hidden m:flex flex-col m:flex-row justify-between p-3 xl:px-0">
<div class="flex grow-1 justify-end">
<%= paginate @gdpr_delete_requests, theme: "admin", scope: @gdpr_delete_requests, label: "Paginate GDPR delete requests", context: "top" %>
</div>
<%= render "admin/users/controls/search_field", f: f, placeholder: "Search members...", aria_label: "Search members by email or username", context: "large" %>

2
app/views/admin/html_variants/index.html.erb
View file

@ -8,7 +8,7 @@
<% end %>
</div>
<div class="ml-auto">
<div class="justify-content-end">
<div class="justify-end">
<%= link_to "New HTML Variant", new_admin_html_variant_path, class: "crayons-btn" %>
</div>
</div>

12
app/views/admin/invitations/index.html.erb
View file

@ -1,14 +1,14 @@
<%= javascript_packs_with_chunks_tag "admin/users/controls", "admin/users/memberIndex", defer: true %>
<div id="member-index-content" class="crayons-card overflow-admin-main-layout-padding p-0">
<header class="flex flex-col p-4 xl:p-7 pb-4">
<div class="flex flex-col l:flex-row justify-content-between l:items-center">
<div class="flex flex-col l:flex-row justify-between l:items-center">
<h1 class="crayons-title ml-3 xl:ml-0">Members<span class="screen-reader-only"> (Invitations)</span></h1>
</div>
<!-- Small screen layout start -->
<div class="flex flex-col m:hidden fs-s">
<%= form_with url: admin_invitations_path, method: :get, local: true, class: "py-3" do |f| %>
<div class="flex justify-content-between">
<div class="flex justify-between">
<%= render "admin/users/controls/expand_search_button" %>
<%= paginate @invitations, theme: "admin", scope: @invitations, label: "Paginate invitations", context: "top-small" %>
</div>
@ -23,7 +23,7 @@
<ul class="list-none mx-2">
<% @invitations.each do |user| %>
<li class="py-4">
<article class="flex justify-content-between items-start">
<article class="flex justify-between items-start">
<div class="flex">
<%= render "admin/users/index/member_image", user: user %>
<div class="flex flex-col gap-2">
@ -44,11 +44,11 @@
<!-- Small screen layout end -->
<!-- Large screen layout start -->
<div class="hidden m:flex flex-col m:flex-row justify-content-between p-3 xl:px-0">
<div class="hidden m:flex flex-col m:flex-row justify-between p-3 xl:px-0">
<%= form_with url: admin_invitations_path, method: :get, local: true, class: "grow-1 mb-3 m:mb-0" do |f| %>
<% render "admin/users/controls/search_field", f: f, placeholder: "Search invited members...", aria_label: "Search invited members by name, email, or username", context: "large" %>
<% end %>
<div class="flex grow-1 justify-content-end">
<div class="flex grow-1 justify-end">
<%= paginate @invitations, theme: "admin", scope: @invitations, label: "Paginate invitations", context: "top-large" %>
<%= link_to "Invite member", new_admin_invitation_path, class: "c-cta c-cta--branded ml-3" %>
</div>
@ -88,7 +88,7 @@
<p class="fs-xl fw-normal mb-2">No members invited yet.</p>
<p class="color-secondary">Invite members and grow your community.</p>
</div>
<div class="flex grow-1 justify-content-center">
<div class="flex grow-1 justify-center">
<%= link_to "Invite member", new_admin_invitation_path, class: "c-cta c-cta--branded ml-3" %>
</div>
<% end %>

2
app/views/admin/listing_categories/index.html.erb
View file

@ -3,7 +3,7 @@
<%= text_field_tag(:search, params[:search], aria: { label: "Search" }, class: "top-bar--search-input crayons-textfield", placeholder: "Search by name") %>
<% end %>
<div class="ml-auto">
<div class="justify-content-end">
<div class="justify-end">
<%= link_to "Make A Listing Category", new_admin_listing_category_path, class: "crayons-btn" %>
</div>
</div>

2
app/views/admin/listings/edit.html.erb
View file

@ -18,7 +18,7 @@
<%= form_with model: [:admin, @listing], method: :patch, local: true do |form| %>
<div class="flex flex-col gap-4">
<div class="crayons-field">
<%= form.label :title, class: "crayons-field__label"%>
<%= form.label :title, class: "crayons-field__label" %>
<%= form.text_field :title, size: 100, maxlength: 128, class: "crayons-textfield" %>
</div>
<div class="crayons-field">

1
app/views/admin/moderator_actions/index.html.erb
View file

@ -1,5 +1,6 @@
<div class="mb-6">
<%= search_form_for @q, url: admin_moderator_actions_path, class: "inline-flex" do |f| %>
<%= f.label :user_username_cont, "User", class: "screen-reader-only" %>
<%= f.search_field :user_username_cont, aria: { label: "Search" }, placeholder: "User", class: "crayons-textfield mr-2" %>
<%= f.submit "Search", class: "crayons-btn" %>
<% end %>

4
app/views/admin/organizations/show.html.erb
View file

@ -38,7 +38,7 @@
<div class="crayons-card p-6 mb-6">
<% current_credits = @organization.unspent_credits_count %>
<h3 class="mb-4">Credits (current: <%= current_credits %>)</h3>
<%= form_tag update_org_credits_admin_organization_path(@organization), method: :patch, class: "flex justify-content-between mb-2" do %>
<%= form_tag update_org_credits_admin_organization_path(@organization), method: :patch, class: "flex justify-between mb-2" do %>
<div>
<%= hidden_field_tag :credit_action, :add %>
<%= number_field_tag :credits, nil, in: 1...100_000, required: true, class: "crayons-textfield w-auto mr-3", size: 5, aria: { label: "Credits" } %>
@ -47,7 +47,7 @@
<%= submit_tag "Add Org Credits", class: "crayons-btn" %>
<% end %>
<% if current_credits.positive? %>
<%= form_tag update_org_credits_admin_organization_path(@organization), method: :patch, class: "flex justify-content-between mb-2" do %>
<%= form_tag update_org_credits_admin_organization_path(@organization), method: :patch, class: "flex justify-between mb-2" do %>
<div>
<%= hidden_field_tag :credit_action, :remove %>
<%= number_field_tag :credits, nil, in: 1..current_credits, required: true, class: "crayons-textfield w-auto mr-3", size: 5, aria: { label: "Credits" } %>

2
app/views/admin/tags/index.html.erb
View file

@ -23,7 +23,7 @@
<% end %>
</div>
<div class="justify-content-end ml-auto">
<div class="justify-end ml-auto">
<%= link_to "Make A Tag", new_admin_tag_path, class: "crayons-btn" %>
</div>
</div>

2
app/views/admin/tools/feed_playground.html.erb
View file

@ -16,7 +16,7 @@
<%= label_tag :number_of_articles, "Number of articles", class: "crayons-field__label" %>
<%= text_field_tag :number_of_articles, params[:number_of_articles] || 25, placeholder: "25", class: "crayons-textfield" %>
</div>
<%= submit_tag :"Preview feed", class: "crayons-btn mr-auto"%>
<%= submit_tag :"Preview feed", class: "crayons-btn mr-auto" %>
</div>
<% end %>
</div>

6
app/views/admin/tools/index.html.erb
View file

@ -6,7 +6,7 @@
<div class="crayons-field">
<%= label_tag :dead_link, "Link:", class: "crayons-field__label" %>
<%= text_field_tag :dead_link, nil, placeholder: "/xyz", class: "crayons-textfield" %>
<%= submit_tag :"Clear Cache", class: "crayons-btn mr-auto"%>
<%= submit_tag :"Clear Cache", class: "crayons-btn mr-auto" %>
</div>
<% end %>
</div>
@ -18,14 +18,14 @@
<div class="crayons-field">
<%= label_tag :bust_article, "Article ID:", class: "crayons-field__label" %>
<%= text_field_tag :bust_article, nil, placeholder: "12345", class: "crayons-textfield" %>
<%= submit_tag :"Clear Article Cache", class: "crayons-btn mr-auto"%>
<%= submit_tag :"Clear Article Cache", class: "crayons-btn mr-auto" %>
</div>
<% end %>
<%= form_tag bust_cache_admin_tools_path do %>
<div class="crayons-field mt-6">
<%= label_tag :bust_user, "User ID:", class: "crayons-field__label" %>
<%= text_field_tag :bust_user, nil, placeholder: "12345", class: "crayons-textfield" %>
<%= submit_tag :"Clear User Cache", class: "crayons-btn mr-auto"%>
<%= submit_tag :"Clear User Cache", class: "crayons-btn mr-auto" %>
</div>
<% end %>
</div>

2
app/views/admin/users/index.html.erb
View file

@ -1,7 +1,7 @@
<%= javascript_packs_with_chunks_tag "admin/users/memberIndex", defer: true %>
<div id="member-index-content" class="crayons-card overflow-admin-main-layout-padding p-4 xl:p-0">
<header class="xl:p-7 pb-4 mx-2">
<div class="flex flex-col l:flex-row justify-content-between l:items-center">
<div class="flex flex-col l:flex-row justify-between l:items-center">
<h1 class="crayons-title"><%= t("views.admin.users.heading") %></h1>
</div>
<%= render "admin/users/index/controls" %>

6
app/views/layouts/admin.html.erb
View file

@ -16,9 +16,6 @@
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<%= stylesheet_link_tag "admin" %>
</head>
@ -100,8 +97,5 @@
</div>
<div data-snackbar-target="snackZone"></div>
<!-- Bootstrap Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>