embermap · ryanto · Sep 14, 2018 · Aug 29, 2018 · Sep 6, 2018 · Sep 13, 2018
diff --git a/app/index.html b/app/index.html
@@ -12,6 +12,8 @@
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/embermap-cms.css">
 
+    <link rel="icon" href="about:blank" />
+
     {{content-for "head-footer"}}
   </head>
   <body class="avenir">

diff --git a/app/pods/application/controller.js b/app/pods/application/controller.js
@@ -0,0 +1,17 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+
+export default Controller.extend({
+  isShowingNav: true,
+
+  isShowingSpeedControl: computed({
+    get() {
+      return window.localStorage.getItem('isShowingSpeedControl') === 'true';
+    },
+
+    set(key, value) {
+      window.localStorage.setItem('isShowingSpeedControl', value);
+      return value;
+    }
+  }),
+});
diff --git a/app/pods/application/template.hbs b/app/pods/application/template.hbs
@@ -11,32 +11,46 @@
 
 <div class='app'>
   <header class='app-header'>
-    Acme, Inc.
+    <div class="flex items-center">
+      <div>
+        Acme, Inc.
+      </div>
+
+      <div class="ml-auto opacity-50 cursor-pointer">
+        <a {{action (toggle "isShowingSpeedControl" this)}}>
+          {{fa-icon "gear"}}
+        </a>
+      </div>
+    </div>
   </header>
 
   <main class='app-main'>
