APIS-7166: fix api filters nav being sticky. Some html changes to align with prototype (#510)

Author: mattclark-zerogravit

app/uk/gov/hmrc/apidocumentation/v2/views/FilteredIndexView.scala.html

@@ -49,9 +49,6 @@ <h1 class="govuk-heading-l govuk-!-margin-bottom-3">API documentation</h1>
                 <h2 class="govuk-heading-m govuk-!-margin-top-3 govuk-!-margin-bottom-3 search-title"><a href="@document.documentationUrl" class="govuk-link--no-underline govuk-link--no-visited-state">@document.name</a></h2>
 
                 <p class="govuk-body">@play.twirl.api.HtmlFormat.raw(document.description)</p>
-                <p class="search-category govuk-!-font-size-19">
-                    <strong class="govuk-tag govuk-tag--@document.label.modifier">@document.label.displayName</strong>
-                </p>
             </li>
             <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
         }

app/uk/gov/hmrc/apidocumentation/v2/views/apiMainV2.scala.html

@@ -28,6 +28,7 @@
 
 @govUkWrapper(pageTitle = Some(pageAttributes.title),
     leftNav = Some(documentFilter(docTypeFilters, categoryFilters.sorted)),
+    isLeftNavSticky = false,
     breadcrumbs = Some(pageAttributes.breadcrumbs),
     navLinks = pageAttributes.headerLinks
     ){@mainContent}

app/uk/gov/hmrc/apidocumentation/v2/views/documentFilter.scala.html

@@ -20,46 +20,49 @@
 
 @(docTypeFilters: List[DocumentationTypeFilter], categoryFilters: List[ApiCategory])
 
-<div class="govuk-form-group">
-    <form method="GET" action="@controllers.routes.FilteredDocumentationIndexController.apiListIndexPage(List.empty, List.empty)">
+<h2 class="govuk-heading-m govuk-visually-hidden">Filters</h2>
+<form method="GET" action="@controllers.routes.FilteredDocumentationIndexController.apiListIndexPage(List.empty, List.empty)">
+    <div class="govuk-form-group">
         <fieldset class="govuk-fieldset" aria-describedby="doc-docType-hint">
             <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
                 Documentation Type
             </legend>
-            <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
-
-                @for((x, index) <- DocumentationTypeFilter.values.zipWithIndex){
-                <div class="govuk-checkboxes__item">
-                    <input class="govuk-checkboxes__input" id="doc-type-@index" name="docTypeFilters" type="checkbox" value="@x"  @if(docTypeFilters.contains(x)){ checked }>
-                    <label class="govuk-label govuk-checkboxes__label govuk-!-font-size-16" for="doc-type-@index">
-                        @x.displayName
-                    </label>
-                </div>
-                }
+        </fieldset>         
+            
+        <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
 
+            @for((x, index) <- DocumentationTypeFilter.values.zipWithIndex){
+            <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="doc-type-@index" name="docTypeFilters" type="checkbox" value="@x"  @if(docTypeFilters.contains(x)){ checked }>
+                <label class="govuk-label govuk-checkboxes__label govuk-!-font-size-16" for="doc-type-@index">
+                    @x.displayName
+                </label>
             </div>
-        </fieldset>
+            }
 
+        </div>
+    </div>
+
+    <div class="govuk-form-group">
         <fieldset class="govuk-fieldset" aria-describedby="doc-category-hint">
             <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
                 API Category
             </legend>
-            <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
-            @for((category, index) <- ApiCategory.values.toList.sortBy(_.displayText).zipWithIndex) {
-                <div class="govuk-checkboxes__item">
-                    <input class="govuk-checkboxes__input" id="doc-category-@index" name="categoryFilters" type="checkbox" value="@category" @if(categoryFilters.contains(category)){ checked }>
-                    <label class="govuk-label govuk-checkboxes__label govuk-!-font-size-16" for="doc-category-@index" id="category-filter-@category.displayText-label" >
-                    @category.displayText
-                    </label>
-                </div>
-
-            }
-            </div>
-            <div>
-                <button class="govuk-button" data-module="govuk-button" type="submit">Filter</button>
+        </fieldset>    
+        <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
+        @for((category, index) <- ApiCategory.values.toList.sortBy(_.displayText).zipWithIndex) {
+            <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="doc-category-@index" name="categoryFilters" type="checkbox" value="@category" @if(categoryFilters.contains(category)){ checked }>
+                <label class="govuk-label govuk-checkboxes__label govuk-!-font-size-16" for="doc-category-@index" id="category-filter-@category.displayText-label" >
+                @category.displayText
+                </label>
             </div>
-        </fieldset>
-    </form>
-</div>
+
+        }
+        </div>
+    </div>
+    <button class="govuk-button" data-module="govuk-button" type="submit">Filter</button>
+  
+</form>
 
 

app/uk/gov/hmrc/apidocumentation/views/templates/GovUkWrapper.scala.html

@@ -41,7 +41,8 @@
         bodyEndBlock: Option[Html] = None,
         breadcrumbs: Option[Breadcrumbs] = None,
         navLinks: Seq[NavLink] = Seq.empty,
-        leftNav: Option[Html] = None
+        leftNav: Option[Html] = None,
+        isLeftNavSticky: Boolean = true
 )(contentBlock: Html)(implicit applicationConfig: ApplicationConfig, messages: Messages, request: play.api.mvc.Request[Any])
 
 @head = {
@@ -84,13 +85,21 @@
 @mainContentDefault = {
     <div class="govuk-width-container">
         <div class="govuk-grid-row">
-            <div id="navContent" class="govuk-grid-column-one-third left-nav-sticky">
+            @if(isLeftNavSticky){
+             <div id="navContent" class="govuk-grid-column-one-third left-nav-sticky">
+             } else {
+                <div id="navContent" class="govuk-grid-column-one-third">
+             }
             @leftNav.getOrElse(HtmlFormat.empty)
             </div>
             <div id="mainContent" class="govuk-grid-column-two-thirds">
-                <div class="govuk-side-nav-content">
-                @contentBlock
-                </div>
+                @if(isLeftNavSticky){
+                    <div class="govuk-side-nav-content">
+                    @contentBlock
+                    </div>
+                } else {
+                    @contentBlock
+                }    
             </div>
         </div>
         <div class="govuk-grid-row">