Templates: Phase I

[wmoore]

Organise existing code: rearrange into templates to support the first set of use cases in #7067.

Outline of NEW template hierarchy:

NEW TEMPLATES:

- common/base/base_html.html
    Blocks: link, title, script, jscript, head, body
    Content: body.css, shortcut icon.
    Extended by:
    - common/base/base_frame.html
        Content: 
            link: body.css jquery-ui.css
            script: jquery.js jquery-ui.js popup.js
            head: web icon
        Extended by:
        - webclient/annotations/metadata_general.html
    - common/base/base_header.html
        Content:
            link: header.css
            body: top_header - logo, menu, navigation
                  thin_header - header_left, header_right
        Blocks: nav_links, header_left, header_right
        Extended by:
        - common/base/base_main.html
            Content: 
                link: footer.css body-styles layout.css images.css
                body: include footer.html
            Extended by:
            - webclient/base/base_container.html
                - Extended by webclient/data/containers.html, webclient/data/container_tags.html etc. 
            - webclient/base/base.html
                - Extended by webclient/person/myaccount.html, webclient/index/index.html, help etc

Some of this will be exploratory, to decide what strategies we want to adopt in this template story.

Outline of work:

• created new Django app: 'common'
• moved 'generic' templates from webclient/base/ to common/base/ (not moved base.html since header needs 'nav')
• separated various sections from base_main.html into 'includes' at common/base/includes/
  • menu
  • footer
• split the body, header & footer sections of layout.css into separate css files under omeroweb/media/omeroweb/common/css/ (not sure if omeroweb/media is the final location for 'common' media?) The idea is to allow inclusion of only the css you need, without all of layout.css.

Questions

• How to allow optional inclusion of various js or css? E.g.

  {% include footer_css %}
  

with footer_css is simply one line:

<link rel="stylesheet" href="{% url webstatic "common/css/footer.css" %}" type="text/css" />

[jburel]

Moved from sprint 2011-11-10 (2)

[wmoore]

Webclient with current-looking header

[wmoore]

Extending base_header.html, overwriting footer, adding left & right headers

[wmoore]

Extending the webtest example above, using different logo, header links

[wmoore]

Extending base_header.html, including webclient links.

[wmoore]

Since we now have a working template hierarchy, with webtest examples ​https://github.com/will-moore/openmicroscopy/commit/d538f29138c6729861a973386363d765560e913e this Phase 1 work can be considered done. It is time to merge with Ola's static file branch ​https://github.com/aleksandra-tarkowska/openmicroscopy/tree/feature/static_file_handling.

[saloynton]

Will: Can I just ask if you had decided on any further changes to indicate the the current position of the page you are on. I have attached a couple of modified screenshots from a previous discussion.

[saloynton]

Modified screenshot of Extending base_header.html, including webclient links - with 2 different options displayed.

[wmoore]

Thanks Scott - Not thought about this much more just yet. It's one of those things that will 'icing on the cake' once we've got the main parts working. But good to keep in mind so we have some ideas when we get to that point. Cheers.