Skip to content

Commit

Permalink
Refactored template files (WIP).
Browse files Browse the repository at this point in the history
  • Loading branch information
@Josh-ADHA
Josh-ADHA committed Oct 3, 2024
1 parent c940e64 commit cc71e0a
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 258 deletions.
1 change: 0 additions & 1 deletion includes/_append.fragment-css.html
View file

This file was deleted.

4 changes: 0 additions & 4 deletions includes/_append.fragment-feedback_form.html
View file

This file was deleted.

2 changes: 2 additions & 0 deletions includes/fragment-footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<p>IG &#169; {{site.data.info.copyrightyear}} <a href="{{site.data.fhir.ig.contact[0].telecom[0]}}">{{site.data.fhir.ig.publisher | escape}}</a>. Package {{site.data.fhir.packageId}}#{{site.data.fhir.igVer}} based on <a href="{{site.data.fhir.path}}">FHIR {{site.data.fhir.version}}</a>. Generated <span title="{{site.data.fhir.genDate}}">{{site.data.fhir.genDate | date: "%Y-%m-%d"}}</span></p>

<p><span style="white-space: pre-line">Links:</span> <a href="{{site.data.info.assets}}toc.html">Table of Contents</a> | <a href="qa.html">QA Report</a>{% for feedbacklink in site.data.features.feedback %}{% if feedbacklink.dashboard %} | <a target="_blank" href="{{feedbacklink.dashboard.url}}">{{feedbacklink.dashboard.label}}</a>{% endif %}{% endfor %} | {% include version_history_link.md %} | {% include report_issue_link.md %}</p>

<p class="dev-portal-embed-hide"><span style="white-space: pre-line">Publisher:</span> <a href="https://www.digitalhealth.gov.au">Australian Digital Health Agency</a> | ABN: 84 425 496 912, Level 25, 175 Liverpool Street, Sydney, NSW 2000 | Phone: <a href="tel:1300901001">1300 901 001</a> | Email: <a href="mailto:help@digitalhealth.gov.au">help@digitalhealth.gov.au</a> | <a href="https://www.digitalhealth.gov.au">https://www.digitalhealth.gov.au</a> | <a href="https://www.digitalhealth.gov.au/about-us/policies-privacy-and-reporting/privacy-policy">Privacy policy</a> | <a href="https://www.digitalhealth.gov.au/about-us/policies-privacy-and-reporting/terms-of-use">Terms of Use</a></p>
25 changes: 24 additions & 1 deletion includes/fragment-header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,27 @@
<a no-external="true" href="https://developer.digitalhealth.gov.au/">
<img alt="Australian Digital Health Agency Developer Portal" src="{{site.data.info.assets}}assets/images/adha-logo-light.svg" width="275px" />
</a>
</div>
</div>
<div id="dev-portal-sitename">
<div id="ig-status">
<h1>{{site.data.fhir.ig.title | escape_once}}</h1>
<div id="subtitle">
{% if site.data.info.releaselabel != '' %}
{% assign status = site.data.info.releaselabel %}
{% else %}
{% assign status = site.data.fhir.ig.status %}
{% endif %}
{{site.data.fhir.ig.version}} - {{status}}
{% assign igId = site.data.fhir.ig.id | prepend: "ImplementationGuide/" %}
{% for jurisdiction in site.data.resources[igId].jurisdictions %}
{% if jurisdiction.flag %}
<img alt="{{jurisdiction.name}} flag" src="assets/images/{{jurisdiction.flag}}.svg" height="16" title="{{jurisdiction.name}}"/>
{% elsif jurisdiction.code %}
<span title="{{jurisdiction.name}}">{{jurisdiction.code}}</span>
{% else %}
{{jurisdiction.name}}
{% endif %}
{% endfor %}
</div>
</div>
</div>
44 changes: 4 additions & 40 deletions includes/fragment-pagebegin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,14 @@
<meta name="author" content="http://hl7.org/fhir"/>

<link href="{{site.data.info.assets}}fhir.css" rel="stylesheet"/>

<!-- Bootstrap core CSS -->
<link href="{{site.data.info.assets}}assets/css/bootstrap-fhir.css" rel="stylesheet"/>

<!-- Project extras -->
<link href="{{site.data.info.assets}}assets/css/project.css" rel="stylesheet"/>
<link href="{{site.data.info.assets}}assets/css/pygments-manni.css" rel="stylesheet"/>
<link href="{{site.data.info.assets}}assets/css/jquery-ui.css" rel="stylesheet"/>
<link href="{{site.data.info.assets}}assets/css/prism.css" rel="stylesheet" />
<link href="{{site.data.info.assets}}assets/css/ADHA.css" rel="stylesheet"/>
{% include fragment-css.html %}

<script type="text/javascript" src="fhir-table-scripts.js"> </script>

