Merge pull request #1277 from ruby-china/bootstrap-v5

Bootstrap v5
ruby-china · May 7, 2021 · ad265ab · ad265ab
2 parents 4f1b7df + fd03274
commit ad265ab
Show file tree

Hide file tree

Showing 88 changed files with 1,643 additions and 762 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,30 @@
+{
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "aeschli.vscode-css-formatter"
+  },
+  "[erb]": {
+    "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[yaml]": {
+    "editor.defaultFormatter": "redhat.vscode-yaml"
+  },
+  "ruby.lint": {
+    "standard": {
+      "useBundler": true
+    }
+  }
+}
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
 <p align="center">
-  <img src="https://homeland.ruby-china.org/images/text-logo.svg" width="400" />
+  <img src="https://homeland.ruby-china.org/images/text-logo.svg" width="400">
   <p align="center">Open source discussion website.</p>
   <p align="center">开源的论坛／社区网站系统，基于 <a href="https://ruby-china.org">Ruby China</a> 发展而来。</p>
   <p align="center">
     <a href="https://github.com/ruby-china/homeland/actions">
-      <img src="https://github.com/ruby-china/homeland/workflows/Test/badge.svg" />
+      <img src="https://github.com/ruby-china/homeland/workflows/Test/badge.svg">
     </a>
   </p>
 </p>

diff --git a/app/components/profile_card_component.html.erb b/app/components/profile_card_component.html.erb
@@ -1,9 +1,9 @@
 <div class="user-profile-card">
-  <div class="media">
+  <div class="d-flex">
     <div class="avatar-box">
       <%= user_avatar_tag(user, :md) %>
     </div>
-    <div class="media-meta">
+    <div class="flex-grow-1">
       <%= link_to user, class: "name-box" do %>
         <div class="fullname">
           <%= user.name %>
@@ -17,7 +17,7 @@
   <% if user.tagline.present? %>
     <div class="item tagline"><%= user.tagline %></div>
   <% end %>
-  <hr />
+  <hr>
   <div class="item social">
     <% if !user.twitter.blank? %>
       <%= link_to icon_bold_tag("twitter"), user.twitter_url, class: "twitter", rel: "nofollow" %>
@@ -42,9 +42,9 @@
     </div>
   <% end %>
   <% if !owner? user %>
-    <hr />
+    <hr>
     <div class="item buttons flex aic">
       <%= follow_user_tag(user) %>
     </div>
   <% end %>
-</div>
+</div>
diff --git a/app/controllers/replies_controller.rb b/app/controllers/replies_controller.rb
@@ -15,7 +15,7 @@ def create
       current_user.read_topic(@topic)
       @msg = t("replies.created_successfully")
     else
-      @msg = @reply.errors.full_messages.join("<br />")
+      @msg = @reply.errors.full_messages.join("<br>")
     end
   end
 

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -16,7 +16,7 @@ def sanitize_markdown(html)
   def notice_message
     flash_messages = []
 
-    close_html = %(<button name="button" type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>)
+    close_html = %(<button name="button" type="button" class="close" data-bs-dismiss ="alert"><span aria-hidden="true">&times;</span></button>)
 
     flash.each do |type, message|
       type = :success if type.to_sym == :notice
@@ -154,7 +154,7 @@ def form_group(form, field, opts = {}, &block)
     opts[:class] += " has-error" if has_errors
 
     content_tag :div, class: opts[:class] do
-      concat form.label field, class: "control-label" if opts[:label] != false
+      concat form.label field, class: "form-label" if opts[:label] != false
       concat capture(&block)
       concat errors_for(form, field)
     end

diff --git a/app/helpers/likes_helper.rb b/app/helpers/likes_helper.rb
@@ -6,7 +6,7 @@ module LikesHelper
   # params
   # - likeable - Like target
   # - :cache - when true, will not check current user is liked, directly return no like status for cache.
-  # - :class - Add class for link, for example: "btn btn-default"
+  # - :class - Add class for link, for example: "btn btn-secondary"
   def likeable_tag(likeable, opts = {})
     return "" if likeable.blank?
 

