refactor(demo): demo page updates and slight redesign

alexdiliberto · Aug 27, 2017 · 656657d · 656657d
1 parent d37c1e9
commit 656657d
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Updated
   - SCSS lint `app.scss` to improve Code Climate
   - Fetch Bootstrap assets directly from CDN
+  - Demo page updates
 
 ### Removed
   - Nothing yet...

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img src="https://cdn.rawgit.com/alexdiliberto/ember-cli-transformicons/master/logo.svg" alt="Transformicons Logo">
+  <img src="https://cdn.rawgit.com/alexdiliberto/ember-cli-transformicons/master/tests/dummy/public/img/logo.svg" alt="Transformicons Logo">
   <br>
   <a href="https://alexdiliberto.com/ember-cli-transformicons">ember-cli-transformicons</a>
   <br>

diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html
@@ -11,8 +11,7 @@
 
     <link rel="stylesheet" href="{{rootURL}}assets/vendor.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 href="https://fonts.googleapis.com/css?family=Roboto:400,700,500,300,100|Open+Sans:400,300,600,700" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 
     <link rel="stylesheet" href="{{rootURL}}assets/dummy.css">
 
@@ -22,9 +21,6 @@
     {{content-for "body"}}
 
     <script src="{{rootURL}}assets/vendor.js"></script>
-
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-
     <script src="{{rootURL}}assets/dummy.js"></script>
 
     {{content-for "body-footer"}}

diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
@@ -1,7 +1,55 @@
+$header-color: #777;
+$header-color-hover: #000;
+
 html {
   font-size: 16px;
 }
 
+.navbar {
+  margin-bottom: 20px;
+}
+
+.header-logo {
+  width: 27px;
+  margin-right: 10px;
+}
+
+.navbar-brand {
+  color: $header-color !important;
+
+  &:hover {
+    color: $header-color-hover !important;
+  }
+}
+
+.github-icon {
+  color: $header-color;
+
+  &:hover {
+    color: $header-color-hover;
+  }
+}
+
+.octicon {
+  fill: $header-color;
+  vertical-align: middle;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  speak: none;
+
+  &:hover {
+    fill: $header-color-hover;
+  }
+}
+
+.row-link-icons {
+  margin-bottom: 20px;
+}
+
 .mail {
   display: inline-block;
   margin-bottom: 15px;

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,24 +1,31 @@
+<nav class="navbar navbar-light bg-light border border-top-0 border-right-0 border-left-0">
+  {{#link-to "index" class="navbar-brand"}}
+    <img class="header-logo d-inline-block align-top" src="img/logo.svg" alt="Transformicon logo">ember-cli-transformicons
+  {{/link-to}}
+
+  <a href="https://github.com/alexdiliberto/ember-cli-transformicons" class="github-icon">
+    <svg width="32" height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" aria-hidden="true">
+      <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
+    </svg>
+  </a>
+</nav>
+
 <div class="container">
-  <div class="page-header">
-    <h1>ember-cli-transformicons</h1><iframe src="https://ghbtns.com/github-btn.html?user=alexdiliberto&repo=ember-cli-transformicons&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
-  </div>
-  <div class="row">
+  <div class="row row-link-icons text-center">
     <div class="col-xs-12">
       <nav class="btn-group" role="group">
-        {{link-to 'Menu' 'menu' class="btn btn-default" role="button"}}
-        {{link-to 'Grid' 'grid' class="btn btn-default" role="button"}}
-        {{link-to 'Add' 'add' class="btn btn-default" role="button"}}
-        {{link-to 'Remove' 'remove' class="btn btn-default" role="button"}}
-        {{link-to 'Scroll' 'scroll' class="btn btn-default" role="button"}}
-        {{link-to 'Mail' 'mail' class="btn btn-default" role="button"}}
-        {{link-to 'Form' 'form' class="btn btn-default" role="button"}}
-        {{link-to 'Video' 'video' class="btn btn-default" role="button"}}
-        {{link-to 'Loader' 'loader' class="btn btn-default" role="button"}}
+        {{link-to 'Menu' 'menu' class="btn btn-outline-dark" role="button"}}
+        {{link-to 'Grid' 'grid' class="btn btn-outline-dark" role="button"}}
+        {{link-to 'Add' 'add' class="btn btn-outline-dark" role="button"}}
+        {{link-to 'Remove' 'remove' class="btn btn-outline-dark" role="button"}}
+        {{link-to 'Scroll' 'scroll' class="btn btn-outline-dark" role="button"}}
+        {{link-to 'Mail' 'mail' class="btn btn-outline-dark" role="button"}}
+        {{link-to 'Form' 'form' class="btn btn-outline-dark" role="button"}}
+        {{link-to 'Video' 'video' class="btn btn-outline-dark" role="button"}}
+        {{link-to 'Loader' 'loader' class="btn btn-outline-dark" role="button"}}
       </nav>
     </div>
   </div>
 
   {{outlet}}
-</div>
-
-<a href="https://github.com/alexdiliberto/ember-cli-transformicons"><img class="github-ribbon" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+</div>
diff --git a/logo.svg → tests/dummy/public/img/logo.svg b/logo.svg → tests/dummy/public/img/logo.svg