dfm_web 2.2.1 → 4.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e55652063ea0b8f5e3b0731f54bd5ec3ac8371bdfd9b7b7c1e400c2151c7fa2b
-  data.tar.gz: f0618c5a845b58fc987aba957b02d2ad39764350bd36f3b05f5c46950015ac91
+  metadata.gz: 8f8f1012591e5ccfc4d529d425da5cf52b30a8d088aeca63317ad4d48d3e7370
+  data.tar.gz: 5cd993e58abd70b5acb3c8c926c8e8e866fbf2bc53b2328234a64229e7da2b46
 SHA512:
-  metadata.gz: de9cc7ce4e4009539a8bcb6fc4a945910294ef35687d60b96e671530ef225d56b7e440f7d2d723181a2137567f11511995c49eb186ed98ef3c70951b93d3fb41
-  data.tar.gz: 17cc789d222277688d342e526e7eba2d3626c46454dadd05f0643ca77ee79a9c151061ac5176997b56b2662d989ea02ae23998f557f037b95dfc21f7190d774d
+  metadata.gz: 0cd0bb8c6351a41e5417a6d52594cbf8853ebecb6cf9601020c921546b549c3155e49104d6e18eb15227685b56b8ecb299adbdab16ee48fa921739b2e11a5bac
+  data.tar.gz: 1861b620f02d7f14fbaf6afcd272ec2d0132f3bf38d75c420b9d826821bfc17b006b3d45a336190f8d7f1bd26f094b441d4c0e1ac5397a678c40b0ff22c05dbc

data/app/assets/config/dfm_web/manifest.js

@@ -0,0 +1,14 @@
+// In this file we put the dependencies of our engine.
+// Required for Sprockets 4
+//
+//= link dfm_web/apple-touch-icon.png
+//= link dfm_web/defective_monitor.png
+//= link dfm_web/excel.png
+//= link dfm_web/lock.png
+//= link dfm_web/molecule.png
+//= link dfm_web/terrace-chair.png
+//= link dfm_web/uwcrest.png
+//= link dfm_web/word.png
+//
+//= link application.css
+//= link application.js

data/app/assets/javascripts/dfm_web/dfm_web.js

@@ -0,0 +1,73 @@
+// DFM Web Javascript
+// Originally written in coffeescript, converted to JS with http://js2.coffee/
+
+// DfmWeb Namespace
+// https://robots.thoughtbot.com/module-pattern-in-javascript-and-coffeescript
+window.DfmWeb = {};
+
+// Add this method within your initialization block:
+// Vanilla:
+// $(document).on 'ready page:load', ->
+//   DfmWeb.activate_dfm_web();
+
+// Turbolinks:
+// $(document).on 'turbolinks:load', ->
+//   DfmWeb.activate_dfm_web();
+
+DfmWeb.activate_dfm_web = function() {
+
+    // Hide the #notice and #alert messages by clicking the [X] or pressing escape key
+    // stop(true) removes any pending animations.
+    // This allows you to have an autohide in your app without breaking the click / ESC action.
+    // Example: $('#notice').delay(5000).slideUp('slow')
+    $('#notice, #alert').click(function() {
+        $(this).stop(true);
+        return $(this).animate({
+            height: 'toggle'
+        }, 300);
+    });
+    $(document).keyup(function(e) {
+        if (e.keyCode === 27) {
+            $('#notice, #alert').stop(true);
+            return $('#notice, #alert').animate({
+                height: 'toggle'
+            }, 300);
+        }
+    });
+
+    // NAV BAR
+    //
+    // Insert the Hamburger if there are menu 2+ items
+    // Add "has_hamburger" class to the ul so CSS can know which way to show it.
+    if ($('#nav ul.right li').length > 1) {
+        $('ul.right').after('<div id="hamburger"></div>');
+        $('ul.right').addClass('has_hamburger');
+    }
+
+    // Show the Mobile Menu on Hamburger Click
+    $('nav #hamburger').click(function() {
+        return $("nav #nav ul.has_hamburger").toggle();
+    });
+
+    // If you've toggled the Mobile menu it breaks larger sizes.  Reset on resize.
+    window.onresize = function() {
+        if (window.innerWidth > 1023) {
+            return $("nav #nav ul.has_hamburger").css('display', 'inline-block');
+        } else {
+            return $("nav #nav ul.has_hamburger").css('display', 'none');
+        }
+    };
+
+    // iPads don't have :hover, so hide the menu if the user clicks anything in <main>
+    $('main').click(function() {
+        if (window.innerWidth <= 1023) {
+            return $("nav #nav ul.has_hamburger").css('display', 'none');
+        }
+    });
+    // Deal with Really long menus
+    return $("#nav > ul > li > ul").each(function() {
+        if ($(this).children('li').length > 10) {
+            return $(this).addClass('crowded');
+        }
+    });
+};