<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->
<link rel="fhir-logo" sizes="144x144" href="{{site.data.info.assets}}assets/ico/icon-fhir-144.png"/>
<link rel="fhir-logo" sizes="114x114" href="{{site.data.info.assets}}assets/ico/icon-fhir-114.png"/>
Expand All @@ -37,38 +26,13 @@
</head>
<body onload="document.body.style.opacity='1'">
{% assign label = {{site.data.pages[page.path].label}} | split: '.0' %}
<script src="{{site.data.info.assets}}assets/js/prism.js"> </script>
<script type="text/javascript" src="{{site.data.info.assets}}assets/js/mermaid.js"> </script>
<script type="text/javascript" src="{{site.data.info.assets}}assets/js/mermaid-init.js"> </script>

<style type="text/css">h2{--heading-prefix:"{{site.data.info.headingOffset}}{{label}}"}h3,h4,h5,h6{--heading-prefix:"{{site.data.info.headingOffset}}{{site.data.pages[page.path].label}}"}</style>
<div id="dev-portal-banner" class="dev-portal dev-portal-embed-hide">
<div id="banner-inner" class="section-inner">
<div id="banner-container" class="section-container">
<div id="brand-banner">
{% include fragment-header.html %}
<div id="dev-portal-sitename">
<div id="ig-status">
<h1>{{site.data.fhir.ig.title | escape_once}}</h1>
<div id="subtitle">
{% if site.data.info.releaselabel != '' %}
{% assign status = site.data.info.releaselabel %}
{% else %}
{% assign status = site.data.fhir.ig.status %}
{% endif %}
{{site.data.fhir.ig.version}} - {{status}}
{% assign igId = site.data.fhir.ig.id | prepend: "ImplementationGuide/" %}
{% for jurisdiction in site.data.resources[igId].jurisdictions %}
{% if jurisdiction.flag %}
<img alt="{{jurisdiction.name}} flag" src="assets/images/{{jurisdiction.flag}}.svg" height="16" title="{{jurisdiction.name}}"/>
{% elsif jurisdiction.code %}
<span title="{{jurisdiction.name}}">{{jurisdiction.code}}</span>
{% else %}
{{jurisdiction.name}}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<div id="menu-banner">
<ul>
Expand Down Expand Up @@ -119,5 +83,5 @@ <h1>{{site.data.fhir.ig.title | escape_once}}</h1>
<a name="top"> </a>
<div id="segment-content" class="segment"> <!-- segment-content -->
<div class="container"> <!-- container -->
<div class="row">
<div class="inner-wrapper">
<div class="row"> <!-- row -->
<div class="inner-wrapper"> <!-- inner-wrapper -->
164 changes: 82 additions & 82 deletions includes/fragment-pageend.html
View file

Large diffs are not rendered by default.

139 changes: 9 additions & 130 deletions localisations.md
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,19 @@
# Template inclusions
This FHIR template adds the following specific styling elements:

## OUT OF DATE for version 0.1.0
This FHIR template adds the following elements:

## 1. ./includes
### a) `/_append.fragment-header.html`
To the header, add:
* Australian Digital Health Agency logo (`content/assets/images/adha-logo-light.svg`)
* the image has the alt text of "Visit the Australian Digital Health Website"
* the image has an associated hyperlink to the Agency home page
## fragment-pagebegin.html

### b) `/_append.fragment-footer.html`
After the existing core template footer, add the following:
* an include for an IG-specific file containing a hard-coded link to the IG's version history
* an include for an IG-specific file containing a hard-coded link to the IG's propose a change page (ie GitHub issues)
* an empty line
* a line with "Publisher: [Australian Digital Health Agency](https://www.digitalhealth.gov.au) ABN 84 425 496 912, Level 25, 175 Liverpool Street, Sydney, NSW 2000"
* a line with "Telephone 1300 901 001 or email [help@digitalhealth.gov.au](mailto:help@digitalhealth.gov.au)"
* a line with the ADHA website: "https://www.digitalhealth.gov.au"
* a line with "[Privacy policy](https://www.digitalhealth.gov.au/about-us/policies-privacy-and-reporting/privacy-policy) | [Terms of Use](https://www.digitalhealth.gov.au/about-us/policies-privacy-and-reporting/terms-of-use)"
This file adds the upper page markup.

### c) `/_append.fragment-css.html`
The Agency CSS is introduced (`content/assets/css/ADHA.css`)
## fragment-header.html

See below for the specific styling localisations in `ADHA.css`.
This file adds markup to the header.

## 2. ./layouts
No layout localisations have been introduced in this template
## fragment-pageend.html

## 3. JavaScript code
The `fragment-pageend.html` file includes JS code to handle the scenario where the IG is embedded in an iFrame on the Developer Portal website: add a body class, handle links, and resize iFrame content when the iFrame is resized.
This file adds the lower page markup.

## 4. CSS Styling
The CSS file `content/assets/css/ADHA.css` includes the following styling localisations:
## fragment-footer.html

### a) ADHA Logo

