Merge pull request #361 from travis-ci/cc-popup

Cc popup

app/styles/app.scss

@@ -18,9 +18,8 @@
 @import "app/main/sponsors";
 @import "app/misc";
 @import "app/popup";
-@import "app/pro";
+// @import "app/pro";
 @import "app/settings";
-@import "app/tabs";
 
 @import "app/components/travis-switch";
 @import "app/components/sync-button";

app/styles/app/_mixins/colors.sass

@@ -32,6 +32,19 @@ $gray-light-2: #efefef
 $gray-light-3: #f2f2eb
 $gray-light-4: #fdfdfd
 
+$cream-light: #FAFAF8
+$cream-dark: #EFF0EC
+$grey-light: #A1A0A0
+$grey-medium: #969496
+$grey-dark: #808080
+
+$green-light: #73c78d
+$green-dark: #3FA75F
+$red-light: #D7625F
+$red-dark: #DB423C
+$teal-light: #63A4A3
+$teal-dark: #5BA5A4
+
 $slate-blue-1: #e1e2e6
 $slate-blue-2: #e5e8ee
 $slate-blue-3: #f2f4f9

app/styles/app/_mixins/mixins.sass

@@ -1,13 +1,4 @@
 
-@mixin popup
-  display: none
-  position: fixed
-  z-index: 100
-  background-color: #fff
-  border: 10px solid rgba(114, 131, 139, 0.6)
-  background-clip: padding-box
-  border-radius 4px
-
 @mixin fadeOut($position, $angle, $color, $width: 0%)
   content: ""
   display: block

app/styles/app/app.sass

@@ -1,26 +0,0 @@
-
-html, body
-  height: 100%
-
-a
-  color: $color-link
-  text-decoration: none
-
-ul
-  padding: 0
-  margin: 0
-  list-style-type: none
-
-li
-  padding: 0
-
-.github-link
-  background: transparent url(/images/icons/github.svg) center right no-repeat
-  background-size: 12px
-  opacity: 1
-  padding-right: 16px
-
-  &.only-on-hover
-    background-image: none
-  &.only-on-hover:hover
-    background-image: url(/images/icons/github.svg)

app/styles/app/main/log.sass

@@ -4,7 +4,7 @@
   margin-top: 35px
 
   .log-tail
-    z-index: 99
+    z-index: 80
     position: absolute
     display: block
     top: 0
@@ -50,7 +50,7 @@
       background-color: #6b0
 
   .to-top
-    z-index: 99
+    z-index: 80
     position: absolute
     display: block
     bottom: 2px

app/styles/app/modules/tabs.sass

@@ -75,3 +75,48 @@
       li
         float: left
         margin-right: 1em
+
+
+#main
+  .tabs
+    border-bottom: 3px solid #f5f5f6
+    li
+      height: 29px
+      background-color: #f5f5f6
+      margin-right: 0
+      overflow: hidden
+      &:hover
+        background-color: #e1e8eb
+    a
+      text-decoration: none
+
+    .active
+      display: block
+      background-color: $tab-active-bg
+      border-bottom-color: $tab-active-bg
+      &:hover
+        background-color: $tab-active-bg
+      a
+        color: #6c878e
+      @media #{$medium-up}
+        display: inline-block
+
+  #builds
+    a
+      display: inline
+
+.tabs--main
+  #tab_build,
+  #tab_job,
+  #tab_request,
+  #tab_requests,
+  #tab_caches,
+  #tab_settings
+    display: none
+    &.active
+      display: inline-block
+
+#profile
+  #main
+    .tab
+      margin: 30px 0 0 12px

app/styles/app/popup.sass

@@ -1,3 +1,15 @@
+%popup
+  width: 29em
+  height: auto
+  position: fixed
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+  padding: 2.5em 2em
+  color: #565656
+  z-index: 99
+  background-color: $white
+  @extend %border-radius-4px
 
 .help
   display: inline-block
@@ -14,13 +26,14 @@
   cursor: pointer
 
 .popup
-  top: 50%
+  @extend %popup
-  left: 50%
+  display: none
   width: 400px
-  margin: -200px 0 0 -200px
+  background-color: #fff
-  padding: 20px
+  border: solid 10px $cream-dark
-  @include popup
+
-  box-sizing: border-box
+  &:before
+    content: ""
 
   .close
     position: absolute
@@ -29,11 +42,8 @@
     top: 10px
     width: 16px
     height: 16px
-    background:
+    @extend .icon
-      image: inline-image('ui/close.svg')
+    @extend .icon--dismiss-grey
-      repeat: no-repeat
-      size: 100%
-
   h4
     margin-top: 0
     font-size: 18px
@@ -41,20 +51,20 @@
     color: $color-text
 
   p
-    font-size: $font-size-normal
+    font-size: $font-size-sm
     word-wrap: normal
 
   pre
     background-color: $color-bg-pre
     margin: 0
-    padding: 10px 20px
+    padding: 5px 10px
     border-radius: 4px
     overflow-x: scroll
 
 #status-images