data/app/assets/stylesheets/dfm_web/dfm_web.css

@@ -4,6 +4,7 @@
  *= require ./pure/visibility
  *= require ./pure/gutter
  *= require ./layout.css
+ *= require ./flash.css
  *= require ./nav.css
  *= require ./nav_colors.css
  *= require ./style.css
@@ -13,4 +14,5 @@
  *= require ./print.css
  */
 
-.debug { box-shadow: 0 0 1px red; }
+.debug { box-shadow: 0 0 1px red, 0 0 2px black; }
+.debug-all, .debug-all * { box-shadow: 0 0 1px white, 0 0 2px black; }

data/app/assets/stylesheets/dfm_web/flash.css

@@ -0,0 +1,44 @@
+/* Similar to main */
+#notice, #alert {
+  color: white;
+  margin: 70px 25px -70px 25px;        /* Space for the NAV, and min side margin */
+  display: block;
+  pointer-events: none;
+  background: none;
+}
+
+/* Similar to #main */
+#notice>div, #alert>div {
+  margin: 0 auto;               /* Centered with max width */
+  max-width: 1800px;
+  padding: 10px 10px 10px 25px; /* This also controls where the X button lives. */
+  overflow: hidden;
+  background-color: #338932;
+}
+#alert>div {
+  background-color: #b94a48;
+}
+
+
+/* HTML-free close button */
+#notice > div:before, #alert > div:before {
+  float: right;
+  content: "\00d7";
+  cursor: pointer;
+  pointer-events: auto;
+  padding: 0 6px 3px 6px;
+  background-color: rgba(255,255,255,.2);
+  transition: background-color .3s;
+}
+
+
+
+/* Hover the close button to add visual cue */
+#notice:hover:after, #alert:hover:after {
+  background-color: rgba(0,0,0,.2);
+  transition: background-color 0s;
+}
+
+
+/* Hide Rails scaffold notice bars */
+main #main p#notice { display: none; }

data/app/assets/stylesheets/dfm_web/forms.css

@@ -105,7 +105,7 @@ input[type=submit]:focus, .button:focus {
   outline: 3px solid rgba(135, 206, 250, 0.66);
 }
 
