DEV: Fix and cleanup stylesheets

assets/javascripts/discourse/styles/app.scss

@@ -1,165 +0,0 @@
-/* Put your CSS here */
-@import "bootstrap";
-
-$tertiary: #0088cc !default;
-$shadow: 0 0 8px rgba(0, 0, 0, 0.6) !default;
-
-@mixin box-shadow($shadow) {
-  box-shadow: $shadow;
-}
-
-html {
-  overflow-y: scroll;
-  overflow-x: auto;
-}
-
-body {
-  padding: 15px;
-}
-
-.container {
-  padding: 0;
-}
-
-header {
-  img.logo {
-    width: 150px;
-  }
-
-  a[href] {
-    text-decoration: none;
-    color: black;
-  }
-  h1 {
-    font-size: 1.8em;
-    margin: 0;
-
-    a {
-      float: right;
-    }
-  }
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-div.logs {
-  margin-top: 20px;
-  overflow-x: scroll;
-  height: 400px;
-  white-space: pre;
-  font-family: monospace;
-  background-color: black;
-  color: #ddd;
-  padding: 10px;
-}
-
-.check-circle {
-  height: 15px;
-}
-
-table#repos {
-  margin-top: 10px;
-
-  td:first-child {
-    width: 3%;
-    padding-left: 8px;
-  }
-  th {
-    border-top: none;
-  }
-
-  td,
-  th {
-    padding: 8px 15px 8px 0px;
-  }
-
-  button {
-    padding-left: 15%;
-    padding-right: 15%;
-  }
-}
-
-.new-version {
-  h4 {
-    margin: 0 0 10px 0;
-    font-weight: bold;
-    font-size: 14px;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin-bottom: 10px;
-  }
-
-  li.new-commits {
-    font-style: italic;
-  }
-
-  button {
-    display: block;
-    padding: 2px 5px;
-    margin: 10px 0 0px 0;
-  }
-}
-
-span.commit-hash {
-  color: #959595;
-}
-
-button.btn {
-  background: #00aaff;
-  color: white !important;
-  border-radius: 0;
-
-  &:hover {
-    background-color: #0081c2;
-  }
-
-  &:disabled {
-    background-color: #666;
-    color: #ccc !important;
-  }
-}
-
-button.unlock {
-  float: right;
-  background-color: red;
-  &:hover {
-    background-color: #a00;
-  }
-}
-
-#upgrade-all {
-  float: right;
-}
-
-#banner {
-  margin-bottom: 20px;
-  padding: 10px;
-  border-radius: 5px;
-  background: scale-color($tertiary, $lightness: 90%);
-  @include box-shadow(0 1px 2px scale-color($tertiary, $lightness: 70%));
-  max-width: 1140px;
-
-  .close {
-    font-size: 20px !important;
-    margin-top: -10px !important;
-  }
-}
-
-div.progress {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-th {
-  border-top: none;
-}
-
-ul.nav-tabs {
-  width: 100%;
-  margin-bottom: 15px;
-}

assets/javascripts/discourse/templates/upgrade.hbs

@@ -1,7 +1,7 @@
-<div class="container">
+<div class="docker-manager">
   <h1>Upgrade</h1>
 
-  <div class="container">
+  <div>
     {{#if showBanner}}
       <div id="banner">
         <div id="banner-content">

assets/stylesheets/common/docker-manager.scss

@@ -0,0 +1,107 @@
+.docker-manager {
+  div.logs {
+    margin-top: 20px;
+    overflow-x: scroll;
+    height: 400px;
+    white-space: pre;
+    font-family: monospace;
+    background-color: black;
+    color: #ddd;
+    padding: 10px;
+  }
+
+  .check-circle {
+    height: 15px;
+  }
+
+  table#repos {
+    margin-top: 10px;
+
+    td:first-child {
+      width: 3%;
+      padding-left: 8px;
+    }
+
+    th {
+      border-top: none;
+    }
+
+    td,
+    th {
+      padding: 8px 15px 8px 0px;
+    }
+
+    button {
+      padding-left: 15%;
+      padding-right: 15%;
+    }
+  }
+
+  .new-version {
+    h4 {
+      margin: 0 0 10px 0;
+      font-weight: bold;
+      font-size: 14px;
+    }
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin-bottom: 10px;
+    }
+
+    li.new-commits {
+      font-style: italic;
+    }
+
+    button {
+      display: block;
+      padding: 2px 5px;
+      margin: 10px 0 0px 0;
+    }
+  }
+
+  span.commit-hash {
+    color: #959595;
+  }
+
+  button.unlock {
+    float: right;
+    background-color: red;
+    &:hover {
+      background-color: #a00;
+    }
+  }
+
+  #upgrade-all {
+    float: right;
+  }
+
+  #banner {
+    margin-bottom: 20px;
+    padding: 10px;
+    border-radius: 5px;
+    background: scale-color($tertiary, $lightness: 90%);
+    box-shadow: 0 1px 2px scale-color($tertiary, $lightness: 70%);
+    max-width: 1140px;
+
+    .close {
+      font-size: 20px !important;
+      margin-top: -10px !important;
+    }
+  }
+
+  div.progress {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  th {
+    border-top: none;
+  }
+
+  ul.nav-tabs {
+    width: 100%;
+    margin-bottom: 15px;
+  }
+}

plugin.rb

@@ -6,6 +6,8 @@
 # authors: Robin Ward, Sam Saffron
 # url: https://github.com/discourse/docker_manager
 
+register_asset "stylesheets/common/docker-manager.scss"
+
 module ::DockerManager
   # should be automatic, but something is weird
   load File.expand_path(File.dirname(__FILE__)) +