js refactoring, move js assets to webpacker, and some css fix on mobile

voxel-web · Oct 20, 2017 · d891d82 · d891d82
1 parent fc9646d
commit d891d82
Show file tree

Hide file tree

Showing 13 changed files with 29 additions and 33 deletions.
diff --git a/Gemfile b/Gemfile
@@ -23,7 +23,6 @@ gem 'sidekiq', '< 6'
 gem 'skylight'
 gem 'turbolinks', '~> 5'
 gem 'tzinfo-data'
-gem 'uglifier', '>= 1.3.0'
 gem 'webpacker'
 
 group :development, :test do

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -106,7 +106,6 @@ GEM
     equalizer (0.0.11)
     erubi (1.7.0)
     erubis (2.7.0)
-    execjs (2.7.0)
     faker (1.8.4)
       i18n (~> 0.5)
     fakeredis (0.6.0)
@@ -418,8 +417,6 @@ GEM
       thread_safe (~> 0.1)
     tzinfo-data (1.2017.2)
       tzinfo (>= 1.0.0)
-    uglifier (3.2.0)
-      execjs (>= 0.3.0, < 3)
     unicode-display_width (1.3.0)
     uniform_notifier (1.10.0)
     unparser (0.2.6)
@@ -508,7 +505,6 @@ DEPENDENCIES
   stackprof
   turbolinks (~> 5)
   tzinfo-data
-  uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
   webmock
   webpacker

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -9,9 +9,4 @@
 //
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
-//
-//= require rails-ujs
-//= require turbolinks
-//= require navToggle
-//= require getText
-//= require highlight
+//
diff --git a/app/assets/javascripts/highlight.js b/app/assets/javascripts/highlight.js
diff --git a/app/assets/stylesheets/nav.scss b/app/assets/stylesheets/nav.scss
@@ -72,6 +72,7 @@ and (-webkit-min-device-pixel-ratio: 2){
   }
   nav .logo {
     height: 7rem;
+    margin-left: 0;
   }
   nav p {
     font-size: 6rem;
@@ -84,15 +85,14 @@ and (-webkit-min-device-pixel-ratio: 2){
     visibility: hidden;
   }
   nav button.nav-toggle {
-    display: inline-block;
+    float: left;
     visibility: visible;
     position: relative;
-    width: 8rem;
+    left: -11rem;
+    margin-left: 3rem;
+    width: 12rem;
     height: 100%;
     padding: 0;
-    margin-bottom: 0;
-    margin-left: 2rem;
-    bottom: 1rem;
   }
 
   nav .nav-toggle svg {

diff --git a/app/javascript/packs/annotation_form.jsx → ...javascript/components/annotation_form.jsx b/app/javascript/packs/annotation_form.jsx → ...javascript/components/annotation_form.jsx
@@ -64,13 +64,13 @@ class AnnotationForm extends React.Component {
           </blockquote>
           <form onSubmit={this.handleSubmit}>
             <fieldset>
-              <label for='annotation-form-annotation-text'>Annotation</label>
+              <label htmlFor='annotation-form-annotation-text'>Annotation</label>
               <textarea id='annotation-form-annotation-text'
                 name='annotations_form[annotation_text]' 
                 onChange={this.setAnnotation}
                 value={this.state.annotationText}
               />
-              <label for='annotation-form-citation-text'>Citation</label>
+              <label htmlFor='annotation-form-citation-text'>Citation</label>
               <input type='text' id='annotation-form-citation-text'
                 onChange={this.setCitation}
                 name='annotations_form[citation_text]'

diff --git a/app/assets/javascripts/getText.js → app/javascript/ink-stream/getText.js b/app/assets/javascripts/getText.js → app/javascript/ink-stream/getText.js
diff --git a/app/javascript/ink-stream/index.js b/app/javascript/ink-stream/index.js
@@ -0,0 +1,7 @@
+import Rails from 'rails-ujs';
+import Turbolinks from 'turbolinks';
+require('./getText.js');
+require('./navToggle.js');
+
+Rails.start();
+Turbolinks.start();
diff --git a/app/assets/javascripts/navToggle.js → app/javascript/ink-stream/navToggle.js b/app/assets/javascripts/navToggle.js → app/javascript/ink-stream/navToggle.js
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -6,6 +6,5 @@
 //
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
-
-console.log('Hello World from Webpacker')
-require("./annotation_form.jsx")
+import 'ink-stream'
+require('components//annotation_form.jsx')
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -10,8 +10,7 @@
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= favicon_link_tag 'favicon.png' %>
     <%= favicon_link_tag 'apple-touch-icon.png', rel: 'apple-touch-icon', type: 'image/png' %>
-    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
-    <%= javascript_pack_tag 'application' %>
+    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true  %>
   </head>
 
   <body lang="en" dir="ltr">

diff --git a/package.json b/package.json
@@ -9,8 +9,10 @@
     "@rails/webpacker": "^3.0.1",
     "babel-preset-react": "^6.24.1",
     "prop-types": "^15.6.0",
+    "rails-ujs": "^5.1.4",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.0.0",
+    "turbolinks": "^5.0.3"
   },
   "devDependencies": {
     "webpack-dev-server": "^2.9.2"

diff --git a/yarn.lock b/yarn.lock
@@ -4211,6 +4211,10 @@ rails-erb-loader@^5.2.1:
     loader-utils "^1.1.0"
     lodash.defaults "^4.2.0"
 
+rails-ujs@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/rails-ujs/-/rails-ujs-5.1.4.tgz#e2e9f7bcbfe51ee69c5f72f4beb0d88ab81a638e"
+
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -5047,6 +5051,10 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+turbolinks@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.0.3.tgz#c8ce128cfc9be1d691a1e41ffa858a5a5ee86a02"
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"