AB#43311

.vscode/launch.json

@@ -8,7 +8,7 @@
       "type": "chrome",
       "request": "launch",
       "name": "Launch Chrome",
-      "url": "http://localhost:4200",
+      "url": "http://localhost:4201",
       "webRoot": "${workspaceFolder}"
     }
   ]

README.md

@@ -11,7 +11,7 @@ Run `npm install` to update all packages required locally.
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve` for a dev server. Navigate to `http://localhost:4201/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 

angular.json

@@ -93,7 +93,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "app:build"
+            "browserTarget": "app:build",
+            "port": 4201
           },
           "configurations": {
             "production": {

e2e/protractor.conf.js

@@ -16,7 +16,7 @@ exports.config = {
     browserName: 'chrome'
   },
   directConnect: true,
-  baseUrl: 'http://localhost:4200/',
+  baseUrl: 'http://localhost:4201/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
@@ -29,4 +29,4 @@ exports.config = {
     });
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
-};
+};

src/app/how-it-works/how-it-works.component.css

@@ -0,0 +1,4 @@
+.italic {
+  font-weight: normal;
+  font-style: italic;
+}

src/app/how-it-works/how-it-works.component.html

@@ -5,12 +5,12 @@ <h1 class="govuk-heading-xl">Introduction</h1>
 <div class="govuk-grid-row govuk-body">
   <div class="govuk-grid-column-full">
     <ol class="govuk-list govuk-list--number">
-      <li class="govuk-body-l govuk-!-font-weight-bold">What is the efficiency metric ranking?
+      <li class="govuk-body-l govuk-!-font-weight-bold">The efficiency metric
         <p class="govuk-body-m govuk-!-font-weight-regular intro-list-p">The metric provides an <span class="govuk-!-font-weight-bold">indication</span> of a schools efficiency compared to 49 statistically similar schools based on certain characteristics.</p>
       </li>
       <li class="govuk-body-l govuk-!-font-weight-bold">How it is calculated
-        <p class="govuk-body-m govuk-!-font-weight-regular intro-list-p">We divide a school's progress score (KS2 or Progress 8) by their per pupil expenditure which allows us to rank the 50 schools and find a their rank.
-          <span class="govuk-body-m govuk-!-font-weight-bold intro-formula">Progress score / Expenditure per pupil = Efficiency Metric Ranking</span>
+        <p class="govuk-body-m govuk-!-font-weight-regular intro-list-p">We divide a school's progress (KS2 or Progress 8) by their per pupil expenditure which gives us a score which allows us to rank the 50 schools.
+          <span class="govuk-body-m govuk-!-font-weight-bold intro-formula">KS2 progress <span class="italic">or</span> Progress 8 / Expenditure per pupil = Efficiency metric score</span>
         </p>
       </li>
       <li class="govuk-body-l govuk-!-font-weight-bold">What you should do with the information
@@ -29,7 +29,7 @@ <h1 class="govuk-heading-xl">Introduction</h1>
 <div class="govuk-grid-row govuk-body">
   <div class="govuk-grid-column-full">
     <button class="govuk-button" data-module="govuk-button" routerLink="/efficiency-metric/metric/{{urn}}">
-      Continue
+      Continue to efficiency metric
     </button>
     <a href="{{settings.sfbDomain}}/school/detail?urn={{urn}}"
       class="govuk-link govuk-link--no-visited-state back-button">Back</a>

src/app/layouts/gov-uk-layout/footer/footer.component.html

@@ -23,10 +23,8 @@ <h2 class="govuk-visually-hidden">Support links</h2>
           </li>
         </ul>
 
-        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg"
-          viewbox="0 0 483.2 195.7" height="17" width="41">
-          <path fill="currentColor"
-            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
         </svg>
 
         <span class="govuk-footer__licence-description">

src/app/metric/em-table/em-table.component.html

@@ -75,7 +75,7 @@
     <tr class="govuk-table__row" *ngIf='neighbour.urn === model.urn'>
       <td class="govuk-table__cell link-cell" colspan="6">
         <div class="improve-link-wrapper">
-          <a class="govuk-link" routerLink='/efficiency-metric/ways-to-improve/{{neighbour.urn}}/{{neighbour.name}}'>See ways to improve your school's efficiency metric ranking</a>
+          <a class="govuk-link" routerLink='/efficiency-metric/ways-to-improve/{{neighbour.urn}}/{{neighbour.name}}'>See tools to improve your school's efficiency</a>
         </div>
       </td>
       <td class="govuk-table__cell link-cell em-table-ks2-reading-cell" *ngIf='model.phase === "Primary"' style="border-left: 5px solid white;"></td>

src/app/metric/em-table/em-table.component.scss

@@ -159,7 +159,7 @@
   padding: 5px;
 
   a{
-    font-size: 14px;
+    font-size: 16px;
     font-weight: bold;
   }
 }

src/app/metric/metric.component.html

@@ -1,15 +1,28 @@
-<app-metric-bread-crumb [urn]='model.urn' [name]='model.name'></app-metric-bread-crumb>
+<app-metric-bread-crumb [urn]='model.urn' [name]='model.name' class="hide-in-print"></app-metric-bread-crumb>
 
 <div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds">
