reorganizing css and fixing css issues

brunch-config.js

@@ -1,49 +1,50 @@
+/*global exports */
 exports.config = {
   // See http://brunch.io/#documentation for docs.
   files: {
     javascripts: {
-      joinTo: "js/app.js"
+      joinTo: 'js/app.js'
 
       // To use a separate vendor.js bundle, specify two files path
       // https://github.com/brunch/brunch/blob/stable/docs/config.md#files
       // joinTo: {
-      //  "js/app.js": /^(web\/static\/js)/,
-      //  "js/vendor.js": /^(web\/static\/vendor)|(deps)/
+      //  'js/app.js': /^(web\/static\/js)/,
+      //  'js/vendor.js': /^(web\/static\/vendor)|(deps)/
       // }
       //
       // To change the order of concatenation of files, explicitly mention here
       // https://github.com/brunch/brunch/tree/master/docs#concatenation
       // order: {
       //   before: [
-      //     "web/static/vendor/js/jquery-2.1.1.js",
-      //     "web/static/vendor/js/bootstrap.min.js"
+      //     'web/static/vendor/js/jquery-2.1.1.js',
+      //     'web/static/vendor/js/bootstrap.min.js'
       //   ]
       // }
     },
     stylesheets: {
-      joinTo: "css/app.css"
+      joinTo: 'css/app.css'
     },
     templates: {
-      joinTo: "js/app.js"
+      joinTo: 'js/app.js'
     }
   },
 
   conventions: {
     // This option sets where we should place non-css and non-js assets in.
-    // By default, we set this to "/web/static/assets". Files in this directory
-    // will be copied to `paths.public`, which is "priv/static" by default.
+    // By default, we set this to '/web/static/assets'. Files in this directory
+    // will be copied to `paths.public`, which is 'priv/static' by default.
     assets: /^(lib\/web\/static\/assets)/
   },
 
   // Phoenix paths configuration
   paths: {
     // Dependencies and current project directories to watch
     watched: [
-      "lib/web/static"
+      'lib/web/static'
     ],
 
     // Where to compile files to
-    public: "priv/static"
+    public: 'priv/static'
   },
 
   // Configure your plugins
@@ -56,7 +57,7 @@ exports.config = {
 
   modules: {
     autoRequire: {
-      "js/app.js": ["lib/web/static/js/app"]
+      'js/app.js': ['lib/web/static/js/app']
     }
   }
 };

ebert.yml

@@ -0,0 +1,25 @@
+# This configuration was used Ebert to review the joaomdmoura/machinery repository
+# on 56a7e3e2edce2b0c0c4f8fb2746183a5bc8a3cf1.
+# You can make this the default configuration for future reviews by moving this
+# file to your repository as `.ebert.yml` and pushing it to GitHub, and tweak
+# it as you wish - To know more on how to change this file to better review your
+# repository you can go to https://docs.ebertapp.io/configuration and see the configuration
+# details.
+---
+styleguide: plataformatec/linters
+engines:
+  credo:
+    enabled: true
+  fixme:
+    enabled: true
+  eslint:
+    enabled: true
+  csslint:
+    enabled: true
+  remark-lint:
+    enabled: true
+exclude_paths:
+- config
+- test
+- lib/web/static/vendor
+

lib/web/static/css/app.css

@@ -1,123 +1,48 @@
-/* This file is for your main application css. */
-body {
-  font-family: 'Roboto', sans-serif;
-}
-
-h1 {
-  font-family: 'Roboto', sans-serif;
-  font-size: 2.4rem;
-  font-weight: 900; }
-
-h2 {
-  font-family: 'Roboto', sans-serif;
-  font-size: 2.4rem;
-  font-weight: 400; }
-
-h3 {
-  font-family: 'Roboto', sans-serif;
-  font-size: 1.8rem;
-  font-weight: 400; }
-
-h4 {
-  font-family: 'Roboto', sans-serif;
-  font-size: 1.4rem;
-  font-weight: 400; }
-
-h5 {
-  font-family: 'Roboto', sans-serif;
-  font-size: 1rem;
-  letter-spacing: .1rem;
-  font-weight: 900;
-  text-transform: uppercase; }
-
-h6 {
-  font-family: 'Roboto', sans-serif;
-  font-size: .8rem;
-  letter-spacing: .1rem;
-  font-weight: 400;
-  text-transform: uppercase; }
+.resource-item { cursor: pointer; }
 
 nav.sidebar {
-  border-right: 1px solid #eee;
   background: #6063bb;
+  border-right: 1px solid #eee;
 }
 
-a, a:hover, a:active {
-  color: #fff;
-  text-decoration: none;
-}
-
-.nav-pills .nav-link {
-  color: #fff;
-}
-.nav-pills .nav-link.active, .nav-pills .nav-link:hover, .nav-pills .show>.nav-link  {
-  background-color: #5354aa !important;
+.nav-pills .nav-link.active, .nav-pills .nav-link:hover { /* csslint allow: adjoining-classes */
+  background-color: #5354aa;
 }
 
 .sidebar .site-title {
-  margin-top: .5rem;
+  border: none;
+  color: #fff;
+  font-size: 0.9rem;
+  letter-spacing: .2rem;
   margin-bottom: 1.75rem;
+  margin-top: .5rem;
+  padding:0 1rem;
+  text-transform: uppercase;
 }
 
-.sidebar h1 {
-  color: #fff;
+.topbar .site-title {
   border: none;
+  color: #fff;
   font-size: 0.9rem;
-  padding: 0rem 1rem;
-  text-transform: uppercase;
   letter-spacing: .2rem;
-}
-
-div.spaced {
-  margin-top: 25px;
-}
-
-.colored {
-  color: #666;
-}
-
-div.filled {
-  padding: 15px 15px;
-  background-color: rgb(241, 239, 239);
-  border-radius: .3rem;
-  margin: 0px 10px;
+  padding: 15px 0 10px 0;
+  text-transform: uppercase;
 }
 
 nav.topbar {
+  background: #6063bb;
+  border-bottom: 1px solid #eee;
+  left: 0;
+  overflow-x: hidden;
   position: fixed;
   top:0;
-  left: 0;
   z-index: 1000;
-  overflow-x: hidden;
-  background: #6063bb;
-  border-bottom: 1px solid #eee;
 }
 
 @media screen and (min-width: 480px) {
-  nav.topbar {
-    display: none;
-  }
+  nav.topbar { display: none; }
 }
 
 @media screen and (max-width: 480px) {
-  main {
-    top: 60px;
-  }
+  main { top: 60px; }
 }
-
-.topbar h1 {
-  color: #fff;
-  border: none;
-  font-size: 0.9rem;
-  padding: 15px 0 10px 0;
-  text-transform: uppercase;
-  letter-spacing: .2rem;
-}
-
-.oi {
-  color: #fff;
-}
-
-.resource-item {
-  cursor: pointer;
-}

lib/web/static/css/helpers.css

@@ -0,0 +1,10 @@
+.spaced { margin-top: 25px; }
+
+.colored { color: #666; }
+
+.filled {
+  background-color: rgb(241, 239, 239);
+  border-radius: .3rem;
+  margin: 0 10px;
+  padding: 15px 15px;
+}

lib/web/static/css/main.css

@@ -0,0 +1,36 @@
+body {
+  font-family: 'Roboto', sans-serif;
+}
+
+h1, h2, h3, h4,h5, h5 {
+  font-family: 'Roboto', sans-serif;
+}
+h1, h5 { font-weight: 900; }
+h2, h3, h4, h6 { font-weight: 400; }
+h1 { font-size: 2.4rem; }
+h2 { font-size: 2.4rem; }
+h3 { font-size: 1.8rem; }
+h4 { font-size: 1.4rem; }
+h5 {
+  font-size: 1rem;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+}
+h6 {
+  font-size: .8rem;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+}
+
+.oi {
+  color: #fff;
+}
+
+a, a:hover, a:active {
+  color: #fff;
+  text-decoration: none;
+}
+
+.nav-pills .nav-link {
+  color: #fff;
+}

lib/web/static/js/app.js

@@ -11,8 +11,8 @@
 //
 // If you no longer want to use a dependency, remember
 // to also remove its path from "config.paths.watched".
-
-$("#menu-toggle").click(function(e) {
+/*global $ */
+$('#menu-toggle').click(function(e) {
   e.preventDefault();
-  $("#wrapper").toggleClass("toggled");
+  $('#wrapper').toggleClass('toggled');
 });

lib/web/static/vendor/css/dashboard.css

@@ -1,3 +1,4 @@
+/* csslint ignore:start */
 /*
  * Base structure
  */
@@ -58,3 +59,4 @@ h1 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+/* csslint ignore:end */

lib/web/templates/layout/app.html.eex

@@ -19,7 +19,7 @@
           <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false">
             <span class="oi oi-menu" title="menu" aria-hidden="true"></span>
           </button>
-          <div class='navbar-collapse collapse'>
+          <div class='navbar-collapse collapse' id="collapsibleNavbar">
             <ul class="nav nav-pills flex-column">
               <li class="nav-item">
                 <%= link("Overview", to: page_path(@conn, :index), class: "nav-link active") %>