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.