diff --git a/app/helpers/topics_helper.rb b/app/helpers/topics_helper.rb
@@ -50,7 +50,7 @@ def topic_excellent_tag(topic)
 
   def topic_close_tag(topic)
     return "" unless topic.closed?
-    content_tag(:i, "", title: t("topics.closed_tooltip"), class: "fa fa-check-circle", data: {toggle: "tooltip"})
+    content_tag(:i, "", title: t("topics.closed_tooltip"), class: "fa fa-check-circle", "data-bs-toggle": "tooltip")
   end
 
   def render_node_name(node)

diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb
@@ -72,7 +72,7 @@ def block_node_tag(node)
     return "" if node.blank?
 
     blocked = current_user.block_node?(node)
-    class_names = "btn btn-default button-block-node"
+    class_names = "btn btn-secondary button-block-node"
 
     if blocked
       link_to icon_tag("eye-slash", label: t("common.unblock_node")), "#", "data-id" => node.id, :class => "#{class_names} active"
@@ -87,7 +87,7 @@ def block_user_tag(user)
     return "" if current_user.id == user.id
 
     blocked = current_user.block_user?(user)
-    class_names = "button-block-user btn btn-default btn-block"
+    class_names = "button-block-user btn btn-secondary btn-block"
 
     if blocked
       link_to icon_tag("eye-slash", label: t("common.unblock_user")), "#", "data-id" => user.login, :class => "#{class_names} active"