-    <h1 class="govuk-heading-xl">Efficiency Metric Ranking</h1>
+  <div class="govuk-grid-column-two-thirds expand-in-print">
+    <h1 class="govuk-heading-xl main-header">Efficiency Metric Ranking</h1>
     <p class="govuk-body-s">
       Results for
       <span class="highlight">
         <span class="govuk-!-font-weight-bold">{{model.name}}</span>
       </span>
     </p>
 
+    <div class="govuk-grid-row hide-in-print">
+      <div class="govuk-grid-column-one-half">
+        <a [routerLink]="" class="govuk-link a-button govuk-!-font-weight-bold" (click)="onDownload()">
+          <img src="assets/images/icon-file-download.png" class="small-icon" alt=""/>
+          <span id="downloadPage">Download page</span>
+        </a>
+        <a [routerLink]="" class="govuk-link a-button govuk-!-font-weight-bold ml-4" (click)='onPrintPage()'>
+          <img src="assets/images/icon-print.png" class="small-icon" alt=""/>
+          <span>Print page</span>
+        </a>
+      </div>
+    </div>
+
     <div class="govuk-grid-row govuk-body em-rank-content-wrapper">
       <div class="govuk-grid-column-full">
         <div class="em-rank-icon">
@@ -26,14 +39,15 @@ <h1 class="govuk-heading-xl">Efficiency Metric Ranking</h1>
       </div>
     </div>
   </div>
-  <div class="govuk-grid-column-one-third">
+  <div class="govuk-grid-column-one-third hide-in-print">
     <div class="links-wrapper">
-      <h2 class="govuk-heading-s">Efficiency metric next steps</h2>
-      <ul class="govuk-list govuk-body-s">
+      <h2 class="govuk-heading-s">About the efficiency metric</h2>
+      <ul class="govuk-list govuk-body-s govuk-!-margin-bottom-4">
         <li><a class="govuk-link" routerLink='/efficiency-metric/how-it-is-calculated/{{model.urn}}'>How the efficiency metric ranking is calculated</a></li>
-        <li><a class="govuk-link" routerLink='/efficiency-metric/ways-to-improve/{{model.urn}}/{{model.name}}'>Ways to improve your school's ranking</a></li>
-        <li><a class="govuk-link" routerLink='/efficiency-metric/contact-details/{{model.urn}}'>Contact details of schools in this ranking</a></li>
+        <li><a class="govuk-link" routerLink='/efficiency-metric/ways-to-improve/{{model.urn}}/{{model.name}}'>Tools to improve school's efficiency</a></li>
+        <li><a class="govuk-link" routerLink='/efficiency-metric/contact-details/{{model.urn}}'>Contact details of schools in the table</a></li>
       </ul>
+      <button class="govuk-button bm-button" (click)="onGotoBenchmark()">Benchmark with these schools</button>
     </div>
   </div>
 </div>

src/app/metric/metric.component.scss

@@ -39,3 +39,7 @@
   }
 }
 
+.bm-button {
+  width: 100%;
+  font-size: 16px;
+}

src/app/metric/metric.component.ts

@@ -1,5 +1,5 @@
 import { EmdataService } from '../core/network/services/emdata.service';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit, TemplateRef } from '@angular/core';
 import { EMModel } from 'app/Models/EMModel';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@@ -15,6 +15,7 @@ export class MetricComponent implements OnInit {
   modalRef: BsModalRef;
 
   constructor(
+  private router: Router,
   private route: ActivatedRoute,
   private modalService: BsModalService,
   private emDataService: EmdataService) {
@@ -35,4 +36,16 @@ export class MetricComponent implements OnInit {
   openModal(template: TemplateRef<any>) {
     this.modalRef = this.modalService.show(template, {animated: false, class: 'sfb-modal-dialog'});
   }
+
+  onDownload() {
+
+  }
+
+  onPrintPage() {
+    window.print();
+  }
+
+  onGotoBenchmark() {
+    this.router.navigate(['efficiency-metric/comparison-type/', this.urn, this.model.name]);
+  }
 }

src/styles.scss

@@ -19,6 +19,12 @@ a{
 
 .a-button{
   text-decoration: none;
+  &:visited{
+    color: initial!important;
+  }
+  &:hover{
+    text-decoration: none;
+  }
 }
 
 .back-button{
@@ -30,7 +36,7 @@ a{
 }
 
 .small-icon{
-  width: 20px;
+  //width: 20px;
   margin-right: 5px;
 }
 
@@ -58,7 +64,7 @@ a{
 .highlight {
   background-color: #d53880;
   display: inline;
-  padding: 5px 5px;
+  padding: 2px 5px;
 
   span {
       color: white;
@@ -83,7 +89,7 @@ span.table-cell-highlight {
 
     background-color: #d53880;
     display: inline;
-    padding: 6px 8px 6px 8px;
+    padding: 2px 5px;
     color: white;
       line-height: 1.8em;
       font-weight: bold;
@@ -92,7 +98,7 @@ span.table-cell-highlight {
   a.table-cell-highlight {
       background-color: #d53880;
       display: inline;
-      padding: 6px 8px 6px 8px;
+      padding: 2px 5px;
       color: white;
       text-decoration: none;
       font-weight: bold;
@@ -231,3 +237,22 @@ span.table-cell-highlight {
   margin-top: 1em;
   display: block;
 }
+
+@media print {
+  .show-in-print {
+    display: block!important;
+  }
+
+  .hide-in-print {
+    display: none!important;
+  }
+
+  .main-header{
+     margin-top: 1em!important;
+  }
+
+  .expand-in-print{
+    width: 100%;
+  }
+
+}