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...

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

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

... and therefore iPads...

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 "..."

It's pretty clear over the red alert box:

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.

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

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.

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.

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

Desktop:

Mobile:

... self explanatory.

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.

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.

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 think it just adds disabled="disabled" via UJS. We should style for that.

Current: buttons make the table too big.

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

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?

Portrait view on an iPhone 5:

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.

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.

Small shows the 'burger:

The lower range of Medium sizes shows no menu:

A few pixels wider, and the menu links show:

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.

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

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)

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.

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

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%;
}

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.

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

Oh my no...

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

See #13

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

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.

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.

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.

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

As seen in Chrome:

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

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.