diff app/views/pastes/show.html.erb @ 469:68231013b01b bootstrap-4

Now with more bootstrap than ever
author nanaya <me@nanaya.pro>
date Sun, 23 Feb 2020 22:25:50 +0900
parents 1fc5ddcde386
children
line wrap: on
line diff
--- a/app/views/pastes/show.html.erb	Sun Feb 23 20:23:09 2020 +0900
+++ b/app/views/pastes/show.html.erb	Sun Feb 23 22:25:50 2020 +0900
@@ -1,71 +1,65 @@
 <% provide :title, "Paste ##{@paste.id}" %>
 
-<div class="row"><div class="col-xs-12">
-  <ul class="nav nav-tabs" role="tablist">
-    <% [
-        { :title => t(".plain"), :target => "pl", :active => true },
-        { :title => t(".highlight"), :target => "hl" },
-        { :title => t(".markdown"), :target => "md" }
-    ].each do |el| %>
-      <li role="presentation" class="<%= "active" if el[:active] %>">
-        <%= link_to el[:title], "##{el[:target]}",
-            :data => {
-              :mode => el[:target],
-              :toggle => "tab"
-            },
-            :aria => { :controls => el[:target] },
-            :role => "tab",
-            :class => "js-show-tab"
-        %>
-      </li>
-    <% end %>
-  </ul>
-</div></div>
+<ul class="nav nav-tabs" role="tablist">
+  <% [
+      { title: t(".plain"), target: 'pl', active: true },
+      { title: t(".highlight"), target: 'hl' },
+      { title: t(".markdown"), target: 'md' }
+  ].each do |el| %>
+    <li class="nav-item">
+      <%= link_to el[:title], "##{el[:target]}",
+          data: {
+            mode: el[:target],
+            toggle: 'tab',
+          },
+          aria: { controls: el[:target] },
+          role: 'tab',
+          class: "nav-link #{"active" if el[:active]} js-show-tab"
+      %>
+    </li>
+  <% end %>
+</ul>
 
-<div class="row js-showing-paste"><div class="col-xs-12"><div class="paste-show">
+<div class="js-showing-paste paste-show">
   <div class="tab-content">
     <div role="tabpanel" class="tab-pane active" id="pl">
-      <pre class="paste-show__content"><code class="js-paste-pl"><%= @paste.paste %></code></pre>
+      <pre class="paste-content"><code class="js-paste-pl"><%= @paste.paste %></code></pre>
     </div>
 
     <div role="tabpanel" class="tab-pane" id="hl">
-      <pre class="paste-show__content"><code class="js-paste-hl zp-hl lang-<%= @paste.language.try(:parameterize) %>"></code></pre>
+      <pre class="paste-content"><code class="js-paste-hl zp-hl lang-<%= @paste.language.try(:parameterize) %>"></code></pre>
     </div>
 
     <div role="tabpanel" class="tab-pane" id="md">
       <div class="js-paste-md"></div>
     </div>
   </div>
-</div></div></div>
+</div>
 
-<div class="row"><div class="col-xs-12">
-  <%= form_for @paste, :method => :delete, :authenticity_token => false do |f| %>
-    <div class="form-group form-group--narrow <%= error_class f.object, :key %>">
-      <div class="input-group">
-        <%= f.text_field :key,
-            :value => nil,
-            :placeholder => t("pastes.new.deletion_key"),
-            :autofocus => f.object.errors.any?,
-            :autocomplete => "off",
-            :class => "form-control"
-        %>
+<%= form_for @paste, method: :delete, authenticity_token: false, html: { class: 'form-row' } do |f| %>
+  <div class="col-auto my-1">
+    <%= f.text_field :key,
+        value: nil,
+        placeholder: t('pastes.new.deletion_key'),
+        autofocus: f.object.errors.any?,
+        autocomplete: 'off',
+        class: "form-control w-auto #{error_class f.object, :key}"
+    %>
+  </div>
 
-        <span class="input-group-btn">
-          <%= f.button t(".delete"), :class => "btn btn-danger" %>
-        </span>
-      </div>
-    </div>
-  <% end %>
-</div></div>
+  <div class="col-auto my-1">
+    <%= f.button t(".delete"), class: 'btn btn-danger' %>
+  </div>
+<% end %>
 
-<ul class="nav nav-pills paste-show__footer">
-    <li role="presentation">
-      <%= link_to t(".raw"), paste_path(@paste, :txt) %>
-    </li>
-    <li role="presentation">
-      <%= link_to t(".derive"), root_path(:base => @paste) %>
-    </li>
-    <li role="presentation">
-      <%= link_to t(".more"), root_path %>
-    </li>
-</ul>
+<div class="row mt-4">
+    <% [
+      [t('.raw'), paste_path(@paste, :txt)],
+      [t('.derive'), root_path(:base => @paste)],
+      [t('.more'), root_path],
+    ].each do |label, url| %>
+      <div class="col-auto">
+        <%= link_to label, url %>
+      </div>
+    <% end %>
+</div>