Improving demo

README.md

@@ -1,8 +1,8 @@
 # ember-floating-labels
 
 Animated floating placeholder form labels for Ember apps.
-Have you ever wanted those slick looking input fields that slide the labels up when you focus on the field? Then this addon is for you!
-Installation
+
+Demo: https://gavant.github.io/ember-floating-labels/
 ------------------------------------------------------------------------------
 
 ```

tests/dummy/app/controllers/application.js

@@ -1,23 +1,5 @@
 import Controller from '@ember/controller';
-import { get, set } from '@ember/object';
-import { A } from '@ember/array';
 
 export default Controller.extend({
-    selectLgValue: null,
-    inlineSelectOptions: A([
-        {value: "a", label: "Apples"},
-        {value: "b", label: "Bananas"},
-        {value: "c", label: "Oranges"}
-    ]),
 
-    customSelectOptions: A([
-        {abbrv: "NY", name: "New York"},
-        {abbrv: "NJ", name: "New Jersey"},
-        {abbrv: "CT", name: "Connecticut"}
-    ]),
-
-    init() {
-        this._super(...arguments);
-        set(this, 'selectLgValue', get(this, 'customSelectOptions.firstObject'));
-    }
 });

tests/dummy/app/controllers/select.js

@@ -0,0 +1,23 @@
+import Controller from '@ember/controller';
+import { get, set } from '@ember/object';
+import { A } from '@ember/array';
+
+export default Controller.extend({
+    selectLgValue: null,
+    inlineSelectOptions: A([
+        {value: "a", label: "Apples"},
+        {value: "b", label: "Bananas"},
+        {value: "c", label: "Oranges"}
+    ]),
+
+    customSelectOptions: A([
+        {abbrv: "NY", name: "New York"},
+        {abbrv: "NJ", name: "New Jersey"},
+        {abbrv: "CT", name: "Connecticut"}
+    ]),
+
+    init() {
+        this._super(...arguments);
+        set(this, 'selectLgValue', get(this, 'customSelectOptions.firstObject'));
+    }
+});

tests/dummy/app/index.html

@@ -8,9 +8,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     {{content-for "head"}}
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700,500,300,100|Open+Sans:400,300,600,700">
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/dummy.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
 
     {{content-for "head-footer"}}
   </head>

tests/dummy/app/router.js

@@ -7,6 +7,9 @@ const Router = EmberRouter.extend({
 });
 
 Router.map(function() {
+  this.route('text');
+  this.route('select');
+  this.route('textarea');
 });
 
 export default Router;

tests/dummy/app/routes/index.js

@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+    beforeModel() {
+        this._super(...arguments);
+        this.transitionTo('text');
+    }
+});

tests/dummy/app/routes/select.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

tests/dummy/app/routes/text.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

tests/dummy/app/routes/textarea.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

tests/dummy/app/styles/_container.scss

@@ -0,0 +1,16 @@
+$grid-columns: 8;
+$height: 20.6rem;
+$color: #285a92;
+
+.containers {
+    display: grid;
+    grid-gap: .8rem;
+    grid-template-columns: 100%;
+    grid-template-areas: "a" "b" "c";
+    @media screen and (min-width: get-breakpoint(desktop)) {
+        grid-template-columns: repeat($grid-columns, 1fr);
+        grid-template-areas:
+        'a a a a a a a a'
+        'b b b b b c c c';
+    }
+}

tests/dummy/app/styles/_layout.scss

@@ -0,0 +1,219 @@
+$accent-color: #dd6a58;
+
+html,body {
+  min-height: 100%;
+  min-width: 100%;
+  font-family: 'Open Sans', sans-serif;
+  background-color: #F3F3F3;
+  height: 100%;
+  font-size: 10px;
+}
+
+label {
+  font-weight: 600;
+}
+
+.navbar.navbar-default {
+  background-color: white;
+  margin: 0;
+
+  .navbar-brand {
+      color: #797979;
+      font-size: 16px;
+      font-weight: 400;
+
+      img {
+        height: 32px;
+        display: inline-block;
+        margin-top: -15px;
+      }
+
+      span {
+        font-size: 12px;
+        vertical-align: super;
+        text-transform: uppercase;
+        color: #444444;
+      }
+  }
+
+  .navbar-nav>li>a {
+      font-size: 14px;
+      font-weight: 200;
+
+      &.github {
+        font-size: 24px;
+      }
+  }
+
+  .navbar-nav.dropdown-menu li a {
+    font-size: 13px;
+  }
+
+  .navbar-nav>li>a:focus, .navbar-nav>li>a:hover {
+    color: $accent-color;
+  }
+
+  .navbar-nav>.active>a, .navbar-nav>.active>a:focus, .navbar-nav>.active>a:hover {
+    color: $accent-color;
+    background-color: transparent;
+  }
+}
+
+.panel {
+  width: 75%;
+  margin: 2.5% auto;
+  position: relative;
+
+  .table-actions {
+    position: absolute;
+    left: -41px;
+    width: 40px;
+    background-color: white;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    border: 1px solid #ccc;
+    border-right-width: 0;
+    top: 35%;
+    cursor: pointer;
+
+    .table-action {
+      font-size: 20px;
+      text-align: center;
+      display: block;
+      margin: 10px;
+      color: #191919;
+      opacity: 0.8;
+
+      &:hover, &:active {
+        opacity: 1;
+      }
+
+      &.delete {
+        color: $accent-color;
+      }
+    }
+  }
+
+  .panel-heading {
+    background-color: $accent-color;
+    padding: 0;
+    a {
+      color: #F9F9F9;
+      text-decoration: none;
+
+      .panel-title {
+        font-weight: 200;
+        padding: 15px;
+      }
+    }
+  }
+
+  .code-snippet {
+    background-color: #f8f8f8;
+    max-height: 500px;
+    overflow: auto;
+
+    .nav-tabs {
+      li > a {
+        color: #8A8A8A;
+        border-radius: 2px 2px 0 0;
+        font-size: 12px;
+      }
+
+      li.active > a {
+        background-color: #f8f8f8;
+        color: #696969;
+      }
+    }
+
+    .tab-content {
+      > .active {
+        padding: 15px 15px 0px 15px;
+      }
+    }
+
+    pre {
+      border: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+.table-container {
+  overflow-y: auto;
+
+  &.fixed-header {
+    overflow-y: hidden;
+    margin-bottom: 15px;
+  }
+}
+
+.user-actions {
+  a {
+    color: $accent-color;
+    padding-right: 10px;
+    font-size: 18px;
+    width: 30px;
+    text-decoration: none;
+    cursor: pointer;
+    padding-top: 10px;
+
+    &:hover, &:active, &:focus {
+      color: darken($accent-color, 5%)
+    }
+  }
+}
+
+.user-avatar {
+  border-radius: 50%;
+  border: 1px solid #ccc;
+}
+
+.row-toggle {
+  color: $accent-color;
+  cursor: pointer;
+
+  &:hover, &:active, &:focus {
+    color: darken($accent-color, 5%)
+  }
+}
+
+.tip {
+  text-align: center;
+  font-size: 13px;
+  color: #4E4E4E;
+
+  .icon-info {
+    color: $accent-color;
+    margin-right: 3px;
+  }
+}
+
+form .form-group {
+  input, select {
+    outline: none;
+    display: block;
+    width: 100%;
+    padding: 0 15px;
+    border: 1px solid #d9d9d9;
+    color: #6E6E6E;
+    font-family: 'Roboto', sans-serif;
+    -webkti-box-sizing: border-box;
+    box-sizing: border-box;
+    font-size: 12px;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    transition: all 0.3s linear 0s;
+    box-shadow: none;
+
+    &:focus {
+      color: #333333;
+      border-color: #b9b9b9;
+      outline: none;
+      box-shadow: none;
+      -webkit-box-shadow: none;
+    }
+  }
+}

tests/dummy/app/styles/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin centered-width($max-width: null) {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $max-width;
+}

tests/dummy/app/styles/app.scss

@@ -1 +1,4 @@
+@import "mixins";
+@import "layout";
+@import "container";
 @import "ember-floating-labels";