Code Monkey home page Code Monkey logo

dfm_web's Introduction

DfmWeb

Build Status

Install

Gemfile

gem 'dfm_web'

Terminal:

bundle install

application.html.erb

  <body>
    <%= render 'layouts/nav' %>
    <%= render 'layouts/flash' %>
    <%= render 'layouts/main' %>
    <%= render 'layouts/footer' %>
  </body>

Rails 7 - Vanilla

  • rails new myapp

application.html.erb

<%= stylesheet_link_tag "dfm_web/dfm_web", "data-turbo-track": "reload" %>

application.js

import "dfm_web"

document.addEventListener("turbo:load", function() {
  DfmWeb.activate_dfm_web();
})

importmap.rb

pin "dfm_web", to: "dfm_web/dfm_web.js", preload: true

Rails 7 - esbuild + sass

  • rails new myapp --javascript=esbuild --css=sass
  • If not using Turbo, see dfm_web.js for variations on the activation step.

application.html.erb

<%= stylesheet_link_tag "dfm_web/dfm_web", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "dfm_web/dfm_web", "data-turbo-track": "reload", defer: true %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

application.js

document.addEventListener("turbo:load", function() {
  DfmWeb.activate_dfm_web();
})

manifest.js

//= link dfm_web/manifest.js

Rails 5/6

  • Webpacker doesn't support assets from gems.
  • We're assuming a traditional sprockets asset-pipeline setup.

application.css

 *= require dfm_web/dfm_web

application.coffee (Turbolinks)

#= require dfm_web/dfm_web

$(document).on 'turbolinks:load', ->
  DfmWeb.activate_dfm_web();

application.coffee (Vanilla)

#= require dfm_web/dfm_web

$(document).on 'ready page:load', ->
  DfmWeb.activate_dfm_web();

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( dfm_web/* )

Changelog:

Version 5:

  • jQuery is no longer a requirement, though it will work just fine if you use it.
  • All jQuery based code has been rewritten in Javascript (ES6)
  • Updated README and comments on use with Rails 7 (Turbo or plain).
    • Rails 7 tests were performed on an esbuild + sass setup
  • The default font has changed to Red Hat Text.

Version 4:

  • Now using the UW look and feel.
  • Navbar img is no longer vertically centered in CSS.
    • Pad your PNG/SVG with transparency.
    • Image will be scaled to 42px, but a raster image should be at least double that.

Version 3:

  • Javascript to do things other than run the the actual layout has been removed. Specifically:
    • ajax_load
    • auto_submit
    • autofocus
    • datepicker
    • live_search
    • live_table
    • tablesorter
  • If you used these features you'll need to pull the javascript from version 2

Kitchen Sink:

  • To see the Kitchen Sink, go to spec/dummy and run rails server

Large Screen:

README.png

iPad and Smaller:

README_IPAD.png

Mobile:

README_MOBILE.png

dfm_web's People

Contributors

duffyjp avatar yengfinity avatar

Watchers

 avatar Paul Ramirez avatar James Cloos avatar  avatar  avatar  avatar  avatar Thomas avatar DFMCH - CI Bot avatar

Forkers

yengfinity

dfm_web's Issues

Account for 'date' inputs

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):

screenshot from 2016-07-21 11 19 35

Tracker (example):

screenshot from 2016-07-21 11 20 35

paper style

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

screen shot 2016-10-05 at 1 47 04 pm

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

Tables with input & button in a TD

screen shot 2016-09-13 at 2 09 37 pm

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.

Turbolinks support

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

Mobile-version Menus. Hamburger time!

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.

Detect Nav left and right overlap

Bad

screen shot 2018-03-07 at 12 09 13 pm

Good

screen shot 2018-03-07 at 12 08 51 pm

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.

button :active shadow cut off

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.

screen shot 2016-06-02 at 10 12 18 am

Need to do something to make it look decent though.

Flash message tweaks

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

screen shot 2016-06-02 at 10 35 57 am

Apple Touch Icon

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

Custom Error pages

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.

"alert" class getting clobbered in tables

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)
screen shot 2018-03-12 at 12 02 24 pm screen shot 2018-03-12 at 12 02 36 pm

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

apple-touch-icon.png deprecation warning

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?

Table column priority instead of hardcoded hide for X, show for Y

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.

pure-u-* column displays not quite right

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>

screenshot from 2016-07-29 13 42 30

The following CSS improves matters:

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

screenshot from 2016-07-29 13 45 43

Themes

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
screen shot 2016-09-06 at 1 04 13 pm screen shot 2016-09-06 at 1 03 39 pm

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.