Added the terminal-container css to the terminal.css file

Conflicts: Readme.md
buildkite · Jul 29, 2014 · 5f1f167 · 5f1f167
1 parent f2d9d57
commit 5f1f167
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/Readme.md b/Readme.md
@@ -48,7 +48,7 @@ Then in your `app/assets/application.css` file:
 Now in your views:
 
 ```
-<div class="code"><%= Terminal.render(output) %></div>
+<div class="term-container"><%= Terminal.render(output) %></div>
 ```
 
 ### Emojis :+1:

diff --git a/app/assets/stylesheets/terminal.css b/app/assets/stylesheets/terminal.css
@@ -1,3 +1,16 @@
+.term-container {
+  background: #171717;
+  border-radius: 5px;
+  color: white;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  font-family: Monaco, courier;
+  font-size: 12px;
+  line-height: 20px;
+  padding: 14px 18px;
+  white-space: pre-wrap;
+}
+
 .term-fg30 { color: #666; } /* black (but we can't use black, so a diff color) */
 .term-fg31 { color: #e10c02; } /* red */
 .term-fg32 { color: #00bd02; } /* green */

diff --git a/lib/terminal/templates/preview.html.erb b/lib/terminal/templates/preview.html.erb
@@ -4,20 +4,6 @@
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <link href="<%= asset_path("stylesheets/terminal.css") %>" media="screen" rel="stylesheet" />
     <style>
-      .code {
-        background: #171717;
-        border-radius: 5px;
-        color: white;
-        word-break: break-word;
-        overflow-wrap: break-word;
-        font-family: Monaco, courier;
-        font-size: 12px;
-        line-height: 20px;
-        padding: 14px 18px;
-        white-space: pre-wrap;
-        margin-bottom: 15px;
-      }
-
       body {
         margin: 0;
         padding: 20px;
@@ -46,11 +32,11 @@
   <body>
     <div id="rendered" class="preview">
       <div class="controls"><a href="#" onclick="switchViews(); return false">Show Raw Output</a></div>
-      <div class="code"><%= rendered %></div>
+      <div class="term-container"><%= rendered %></div>
     </div>
     <div id="raw" class="preview" style="display: none">
       <div class="controls"><a href="#" onclick="switchViews(); return false">Show Rendered Output</a></div>
-      <div class="code raw"><%= raw %></div>
+      <div class="term-container raw"><%= raw %></div>
     </div>
   </body>
 </html>