From a9f2dfdbec927fe6d37c3218f2e322a49e3a0cd7 Mon Sep 17 00:00:00 2001 From: Roger Howell Date: Wed, 17 Jan 2024 21:17:46 +0000 Subject: [PATCH] Update page styling to use the DfE styling/layout, and update the build to have webpack build/package up the HTML/JS/(S)CSS etc. --- README.md | 27 + .../.browserslistrc | 16 + ...ayout.cshtml => _DfE_1200px_Layout.cshtml} | 143 ++--- .../Views/Shared/_Layout.cshtml.css | 49 -- .../Views/_ViewStart.cshtml | 13 +- .../assets/fonts/bold-affa96571d-v2.woff | Bin .../assets/fonts/bold-b542beb274-v2.woff2 | Bin .../assets/fonts/light-94a07e06a1-v2.woff2 | Bin .../assets/fonts/light-f591b13f7d-v2.woff | Bin .../images/govuk-apple-touch-icon-152x152.png | Bin .../images/govuk-apple-touch-icon-167x167.png | Bin .../images/govuk-apple-touch-icon-180x180.png | Bin .../assets/images/govuk-apple-touch-icon.png | Bin .../assets/images/govuk-mask-icon.svg | 14 +- .../babel.config.js | 32 + .../package-lock.json | 595 +++++++++++++++++- .../package.json | 10 +- .../webpack.config.js | 132 +++- .../wwwroot/css/site.scss | 91 +++ .../wwwroot/js/site.js | 11 +- 20 files changed, 926 insertions(+), 207 deletions(-) create mode 100644 README.md create mode 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/.browserslistrc rename src/ServiceAssessmentService/ServiceAssessmentService.WebApp/Views/Shared/{_Layout.cshtml => _DfE_1200px_Layout.cshtml} (54%) delete mode 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/Views/Shared/_Layout.cshtml.css mode change 100755 => 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/assets/fonts/bold-affa96571d-v2.woff mode change 100755 => 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/assets/fonts/bold-b542beb274-v2.woff2 mode change 100755 => 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/assets/fonts/light-94a07e06a1-v2.woff2 mode change 100755 => 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/assets/fonts/light-f591b13f7d-v2.woff mode change 100755 => 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/assets/images/govuk-apple-touch-icon-152x152.png mode change 100755 => 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/assets/images/govuk-apple-touch-icon-167x167.png mode change 100755 => 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/assets/images/govuk-apple-touch-icon-180x180.png mode change 100755 => 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/assets/images/govuk-apple-touch-icon.png create mode 100644 src/ServiceAssessmentService/ServiceAssessmentService.WebApp/babel.config.js diff --git a/README.md b/README.md new file mode 100644 index 00000000..27719980 --- /dev/null +++ b/README.md @@ -0,0 +1,27 @@ +## Getting started - local development + +- **Software dependencies** + - .NET + - Node +- **Install node dependencies** + - ```shell + cd src/ServiceAssessmentService/ServiceAssessmentService.WebApp + npm install + ``` +- **Build the HTML/CSS/JS files** + - ```shell + cd src/ServiceAssessmentService/ServiceAssessmentService.WebApp + npm run buildDev:watch + ``` +- **Setup secrets** + - ... +- **Compile the C# code** + - ```shell + cd src/ServiceAssessmentService/ServiceAssessmentService.WebApp + dotnet build + ``` +- **Run the application** + - ```shell + cd src/ServiceAssessmentService/ServiceAssessmentService.WebApp + dotnet watch + ``` diff --git a/src/ServiceAssessmentService/ServiceAssessmentService.WebApp/.browserslistrc b/src/ServiceAssessmentService/ServiceAssessmentService.WebApp/.browserslistrc new file mode 100644 index 00000000..8df824c9 --- /dev/null +++ b/src/ServiceAssessmentService/ServiceAssessmentService.WebApp/.browserslistrc @@ -0,0 +1,16 @@ +[javascripts] +supports es6-module + +[stylesheets] +> 0.1% in GB and not dead +last 6 Chrome versions +last 6 Firefox versions +last 6 Edge versions +last 2 Samsung versions +Firefox ESR +Safari >= 11 +iOS >= 11 +ie 11 + +[node] +node 18 diff --git a/src/ServiceAssessmentService/ServiceAssessmentService.WebApp/Views/Shared/_Layout.cshtml b/src/ServiceAssessmentService/ServiceAssessmentService.WebApp/Views/Shared/_DfE_1200px_Layout.cshtml similarity index 54% rename from src/ServiceAssessmentService/ServiceAssessmentService.WebApp/Views/Shared/_Layout.cshtml rename to src/ServiceAssessmentService/ServiceAssessmentService.WebApp/Views/Shared/_DfE_1200px_Layout.cshtml index 81ad435c..eb197d91 100644 --- a/src/ServiceAssessmentService/ServiceAssessmentService.WebApp/Views/Shared/_Layout.cshtml +++ b/src/ServiceAssessmentService/ServiceAssessmentService.WebApp/Views/Shared/_DfE_1200px_Layout.cshtml @@ -1,15 +1,50 @@ @{ + // ReSharper disable once Razor.LayoutNotResolved Layout = "_GovUkPageTemplate"; ViewData["BodyClasses"] = "govuk-template__body"; + + // Use the page title, suffixed by the service name + ViewData["Title"] += " - Service Assessment Service"; + + // get name of current area + var area = ViewContext.RouteData.Values["area"] as string; + + // get name of current controller + var controller = ViewContext.RouteData.Values["controller"] as string; + + // get name of current action + var action = ViewContext.RouteData.Values["action"] as string; + + // get name of current page + var page = ViewContext.RouteData.Values["page"] as string; + + // If not a production environment, show the environment name within the title + if (!"Production".Equals(Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT"), StringComparison.OrdinalIgnoreCase)) + { + ViewData["Title"] += $" (environment: {Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT")})"; + } + + // If local development environment, include route information in the title (for debugging purposes) + if ("Development".Equals(Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT"), StringComparison.OrdinalIgnoreCase)) + { + ViewData["Title"] += $" (route debug -- area: {area}, controller: {controller}, action: {action}, page: {page})"; + } + + // Helpers, used to determine which navigation item is currently active + var isAreaDefault = (area is null) || ("Home".Equals(area, StringComparison.OrdinalIgnoreCase)); + var isAreaBook = ("Book".Equals(area, StringComparison.OrdinalIgnoreCase)); + + } +@* ReSharper disable once Razor.SectionNotResolved *@ @section Head { - - + } +@* ReSharper disable once Razor.SectionNotResolved *@ @section Header {