<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<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 "content" 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 "user area" (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&dataset=archive&q=eprints&_action_search=Search">https://eprints.soton.ac.uk/cgi/search/archive/simple?screen=Search&dataset=archive&q=eprints&_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 "important, but not as important as X". <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, "Chemistry" 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 "responsive"
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 "shape". <br>
</p>
<p>When we built the javascript elements of EPrints we backed
"prototype.js" 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><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>$.noConflict();</span><span></<span class="end-tag">script</span>></span><span>
</span></pre>
Because both libraries like to take over the "$" variable. The
noConflict mode for jquery means it lets prototype.js have the $ and
it just uses "jQuery" for everything so where you'd normally do
$("p.special") you'd do jQuery("p.special") 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’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 – but now we
have 2 repositories (both 3.3.15) on different servers and I’d
really like to:</div>
<div><br>
</div>
<div>Update to at least bootstrap – so that it looks OK on mobile
devoices / not horrible at different resolutions etc &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’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 & 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>
</body>
</html>