Merge pull request Ch4s3#33 from Ch4s3/develop

Merge new js stuff

app/assets/stylesheets/milligram.scss

@@ -152,14 +152,12 @@
  input[type='number'],
  input[type='password'],
  input[type='search'],
- input[type='tel'],
  input[type='text'],
  input[type='url'],
  textarea,
  select {
    -webkit-appearance: none;
       -moz-appearance: none;
-           appearance: none;
    background-color: transparent;
    border: 0.2rem solid $white;
    border-radius: .4rem;
@@ -174,7 +172,6 @@
  input[type='number']:focus,
  input[type='password']:focus,
  input[type='search']:focus,
- input[type='tel']:focus,
  input[type='text']:focus,
  input[type='url']:focus,
  textarea:focus,
@@ -230,39 +227,23 @@
    color: #606c76;
  }
 
- dl,
- ol,
  ul {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
  }
 
- dl dl,
- dl ol,
- dl ul,
- ol dl,
- ol ol,
- ol ul,
- ul dl,
- ul ol,
  ul ul {
    font-size: 90%;
    margin: 1.5rem 0 1.5rem 3.0rem;
  }
 
- ol {
-   list-style: decimal inside;
- }
-
  ul {
    list-style: circle inside;
  }
 
  .button,
  button,
- dd,
- dt,
  li {
    margin-bottom: 1.0rem;
  }
@@ -275,10 +256,7 @@
  }
 
  blockquote,
- dl,
- figure,
  form,
- ol,
  p,
  pre,
  table,
@@ -370,12 +348,4 @@
    clear: both;
    content: ' ';
    display: table;
- }
-
- .float-left {
-   float: left;
- }
-
- .float-right {
-   float: right;
  }

app/assets/stylesheets/nav.scss

@@ -8,8 +8,6 @@ nav {
   height: 7rem;
   max-width: 75%;
   margin: 0 auto;
-
-
 }
 nav .logo {
   margin-top: 1.75rem;
@@ -54,43 +52,46 @@ nav .nav-links {
     a { color: $white; }
   }
 }
-
-nav .nav-toggle {
-  visibility: hidden;
-}
-
-nav .mobile-menu {
-  visibility: hidden;
+@media only screen 
+and (min-device-width: 741px) 
+and (max-device-width: 980px) {
+  .nav-container{
+    width: 90vw;
+    max-width: 90%;
+  }
 }
-
 @media only screen 
 and (min-device-width: 320px) 
-and (max-device-width: 667px) 
+and (max-device-width: 740px) 
 and (-webkit-min-device-pixel-ratio: 2){
   nav {
+    height: 9rem;
+  }
+
+  .nav-container{
     height: 10rem;
+    width: 100vw;
+    margin: 0;
+    max-width: 100%;
   }
+
   nav .logo {
-    height: 7rem;
-    margin-left: 0;
+    margin-top: 3rem;
+    height: 4rem;
+    float: left;
+    margin-left: 4.5rem;
   }
+
   nav p {
-    font-size: 6rem;
-    line-height: 7rem;
-  }
-  .nav-container{
-    height: 10rem;
-  }
-  nav .nav-links {
-    visibility: hidden;
+    margin-top: 3.5rem;
+    font-size: 3rem;
+    float: left;
   }
   nav button.nav-toggle {
     float: left;
     visibility: visible;
-    position: relative;
-    left: -11rem;
     margin-left: 3rem;
-    width: 12rem;
+    width: 4rem;
     height: 100%;
     padding: 0;
   }
@@ -104,9 +105,9 @@ and (-webkit-min-device-pixel-ratio: 2){
     z-index: 9999;
     position: fixed;
     height: 100vh;
-    width: 30em;
+    width: 20em;
     top: 0;
-    left: -30em;
+    left: -20em;
   }
 
   nav ul.side-nav-list {
@@ -125,13 +126,13 @@ and (-webkit-min-device-pixel-ratio: 2){
 
   nav .mobile-menu.active {
     visibility: visible;
-    transform: translateX(30em);
+    transform: translateX(20em);
     -webkit-transition: transform 0.3s ease-in;
     transition: transform 0.3s ease-in;
   }
   nav .mobile-menu.slide-back {
     visibility: visible;
-    transform: translateX(-30em);
+    transform: translateX(-20em);
     -webkit-transition: transform 0.3s ease-in;
     transition: transform 0.3s ease-in;
   }

app/javascript/components/annotation_form.jsx

@@ -140,7 +140,6 @@ class AnnotationForm extends React.Component {
   }
 }
 
-
 document.addEventListener('turbolinks:load', () => {
   const articleFomrDiv = document.querySelector('.article-form');
   if (articleFomrDiv) {

app/javascript/ink-stream/index.js

@@ -1,5 +1,6 @@
 import Rails from 'rails-ujs';
 import Turbolinks from 'turbolinks';
+require('./removeFlash.js');
 require('./getText.js');
 require('./navToggle.js');
 

app/javascript/ink-stream/removeFlash.js

@@ -0,0 +1,4 @@
+removeFlash = function removeFlash(e) {
+  const flashEl = e.target.parentNode;
+  flashEl.parentNode.removeChild(flashEl);
+}

app/javascript/packs/annotation.js

@@ -0,0 +1 @@
+require('components/annotation_form.jsx')

app/javascript/packs/application.js

@@ -6,5 +6,4 @@
 //
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
-import 'ink-stream'
-require('components//annotation_form.jsx')
+import 'ink-stream'

app/views/layouts/application.html.erb

@@ -12,6 +12,9 @@
     <%= favicon_link_tag 'favicon.png' %>
     <%= favicon_link_tag 'apple-touch-icon.png', rel: 'apple-touch-icon', type: 'image/png' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true  %>
+    <% if(controller_name == 'articles' && action_name == 'show')%>
+      <%= javascript_pack_tag 'annotation', 'data-turbolinks-track': 'reload', defer: true  %>
+    <% end %>
   </head>
 
   <body lang="en" dir="ltr">
@@ -78,7 +81,16 @@
     <%# END NAV SECTION %>
     <main role="main">
       <div class="wrapper">
-        <%= render "layouts/flash_message"%>
+        <%# BEGIN FLASH HANDLER %>
+        <%- if flash.keys.length > 0 %>
+          <%- flash.each do |flash| %>
+            <div class="flash <%= flash[0] %>">
+              <%= flash[1] %>
+              <button onClick='removeFlash(event)' class="button button-clear dismiss-flash" aria-label="Close" value="x">x</button>
+            </div>
+          <% end %>
+        <% end %>
+        <%# END FLASH HANDLER %>
         <%= yield %>
       </div>
     </main>

config/webpack/production.js

@@ -1,3 +1,26 @@
 const environment = require('./environment')
+const webpack = require('webpack')
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 
+environment.plugins.set(
+  'UglifyJs',
+  new webpack.optimize.UglifyJsPlugin({
+    sourceMap: true,
+    comments: false, // remove comments
+    compress: {
+      conditionals: true,
+      unused: true,
+      dead_code: true, // big one--strip code that will never execute
+      warnings: false, // good for prod apps so users can't peek behind curtain
+      drop_debugger: true,
+      conditionals: true,
+      evaluate: true,
+      // drop_console: true, // strips console statements
+      sequences: true,
+      booleans: true,
+      pure_getters: true,
+      loops: true,
+    }
+  })
+)
 module.exports = environment.toWebpackConfig()