-  display: none
+  width: 100%
+  @media #{$medium-up}
     width: 600px
-  margin: -95px 0 0 -300px
 
   p
     margin: 0
@@ -97,19 +107,11 @@
     border-radius: 3px
 
 #regenerate-key, #regeneration-success
-  display: none
   width: 400px
 
 #code-climate
-  width: 500px
+  width: 100%
-  padding: 5px 20px
-  margin-left: -250px
-
-  pre
-    padding: 5px 10px
-
   ol
-    padding-left: 15px
+    padding-left: 1.2em
-  img#code-climate-logo
+  @media #{$medium-up}
-    margin-right: 50px
+    width: 550px
-

app/styles/app/tabs.sass

@@ -1,132 +0,0 @@
-/*
- * It's a nightmare to overwrite this
- * @todo refactor and get rid of all IDs
- */
-
-
-// .tabs
-//   @include resetul
-//   li
-//     height: 28px
-//     vertical-align: top
-//     background-color: $tab-nav-inactive-bg
-//     border-radius: 4px 4px 0px 0px
-//     padding: 0 12px 0 12px
-//     margin-right: 10px
-//     white-space: nowrap
-//     cursor: pointer
-//   @media #{$medium-up}
-//     height: 29px
-//     li
-//       display: inline-block
-//       &:hover
-//         background-color: $tab-nav-inactive-bg-hover
-
-//   .active
-//     background-color: $color-bg-tab-active
-//     border-bottom-color: $color-bg-tab-active
-
-//     a
-//       color: $color-text
-//       font-weight: 600
-
-//   h5
-//     margin: 0
-//     font-size: $font-size-small
-//     font-weight: normal
-//     line-height: 30px
-//     text-align: center
-
-//     a
-//       display: block
-//       color: #a8a9ab
-
-
-// #left
-
-//   .tabs
-//     margin: -28px 20px 0 15px
-
-//   #tab_search:not(.active)
-//     display: none
-
-//   #tab_recent.hidden
-//     display: none
-
-//   #tab_owned
-//     display: none
-//   #tab_owned.display
-//     display: inline-block
-//   #tab_new
-//     display: none
-//     height: 25px
-//     width: 26px
-//     margin-top: 3px
-//     float: right
-//     margin-right: 0
-//     padding: 0 5px 0 5px
-
-//     h5
-//       line-height: 25px
-
-//   #tab_new.display
-//     display: inline-block
-
-#main
-  .tabs
-    border-bottom: 3px solid #f5f5f6
-    li
-      height: 29px
-      background-color: #f5f5f6
-      margin-right: 0
-      overflow: hidden
-      &:hover
-        background-color: #e1e8eb
-    a
-      text-decoration: none
-
-    .active
-      display: block
-      background-color: $tab-active-bg
-      border-bottom-color: $tab-active-bg
-      &:hover
-        background-color: $tab-active-bg
-      a
-        color: #6c878e
-      @media #{$medium-up}
-        display: inline-block
-
-  #builds
-    a
-      display: inline
-
-.tabs--main
-  #tab_build,
-  #tab_job,
-  #tab_request,
-  #tab_requests,
-  #tab_caches,
-  #tab_settings
-    display: none
-    &.active
-      display: inline-block
-
-#profile
-  #main
-    .tab
-      margin: 30px 0 0 12px
-
-// #right
-//   .tabs
-//     margin-left: -3px
-
-//     .active
-//       background-color: $color-bg-right
-//       border-bottom-color: $color-bg-right
-//       h5
-//         font-weight: bold
-
-// @media handheld, only screen and (max-device-width: 980px)
-//   #main
-//     #tab_branches
-//       display: none

app/templates/components/code-climate-popup.hbs

@@ -19,23 +19,20 @@
     <li>
       <p>Add the `code-climate-reporter` gem to your Gemfile:</p>
 
-<pre>
+<pre>gem "codeclimate-test-reporter", group: :test, require: nil
-gem "codeclimate-test-reporter", group: :test, require: nil
 </pre>
     </li>
     <li>
       <p>Load the reporter in your `test_helper` or `spec_helper`, putting it at the very top:</p>
 
-<pre>
+<pre>require "codeclimate-test-reporter"
-require "codeclimate-test-reporter"
 CodeClimate::TestReporter.start
 </pre>
     </li>
     <li>
       <p>Add the Code Climate token to your .travis.yml:</p>
 
-<pre>
+<pre>addons:
-addons:
   code_climate:
     repo_token: adf08323...
 </pre>

app/templates/status-images.hbs

@@ -4,7 +4,7 @@
   {{#if view.branches.isLoaded}}
     {{view Ember.Select contentBinding="view.branches" selectionBinding="view.statusImageBranch" optionLabelPath="content.commit.branch" optionValuePath="content.commit.branch"}}
   {{else}}
-    <span class="loading"></span>
+    {{loading-indicator}}
   {{/if}}
 </p>