changeset 390:91dabc034389

Improved styling for show.
author nanaya <me@myconan.net>
date Sun, 07 Jun 2015 19:38:42 +0900
parents 433bc70e1781
children 45fef9116924
files app/assets/stylesheets/_layout.scss app/assets/stylesheets/_show-paste.scss app/assets/stylesheets/_variables.scss app/helpers/pastes_helper.rb app/views/layouts/application.html.erb app/views/pastes/show.html.erb
diffstat 6 files changed, 52 insertions(+), 29 deletions(-) [+]
line wrap: on
line diff
--- a/app/assets/stylesheets/_layout.scss	Sun Jun 07 13:05:31 2015 +0900
+++ b/app/assets/stylesheets/_layout.scss	Sun Jun 07 19:38:42 2015 +0900
@@ -28,7 +28,7 @@
 }
 
 main {
-  flex: 1;
+  flex: 1 0 auto;
   width: 100%;
 
   display: flex;
--- a/app/assets/stylesheets/_show-paste.scss	Sun Jun 07 13:05:31 2015 +0900
+++ b/app/assets/stylesheets/_show-paste.scss	Sun Jun 07 19:38:42 2015 +0900
@@ -1,5 +1,5 @@
 #paste-show {
-  flex: 1;
+  flex: 1 0 auto;
   display: flex;
   flex-direction: column;
 
@@ -31,8 +31,22 @@
 }
 
 #paste {
-  flex: 1;
-  overflow: auto;
+  flex: 1 0 auto;
+
+  font-family: $monospace;
+  ol {
+    background-color: #eee;
+  }
+  li {
+    background-color: #fff;
+    &:hover {
+      background-color: $info;
+    }
+
+    &:target {
+      background-color: $info;
+    }
+  }
 }
 
 #paste-show-nav {
--- a/app/assets/stylesheets/_variables.scss	Sun Jun 07 13:05:31 2015 +0900
+++ b/app/assets/stylesheets/_variables.scss	Sun Jun 07 19:38:42 2015 +0900
@@ -5,3 +5,5 @@
 $danger-dark: darken($danger, 60%);
 $info: scale-color(#0f0, $lightness: 90%);
 $info-dark: darken($info, 60%);
+
+$monospace: Consolas, monospace;
--- a/app/helpers/pastes_helper.rb	Sun Jun 07 13:05:31 2015 +0900
+++ b/app/helpers/pastes_helper.rb	Sun Jun 07 19:38:42 2015 +0900
@@ -15,4 +15,8 @@
   def paste_privacy_options
     { "public" => "0", "private" => "1" }
   end
+
+  def paste_line_number(i, lines)
+    "#{" " * (lines.size.to_s.length - i.to_s.length)}#{i}"
+  end
 end
--- a/app/views/layouts/application.html.erb	Sun Jun 07 13:05:31 2015 +0900
+++ b/app/views/layouts/application.html.erb	Sun Jun 07 19:38:42 2015 +0900
@@ -7,6 +7,7 @@
     <%= stylesheet_link_tag    "application", :media => "all" %>
   </head>
   <body>
+    <%= yield(:before_page_header) %>
     <header>
       <h1><%= content_for :title %></h1>
       <p class="credit">
--- a/app/views/pastes/show.html.erb	Sun Jun 07 13:05:31 2015 +0900
+++ b/app/views/pastes/show.html.erb	Sun Jun 07 19:38:42 2015 +0900
@@ -7,33 +7,35 @@
     <li><%= link_to 'Markdown', '#md', :data => { :toggle => 'pill' } %></li>
   </ul>
 
-  <div id="paste" class="tab-content">
-    <div class="tab-pane active" id="pl">
-      <pre><%= @paste.paste %></pre>
-    </div>
-    <div class="tab-pane" id="hl">
-      <pre class="prettyprint linenums"></pre>
-    </div>
-    <div class="tab-pane" id="md">
-      <div class="well"></div>
-    </div>
+  <div id="paste">
+    <% lines = @paste.paste.split("\n") %>
+    <%# list number contains <n> + "." + <2.5 * spaces (approx)> %>
+    <ol style="padding-left: <%= lines.size.to_s.length + 4 %>ch">
+      <% lines.each.with_index(1) do |line, i| %>
+        <li id="L<%= i %>">
+          <%= line %>
+        </li>
+      <% end %>
+    </ol>
   </div>
 </div>
 
-<%= form_for @paste, :method => :delete, :authenticity_token => false do |f| %>
+<nav id="paste-show-nav">
+  <%= form_for @paste, :method => :delete, :authenticity_token => false do |f| %>
 
-  <div class="row"><div class="col-md-4">
-    <div class="input-group">
-      <%= f.text_field :key, :value => nil, :placeholder => 'Deletion key', :class => "form-control", :autofocus => f.object.errors.any? %>
-      <span class="input-group-btn">
-        <%= f.button 'Delete this paste', :class => 'btn btn-danger' %>
-      </span>
-    </div>
-  </div></div>
-<% end %>
+    <div class="row"><div class="col-md-4">
+      <div class="input-group">
+        <%= f.text_field :key, :value => nil, :placeholder => 'Deletion key', :class => "form-control", :autofocus => f.object.errors.any? %>
+        <span class="input-group-btn">
+          <%= f.button 'Delete this paste', :class => 'btn btn-danger' %>
+        </span>
+      </div>
+    </div></div>
+  <% end %>
 
-<ul class="nav nav-pills">
-  <li><%= link_to 'Raw', paste_path(@paste, :txt) %></li>
-  <li><%= link_to 'Derive', root_path(:base => @paste) %></li>
-  <li><%= link_to 'More Paste', root_path %></li>
-</ul>
+  <ul class="nav nav-pills">
+    <li><%= link_to 'Raw', paste_path(@paste, :txt) %></li>
+    <li><%= link_to 'Derive', root_path(:base => @paste) %></li>
+    <li><%= link_to 'More Paste', root_path %></li>
+  </ul>
+</nav>