[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[EP-tech] UX/UI Refresh - good practice advice sought

Hi guys,
Have a look at http://en.unesco.org/mediabank it is bootstrap based and heavily reformatted using JavaScript. The code in using is available in github, under /unesco 

I hope this helps, 

On July 14, 2017 11:33:02 AM GMT+02:00, Christopher Gutteridge <cjg at ecs.soton.ac.uk> wrote:
>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
>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.
>Where EPrints got it right was all the CSS classes are prefixed with
>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.
>The place I've put in most of my effort was the item record pages, such
>as https://eprints.soton.ac.uk/267112/ , which are now properly
>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
>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
>site, as that's a much bigger and harder job.
>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.
>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. 
>but we still put the full citation on the summary page.
>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".
>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. 
>https://eprints.soton.ac.uk/view/divisions/ (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).
>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
>would be to use javascript (probably jQuery) to tweak the HTML after
>page has loaded to be a more responsive "shape".
>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:
><script type="text/javascript">$.noConflict();</script>
>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
>Worst case, you can just search and replace over them.
>Sorry, that turned into more of a blogpost!
>On 14/07/2017 08:28, Vials Moore, Adam wrote:
>> Hey all!
>> As a summer project we?re updating the CSS/HTML front end on our 
>> eprints front end (I know, I love pain).
>> 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
>> Update to at least bootstrap ? so that it looks OK on mobile devoices
>> / not horrible at different resolutions etc &c
>> Make everything a little more clean and modular
>> Not have to do it lots of times (preferably!)
>> I do have some corporate CSS to include so can?t completely freeform
>> . . .
>> All advice appreciated
>> *** Options:
>> *** Archive: http://www.eprints.org/tech.php/
>> *** EPrints community wiki: http://wiki.eprints.org/
>> *** EPrints developers Forum: http://forum.eprints.org/
>Christopher Gutteridge -- http://users.ecs.soton.ac.uk/cjg
>University of Southampton Open Data Service:
>You should read our Web & Data Innovation blog:

Sent from my Android device with K-9 Mail. Please excuse my brevity.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mailman.ecs.soton.ac.uk/pipermail/eprints-tech/attachments/20170714/8ed5d3ff/attachment.html