#### ADHA logo placement (in `family-nav` div container)
* setting `#family-logo`
* float: left
* margin-top: 20px
* margin-left: 40px
* margin-bottom: 20px
* margin-right: 40px
* display: block

#### Placement of logo container (`family-nav` div)
* setting: `#family-nav`
* line-height: 70px;
* float: left;
* margin-top: 4px;
* margin-bottom: 4px;

### b) Implementation Guide title
* setting: `#ig-status`
* line-height: 70px;
* margin-top: 40px;
* margin-left: 250px;
* color: #000000;
* text-align: center;
* height: 50px;

### c) Header background colour
* setting: root --ig-header-container-color
* set to light grey : [`#f5f5f5`](https://www.color-hex.com/color/f5f5f5)

### d) Navigation bar

#### Background colour
* setting: `.navbar-inverse. background-color`
* set to the Agency required [`#1E6DB6`](https://www.color-hex.com/color/1e6db6)

#### Colour of the menu headings 'on-hover'
* setting: `.navbar-inverse .navbar-nav > li > a:hover`
* set to black [`#000000`](https://www.color-hex.com/color/000000)

#### Colour of the navigation bar heading font
* setting: `.navbar-inverse .navbar-nav > li > a`
* font colour set to [`#FFFFFF`](https://www.color-hex.com/color/FFFFFF), for improved contrast (see below for compliance to WCAG)

#### Compliance to WCAG Level 2.1 re colour contrast
* for compliance to the Web Content Accessibility Guidelines [(WCAG) Level 2.1](https://www.w3.org/WAI/standards-guidelines/wcag/), regarding minimum contrast ratio, at level AA
* font colour set to [`#FFFFFF`](https://www.color-hex.com/color/FFFFFF), given the background is set to [`#1E6DB6`](https://www.color-hex.com/color/1E6DB6); contrast ratio is [5.35:1](https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=1E6DB6)

### e) Menu bar stripe
This is the thin bar across the page in line with the top of the navigation bar

#### Colour
* setting: `#stripe background`
* set to the Agency required [`#1E6DB6`](https://www.color-hex.com/color/1e6db6)

### f) Publish box

#### Colour of the hyperlinks
* setting: `#publish-box a`
* font colour set to [`#005BA6`](https://www.color-hex.com/color/005BA6), for improved contrast matching the hyperlink colour on the public ADHA website (see below for compliance to WCAG)

#### Compliance to WCAG Level 2.1 re colour contrast
* for compliance to the Web Content Accessibility Guidelines [(WCAG) Level 2.1](https://www.w3.org/WAI/standards-guidelines/wcag/), regarding minimum contrast ratio, at level AA
* font colour set to [`#005BA6`](https://www.color-hex.com/color/005BA6), given the background is set to [`#FFEB7E`](https://www.color-hex.com/color/FFEB7E); contrast ratio is [5.72:1](https://webaim.org/resources/contrastchecker/?fcolor=005BA6&bcolor=FFEB7E)

### g) Canonical information table
This is the table seen at the top of the page of all resources that includes official URL, status and copyright notices etc.

#### Visibility of copy to clipboard buttons
* setting: `.copy-text .btn-copy`
* set to visible rather than hidden as set by the HL7 base template

### h) Main body of text

#### Colour of the hyperlinks
This includes hyperlinks in the yellow contents box
* setting: `#segment-content a`
* font colour set to [`#005BA6`](https://www.color-hex.com/color/005BA6), for improved contrast matching the hyperlink colour on the public ADHA website (see below for compliance to WCAG)

#### Compliance to WCAG Level 2.1 re colour contrast
* for compliance to the Web Content Accessibility Guidelines [(WCAG) Level 2.1](https://www.w3.org/WAI/standards-guidelines/wcag/), regarding minimum contrast ratio, at level AA
* font colour set to [`#005BA6`](https://www.color-hex.com/color/005BA6), given the background is set to [`#FFFFFF`](https://www.color-hex.com/color/FFFFFF); contrast ratio is [6.89:1](https://webaim.org/resources/contrastchecker/?fcolor=005BA6&bcolor=FFFFFF)

### i) Detailed descriptions pages

#### Colour of the numbered headings
* Change the heading number to be black instead of grey so that the contrast is optimised for WCAG compliance
* setting `.self-link-parent span`
* set to black [`#000000`](https://www.color-hex.com/color/000000)

### j) Footer

#### Footer background colour
* setting: `#dev-portal-footer`
* set to the Agency required [`#212529`](https://www.color-hex.com/color/212529)

#### Footer hyperlink font colour
* setting: `#dev-portal-footer a`
* font colour set to [`#B8DCF9`](https://www.color-hex.com/color/B8DCF9), to align with the existing ADHA styling.

### k) iFrame context

CSS to handle the scenario where the IG is embedded in an iFrame on the Developer Portal site.
This file adds markup to the footer.

0 comments on commit cc71e0a

Please sign in to comment.