-input[type=submit],           .button           { background: linear-gradient(rgb(0, 129, 198), rgb(0, 122, 201));    text-shadow: 1px 1px 0 #434446; }
+input[type=submit],           .button           { background: linear-gradient(rgb(4, 121, 168 ), rgb(4, 125, 171));    text-shadow: 1px 1px 0 #434446; }
 input[type=submit].okay,      .button.okay      { background: linear-gradient(rgb(96, 180, 111), rgb(103, 190, 118)); text-shadow: 1px 1px 0 #4c8e58; }
 input[type=submit].highlight, .button.highlight { background: linear-gradient(rgb(203, 199, 0), rgb(209, 205, 0));    text-shadow: 1px 1px 0 #959000; }
 input[type=submit].warn,      .button.warn      { background: linear-gradient(rgb(220, 129, 0), rgb(211, 132, 0));    text-shadow: 1px 1px 0 #9f5d00; }
@@ -126,9 +126,9 @@ input[type=submit]:hover:disabled, .button:hover.disabled  {
 }
 
 .nested-fields, .field, .actions {
-  padding-left: 5px; /* Cheat a little space so */
+  padding: 5px; /* Cheat a little space so */
   margin-left: -5px; /* button & submit outlines don't get cropped off */
-  margin-bottom: 1em;
+  margin-bottom: 5px;
   display: block;
   overflow-y: auto;  /* This makes floated elements such as checkboxes still consume vertical space */
 }

data/app/assets/stylesheets/dfm_web/layout.css

@@ -20,31 +20,8 @@ body {
   background-color: transparent;
 }
 
-#notice, #alert {
-  width: 100%;
-  height: 75px;
-  margin: -25px 0 25px 0;  /* This doesn't seem right */
-  float: left;
-  font-size: 1.5em;
-  padding: 25px;
-  pointer-events: none;
-}
-
-/* HTML-free close button */
-#notice > div:after, #alert > div:after {
-  float: right;
-  content: "\00d7";
-  cursor: pointer;
-  pointer-events: auto;
-  padding: 0 10px 3px 10px;
-  background-color: rgba(255,255,255,.2);
-  transition: background-color .3s;
-}
-
-
-
 main {
-  margin: 100px 25px;       /* Space for the NAV, and min side margin */
+  margin: 70px 25px;        /* Space for the NAV, and min side margin */
   display: block;
 }
 
@@ -62,6 +39,7 @@ footer {
   bottom: 0;
   padding: 0;
   width: 100%;
+  line-height: 1.8em;
 }
 
 /* To make the entire footer fixed (always visible), give it the 'fixed' class. */
@@ -72,25 +50,20 @@ footer.fixed {
 /* Footer elements you want to float in position instead of being only at the bottom */
 footer .fixed {
   position: fixed;
-  bottom: 6px;  /* Why is .5em here too big? */
+  bottom: 0;
   left: 0;
   text-shadow: 1px 1px 2px rgb(0, 82, 136);
 }
 
 /* Space out the floating elements */
 footer .fixed > div {
-  padding: 0 1em 0 0;
+  padding-right: 1em;
 }
 
-#footer {
-  height: 2em;
-  padding: .5em 0;
-}
 #footer > div {
   padding: 0 10px;  /* Space out any child divs within the footer */
 }
 
 
-
 /* Prevent unbreakable elements from expanding outside their pure column (tables etc) */
 .pure-u-1 { overflow: hidden; }

data/app/assets/stylesheets/dfm_web/layout_media.css

@@ -10,7 +10,7 @@
     margin-bottom: 2em;      /* space for footer only */
   }
 
-  main {
+  main, #notice, #alert {
     margin: 0;
     transition: margin 0s;
   }
@@ -26,10 +26,6 @@
     transition: margin 0s;
   }
 
-  #notice, #alert {
-    margin-top: 0;
-  }
-
   html {
     background-image: none !important;
     background-color: rgb(255, 250, 242) !important;  /* color copied from main */
@@ -52,7 +48,7 @@
   /* Nav with 2 or more menu items has_hamburger added via javascript */
   nav #nav ul.has_hamburger {
     position: relative;
-    background-color: rgba(0, 82, 136, .98);
+    background-color: #b40000;
     top: 0;
     right: 0;
     display: none;

data/app/assets/stylesheets/dfm_web/nav.css

@@ -2,8 +2,10 @@ nav {
   position:fixed;
   width: 100%;
   top: 0;
-  height: 75px;
+  height: 42px;
+  line-height: 42px;
   float: left;
+  z-index: 400;
 }
 
 #nav{
@@ -12,9 +14,6 @@ nav {
   margin: 0 auto;
 }
 
-#nav img {
-  vertical-align: middle;
-}
 
 /* If your first nav item has a logo, give it extra margin */
 #nav ul.left li:first-child img {
@@ -22,22 +21,18 @@ nav {
 }
 
 /* We used h1 for the logo in the past, but that's treated as a section heading by screen readers. */
-/*  Please use <span>TITLE<span> */
-/*  Firefox renders text vertial-align: middle a little too high.  Goes back to at least 2009 */
-
-#nav h1,
+/* Please use <span>TITLE<span> */
 #nav span {