diff --git a/app/javascript/admin/index.scss b/app/javascript/admin/index.scss
@@ -88,8 +88,13 @@ pre {
   margin-bottom: 15px;
 
   .form-inline {
-    .form-group {
-      margin-right: 10px;
+    @extend .d-grid;
+    @extend .gap-2;
+    @extend .d-sm-block;
+    @extend .d-md-flex;
+
+    .form-control {
+      width: auto;
     }
   }
 }
@@ -115,7 +120,7 @@ table {
     .badge {
       color: var(--gray);
       border-radius: 12px;
-      border: 1px solid var(--btn-default-border-color);
+      border: 1px solid var(--btn-secondary-border-color);
       font-size: 12px;
       font-weight: normal;
     }

diff --git a/app/javascript/front/app.js b/app/javascript/front/app.js
@@ -40,9 +40,6 @@ const AppView = Backbone.View.extend({
 
   initComponents() {
     $("abbr.timeago").timeago();
-    $(".alert").alert();
-    $(".dropdown-toggle").dropdown();
-    $('[data-toggle="tooltip"]').tooltip();
 
     // Bind Ctrl+Enter for submit
     $(".cell_comments_new textarea").unbind("keydown");

diff --git a/app/javascript/front/editor.js b/app/javascript/front/editor.js
@@ -1,10 +1,10 @@
 window.Editor = Backbone.View.extend({
-  el: '.editor-toolbar',
+  el: ".editor-toolbar",
 
   events: {
     "click #editor-upload-image": "browseUpload",
     "click .insert-codes a": "appendCodesFromHint",
-    "click .pickup-emoji": "pickupEmoji"
+    "click .pickup-emoji": "pickupEmoji",
   },
 
   initialize(opts) {
@@ -16,23 +16,23 @@ window.Editor = Backbone.View.extend({
     let dropzone;
     const self = this;
     const editor = $("textarea.topic-editor");
-    editor.wrap("<div class=\"topic-editor-dropzone\"></div>");
+    editor.wrap('<div class="topic-editor-dropzone"></div>');
 
-    const editor_dropzone = $('.topic-editor-dropzone');
-    editor_dropzone.on('paste', event => {
+    const editor_dropzone = $(".topic-editor-dropzone");
+    editor_dropzone.on("paste", (event) => {
       return self.handlePaste(event);
     });
 
-    return dropzone = editor_dropzone.dropzone({
+    return (dropzone = editor_dropzone.dropzone({
       url: "/photos",
       dictDefaultMessage: "",
       clickable: true,
       paramName: "file",
       maxFilesize: 20,
       uploadMultiple: false,
-      acceptedFiles: 'image/*',
+      acceptedFiles: "image/*",
       headers: {
-        "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
+        "X-CSRF-Token": $('meta[name="csrf-token"]').attr("content"),
       },
       previewContainer: false,
       processing() {
@@ -53,28 +53,28 @@ window.Editor = Backbone.View.extend({
         self.appendImageFromUpload(res.url);
       },
       error(temp, msg) {
-        if (typeof msg === "string") { // from client side
+        if (typeof msg === "string") {
+          // from client side
           App.alert(msg);
-        } else { // from server side
-          App.alert(msg.message)
+        } else {
+          // from server side
+          App.alert(msg.message);
         }
       },
-      totaluploadprogress(num) {
-      },
-      sending() {
-      },
+      totaluploadprogress(num) {},
+      sending() {},
       queuecomplete() {
         self.restoreUploaderStatus();
-      }
-    });
+      },
+    }));
   },
 
   uploadFile(item, filename) {
     const self = this;
     const formData = new FormData();
     formData.append("file", item, filename);
     return $.ajax({
-      url: '/photos',
+      url: "/photos",
       type: "POST",
       data: formData,
       dataType: "JSON",
@@ -93,7 +93,7 @@ window.Editor = Backbone.View.extend({
       },
       complete() {
         return self.restoreUploaderStatus();
-      }
+      },
     });
   },
 
@@ -123,12 +123,12 @@ window.Editor = Backbone.View.extend({
 
   browseUpload(e) {
     $(".topic-editor").focus();
-    $('.topic-editor-dropzone').click();
+    $(".topic-editor-dropzone").click();
     return false;
   },
 
   showUploading() {
-    const btn = $("#editor-upload-image")
+    const btn = $("#editor-upload-image");
     btn.addClass("active");
   },
 
@@ -144,56 +144,62 @@ window.Editor = Backbone.View.extend({
 
   // 往编辑器里面的光标前插入两个空白字符
   insertSpaces(e) {
-    this.insertString('  ');
+    this.insertString("  ");
     return false;
   },
 
   // 往编辑器里面插入代码模版
   appendCodesFromHint(e) {
-    const link = $(e.currentTarget);
-    const language = link.data("lang");
+    const link = e.currentTarget;
+    const language = link.getAttribute("data-lang");
+
     const txtBox = $(".topic-editor");
-    const caret_pos = txtBox.caret('pos');
+    const caret_pos = txtBox.caret("pos");
     let prefix_break = "";
     if (txtBox.val().length > 0) {
       prefix_break = "\n";
     }
     const src_merged = `${prefix_break}\`\`\`${language}\n\n\`\`\`\n`;
     const source = txtBox.val();
     const before_text = source.slice(0, caret_pos);
-    txtBox.val(before_text + src_merged + source.slice(caret_pos + 1, source.count));
-    txtBox.caret('pos', (caret_pos + src_merged.length) - 5);
+    txtBox.val(
+      before_text + src_merged + source.slice(caret_pos + 1, source.count)
+    );
+    txtBox.caret("pos", caret_pos + src_merged.length - 5);
     txtBox.focus();
-    txtBox.trigger('click');
+    txtBox.trigger("click");
+
+    // click body to dismiss dropdown
+    document.querySelector("body").click();
     return false;
   },
 
   insertString(str) {
     const $target = $(".topic-editor");
     const start = $target[0].selectionStart;
     const end = $target[0].selectionEnd;
-    $target.val($target.val().substring(0, start) + str + $target.val().substring(end));
-    $target[0].selectionStart = ($target[0].selectionEnd = start + str.length);
+    $target.val(
+      $target.val().substring(0, start) + str + $target.val().substring(end)
+    );
+    $target[0].selectionStart = $target[0].selectionEnd = start + str.length;
     return $target.focus();
   },
 
   initComponents() {
     // 绑定文本框 tab 按键事件
     $("textarea.topic-editor").unbind("keydown.tab");
-    $("textarea.topic-editor").bind("keydown.tab", "tab", el => {
+    $("textarea.topic-editor").bind("keydown.tab", "tab", (el) => {
       return this.insertSpaces(el);
     });
 
     return $("textarea.topic-editor").autogrow();
   },
 
-
   pickupEmoji() {
     if (!window._emojiModal) {
       window._emojiModal = new EmojiModalView();
     }
     window._emojiModal.show();
     return false;
-  }
+  },
 });
-