dfm_web 4.0.7 → 4.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bcb9a082f24029bf1913b23c665ce18bc52446281f728fb2246a7363eb787323
-  data.tar.gz: bf1b076e4c092cda890f40eff4874042307c671e6ef6452cf3db6ce109d294c4
+  metadata.gz: 84c4b4eb534cf9bb0709478727f1b8df399029005efc95af4b6c8cac323e3102
+  data.tar.gz: bfd380942edda06a847fe43950d1719ae74e8951eeca4f53bfefbb105d7f1f4b
 SHA512:
-  metadata.gz: 1ca5aa6e77a4dd8c356bb95ae2027d9951c4ec714fcaeaab2e78fcb1ac6e980eb66543061d0a06faf8e11f5fd3d8fa73b460a6c60d609af4e9c350ae75c5b169
-  data.tar.gz: 0f31f2ebe044a663ca4f4d85cf77370c0c5cc5f895b836a738a2a8172f3f469efa35740fca7e566f2cb9c1c26f55d9ca1d9d86c00003ff695bd01d975302c857
+  metadata.gz: 5855479f64152423fd614b4d79f94624be9f3df2c78ab6b14da1881c803a063706cf636ad4177cf7096cc6eecdf7887edeb64b0d0a03748727234a2b696e8a02
+  data.tar.gz: bbac1feff266fddfc870251c612f71c0c6d1404d144f777f0cd72a728148a5ee3a81232e18b465f4f7be4f7cd408c0ca9fa5e66b891dad0a5d93a7b5cc66a9a6

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