-  padding: 0;
-  margin-right: 20px;
-  vertical-align: middle;
-  line-height: 73px;
-  font-size: 1.9em;
+  margin-right: 10px;
+  font-size: 26px;
+  display: block;
 }
 
 /* TODO: Input fields don't want to vertically center */
 /* TODO: Had to eyeball it. */
 nav #nav form input[type="text"] {
-  margin-top: 19px;
+  margin: 6px auto;
+  height: 32px;
 }
 
 #nav ul,
@@ -45,7 +40,7 @@ nav #nav form input[type="text"] {
   padding: 0;
   list-style: none;
   margin: 0;
-    font-size: 20px;
+  font-size: 16px;
 }
 
 #nav ul {
@@ -57,6 +52,7 @@ nav #nav form input[type="text"] {
   float: left;
   min-height: 1px;
   vertical-align: middle;
+  line-height: 42px;
 }
 
 #nav ul li.hover,
@@ -106,19 +102,29 @@ nav #nav form input[type="text"] {
 
 #nav ul ul li {
   font-weight: normal;
+  border-bottom: 1px solid rgba(255,255,255,.1);
 }
 
 #nav a {
   padding: 0 20px;
   display: block;
-  line-height: 1em;
+  max-height: 42px;
   text-decoration: none;
 }
 
+
+/* Menu drop down items */
+/* Multi-line items look bad with line-height: 42... Eyeballed it */
+#nav ul li ul li a {
+  max-height: none;
+  line-height: 1.4em;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
 #nav > ul {
   *display: inline-block;
 }
-
 #nav:after,
 #nav ul:after {
   content: '';
@@ -132,9 +138,8 @@ nav #nav form input[type="text"] {
 
 #nav ul ul a {
 
-  border-top: 0 none;
-  line-height: 150%;
-  padding: 16px 20px;
+  border-top: 0;
+  line-height: 42px;
 }
 #nav ul ul ul {
   border-top: 0 none;
@@ -155,8 +160,8 @@ nav #nav form input[type="text"] {
   background-clip: padding-box;
 }
 
-/* Prevent the right-most item's drop down from going off screen */
-#nav ul.right li:last-child ul {
+/* Prevent the right side drop down from going off screen */
+#nav ul.right li ul {
   left: auto;
   right: 0;
 }
@@ -167,7 +172,7 @@ nav #nav form input[type="text"] {
 }
 
 #nav > ul > li > a {
-  line-height: 75px;
+  line-height: unset;
 }
 
 nav > #nav > ul.right {
@@ -178,11 +183,11 @@ nav > #nav > ul.right {
 #nav #hamburger {
   display: none;
   position: absolute;
-  margin: 20px;
+  margin: 9px;
   top: 0;
   right: 0;
-  width: 35px;
-  height: 35px;
+  width: 30px;
+  height: 26px;
   z-index: 999999;
   background:linear-gradient(to bottom, #fff 0%, #fff 15%,
                                         transparent 15%, transparent 42.5%,
@@ -194,7 +199,6 @@ nav > #nav > ul.right {
 /* If a menu is really long, Javascript will add "crowded" class to it. */
 #nav ul.crowded a {
   font-size: 15px;
-  border-bottom: 1px solid rgba(255,255,255,.2);
   padding: 6px 10px;
 }
 

data/app/assets/stylesheets/dfm_web/nav_colors.css

@@ -1,8 +1,8 @@
 /* Top Menus */
 
 nav {
-  background-color: rgb(0, 82, 136); /* IE 9 and below */
-  background: linear-gradient(rgb(0, 82, 136), rgb(0, 96, 158));
+  background-color: #c5050c;
+  background: linear-gradient(#cb050c, #c1050c);
   color: white;
 }
 
@@ -12,10 +12,18 @@ nav {
 
 /* Drop down menus */
 #nav ul ul li {
-  background: rgba(0, 82, 136, 0.98);
+  background: #9b0000;
 }
 
 /* Hover Color */
 #nav li:hover  {
-  background-color: #00426e;
+  background-color: #9b0000;
+}
+#nav ul li ul li:hover  {
+  background-color: #b40000;
+}
+
+
+nav #nav ul.has_hamburger {
+  background: #c5050c;
 }