DFM Web doesn't apply its input rules to type="date".

Also dates need extra padding-left and a min-height. The rules I have in tracker are:

input[type="date"]{
  padding-left: 5px;
  min-height: 2.3em;
}

DFM Web (example):

Tracker (example):

I ran into this tonight, and thought it looked pretty sweet.

Desktop:

Mobile:

.. that's okay, but it can't stay fixed if you zoom taking up the whole screen.

Anketto needs something to simulate what a page might look like printed out:

You have no idea how badly I want to add those dot matrix page feed strips on each side.

Portrait view on an iPhone 5:

Small shows the 'burger:

The lower range of Medium sizes shows no menu:

A few pixels wider, and the menu links show:

..only in landscape though, with the fixed layout. Works as expected in portrait and smaller.

... self explanatory.

The button is quite a bit taller than the input field so it looks bad. Looks like there may be some extra padding/margin under the button that isn't needed too.

Example is from vault.

The javascript is loaded via $(document).on 'ready page:load', ->

That's not going to work with Turbolinks. Likewise, the turbolinks event 'turbolinks:load'doesn't exist without it.

Hum...
How can we work with or without turbolinks...

... and therefore iPads...

ideal setup:

Desktop: Fixed menu, always available
iPad: Menu now scrolls with the page, saving screen space
Phone: Menu is now a hamburger, since there's no room for the text anymore.

Only the Phone part is missing.

This looks nice: http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

It's pretty clear over the red alert box:

If you have a flash message on screen, click a link, and then hit the back button the message is still there. It should not be.

(There's a back button key combo in there you can't see)

This time it's because button was changed to align with the H tags.

See #13

Bad

Good

In the case where the left ul and right ul overlap we should convert the right ul into it's hamburger form. I'm assuming javascript will be the only way to do that. (Simulated above by shrinking the window down from L -> M.

UW's new theme uses the following colors:

I don't know that huge red headers are our style, but we could use the same color codes for various things.

05-24-web-discussion.pdf

button box shadow for :active (I assume) is getting cut off by the grid. That's probably good actually, as we don't want content overflowing the grid.

Need to do something to make it look decent though.

I think the close button should be within the same max-width everything else has:

td.active::before {
  content: "☑";
  color: green;
  font-size: 1.6em;
}

Something like this: http://localhost:3000/compensation/periods

Can be used to replace the png used in PIMS.

I think it just adds disabled="disabled" via UJS. We should style for that.

Oh my no...

Chrome browser exactly 1037px wide, when a scrollbar appears causes clicking anywhere in main to hide the menu. The calculated browser width is 1022px, within the <= 1023 threshold for iPad behavior.

There's a new png. Here's what you need in your to use it:

<%= 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">

First line is the icon itself, second line is the default icon name. You only get 10 or 11 characters before you get a "..."

PIMS has super basic HTML pages that imitate the style (since you don't have access to the asset pipeline). That's more robust, and allows apache to use them even if your app can't start. That ended up not working out well though as passenger's custom error directive is all or nothing.

Proposal:

Add ErrorController here, with the codes 404, 422, 500 routed to Errors#Show. Code will determine error message. If a different action for each works out better that's fine too.

DFM Web is not mounted, so we have to see if this will even work.

Low priority.

Class doesn't do anything:

<li class='warn'>Something Important</li>

I've also needed a green "okay" panel, and we don't have one.

I think it's tablesorter doing it, because they stay zebra stripped if you resort by clicking a header.

Old (very clear what's a warning)	New (not so obvious)

We should add tables with tablesorter on/off and examples off all applicable classes to the kitchensink.

DEPRECATION WARNING: The asset "apple-touch-icon.png" is not present in the asset pipeline.Falling back to an asset that may be in the public folder.

We have one: dfm_web/app/assets/images/dfm_web/apple-touch-icon.png

I guess we have to add this to the asset pipeline somehow?

(text highlighted to help show the problem, it's hard to see white on almost white)

After wasting some time adding show-for-blah classes to a PIMS table, I thought there has got to be some automatic way.

Here's my idea:

1. Set a priority on each column header.
2. nowrap everything by default, with the ability to opt out. class='wrap' maybe.
3. When the table doesn't fit cut the lowest priority column, rinse-and-repeat.

After a quick google, I came across this: https://datatables.net/extensions/responsive/priority

It sounds like what we need, but I only skimmed the doc.

As seen in Chrome:

In the past there was no rounding on the submits, but I kinda like it.

There's a bunch of pure look-and-feel classes in the pure.css we don't need. Let's get rid of them.

When stacking four pure-u-lg-1-4 divs into a page, the full-screen result is as follows:

<div class="pure-u-lg-1-4">
  <% if can?(:read, Location) %>
    <div class="panel">
      <h2><%= link_to 'Locations:', locations_path %></h2>
      <%= render Location.all.order(name: :asc) %>
    </div>
  <% end %>
</div>

The following CSS improves matters:

.pure-u-lg-1-4
{
  display: block;
  float:left;
  padding: 1%;
}

Current: buttons make the table too big.

Reference: Table rows height w/o button class on the links.

I'd really like to be able to implement themes by simply overwriting some sass variables in whatever host app's application.scss.

I've been working on it, and it's just not possible. You can only share variables with @import and that's too primitive to understand the asset pipeline. Lots of posts on SO and the sass-rails page.

Long story short, you're discouraged from mixing require and @Import in Rails 4, and straight up prevented in sass-rails's master branch. That's fine except @import is junk and doesn't look in your engines for files.

With all the trouble we've had with sprockets and sass-rails over the years I err on the side of caution.

Default	Sample Theme

We can still do themes, but you'd have to do an old fashioned redefinition of each style. The screenshot above changes 6 lines of CSS. It is really only 2 color changes though.

It's right in LDERP, something must be messed up.

WIP: https://github.com/DFMCH/dfm_web/tree/mailer_templates

I'm using this: http://foundation.zurb.com/emails/getting-started.html

I stripped out a bunch we don't need, will probably cut out way more before it's done. I just want something simple that looks decent and works across all major email clients.

Nice thing about Foundation's template is they managed to do a responsive theme with tables.

In an app that closes #notice boxes after a 5 second delay, the close button and ESC key behavior is broken. Presumably it's "working" it's just being queued after the 5 second delay which entirely defeats the purpose.