<html><head>
    <meta http-equiv="Content-Type" content="text/html;        charset=windows-1252" />
  
  </head><body text="#000000" bgcolor="#FFFFFF">Hi guys,<br>
Have a look at <a href="http://en.unesco.org/mediabank">http://en.unesco.org/mediabank</a> it is bootstrap based and heavily reformatted using JavaScript. The code in using is available in github, under /unesco <br>
<br>
I hope this helps, <br>
Denis<br><br><div class="gmail_quote">On July 14, 2017 11:33:02 AM GMT+02:00, Christopher Gutteridge &lt;cjg@ecs.soton.ac.uk&gt; wrote:<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;">

  
    <p>The public facing stuff can be made responsive. I've done a fair
      bit of work to apply our corporate style to eprints.soton.ac.uk</p>
    <p>However, where it's tricky is that the deposit workflow has HTML
      generated by code, not templates, and lots of it uses tables. It
      is possible to have an alternate template applied for logged in
      users, which goes some way to address this, but isn't a full
      solution.</p>
    <p>Where EPrints got it right was all the CSS classes are prefixed
      with ep_ which means it's possible to merge in a corporate
      stylesheet and they won't clash in names of classes. However, our
      university style sheet adds unexpected style to a few basic HTML
      elements, such as tables, and I had to make some additional css to
      override this inside EPrints pages as it made a mess.</p>
    <p>The place I've put in most of my effort was the item record
      pages, such as <a class="moz-txt-link-freetext" href="https://eprints.soton.ac.uk/267112/">https://eprints.soton.ac.uk/267112/</a> , which are now
      properly responsive.</p>
    <p>Where I had the biggest challenge is that the XML nature of
      EPrints templates mean that the whole main page content needs to
      be wrapped in a single element, and some pages are automatically
      generated HTML, others are quite flexible. This means you can't
      have several full width &quot;content&quot; sections on one page, and
      wrapper the whole page in a single content section for automatic
      pages. (sorry, hard to explain). Pages likes the search results
      are quite constrained, so I'd start there, learn the constraints,
      and then work within those constraints for more general pages like
      the homepage and item-summary pages. I wouldn't try to make it
      fully responsive for the &quot;user area&quot; (logged in) parts of the
      site, as that's a much bigger and harder job.</p>
    <p>We've also put a lot of thought into the sections and ordering of
      the metadata on the summary pages, trying to put the most
      specialised information lower down.</p>
    <p>As part of this set of improvements, we also stopped using full
      citations for search results, and have gone for a cleaner display
      for people to skim read.
<a class="moz-txt-link-freetext" href="https://eprints.soton.ac.uk/cgi/search/archive/simple?screen=Search&amp;dataset=archive&amp;q=eprints&amp;_action_search=Search">https://eprints.soton.ac.uk/cgi/search/archive/simple?screen=Search&amp;dataset=archive&amp;q=eprints&amp;_action_search=Search</a>
      but we still put the full citation on the summary page.</p>
    <p>At Southampton we've got one of the most established EPrints
      repositories (as you'd expect) and we've invested hugely in
      back-end features, but at the expense of the public user interface
      which was always &quot;important, but not as important as X&quot;. <br />
    </p>
    <p>One other interesting decision we've made is to flatten out the
      structure of the organisation. We have faculties which are
      administrative groupings, but not relevant to an external reader,
      so in our revised approach, &quot;Chemistry&quot; is now part of an
      alphabetically ordered list of departments, rather than you having
      to find it under whatever faculty grouping it's in. This is a work
      in progress, but I think we're heading in the right direction.
      <a class="moz-txt-link-freetext" href="https://eprints.soton.ac.uk/view/divisions/">https://eprints.soton.ac.uk/view/divisions/</a> (nb. very few records
      as we have to run a full update to repopulate our new 'divisions'
      field and we're waiting for a time when we can cause that load on
      the system without causing a bother).</p>
    <p>There's some things in EPrints that could do with a &quot;responsive&quot;
      tweak, such as the 2 column list of options in forms, and the 4
      column list of options some /views/ have. This is quite hard to do
      in the code without risking messing up existing repositories when
      they upgrade. One solution would be to use javascript (probably
      jQuery) to tweak the HTML after the page has loaded to be a more
      responsive &quot;shape&quot;. <br />
    </p>
    <p>When we built the javascript elements of EPrints we backed
      &quot;prototype.js&quot; rather than jQuery, but for bootstrap you almost
      certainly want to use jQuery too, so you'll need to ensure you
      have:</p>
    <pre id="line1"><span><span id="line12"></span>  </span><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">type</span>=&quot;<a class="attribute-value">text/javascript</a>&quot;&gt;</span><span>$.noConflict();</span><span>&lt;/<span class="end-tag">script</span>&gt;</span><span>