-    <section class='side-panel'>
-      {{#link-to 'dashboard'}}
-        Dashboard
-      {{/link-to}}
-      {{#link-to 'posts'}}
-        Blog posts
-      {{/link-to}}
-      {{#link-to 'tags'}}
-        Tags
-      {{/link-to}}
-      {{#link-to 'media'}}
-        Media
-      {{/link-to}}
-      {{#link-to 'comments'}}
-        Comments
-      {{/link-to}}
-    </section>
+    {{#if isShowingNav}}
+      <section class='side-panel'>
+        {{#link-to 'dashboard'}}
+          Dashboard
+        {{/link-to}}
+        {{#link-to 'posts'}}
+          Blog posts
+        {{/link-to}}
+        {{#link-to 'tags'}}
+          Tags
+        {{/link-to}}
+        {{#link-to 'media'}}
+          Media
+        {{/link-to}}
+        {{#link-to 'comments'}}
+          Comments
+        {{/link-to}}
+      </section>
+    {{/if}}
 
     <section class='center-panel'>
-
       {{outlet}}
-
     </section>
   </main>
 </div>
+
+{{#if isShowingSpeedControl}}
+  {{speed-control}}
+{{/if}}
diff --git a/app/pods/components/bar-chart/template.hbs b/app/pods/components/bar-chart/template.hbs
@@ -7,7 +7,7 @@
     attachment='bottom middle'
     offset='14px 0'}}
 
-    <div class='bg-black white f7 pa2 o-80'>
+    <div class='bg-black text-white text-xs p-2 opacity-80'>
       <p>{{highlightedLabel}}</p>
     </div>
     <div class="tooltip-arrow"></div>

diff --git a/app/pods/components/comment-box/template.hbs b/app/pods/components/comment-box/template.hbs
@@ -14,7 +14,7 @@
   {{#if isLong}}
     <a href="#"
       {{action (toggle "isExpanded" this)}}
-      class="gray"
+      class="text-grey-dark no-underline"
       data-test-id={{if isExpanded "show-less" "show-more"}}>
         Show {{if isExpanded "less" "more"}}</a>
   {{/if}}

diff --git a/app/pods/components/confirm-delete-post/template.hbs b/app/pods/components/confirm-delete-post/template.hbs
@@ -1,11 +1,11 @@
 {{#ui-modal onClose=(action on-cancel)}}
 
-  <div class="mh3 mt3">
-    <h1 class="f3 lh-title mb3 mt0">
+  <div class="mx-4 mt-4">
+    <h1 class="text-2xl leading-normal mb-4 mt-0">
       Delete post?
     </h1>
 
-    <p class="f5 lh-normal mb5">
+    <p class="text-base leading-normal mb-16">
       Are you sure you want to delete {{post.title}}? This
       action cannot be undone.
     </p>

diff --git a/app/pods/components/speed-control/component.js b/app/pods/components/speed-control/component.js
@@ -0,0 +1,30 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  didInsertElement() {
+    this._super(...arguments);
+
+    if (!this.timing) {
+      this.set('timing', window.server.timing);
+    }
+  },
+
+  timing: computed({
+    get() {
+      return window.localStorage.getItem('timing');
+    },
+
+    set(key, value) {
+      window.localStorage.setItem('timing', value);
+      window.server.timing = +value;
+      return value;
+    }
+  }),
+
+  actions: {
+    updateTiming(event) {
+      this.set('timing', event.target.value);
+    }
+  }
+});
diff --git a/app/pods/components/speed-control/template.hbs b/app/pods/components/speed-control/template.hbs
@@ -0,0 +1,28 @@
+<div class="
+  absolute pin-b pin-r
+  bg-white
+  w-2/5
+  p-4 mb-4 mr-4
+  border-2 border-blue shadow">
+
+  <div class="flex mb-3">
+    <h4 class="p-0 m-0">
+      Server speed
+    </h4>
+  </div>
+
+  <div class="flex items-center justify-between">
+    <input
+      type="range"
+      min="0"
+      max="10000"
+      value={{timing}}
+      oninput={{action "updateTiming"}}
+      step="100"
+      class="w-4/5">
+
+    <div class="">
+      {{timing}} ms
+    </div>
+  </div>
+</div>
diff --git a/app/pods/components/tag-list/template.hbs b/app/pods/components/tag-list/template.hbs
@@ -1,5 +1,10 @@
 {{#each (sort-by 'name' tags) as |tag|}}
-  {{#link-to 'tags.tag' tag.slug class='dib transition mr1 near-black link f8 fw5 ttu br-pill bg-light-gray hover-bg-moon-gray ph2 pv1'}}
+  {{#link-to 'tags.tag' tag.slug
+    class='
+      inline-block no-underline transition mr-1
+      text-black text-10px font-medium uppercase
+      rounded-full bg-grey-lighter hover:bg-grey-light
+      px-2 py-1'}}
     {{tag.name}}
   {{/link-to}}
 {{/each}}
diff --git a/app/pods/components/ui-button/component.js b/app/pods/components/ui-button/component.js
@@ -1,22 +1,33 @@
 import Component from '@ember/component';
-import { Styled } from 'ember-cli-ui-components';
+import { Styled, group } from 'ember-cli-ui-components';
 import { oneWay } from '@ember/object/computed';
 import { computed } from '@ember/object';
 
 export default Component.extend(Styled, {
   tagName: '',
 
   styles: computed(function() {
-    return {};
+    return {
+      defaultStyle: 'blue',
+
+      colors: group({
+        blue: 'bg-blue text-white',
+        gray: 'bg-grey-lighter text-black'
+      })
+    };
   }),
 
+  type: "button",
+
   disabled: oneWay('task.isRunning'),
 
   task: null,
   onClick() {},
 
   actions: {
-    click() {
+    click(event) {
+      event.preventDefault();
+
       let task = this.get('task');
       let onClick = this.get('onClick');
 

diff --git a/app/pods/components/ui-button/template.hbs b/app/pods/components/ui-button/template.hbs
@@ -2,13 +2,16 @@
   onclick={{action "click"}}
   disabled={{disabled}}
   data-test-id={{data-test-id}}
+  type={{type}}
   class="
-    leading-tight inline-block mb3 pointer f5 pv2 ph3 br2 fw3 bn bg-blue white
-    {{if disabled 'o-50' 'dim'}}
+    leading-tight inline-block
+    mb-4 pointer text-base py-2 px-3 rounded font-light border-0
+    {{activeClasses}}
+    {{if disabled 'opacity-50' 'dim'}}
     ">
 
   {{#if task.isRunning}}
-    <div class="dib mr1">
+    <div class="inline-block mr-1">
       {{ui-spinner}}
     </div>
   {{/if}}

diff --git a/app/pods/components/ui-card/header/template.hbs b/app/pods/components/ui-card/header/template.hbs
@@ -1,6 +1,7 @@
-<div class="flex pb3 mb2 bb b--light-gray">
-  <p class='gray f6'>{{yield}}</p>
-  <a {{action onClose}} href='#' class="mla link gray f4 o-50 glow">
+<div class="flex items-center pb-4 mb-2 border-b border-grey-light">
+  <p class='text-grey-darker text-sm'>{{yield}}</p>
+  <a {{action onClose}} href='#' class="
+      ml-auto no-underline text-grey-darker text-xl opacity-50 glow">
     &times;
   </a>
 </div>
diff --git a/app/pods/components/ui-form/component.js b/app/pods/components/ui-form/component.js
@@ -0,0 +1,12 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: 'form',
+
+  onSubmit() {},
+
+  submit(event) {
+    event.preventDefault();
+    this.get('onSubmit')();
+  }
+});
diff --git a/app/pods/components/ui-form/input/component.js b/app/pods/components/ui-form/input/component.js
@@ -0,0 +1,3 @@
+import TextField from '@ember/component/text-field';
+
+export default TextField;
diff --git a/app/pods/components/ui-form/label/component.js b/app/pods/components/ui-form/label/component.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: 'label'
+});
diff --git a/app/pods/components/ui-form/template.hbs b/app/pods/components/ui-form/template.hbs
@@ -0,0 +1,7 @@
+{{yield (hash
+  label=(component 'ui-form/label')
+  input=(component 'ui-form/input')
+  submit=(component 'ui-button'
+    onClick=onSubmit
+    type="submit")
+)}}
diff --git a/app/pods/components/ui-modal/styles.scss b/app/pods/components/ui-modal/styles.scss
@@ -1,23 +1,36 @@
-.ui-modal {
-  z-index: 51;
-  position: absolute;
-
-  width: 500px;
-  top: 150px;
-  left: 50%;
-  margin-left: -250px;
+.ember-modal-dialog {
+  @extend .rounded;
+  @extend .bg-white;
+  @extend .shadow-lg;
+  @extend .p-4;
+  @extend .w-modal;
+  top: 40% !important;
+}
+.ember-modal-overlay.translucent {
+  background-color: rgba(0,0,0,0.5);
+}
 
-  border-radius: 2px;
-  background-color: #fff;
-  // box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-  // @extend .shadow-2;
-  box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
-            0 5px 15px 0 rgba(0,0,0,0.08);
 
-  &.emd-in-place {
-    position: static;
-  }
-}
+// .ui-modal {
+//   z-index: 51;
+//   position: absolute;
+//
+//   width: 500px;
+//   top: 150px;
+//   left: 50%;
+//   margin-left: -250px;
+//
+//   border-radius: 2px;
+//   background-color: #fff;
+//   // box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+//   // @extend .shadow-2;
+//   box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
+//             0 5px 15px 0 rgba(0,0,0,0.08);
+//
+//   &.emd-in-place {
+//     position: static;
+//   }
+// }
 
 // .ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center {
 //   .ui-modal {
@@ -57,7 +70,7 @@
 //   left: 0;
 //   z-index: 50;
 // }
-
-.ember-modal-overlay.translucent {
-  background-color: rgba(#000, 0.60);
-}
+//
+// .ember-modal-overlay.translucent {
+//   background-color: rgba(#000, 0.60);
+// }
diff --git a/app/pods/components/ui-selectable-list/item/template.hbs b/app/pods/components/ui-selectable-list/item/template.hbs
@@ -1,11 +1,13 @@
 <li>
   <a {{action onClick}}
     href="#"
-    class='flex items-center link gray pa2 br2 hover-bg-near-white mb2'>
+    class='
+      flex items-center
+      no-underline text-grey-dark p-2 rounded hover:bg-grey-lightest mb-2'>
     <span>
       {{yield}}
     </span>
-    <span class='mla f6'>
+    <span class='ml-auto text-sm'>
       {{#if selected}}
         {{fa-icon 'check'}}
       {{/if}}

diff --git a/app/pods/components/ui-spinner/component.js b/app/pods/components/ui-spinner/component.js
@@ -1,4 +1,5 @@
 import Component from '@ember/component';
 
 export default Component.extend({
+  color: "white"
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import TextField from '@ember/component/text-field';

		export default TextField;