Simplify project page

5 files changed, 128 insertions, 60 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index c7be94e2c8e..0d7a5cba928 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -38,6 +38,7 @@
 @import "framework/new-sidebar";
 @import "framework/tables";
 @import "framework/notes";
+@import "framework/tabs";
 @import "framework/timeline";
 @import "framework/tooltips";
 @import "framework/typography";
diff --git a/app/assets/stylesheets/framework/tabs.scss b/app/assets/stylesheets/framework/tabs.scss
new file mode 100644
index 00000000000..c8ba14b7066
--- /dev/null
+++ b/app/assets/stylesheets/framework/tabs.scss
@@ -0,0 +1,35 @@
+.gitlab-tabs {
+  background: $gray-light;
+  border: 1px solid $border-color;
+
+  li {
+    width: 50%;
+
+    &:not(:last-child) {
+      border-right: 1px solid $border-color;
+    }
+
+    &.active {
+      background: $white-light;
+    }
+
+    a {
+      width: 100%;
+      text-align: center;
+    }
+  }
+}
+
+.gitlab-tab-content {
+  border: 1px solid $border-color;
+  border-top: 0;
+  margin-bottom: $gl-padding;
+
+  .tab-pane {
+    padding: $gl-padding;
+
+    &.no-padding {
+      padding: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index bbbd16322eb..089a67a7c98 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -699,14 +699,6 @@ $perf-bar-bucket-color: #ccc;
 $perf-bar-bucket-box-shadow-from: rgba($white-light, .2);
 $perf-bar-bucket-box-shadow-to: rgba($black, .25);
 
-
-/*
-Project Templates Icons
-*/
-$rails: #c00;
-$node: #353535;
-$java: #70ad51;
-
 /*
 Issuable warning
 */
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index b3bab082a35..692acf74a58 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -3,41 +3,12 @@
   border-bottom: 1px solid $border-color;
 }
 
-.project-member-tabs {
-  background: $gray-light;
-  border: 1px solid $border-color;
-
-  li {
-    width: 50%;
-
-    &.active {
-      background: $white-light;
-    }
-
-    &:first-child {
-      border-right: 1px solid $border-color;
-    }
-
-    a {
-      width: 100%;
-      text-align: center;
-    }
-  }
-}
-
 .users-project-form {
   .btn-create {
     margin-right: 10px;
   }
 }
 
-.project-member-tab-content {
-  padding: $gl-padding;
-  border: 1px solid $border-color;
-  border-top: 0;
-  margin-bottom: $gl-padding;
-}
-
 .member {
   .list-item-name {
     @media (min-width: $screen-sm-min) {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index a086c11324d..61dc9f13d50 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -48,7 +48,8 @@
       border: 1px solid $border-color;
     }
 
-    + .select2 a {
+    + .select2 a,
+    + .btn-default {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
@@ -549,10 +550,92 @@ a.deploy-project-label {
   }
 }
 
-.project-template,
+.project-template {
+  > .form-group {
+    margin-bottom: 0;
+  }
+
+  .template-option {
+    padding: $gl-padding $gl-padding $gl-padding ($gl-padding * 4);
+    position: relative;
+
+    &:not(:first-child) {
+      border-top: 1px solid $border-color;
+    }
+  }
+
+  .template-title {
+    font-size: 16px;
+  }
+
+  .template-description {
+    margin: 6px 0 12px;
+  }
+
+  .template-button {
+    input {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+    }
+  }
+
+  svg {
+    position: absolute;
+    left: $gl-padding;
+    top: $gl-padding;
+  }
+
+  .project-fields-form {
+    display: none;
+
+    &.selected {
+      display: block;
+      padding: $gl-padding;
+    }
+  }
+
+  .template-input-group {
+    position: relative;
+
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+    }
+
+    .input-group-addon {
+      flex: 1;
+      text-align: left;
+      padding-left: ($gl-padding * 3);
+      background-color: $white-light;
+    }
+
+    .selected-template {
+      line-height: 20px;
+    }
+
+    .selected-icon {
+      svg {
+        display: none;
+        top: 7px;
+        height: 20px;
+        width: 20px;
+
+        &.active {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+.gitlab-tab-content {
+  .import-project-pane {
+    padding-bottom: 6px;
+  }
+}
+
 .project-import {
   .form-group {
-    margin-bottom: 5px;
+    margin-bottom: 0;
   }
 
   .import-buttons {
@@ -567,10 +650,6 @@ a.deploy-project-label {
       margin-right: 10px;
     }
 
-    .blank-option {
-      min-width: 70px;
-    }
-
     .btn-template-icon {
       height: 24px;
       width: inherit;
@@ -592,18 +671,6 @@ a.deploy-project-label {
       }
     }
 
-    .icon-rails path {
-      fill: $rails;
-    }
-
-    .icon-node-express path {
-      fill: $node;
-    }
-
-    .icon-java-spring path {
-      fill: $java;
-    }
-
     > div {
       margin-bottom: 10px;
       padding-left: 0;
@@ -611,10 +678,6 @@ a.deploy-project-label {
   }
 }
 
-.project-templates-buttons .btn:last-child {
-  margin-right: 0;
-}
-
 .create-project-options {
   display: flex;
 
@@ -1053,6 +1116,12 @@ pre.light-well {
     min-width: 100px;
   }
 
+  &.form-group {
+    @media (min-width: $screen-sm-min) {
+      margin-bottom: 0;
+    }
+  }
+
   .select2-choice {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;