</span></pre>
    Because both libraries like to take over the &quot;$&quot; variable. The
    noConflict mode for jquery means it lets prototype.js have the $ and
    it just uses &quot;jQuery&quot; for everything so where you'd normally do
    $(&quot;p.special&quot;) you'd do jQuery(&quot;p.special&quot;) instead. No all jQuery
    extensions and libraries that use it respect that however, so watch
    out. Worst case, you can just search and replace over them.<br />
    <br />
    Sorry, that turned into more of a blogpost!<br />
    <br />
    <div class="moz-cite-prefix">On 14/07/2017 08:28, Vials Moore, Adam
      wrote:<br />
    </div>
    <blockquote type="cite" cite="mid:EMEW3|778096e443e7b5eecb10368045cd0121y6D8f714eprints-tech-bounces|ecs.soton.ac.uk|D58E310E.15F6B%25mooread@liv.ac.uk">
      <meta http-equiv="Content-Type" content="text/html;          charset=windows-1252" />
      <div>Hey all!</div>
      <div><br />
      </div>
      <div>As a summer project we&rsquo;re updating the CSS/HTML front end on
        our eprints front end (I know, I love pain).</div>
      <div><br />
      </div>
      <div>Last time round (2+ years ago) I just hacked the relevant CSS
        into template/default.xml and static/index.html &ndash; but now we
        have 2 repositories (both 3.3.15) on different servers and I&rsquo;d
        really like to:</div>
      <div><br />
      </div>
      <div>Update to at least bootstrap &ndash; so that it looks OK on mobile
        devoices / not horrible at different resolutions etc &amp;c</div>
      <div>Make everything a little more clean and modular</div>
      <div>Not have to do it lots of times (preferably!)</div>
      <div><br />
      </div>
      <div>I do have some corporate CSS to include so can&rsquo;t completely
        freeform . . . .</div>
      <div><br />
      </div>
      <div>All advice appreciated</div>
      <br />
      <fieldset class="mimeAttachmentHeader"></fieldset>
      <br />
      <pre wrap="">*** Options: <a class="moz-txt-link-freetext" href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech">http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech</a>
*** Archive: <a class="moz-txt-link-freetext" href="http://www.eprints.org/tech.php/">http://www.eprints.org/tech.php/</a>
*** EPrints community wiki: <a class="moz-txt-link-freetext" href="http://wiki.eprints.org/">http://wiki.eprints.org/</a>
*** EPrints developers Forum: <a class="moz-txt-link-freetext" href="http://forum.eprints.org/">http://forum.eprints.org/</a>
</pre>
    </blockquote>
    <br />
    <pre class="moz-signature" cols="72">-- 
Christopher Gutteridge -- <a class="moz-txt-link-freetext" href="http://users.ecs.soton.ac.uk/cjg">http://users.ecs.soton.ac.uk/cjg</a>

University of Southampton Open Data Service: <a class="moz-txt-link-freetext" href="http://data.southampton.ac.uk/">http://data.southampton.ac.uk/</a>
You should read our Web &amp; Data Innovation blog: <a class="moz-txt-link-freetext" href="http://blogs.ecs.soton.ac.uk/webteam/">http://blogs.ecs.soton.ac.uk/webteam/</a>

</pre>
  
</blockquote></div><br>
-- <br>
Sent from my Android device with K-9 Mail. Please excuse my brevity.</body></html>