make log toggle on mobile

app/components/log-content.js

@@ -60,6 +60,7 @@ Object.defineProperty(Log.Limit.prototype, 'limited', {
 
 export default Ember.Component.extend({
   popup: Ember.inject.service(),
+  logIsVisible: false,
   currentUserBinding: 'auth.currentUser',
 
   didInsertElement() {
@@ -220,6 +221,10 @@ export default Ember.Component.extend({
         this.get('popup').open('remove-log-popup');
         return false;
       }
+    },
+
+    toggleLog() {
+      this.toggleProperty('ligIsVisible');
     }
   },
 

app/styles/app.scss

@@ -14,7 +14,6 @@
 
 @import "app/userlike";
 
-@import "app/main/log";
 @import "app/misc";
 @import "app/popup";
 
@@ -57,6 +56,7 @@
 @import "app/layouts/repo";
 @import "app/layouts/jobs";
 @import "app/layouts/pull-requests";
+@import "app/main/log";
 
 @import "app/layouts/requests";
 @import "app/layouts/caches";

app/styles/app/main/log.sass

@@ -41,18 +41,18 @@
     .tail-status
       position: relative
       display: inline-block
-      height: 20px;
+      height: 20px
-      width: 20px;
+      width: 20px
       vertical-align: middle
       background-color: $grey-light
-      border-radius: 50%;
+      border-radius: 50%
       &:after
         content: ""
         display: block
-        height: 10px;
+        height: 10px
-        width: 10px;
+        width: 10px
-        background: #f1f1f1;
+        background: #f1f1f1
-        border-radius: 50%;
+        border-radius: 50%
         @extend %absolute-center
 
     &.active .tail-status
@@ -81,13 +81,41 @@
   a
     margin-left: .4em
 
+.log-main
+  display: none
+  &.is-visible
+    display: block
+  @media #{$medium-up}
+    display: block
+
+[class^="toggle-log-button"]
+  @media #{$medium-up}
+    display: none !important
+
+.toggle-log-button
+  border: 1px solid $grey
+  padding: .5em 1em
+  border-radius: 2px
+  display: block
+  text-align: center
+  &.hidden
+    display: none
+  &:hover,
+  &:active
+    background: $grey
+    color: white
+
+.toggle-log-button--dark
+  @extend %log-button
+  @extend %icon-line-eye
+  background-size: auto 21px;
+  background-position: 6px 2px;
+  &:hover,
+  &:active
+    background-color: #999a98
+
 .log-body
   position: relative
-  max-height: 20vh
-  overflow: scroll
-  @media #{$medium-up}
-    max-height: none
-    overflow: auto
 
   pre
     clear: left

app/styles/app/modules/buttons.sass

@@ -196,6 +196,9 @@ $button-border-color: #d4d4d4
   &:hover,
   &:active
     background-color: #d94341
+  display: none
+  @media #{$medium-up}
+    display: inline-block
 
 .download-log-button
   @extend %log-button

app/templates/components/log-content.hbs

@@ -1,5 +1,7 @@
 {{remove-log-popup job=job}}
 
+
+
 <section id="log-container" class="log">
 
   {{#if auth.signedIn}}
@@ -28,13 +30,16 @@
     <div class="log-notice">Hang tight, the log cannot be shown until the build has started.</div>
   {{/if}}
 
-  <div class="{{if job.notStarted 'hidden'}}">
+  <a class="toggle-log-button {{if logIsVisible 'hidden'}}" title="Display the log" {{action "toggleLog"}}><span class="icon-view--white" aria-hidden='true'></span>View log</a>
-    <menu class="log-header">
+
+  <div class="log-main {{if logIsVisible 'is-visible'}} {{if job.notStarted 'hidden'}}">
+    <div class="log-header">
+      <a class="toggle-log-button--dark {{unless logIsVisible 'hidden'}}" title="Display the log" {{action "toggleLog"}}><span class="icon-view" aria-hidden='true'></span>Hide log</a>
       {{#if canRemoveLog}}
         <a class="remove-log-button open-popup" {{action "removeLogPopup"}}>Remove log</a>
       {{/if}}
-      <a class="download-log-button" href={{plainTextLogUrl}}>Download log</a>
+      <a class="download-log-button" href={{plainTextLogUrl}}>Raw log</a>
-    </menu>
+    </div>
     <div class="log-body">
       {{#if showTailing}}
         <a href="#" id="tail" class="log-tail" {{action "toggleTailing"}}>