upgrade bootstrap and move to package.json

mockdeep · mockdeep · commit ecb71f963b61 · 2026-02-13T20:51:30.000-08:00
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -1,5 +1,5 @@
 //= require jquery.min.js
-//= require bootstrap-min.js
+//= require bootstrap.min.js
 //= require bootstrap.file-input.js
 //= require mousetrap.js
 //= require jquery.visible.min.js
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -1,4 +1,5 @@
 /*
+  *= require bootstrap.min
   *= require_tree .
 */
 
@@ -56,11 +57,11 @@ code {
 }
 
 @media (max-width: 768px) {
-  #footer .row-fluid > * {
+  #footer .row > * {
     display: none;
   }
 
-  #footer .row-fluid > .span6:first-child {
+  #footer .row > .col-md-8:first-child {
     display: block;
     width: 100%;
     text-align: center;
@@ -82,8 +83,9 @@ code {
 
 #action-bar .btn {
   padding: 8px;
-  height: 18px;
-  width: 18px;
+  height: 34px;
+  width: 34px;
+  line-height: 18px;
 }
 
 #action-bar button.btn {
@@ -419,7 +421,7 @@ li.feed .feed-last-updated {
     display: none;
   }
 
-  li.feed .row-fluid .span2 {
+  li.feed .row .col-md-2 {
     float: right;
     margin-right: 21px;
   }
@@ -510,8 +512,8 @@ li.feed .remove-feed a:hover {
   text-align: center;
 }
 
-.setup .control-group input {
-  width: 210px;
+.setup .form-group input {
+  width: 350px;
 }
 
 .setup .field-icon {
@@ -527,11 +529,11 @@ li.feed .remove-feed a:hover {
   transition: 0.25s;
 }
 
-.setup .control-group input:focus + .field-icon {
+.setup .form-group input:focus + .field-icon {
   color: #484948;
 }
 
-.setup .control-group input:focus ~ .field-label {
+.setup .form-group input:focus ~ .field-label {
   color: #484948;
 }
 
@@ -560,7 +562,7 @@ li.feed .remove-feed a:hover {
   width: 244px;
 }
 
-.setup .control-group {
+.setup .form-group {
   position: relative;
 }
 
diff --git a/app/assets/stylesheets/bootstrap-min.css b/app/assets/stylesheets/bootstrap-min.css
diff --git a/app/views/feeds/_single_feed_action_bar.html.erb b/app/views/feeds/_single_feed_action_bar.html.erb
@@ -1,4 +1,4 @@
-<div class="row-fluid">
+<div class="row">
   <div class="pull-left">
     <a class="btn" id="home" href="/news" title="<%= t('partials.feed_action_bar.home') %>">
       <i class="icon-reply"></i>
diff --git a/app/views/feeds/edit.html.erb b/app/views/feeds/edit.html.erb
@@ -7,18 +7,18 @@
   <hr />
   <%= form_with(url: "/feeds/#{@feed.id}", method: :put, id: "add-feed-setup") do %>
     <input type="hidden" name="feed_id" value="<%= @feed.id %>">
-    <div class="control-group">
+    <div class="form-group">
       <input name="feed_name" id="feed-name" class="form-control" type="text" value="<%= @feed.name %>" required />
       <i class="icon-pencil field-icon"></i>
       <label id="feed-name-label" class="field-label" for="feed-name"><%= t('feeds.edit.fields.feed_name') %></label>
     </div>
-    <div class="control-group">
+    <div class="form-group">
       <input name="feed_url" id="feed-url" class="form-control" type="text" value="<%= @feed.url %>" autofocus required />
       <i class="icon-rss field-icon"></i>
       <label id="feed-url-label" class="field-label" for="feed-url"><%= t('feeds.edit.fields.feed_url') %></label>
     </div>
     <% if current_user.groups.any? %>
-      <div class="control-group">
+      <div class="form-group">
         <input type="text" class="form-control" tabindex="-1">
         <select name="group_id" id="group-id">
           <option value=""></option>
diff --git a/app/views/feeds/new.html.erb b/app/views/feeds/new.html.erb
@@ -8,7 +8,7 @@
   <p><%= t('feeds.add.description') %></p>
   <hr />
   <%= form_with(url: "/feeds", id: "add-feed-setup") do %>
-    <div class="control-group">
+    <div class="form-group">
       <input name="feed_url" class="form-control" id="feed-url" type="text" value="<%= @feed_url %>" autofocus/>
       <i class="icon-rss field-icon"></i>
       <label id="feed_url-label" class="field-label" for="feed_url"><%= t('feeds.add.fields.feed_url') %></label>
diff --git a/app/views/js/templates/_story.js.erb b/app/views/js/templates/_story.js.erb
@@ -1,14 +1,14 @@
 <script type="text/template" id="story-template">
-  <div class="row-fluid story-preview">
-    <div class="span3">
+  <div class="row story-preview">
+    <div class="col-md-3">
       <div class="story-starred">
         <i class="icon-star{{ if(!is_starred) { }}-empty{{ } }}"></i>
       </div>
       <p class="blog-title">
         {{= source }}
       </p>
     </div>
-    <div class="span9">
+    <div class="col-md-9">
       <p class="story-details">
         <span class="story-title">
           {{= headline }}
@@ -20,7 +20,7 @@
     </div>
   </div>
 
-  <div class="story-body-container" class="row-fluid">
+  <div class="story-body-container">
     <div class="story-body">
       <h1>
         <a href="{{= permalink }}">{{= title }}</a>
@@ -32,7 +32,7 @@
       </h1>
       {{= body }}
     </div>
-    <div class="row-fluid story-actions-container">
+    <div class="row story-actions-container">
       <div class="pull-left">
         <span class="story-published">
           {{= pretty_date }}
diff --git a/app/views/layouts/_flash.html.erb b/app/views/layouts/_flash.html.erb
@@ -5,18 +5,18 @@
 <% end %>
 
 <% if flash.key? :error %>
-  <div class="alert alert-error error">
+  <div class="alert alert-danger error">
     <%= flash[:error] %>
   </div>
 <% end %>
 
 <noscript>
-  <div class="alert alert-error error">
+  <div class="alert alert-danger error">
     <%= t('flash.js_required') %>
   </div>
 </noscript>
 
-<div id="cookies-required" class="alert alert-error error" style="display: none;">
+<div id="cookies-required" class="alert alert-danger error" style="display: none;">
   <%= t('flash.cookies_required') %>
 </div>
 
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -1,33 +1,33 @@
 <div class="container">
-  <div class="row-fluid">
-    <div class="span8">
+  <div class="row">
+    <div class="col-md-8">
       <ul class="footer-links">
         <% if current_user %>
           <li><a href="/logout"><%= t('layout.logout') %></a></li>
-          <li class="muted">·</li>
+          <li class="text-muted">·</li>
           <li><a href="/feeds/import"><%= t('layout.import') %></a></li>
-          <li class="muted">·</li>
+          <li class="text-muted">·</li>
           <li><a href="/feeds/export"><%= t('layout.export') %></a></li>
-          <li class="muted">·</li>
+          <li class="text-muted">·</li>
           <li>
             <a href="#shortcuts" data-toggle="modal" aria-label="shortcuts">
               <i aria-hidden="true" class="icon-keyboard">
               </i>
             </a>
           </li>
-          <li class="muted">·</li>
+          <li class="text-muted">·</li>
           <li><%= link_to(t('layout.profile'), edit_profile_path) %></li>
-          <li class="muted">·</li>
+          <li class="text-muted">·</li>
           <% if current_user.admin? %>
             <li><%= link_to(t('layout.admin_settings'), settings_path) %></li>
-            <li class="muted">·</li>
+            <li class="text-muted">·</li>
           <% end %>
         <% end %>
 
         <li><a href="https://github.com/stringer-rss/stringer"><%= t('layout.support') %></a></li>
       </ul>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <p class="pull-right">
         <b><%= t('layout.hey') %></b> <%= t('layout.back_to_work') %>
       </p>
diff --git a/app/views/layouts/_shortcuts.html.erb b/app/views/layouts/_shortcuts.html.erb
@@ -1,24 +1,28 @@
-<div id="shortcuts" class="modal hide fade" tabindex="-1" role="dialog">
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-    <h3 id="myModalLabel"><%= t('partials.shortcuts.title') %></h3>
-  </div>
-  <div class="modal-body">
-    <ul class="shortcut-legend">
-      <li><kbd>j</kbd>/<kbd>k</kbd>: <%= t('partials.shortcuts.keys.jk') %></li>
-      <li><kbd>n</kbd>/<kbd>p</kbd>: <%= t('partials.shortcuts.keys.np') %></li>
-      <li><kbd>o</kbd> <%= t('partials.shortcuts.keys.or') %> <kbd>enter</kbd>: <%= t('partials.shortcuts.keys.oenter') %></li>
-      <li><kbd>m</kbd>: <%= t('partials.shortcuts.keys.m') %></li>
-      <li><kbd>s</kbd>: <%= t('partials.shortcuts.keys.s') %></li>
-      <li><kbd>b</kbd> <%= t('partials.shortcuts.keys.or') %> <kbd>v</kbd>: <%= t('partials.shortcuts.keys.bv') %></li>
-      <li class="blank"></li>
-      <li><kbd>a</kbd>: <%= t('partials.shortcuts.keys.a') %></li>
-      <li><kbd>shift</kbd>+<kbd>a</kbd>: <%= t('partials.shortcuts.keys.shifta') %></li>
-      <li><kbd>f</kbd>: <%= t('partials.shortcuts.keys.f') %></li>
-      <li><kbd>r</kbd>: <%= t('partials.shortcuts.keys.r') %></li>
-      <li class="blank"></li>
-      <li><kbd>&larr;</kbd>: <%= t('partials.shortcuts.keys.left') %></li>
-      <li><kbd>&rarr;</kbd>: <%= t('partials.shortcuts.keys.right') %></li>
-    </ul>
+<div id="shortcuts" class="modal fade" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 id="myModalLabel"><%= t('partials.shortcuts.title') %></h4>
+      </div>
+      <div class="modal-body">
+        <ul class="shortcut-legend">
+          <li><kbd>j</kbd>/<kbd>k</kbd>: <%= t('partials.shortcuts.keys.jk') %></li>
+          <li><kbd>n</kbd>/<kbd>p</kbd>: <%= t('partials.shortcuts.keys.np') %></li>
+          <li><kbd>o</kbd> <%= t('partials.shortcuts.keys.or') %> <kbd>enter</kbd>: <%= t('partials.shortcuts.keys.oenter') %></li>
+          <li><kbd>m</kbd>: <%= t('partials.shortcuts.keys.m') %></li>
+          <li><kbd>s</kbd>: <%= t('partials.shortcuts.keys.s') %></li>
+          <li><kbd>b</kbd> <%= t('partials.shortcuts.keys.or') %> <kbd>v</kbd>: <%= t('partials.shortcuts.keys.bv') %></li>
+          <li class="blank"></li>
+          <li><kbd>a</kbd>: <%= t('partials.shortcuts.keys.a') %></li>
+          <li><kbd>shift</kbd>+<kbd>a</kbd>: <%= t('partials.shortcuts.keys.shifta') %></li>
+          <li><kbd>f</kbd>: <%= t('partials.shortcuts.keys.f') %></li>
+          <li><kbd>r</kbd>: <%= t('partials.shortcuts.keys.r') %></li>
+          <li class="blank"></li>
+          <li><kbd>&larr;</kbd>: <%= t('partials.shortcuts.keys.left') %></li>
+          <li><kbd>&rarr;</kbd>: <%= t('partials.shortcuts.keys.right') %></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -27,8 +27,8 @@
         <%= render 'layouts/flash' %>
         <%= render 'layouts/shortcuts' if current_user %>
         <div class="container">
-          <div class="row-fluid">
-            <div class="span12">
+          <div class="row">
+            <div class="col-md-12">
               <%= yield %>
             </div>
           </div>
diff --git a/app/views/passwords/new.html.erb b/app/views/passwords/new.html.erb
@@ -5,18 +5,18 @@
   <p><%= t('first_run.password.description') %></p>
   <hr />
   <%= form_with(model: User.new, url: "/setup/password", id: "password_setup") do |form| %>
-    <div class="control-group">
+    <div class="form-group">
       <%= form.text_field :username, class: "form-control", required: true %>
       <%= form.label :username, t('first_run.password.fields.username'), class: "field-label" %>
     </div>
 
-    <div class="control-group">
+    <div class="form-group">
       <%= form.password_field :password, class: "form-control", required: true %>
       <i class="icon-lock field-icon"></i>
       <%= form.label :password, t('first_run.password.fields.password'), class: "field-label" %>
     </div>
 
-    <div class="control-group">
+    <div class="form-group">
       <%= form.password_field :password_confirmation, class: "form-control", required: true %>
       <i class="icon-lock field-icon"></i>
       <%= form.label :password_confirmation, t('first_run.password.fields.password_confirmation'), class: "field-label" %>
diff --git a/app/views/sessions/new.erb b/app/views/sessions/new.erb
@@ -6,12 +6,12 @@
 
   <%= form_with(url: "/login") do |form| %>
     <p><%= t('sessions.new.fields.unknown_username_html') %></p>
-    <div class="control-group">
+    <div class="form-group">
       <%= form.text_field :username, class: "form-control", required: true %>
       <%= form.label :username, t('sessions.new.fields.username'), class: "field-label" %>
     </div>
 
-    <div class="control-group">
+    <div class="form-group">
       <input name="password" class="form-control" id="password" type="password" required />
       <i class="icon-lock field-icon"></i>
       <label id="password-label" class="field-label" for="password"><%= t('sessions.new.fields.password') %></label>
diff --git a/app/views/settings/index.html.erb b/app/views/settings/index.html.erb
@@ -7,7 +7,7 @@
   <hr />
   <p><%= t('.description') %></p>
   <hr />
-  <div class="control-group">
+  <div class="form-group">
     <% setting = Setting::UserSignup.first %>
     <%= form_with(model: setting, scope: :setting, url: setting_path(setting)) do |form| %>
       <% if Setting::UserSignup.enabled? %>
diff --git a/app/views/stories/_templates.html.erb b/app/views/stories/_templates.html.erb
@@ -1,14 +1,14 @@
 <script type="text/template" id="story-template">
-  <div class="row-fluid story-preview">
-    <div class="span3">
+  <div class="row story-preview">
+    <div class="col-md-3">
       <div class="story-starred">
         <i class="icon-star{{ if(!is_starred) { }}-empty{{ } }}"></i>
       </div>
       <p class="blog-title">
         {{= source }}
       </p>
     </div>
-    <div class="span9">
+    <div class="col-md-9">
       <p class="story-details">
         <span class="story-title">
           {{= headline }}
@@ -20,7 +20,7 @@
     </div>
   </div>
 
-  <div class="story-body-container" class="row-fluid">
+  <div class="story-body-container">
     <div class="story-body">
       <h1>
         <a href="{{= permalink }}">{{= title }}</a>
@@ -32,7 +32,7 @@
       </h1>
       {{= body }}
     </div>
-    <div class="row-fluid story-actions-container">
+    <div class="row story-actions-container">
       <div class="pull-left">
         <span class="story-published">
           {{= pretty_date }}
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -8,6 +8,8 @@
 # Add additional assets to the asset load path.
 Rails.application.config.assets.paths += [
   Rails.root.join("node_modules/backbone"),
+  Rails.root.join("node_modules/bootstrap/dist/js"),
+  Rails.root.join("node_modules/bootstrap/dist/css"),
   Rails.root.join("node_modules/jquery"),
   Rails.root.join("node_modules/mousetrap"),
   Rails.root.join("node_modules/underscore"),
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   },
   "dependencies": {
     "backbone": "1.0.0",
+    "bootstrap": "3.1.1",
     "jquery": "1.9.1",
     "jquery-visible": "1.2.0",
     "mousetrap": "1.4.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
diff --git a/vendor/assets/javascripts/bootstrap-min.js b/vendor/assets/javascripts/bootstrap-min.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`/*`
	`2`	`+ *= require bootstrap.min`
`2`	`3`	`*= require_tree .`
`3`	`4`	`*/`
`4`	`5`
`@@ -56,11 +57,11 @@ code {`
`56`	`57`	`}`
`57`	`58`
`58`	`59`	`@media (max-width: 768px) {`
`59`		`- #footer .row-fluid > * {`
	`60`	`+ #footer .row > * {`
`60`	`61`	`display: none;`
`61`	`62`	`}`
`62`	`63`
`63`		`- #footer .row-fluid > .span6:first-child {`
	`64`	`+ #footer .row > .col-md-8:first-child {`
`64`	`65`	`display: block;`
`65`	`66`	`width: 100%;`
`66`	`67`	`text-align: center;`
`@@ -82,8 +83,9 @@ code {`
`82`	`83`
`83`	`84`	`#action-bar .btn {`
`84`	`85`	`padding: 8px;`
`85`		`- height: 18px;`
`86`		`- width: 18px;`
	`86`	`+ height: 34px;`
	`87`	`+ width: 34px;`
	`88`	`+ line-height: 18px;`
`87`	`89`	`}`
`88`	`90`
`89`	`91`	`#action-bar button.btn {`
`@@ -419,7 +421,7 @@ li.feed .feed-last-updated {`
`419`	`421`	`display: none;`
`420`	`422`	`}`
`421`	`423`
`422`		`- li.feed .row-fluid .span2 {`
	`424`	`+ li.feed .row .col-md-2 {`
`423`	`425`	`float: right;`
`424`	`426`	`margin-right: 21px;`
`425`	`427`	`}`
`@@ -510,8 +512,8 @@ li.feed .remove-feed a:hover {`
`510`	`512`	`text-align: center;`
`511`	`513`	`}`
`512`	`514`
`513`		`-.setup .control-group input {`
`514`		`- width: 210px;`
	`515`	`+.setup .form-group input {`
	`516`	`+ width: 350px;`
`515`	`517`	`}`
`516`	`518`
`517`	`519`	`.setup .field-icon {`
`@@ -527,11 +529,11 @@ li.feed .remove-feed a:hover {`
`527`	`529`	`transition: 0.25s;`
`528`	`530`	`}`
`529`	`531`
`530`		`-.setup .control-group input:focus + .field-icon {`
	`532`	`+.setup .form-group input:focus + .field-icon {`
`531`	`533`	`color: #484948;`
`532`	`534`	`}`
`533`	`535`
`534`		`-.setup .control-group input:focus ~ .field-label {`
	`536`	`+.setup .form-group input:focus ~ .field-label {`
`535`	`537`	`color: #484948;`
`536`	`538`	`}`
`537`	`539`
`@@ -560,7 +562,7 @@ li.feed .remove-feed a:hover {`
`560`	`562`	`width: 244px;`
`561`	`563`	`}`
`562`	`564`
`563`		`-.setup .control-group {`
	`565`	`+.setup .form-group {`
`564`	`566`	`position: relative;`
`565`	`567`	`}`
`566`	`568`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="row-fluid">`
	`1`	`+<div class="row">`
`2`	`2`	`<div class="pull-left">`
`3`	`3`	`<a class="btn" id="home" href="/news" title="<%= t('partials.feed_action_bar.home') %>">`
`4`	`4`	`<i class="icon-reply"></i>`