From 101fbc3021a66645613278036f9897d2ab12222e Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Tue, 24 Feb 2015 12:08:55 +0100
Subject: [PATCH] cleanup log styles a bit, remove ids form css

---
 app/styles/app/main/log.sass | 187 +++++++++++++++++------------------
 app/templates/jobs/pre.hbs   |  42 ++++----
 2 files changed, 112 insertions(+), 117 deletions(-)

diff --git a/app/styles/app/main/log.sass b/app/styles/app/main/log.sass
index 81e02054..be32a1f5 100644
--- a/app/styles/app/main/log.sass
+++ b/app/styles/app/main/log.sass
@@ -1,19 +1,93 @@
 
-pre#log
+.log
   position: relative
-  clear: left
-  min-height: 42px
-  margin-top: 25px
-  margin-top: 1em
-  padding: 15px 0
-  color: $color-text-log
-  font-family: monospace
-  font-size: $font-size-log
-  line-height: $line-height-log
-  white-space: pre-wrap
-  word-wrap: break-word
-  background-color: #2a2a2a
-  counter-reset: line-numbering
+  margin-top: 35px
+
+  .log-tail
+    z-index: 99
+    position: absolute
+    display: block
+    top: 0
+    right: 2px
+    margin: 13px 10px 0 0
+    padding: 0 2px 0 3px
+    color: #666
+    text-shadow: 0px 1px 0px #fff
+    font-family: "Source Sans Pro", Helvetica, sans-serif
+    font-size: $font-size-tiny
+    line-height: 14px
+    text-decoration: none
+    white-space: nowrap
+    border: 1px solid #bbb
+    border-top-color: #ddd
+    border-bottom-color: #bbb
+    border-radius: 8px
+    background: linear-gradient(#fff, #e0e0e0)
+
+    label
+      display: none
+      cursor: pointer
+
+    &:hover
+      padding: 1px 4px 1px 6px
+      label
+        display: inline
+
+    &.scrolling
+      position: fixed
+      right: 32px
+
+    &.bottom
+      bottom: 45px
+      top: inherit
+
+    .status
+      display: inline-block
+      margin-right: 1px
+      width: 8px
+      height: 8px
+      background-color: #aaa
+      border-radius: 4px
+      box-shadow: $white 1px 1px 2px
+
+    &.active .status
+      background-color: #6b0
+
+  .to-top
+    z-index: 99
+    position: absolute
+    display: block
+    bottom: 2px
+    right: 2px
+
+    margin-right: 2px
+    padding-right: 16px
+    text-align: right
+    color: #999
+    background: inline-image('ui/workers-close.svg') no-repeat right 6px
+
+.log-header
+  height: 40px
+  margin: 0
+  background-color: $log-header-bg
+  @extend %border-top-4px
+
+.log-body
+  position: relative
+  pre
+    clear: left
+    min-height: 42px
+    padding: 15px 0
+    color: $color-text-log
+    font-family: monospace
+    font-size: $font-size-log
+    line-height: $line-height-log
+    white-space: pre-wrap
+    word-wrap: break-word
+    background-color: #2a2a2a
+    counter-reset: line-numbering
+    margin-top: 0
+    @extend %border-bottom-4px
 
   .cut
     padding: 20px 15px 0 55px
@@ -94,86 +168,5 @@ pre#log
     border-radius: 6px
     color: #bbb
 
-
-#log.loading
-  padding: 25px 0 0 10px
-
-#log-container
-  position: relative
-  margin-top: 35px
-
-#log-container
-  #tail
-    z-index: 99
-    position: absolute
-    display: block
-    top: 0
-    right: 2px
-    margin: 13px 10px 0 0
-    padding: 0 2px 0 3px
-    color: #666
-    text-shadow: 0px 1px 0px #fff
-    font-family: "Source Sans Pro", Helvetica, sans-serif
-    font-size: $font-size-tiny
-    line-height: 14px
-    text-decoration: none
-    white-space: nowrap
-    border: 1px solid #bbb
-    border-top-color: #ddd
-    border-bottom-color: #bbb
-    border-radius: 8px
-    background: linear-gradient(#fff, #e0e0e0)
-
-    label
-      display: none
-      cursor: pointer
-
-    &:hover
-      padding: 1px 4px 1px 6px
-      label
-        display: inline
-
-    &.scrolling
-      position: fixed
-      right: 32px
-
-    &.bottom
-      bottom: 45px
-      top: inherit
-
-    .status
-      display: inline-block
-      margin-right: 1px
-      width: 8px
-      height: 8px
-      background-color: #aaa
-      border-radius: 4px
-      box-shadow: $white 1px 1px 2px
-
-    &.active .status
-      background-color: #6b0
-
-  .to-top
-    z-index: 99
-    position: absolute
-    display: block
-    bottom: 2px
-    right: 2px
-
-    margin-right: 2px
-    padding-right: 16px
-    text-align: right
-    color: #999
-    background: inline-image('ui/workers-close.svg') no-repeat right 6px
-
-
-.log
-
-.log-header
-  background-color: $log-header-bg
-  height: 40px
-  @extend %border-top-4px
-
-.log-body
-  @extend %border-bottom-4px
-  margin: 0
+  .loading
+    padding: 25px 0 0 10px
diff --git a/app/templates/jobs/pre.hbs b/app/templates/jobs/pre.hbs
index 6ff2a2aa..9c2d06cc 100644
--- a/app/templates/jobs/pre.hbs
+++ b/app/templates/jobs/pre.hbs
@@ -3,27 +3,29 @@
     <button class="button button--grey button--removeLog">Remove Log</button>
     <button class="button button--grey button--downloadLog">Download Log</button>
   </menu>
-  <a href="#" id="tail" {{action "toggleTailing" target=view}}>
-    <span class="status"></span>
+  <div class="log-body">
+    <a href="#" id="tail" class="log-tail" {{action "toggleTailing" target=view}}>
+      <span class="status"></span>
 
-    <label>
-      {{#if view.job.isFinished}}
-        Scroll to End of Log
-      {{else}}
-        Follow Log
-      {{/if}}
-    </label>
-  </a>
-  <pre id="log" class="ansi log-body"></pre>
+      <label>
+        {{#if view.job.isFinished}}
+          Scroll to End of Log
+        {{else}}
+          Follow Log
+        {{/if}}
+      </label>
+    </a>
+    <pre id="log" class="ansi"></pre>
 
-  {{#if view.log.hasContent}}
-    <a href='#' class="to-top" {{action "toTop" target=view}}>Top</a>
-  {{/if}}
+    {{#if view.log.hasContent}}
+      <a href='#' class="to-top" {{action "toTop" target=view}}>Top</a>
+    {{/if}}
 
-  {{#if view.limited}}
-    <p class="warning">
-      This log is too long to be displayed. Please reduce the verbosity of your
-      build or download the <a {{bind-attr href="view.plainTextLogUrl"}}>raw log</a>.
-    </p>
-  {{/if}}
+    {{#if view.limited}}
+      <p class="warning">
+        This log is too long to be displayed. Please reduce the verbosity of your
+        build or download the <a {{bind-attr href="view.plainTextLogUrl"}}>raw log</a>.
+      </p>
+    {{/if}}
+  </div>
 </section>