Merge pull request #26 from hashicorp/chore-projects-styling

chore: 🤖 Add styles to ui/core for projects overview & creation

ui/core/app/components/form/project/index.hbs

@@ -1,4 +1,5 @@
 <form
+  ...attributes
   novalidate
   method="post"
   {{on "submit" @submit}}>
@@ -25,20 +26,21 @@
     readonly={{false}}
   />
 
-  <Rose::Button
-    @disabled={{@model.cannotSave}}
-    @submit={{true}}
-    @style="primary"
-  >
-    {{t 'actions.save'}}
-  </Rose::Button>
-
-  <Rose::Button
-    @disabled={{@model.cannotSave}}
-    @style="secondary"
-    {{on "click" @cancel}}
-  >
-    {{t 'actions.cancel'}}
-  </Rose::Button>
+  <section class="form-actions">
+    <Rose::Button
+      @disabled={{@model.cannotSave}}
+      @submit={{true}}
+      @style="primary"
+    >
+      {{t 'actions.save'}}
+    </Rose::Button>
 
+    <Rose::Button
+      @disabled={{@model.cannotSave}}
+      @style="secondary"
+      {{on "click" @cancel}}
+    >
+      {{t 'actions.cancel'}}
+    </Rose::Button>
+  </section>
 </form>

ui/core/app/routes/orgs/org/projects/new.js

@@ -42,5 +42,4 @@ export default class OrgsOrgProjectsNewRoute extends Route {
       throw e;
     }
   }
-
 }

ui/core/app/routes/orgs/org/projects/project.js

@@ -69,5 +69,4 @@ export default class OrgsOrgProjectsProjectRoute extends Route {
       throw e;
     }
   }
-
 }

ui/core/app/styles/app.scss

@@ -1 +1,74 @@
 @import 'rose';
+
+.projects-overview {
+  margin: 0 10px;
+
+  .projects {
+    display: flex;
+    padding: 20px 0;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .project {
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 10px;
+
+      a {
+        text-decoration: none;
+        text-transform: capitalize;
+        color: #000;
+        cursor: pointer;
+        padding: 20px 30px 20px 20px;
+        border: 1px solid #bac1cc;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.project-new-link {
+  cursor: pointer;
+  text-decoration: none;
+  padding: 10px;
+  color: #ffffff;
+  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+  background: #1563ff;
+  border: 1px solid #082766;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 2px;
+  position: absolute;
+  right: 10px;
+  top: 70px;
+  display: inline-block;
+}
+
+.project-overview,
+.project-new {
+  margin: 0 10px;
+  .breadcrumbs,
+  .breadcrumbs a {
+    color: #6f7682;
+    text-decoration: none;
+  }
+
+  .project-new-form {
+    .form-actions {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+      float: right;
+
+      button {
+        margin-right: 10px;
+      }
+    }
+
+    input,
+    textarea {
+      box-sizing: border-box;
+      width: 100%;
+    }
+  }
+}

ui/core/app/templates/application.hbs

@@ -1,5 +1,9 @@
 <HeadLayout />
 
+<Rose::Header as |header|>
+  <header.brand />
+</Rose::Header>
+
 {{title (app-name)}}
 
 {{outlet}}

ui/core/app/templates/orgs/org/projects/index.hbs

@@ -1,13 +1,15 @@
-<h2>{{t "resources.projects"}}</h2>
+<div class="projects-overview">
+  <h2>{{t "resources.projects"}}</h2>
 
-<LinkTo @route="orgs.org.projects.new">{{t "titles.new"}}</LinkTo>
+  <LinkTo @route="orgs.org.projects.new" class="project-new-link">{{t "titles.new"}}</LinkTo>
 
-<ul>
-  {{#each @model as |project|}}
-    <li>
-      <LinkTo @route="orgs.org.projects.project" @model={{project}}>
-        {{project.name}}
-      </LinkTo>
-    </li>
-  {{/each}}
-</ul>
+  <ul class="projects">
+    {{#each @model as |project|}}
+      <li class="project">
+        <LinkTo @route="orgs.org.projects.project" @model={{project}}>
+          {{project.name}}
+        </LinkTo>
+      </li>
+    {{/each}}
+  </ul>
+</div>

ui/core/app/templates/orgs/org/projects/new.hbs

@@ -1,11 +1,16 @@
-<LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
->
-<LinkTo @route='orgs.org.projects.new'>{{t "titles.new"}}</LinkTo>
+<div class="project-new">
+  <div class="breadcrumbs">
+    <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
+    >
+    <LinkTo @route='orgs.org.projects.new'>{{t "titles.new"}}</LinkTo>
+  </div>
 
-<h2>{{t "titles.new"}}</h2>
+  <h2>{{t "titles.new"}}</h2>
 
-<Form::Project
-  @model={{@model}}
-  @submit={{route-action "save" @model}}
-  @cancel={{route-action "cancel" @model}}
-/>
+  <Form::Project
+    @model={{@model}}
+    @submit={{route-action "save" @model}}
+    @cancel={{route-action "cancel" @model}}
+    class="project-new-form"
+  />
+</div>

ui/core/app/templates/orgs/org/projects/project.hbs

@@ -1,19 +1,24 @@
-<LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
->
-<LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
+<div class="project-overview">
+  <div class="breadcrumbs">
+    <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
+    >
+    <LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
+  </div>
 
-<h2>{{@model.name}}</h2>
+  <h2>{{@model.name}}</h2>
 
-<Form::Project
-  @model={{@model}}
-  @submit={{route-action "save" @model}}
-  @cancel={{route-action "cancel" @model}}
-/>
+  <Form::Project
+    @model={{@model}}
+    @submit={{route-action "save" @model}}
+    @cancel={{route-action "cancel" @model}}
+    class="project-new-form"
+  />
 
-<Rose::Button
-  @style="warning"
-  @disabled={{@model.canSave}}
-  {{on "click" (route-action "delete" @model)}}
->
-  {{t 'actions.delete'}}
-</Rose::Button>
+  <Rose::Button
+    @style="warning"
+    @disabled={{@model.canSave}}
+    {{on "click" (route-action "delete" @model)}}
+  >
+    {{t 'actions.delete'}}
+  </Rose::Button>
+</div>

ui/core/tests/integration/components/form/project-test.js

@@ -20,5 +20,4 @@ module('Integration | Component | form/project', function (hooks) {
 
     assert.ok(find('form'));
   });
-
 });

ui/core/tests/unit/routes/orgs/org/projects/new-test.js

@@ -1,10 +1,10 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';
 
-module('Unit | Route | orgs/org/projects/new', function(hooks) {
+module('Unit | Route | orgs/org/projects/new', function (hooks) {
   setupTest(hooks);
 
-  test('it exists', function(assert) {
+  test('it exists', function (assert) {
     let route = this.owner.lookup('route:orgs/org/projects/new');
     assert.ok(route);
   });