search

Drupal4Gov / Drupal-GovCon-2015

Drupal GovCon 2015 website
MIT License
1 stars 2 forks source link

Page with responsive floor plan info #125

Closed timwood closed 9 years ago

timwood commented 9 years ago

Add page to live site with graphics and ? to make it responsive...and link between/back and forth this page and schedule page.

timwood commented 9 years ago

Start of the content page is here: https://www.drupalgovcon.org/drupal-govcon-2015/floor-layouts

Karl is going to provide svg graphic(s) of the floor plan drawings he made for the print material.

timwood commented 9 years ago

(FYI, the page has a example svg file from one of Karl's sites.)

Modified the HTML in the floor-layouts page to use scaling tips recommended at https://youtu.be/w83XRCkMtHQ?t=18m4s (from https://css-tricks.com/video-screencasts/137-svg-is-for-everybody/). height:auto; max-width:auto; width:100%

Just used inline CSS for now. Not sure about the accessibility concerns of doing it this way.

<p>
  <a href="http://www.carriagepointeaquia.com/sites/default/files/floorplan-potomaci_1.svg" title="Click for full image">
    <img alt="Floor plan" src="http://www.carriagepointeaquia.com/sites/default/files/floorplan-potomaci_1.svg" style="height:auto; max-width:auto; width:100%" />
  </a>
</p>
timwood commented 9 years ago

SVG provided by Karl and I've inserted it as inline SVG on the page, for now.

timwood commented 9 years ago

SVG file committed to Git repo in theme. Need to update page once released.

timwood commented 9 years ago 
<p><img alt="Floor plan" src="/sites/all/themes/govcon/images/nih_venue_layout_combined.svg" style="height:auto; max-width:auto; width:100%" /></p>
timwood commented 9 years ago

The live site now used the tag which makes the layouts SVG more responsive.