#121 Make EpiDoc Guidelines website design responsive

old bug cleanup
done
website (1)
5(medium)
2015-05-01
2014-05-06
No

The EpiDoc Guidelines website needs to be more responsive, even if that only means the text width is a percentage of full-screen, or even default width with some padding/margin, rather than fixed width.

When viewing on a low-res screen (as most data projects at workshops, or mobile devices) the content defaults to wider than the viewable width, especially if text is increased in size to enable viewing at a workshop or conference.

Discussion

  • Ryan Baumann

    Ryan Baumann - 2014-05-29

    Simply removing a few fixed pixel width definitions from the CSS goes a long way towards this, and highlights some of the problems that cascade off it (see attached patch). One is what to do with the logo, as leaving it in with the existing rule and these changes can cause it to overlap text. Another is how to make the navigation links at the bottom flow/break elegantly when the page width is small - the way the elements are currently, each navigation "pill" isn't contained in a single element you can set CSS float/clear rules on which I imagine would be the way to do this.

     
  • BODARD Gabriel

    BODARD Gabriel - 2014-05-29

    Ryan has committed his patch to SVN [r2176], and I've uploaded the result to http://www.stoa.org/epidoc/gl/dev/. Currently the logo has disappeared, so we'll need to look at this again before the next release.

     

    Related

    Commit: [r2176]


    Last edit: BODARD Gabriel 2014-05-29
  • Tom Elliott

    Tom Elliott - 2014-06-09
    • status: open --> accepted
     
  • BODARD Gabriel

    BODARD Gabriel - 2014-06-26
    • status: accepted --> done
    • assigned_to: Tom Elliott --> Scott Vanderbilt
     
  • BODARD Gabriel

    BODARD Gabriel - 2014-06-26

    Scott has implemented this by adding a margin to the logo image, which in combination with Ryan's relative screen width looks great. Closing ticket.

     
  • Tom Elliott

    Tom Elliott - 2015-05-01
    • Group: future --> old bug cleanup
     

Log in to post a comment.