@@ -0,0 +1,143 @@
+@media (prefers-color-scheme: dark) {
+
+  /* This older declaration is still required for the scrollbar on most browsers in 2021 */
+  :root { color-scheme: dark; }
+
+  html, main #main {
+    background: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  html {
+    background-color: #0c0202;
+    color: #dedede;
+  }
+
+  .panel {
+    background-color: rgba(128, 128, 128, 0.25);
+    border: 1px solid rgba(255,255,255,.1);
+    border-radius: 6px;
+  }
+
+  table {
+    background-color: transparent;
+    color: #b0b0b0;
+    border-width: 0;
+  }
+
+  .panel table {
+    border: 1px solid #3e434d;
+  }
+
+  td, th, table tfoot td, table tfoot th {
+    background-color: #111;
+    border-color: #3e434d;
+  }
+
+  table thead th {
+    background-color: rgb(47, 47, 47) !important;
+    color: white;
+    border-width: 0;
+  }
+
+  table thead th:first-child { border-radius: 6px 0 0 0; }
+  table thead th:last-child { border-radius: 0 6px 0 0; }
+  .tablesorter-default tr.even td, tbody tr:nth-child(even) td { background-color: #111; }
+  table.tablesorter thead th { background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAANzSzwAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAABACwAAAAAFQAJAAACF4yPgMsJ2mJ4VDKKrd4GVz5lYPeMiVUAADs=); }
+  .tablesorter-default thead .tablesorter-headerAsc { background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAANzSzwAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAABACwAAAAAFQAEAAACDYyPAcmtsJyDVDKKWQEAOw==); }
+  .tablesorter-default thead .tablesorter-headerDesc { background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAANzSzwAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAABACwAAAAAFQAEAAACDYwfoAvoz9qbZ9FrJC0AOw==); }
+
+
+  /* Table Backgrounds */
+  table tr.okay         { box-shadow: inset 10px 10px 20px 10px rgba(0, 255, 0, 0.11); }
+  table tr.okay td      { border-top-color: rgba(0, 255, 0, 0.11); }
+  table tr.okay a       { color: #00a400; }
+
+  table tr.highlight    { box-shadow: inset 10px 10px 20px 10px rgba(255, 255, 0, 0.13); }
+  table tr.highlight td { border-top-color: rgba(255, 255, 0, 0.13); }
+  table tr.highlight a  { color: #949400;}
+
+  table tr.warn         { box-shadow: inset 10px 10px 20px 10px rgba(255, 147, 0, 0.11); }
+  table tr.warn td      { border-top-color: rgba(255, 147, 0, 0.11); }
+  table tr.warn a       { color: #c06c00; }
+
+  table tr.alert        { box-shadow: inset 10px 10px 20px 10px rgba(255, 0, 0, 0.09); }
+  table tr.alert td     { border-top-color: rgba(255, 0, 0, 0.09); }
+  table tr.alert a      { color: #c5050c; }
+
+  table tr.gray         { background-color: rgba(128, 128, 128, 0.3); }
+  table tr.gray td      { border-top-color: rgba(128, 128, 128, 0.3); }
+  table tr.gray a       { color: #bbbdc4; }
+
+
+  a, a:visited { color: #068ec4; text-shadow: 1px 1px 0 #111;}
+  nav a, nav a:visited, table a, table a:visited { text-shadow: none; }
+
+  footer { box-shadow: none; }
+
+
+  /* Forms */
+  label { color: #dedede; }
+  input[type="text"],        input[type="date"],           input[type="password"],        input[type="email"],        input[type="number"],        input[type="file"],        textarea,        select,
+  .panel input[type="text"], .panel input[type="date"],    .panel input[type="password"], .panel input[type="email"], .panel input[type="number"], .panel input[type="file"], .panel textarea, .panel select,
+  input[type="text"]:focus,  input[type="password"]:focus, input[type="email"]:focus,     textarea:focus
+  {
+    background-color: rgb(23, 23, 23);
+    border-color: rgb(4, 121, 168);
+    color: white;
+    opacity: 80%;
+    border-radius: 6px;
+  }
+
+  /* Webkit browsers use a black icon even in dark mode as of 2021 */
+  ::-webkit-calendar-picker-indicator { filter: invert(100%) brightness(80%); }
+
+  /* Buttons */
+  input[type=submit], .button {
+    border-radius: 6px;
+    background-image: none !important;
+    padding: 8px 19px 10px 19px; /* we added a 1px border, so we need to remove 1px of padding. */
+    text-shadow: none !important; /* this doesn't look good in dark-mode.  Note vertical padding skewed 1px to compensate. */
+  }
+
+  input[type=submit],           .button           { border: 1px solid rgb(4, 121, 168);  background-color: rgba(4, 121, 168, .1) !important; }
+  input[type=submit].okay,      .button.okay      { border: 1px solid rgb(96, 180, 111); background-color: rgba(96, 180, 111, .1) !important;  }
+  input[type=submit].highlight, .button.highlight { border: 1px solid rgb(203, 199, 0);  background-color: rgba(203, 199, 0, .1) !important;   }
+  input[type=submit].warn,      .button.warn      { border: 1px solid rgb(220, 129, 0);  background-color: rgba(220, 129, 0, .1) !important;   }
+  input[type=submit].alert,     .button.alert     { border: 1px solid rgb(217, 54, 54);  background-color: rgba(217, 54, 54, .1) !important;   }
+  input[type=submit].gray,      .button.gray      { border: 1px solid rgb(177, 177, 177);background-color: rgba(177, 177, 177, .1) !important; }
+
+  .paper {
+    background-color: #5d5e62;
+  }
+
+  /* Nav */
+  nav, nav #nav ul.has_hamburger, nav ul li {
+    background-image: none; /* removing the gradient */
+    background-color: #9b0000;
+  }
+
+  /* Drop down menus */
+  #nav ul ul li {
+    background: #540e0b;
+  }
+
+  /* Top level hover */
+  #nav ul li:hover  {
+    background-color: #b40000;
+  }
+
+  /* Search Fields */
+  #nav input[type="text"] {
+    opacity: 100%;
+    background-color: #540e0b !important;
+    border-color: #f7f7f7 !important;
+  }
+  #nav input[type="text"]::placeholder {
+    color: #ccc;
+  }
+
+
+
+}

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

@@ -11,6 +11,7 @@
  *= require ./forms.css
  *= require ./tables.css
  *= require ./layout_media.css
+ *= require ./dark_mode.css
  *= require ./print.css
  */
 

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

@@ -31,8 +31,8 @@ nav {
 /* TODO: Input fields don't want to vertically center */
 /* TODO: Had to eyeball it. */
 nav #nav form input[type="text"] {
-  margin: 6px auto;
-  height: 32px;
+  margin: 6px auto 0 auto;
+  height: 31px;
 }
 
 #nav ul,

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

@@ -1,6 +1,6 @@
 /* Top Menus */
 
-nav {
+nav, nav ul li {
   background-color: #c5050c;
   background: linear-gradient(#cb050c, #c1050c);
   color: white;
@@ -16,7 +16,8 @@ nav {
 }
 
 /* Hover Color */
-#nav li:hover  {
+#nav ul li:hover  {
+  background-image: none;
   background-color: #9b0000;
 }
 #nav ul li ul li:hover  {

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

@@ -39,17 +39,22 @@
   hr          { display: none; }
   table th,
   table td    { padding: 3px; }
+  thead       { display: table-row-group; }
 
   /* Stuff to hide */
-  /* NOTE: "display: none" breaks unrelated table printing in Chrome */
   nav, footer, .button, .no_print, input[type=submit], #notice, #alert {
     position: absolute;
     visibility: hidden;
+    display: none;
+  }
+
+  .print_only {
+    display: inherit !important;
   }
 
   /* Hide Tablesorter sorting indicators */
-  table.tablesorter thead th {
-    background-image: none;
+  table.tablesorter thead tr th {
+    background-image: none !important;
     padding-left: 3px;
   }
 
@@ -71,3 +76,8 @@
     padding: 20px;
   }
 }
+
+/* Add for content which should only show in print */
+.print_only {
+  display: none;
+}

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

@@ -24,55 +24,55 @@ show-for-xlarge-only
 
 /* Pure Extra Large */
 @media screen and (min-width:1280px) {
-  .show-for-xsmall-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-small-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-medium-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-only {visibility:visible; position: inherit;}
+  .show-for-xsmall-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-small-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-medium-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-only {visibility:visible; position: inherit;  display: inherit;}
 }
 
 /* Pure Large */
 @media screen and (max-width:1279px) {
-  .show-for-xlarge-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xsmall-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-small-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-medium-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-only  {visibility:visible; position: inherit;}
-  .show-for-xlarge-only {visibility:hidden;  position: absolute; left: -9999px;}
+  .show-for-xlarge-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xsmall-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-small-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-medium-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-only  {visibility:visible; position: inherit;  display: inherit;}
+  .show-for-xlarge-only {visibility:hidden;  position: absolute; display: none;}
 }
 
 /* Pure Medium (iPad Portrait) */
 @media screen and (max-width:1023px) {
-  .show-for-large-up    {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xsmall-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-small-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-medium-only {visibility:visible; position: inherit;}
-  .show-for-large-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-only {visibility:hidden;  position: absolute; left: -9999px;}
+  .show-for-large-up    {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xsmall-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-small-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-medium-only {visibility:visible; position: inherit;  display: inherit;}
+  .show-for-large-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-only {visibility:hidden;  position: absolute; display: none;}
 }
 
 /* Pure Small */
 @media screen and (max-width:639px) {
-  .show-for-medium-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-up    {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xsmall-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-small-only  {visibility:visible; position: inherit;}
-  .show-for-medium-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-only {visibility:hidden;  position: absolute; left: -9999px;}
+  .show-for-medium-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-up    {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xsmall-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-small-only  {visibility:visible; position: inherit;  display: inherit;}
+  .show-for-medium-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-only {visibility:hidden;  position: absolute; display: none;}
 }
 
 /* Pure Extra Small */
 @media screen and (max-width:359px) {
-  .show-for-small-up    {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-medium-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-up    {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xsmall-only {visibility:visible; position: inherit;}
-  .show-for-small-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-medium-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-only {visibility:hidden;  position: absolute; left: -9999px;}
+  .show-for-small-up    {visibility:hidden;  position: absolute; display: none;}
+  .show-for-medium-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-up    {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xsmall-only {visibility:visible; position: inherit;  display: inherit;}
+  .show-for-small-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-medium-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-only {visibility:hidden;  position: absolute; display: none;}
 }

data/lib/dfm_web/version.rb

@@ -1,10 +1,14 @@
 module DfmWeb
-  VERSION = "4.0.7"
+  VERSION = "4.1.3"
 end
 
 
 # Version History
 
+# 4.1.3   Accessibility and Print media improvements. Added /print demo to Dummy app.
+# 4.1.2   Add example theme-colors to dummy & Update NAV CSS. Added a nav search box.
+# 4.1.1   Remove alpha channel on option/select background as it's unsupported in Windows.
+# 4.1.0   Add dark-mode (automatic based on system dark/light mode)
 # 4.0.7   Fix deprecation with Rails 6+. Removed insecure excel_icon helper.
 # 4.0.6   Updated Mailer template.
 # 4.0.5   Improved Print CSS.

data/spec/dummy/app/views/application/print.html.erb

@@ -0,0 +1,46 @@
+<h1>Printing</h1>
+
+<h3>Available Classes:</h3>
+<ul>
+  <li>
+    <code>no_print</code>
+    <ul>
+      <li>Useful for hiding forms, buttons etc.</li>
+    </ul>
+  </li>
+  <li>
+    <code>print_only</code>
+    <ul>
+      <li>Add print friendly content without affecting the screen layout.</li>
+      <li>Print-Preview this page to see an example.</li>
+    </ul>
+  </li>
+</ul>
+
+<hr>
+
+<div class="panel">
+  <h2>Normal Content</h2>
+  <ul>
+    <li>This section will show on screen and in print.</li>
+  </ul>
+</div>
+
+<div class="panel no_print">
+  <h2>No Print</h2>
+  <ul>
+    <li>class: "no_print"</li>
+    <li>This content will show on screen but will not be printed.</li>
+  </ul>
+</div>
+
+<div class="panel print_only">
+  <h2>Print Only</h2>
+  <ul>
+    <li>class: "print_only"</li>
+    <li>This content will only show in print.</li>
+  </ul>
+</div>
+
+
+

data/spec/dummy/app/views/layouts/_nav.html.erb

@@ -7,6 +7,9 @@
           <span><%= image_tag "dfm_web/uwcrest.png", size: '19x42' %>DFM Web</span>
         <% end %>
       </li>
+      <li class="no_hover no_print">
+        <form><input type="text" placeholder="Search"></form>
+      </li>
     </ul>
 
     <ul class="right">
@@ -16,6 +19,7 @@
 
       <li><%= link_to "Mailers", "/rails/mailers/mailer/example" %></li>
       <li><%= link_to "Pure", pure_path %></li>
+      <li><%= link_to "Print", print_path %></li>
 
       <li>
         <%= link_to("Flash", '#') %>

data/spec/dummy/app/views/layouts/application.html.erb

@@ -10,6 +10,9 @@
 
     <%= favicon_link_tag  'dfm_web/apple-touch-icon.png', rel: 'apple-touch-icon', type: 'image/png' %>
     <meta name="apple-mobile-web-app-title" content="DFM Web">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#cb050c">
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#9b0000">
   </head>
 
   <body>

data/spec/dummy/config/routes.rb

@@ -6,6 +6,7 @@ Rails.application.routes.draw do
   get 'alert'  => 'application#alert'
   get 'notice' => 'application#notice'
   get 'news'   => 'application#news'
+  get 'print'  => 'application#print'
   get 'pure'   => 'application#pure'
   post 'form_submit' => 'application#form_submit'
   root 'application#index' #You can have the root of your site routed with "root"