44988: search sidebar finished

resources/i18n/en.json

@@ -77,6 +77,11 @@
     },
     "results": {
       "title": "Search Results"
+    },
+    "sidebar": {
+      "close": "Back to results",
+      "open": "Search Tools",
+      "results": "results"
     }
   },
   "loading": {

src/app/+search-page/layout-controls/layout-controls.component.html

@@ -0,0 +1,4 @@
+<div>
+    <button [disabled]="isList" (click)="setList(true)" class="btn"><i class="fa fa-list" aria-hidden="true"></i></button>
+    <button [disabled]="!isList" (click)="setList(false)" class="btn"><i class="fa fa-th-large" aria-hidden="true"></i></button>
+</div>

src/app/+search-page/layout-controls/layout-controls.component.scss

@@ -0,0 +1,15 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+:host {
+    display: inline-block;
+    button {
+        border: none;
+        background-color: white;
+        padding: 0;
+        color: map-get($theme-colors, primary);
+        i {
+            font-size: $button-height;
+        }
+    }
+}

src/app/+search-page/layout-controls/layout-controls.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+/**
+ * This component renders a simple item page.
+ * The route parameter 'id' is used to request the item it represents.
+ * All fields of the item that should be displayed, are defined in its template.
+ */
+
+@Component({
+  selector: 'ds-layout-controls',
+  styleUrls: ['./layout-controls.component.scss'],
+  templateUrl: './layout-controls.component.html',
+})
+
+export class LayoutControlsComponent {
+  @Input() isList = true;
+  @Output() toggleList = new EventEmitter<boolean>();
+
+  setList(isList: boolean) {
+    this.isList = isList;
+    this.toggleList.emit(isList);
+  }
+}

src/app/+search-page/search-page.component.html

@@ -1,14 +1,33 @@
 <div class="search-page">
-    <ds-search-sidebar></ds-search-sidebar>
-    <div id="search-content">
-        <ds-search-form
-                [query]="query"
-                [scope]="scopeObject?.payload | async"
-                [currentParams]="currentParams"
-                [scopes]="scopeList?.payload">
+    <div id="search-header" class="row">
+        <ds-layout-controls class="col-md-3 d-none d-md-block sidebar-md-fixed"
+                            [isList]="isListView"
+                            (toggleList)="setListView($event)"></ds-layout-controls>
+        <ds-search-form id="search-form" class="col-12 col-md-9 ml-md-auto"
+                        [query]="query"
+                        [scope]="scopeObject?.payload | async"
+                        [currentParams]="currentParams"
+                        [scopes]="scopeList?.payload">
         </ds-search-form>
-        <ds-search-view-switch [active]="true" [resultCount]="124" class="d-block d-md-none"></ds-search-view-switch>
-        <ds-search-results [searchResults]="results"
-                           [searchConfig]="searchOptions"></ds-search-results>
+    </div>
+    <div class="row">
+        <div id="search-body" class="row-offcanvas row-offcanvas-left" [ngClass]="{'active': isSidebarActive}">
+            <ds-search-sidebar class="col-12 col-md-3 sidebar-md-fixed" id="search-sidebar"
+                               resultCount="{{(results.pageInfo | async)?.totalElements}}"
+                               (toggleSidebar)="setSidebarActive($event)"></ds-search-sidebar>
+            <div id="search-content" class="col-12 col-md-9 ml-md-auto">
+                <div class="d-block d-md-none search-controls clearfix">
+                    <ds-layout-controls [isList]="isListView"
+                                        (toggleList)="setListView($event)"></ds-layout-controls>
+                    <button (click)="setSidebarActive(true)" aria-controls="#search-body"
+                            class="btn btn-outline-primary float-right"><i
+                            class="fa fa-sliders"></i> {{"search.sidebar.open" |
+                        translate}}
+                    </button>
+                </div>
+                <ds-search-results [searchResults]="results"
+                                   [searchConfig]="searchOptions"></ds-search-results>
+            </div>
+        </div>
     </div>
 </div>

src/app/+search-page/search-page.component.scss

@@ -1,9 +1,84 @@
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
-#search-content {
-    margin-left: $search-sidebar-width;
+#search-body {
+    position: relative;
+}
+
+#search-content, #search-form {
+    display: block;
     @include media-breakpoint-down(sm) {
         margin-left: 0;
     }
 }
+
+/deep/ .search-controls {
+    margin-bottom: $spacer;
+}
+
+#search-body {
+    &.row-offcanvas {
+        width: 100%;
+    }
+    @include media-breakpoint-down(sm) {
+        position: relative;
+        -webkit-transition: all .25s ease-out;
+        -o-transition: all .25s ease-out;
+        transition: all .25s ease-out;
+
+        &.row-offcanvas {
+            position: relative;
+            -webkit-transition: all .25s ease-out;
+            -o-transition: all .25s ease-out;
+            transition: all .25s ease-out;
+        }
+
+        &.row-offcanvas-right {
+            right: 0;
+        }
+
+        &.row-offcanvas-left {
+            left: 0;
+        }
+
+        &.row-offcanvas-right
+        #search-sidebar {
+            right: -100%; /* 12 columns */
+        }
+
+        &.row-offcanvas-right.active
+        #search-sidebar {
+            right: -100%; /* 6 columns */
+        }
+
+        &.row-offcanvas-left
+        #search-sidebar {
+            left: -100%; /* 12 columns */
+        }
+
+        &.row-offcanvas-left.active
+        #search-sidebar {
+            left: -100%; /* 6 columns */
+        }
+
+        &.row-offcanvas-right.active {
+            right: 100%; /* 6 columns */
+        }
+
+        &.row-offcanvas-left.active {
+            left: 100%; /* 6 columns */
+        }
+
+        #search-sidebar {
+            position: absolute;
+            top: 0;
+            width: 100%; /* 6 columns */
+        }
+    }
+}
+
+.sidebar-md-fixed {
+    @include media-breakpoint-up(md) {
+        position: fixed;
+    }
+}

src/app/+search-page/search-page.component.ts

@@ -33,6 +33,8 @@ export class SearchPageComponent implements OnInit, OnDestroy {
   currentParams = {};
   searchOptions: SearchOptions;
   scopeList: RemoteData<Community[]>;
+  isSidebarActive = false;
+  isListView = true;
 
   constructor(
     private service: SearchService,
@@ -89,4 +91,12 @@ export class SearchPageComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.sub.unsubscribe();
   }
+
+  setSidebarActive(show: boolean) {
+    this.isSidebarActive = show;
+  }
+
+  setListView(isList: boolean) {
+    this.isListView = isList;
+  }
 }

src/app/+search-page/search-page.module.ts

@@ -13,7 +13,7 @@ import { CollectionSearchResultListElementComponent } from '../object-list/searc
 import { CommunitySearchResultListElementComponent } from '../object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
 import { SearchService } from './search-service/search.service';
 import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component';
-import { SearchViewSwitchComponent } from './search-view-switch/search-view-switch.component';
+import { LayoutControlsComponent } from './layout-controls/layout-controls.component';
 
 @NgModule({
   imports: [
@@ -27,10 +27,10 @@ import { SearchViewSwitchComponent } from './search-view-switch/search-view-swit
     SearchPageComponent,
     SearchResultsComponent,
     SearchSidebarComponent,
-    SearchViewSwitchComponent,
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
-    CommunitySearchResultListElementComponent
+    CommunitySearchResultListElementComponent,
+    LayoutControlsComponent
   ],
   providers: [
     SearchService

src/app/+search-page/search-sidebar/search-sidebar.component.html

@@ -1,4 +1,12 @@
-<div id="search-sidebar">
-<div id="filter1"></div>
-<div id="filter2"></div>
+<div>
+    <div id="sidebar-options" class="d-block d-md-none search-controls clearfix">
+        <small class="results">{{resultCount}} {{"search.sidebar.results" | translate}}</small>
+        <button (click)="toggleSidebar.emit(false)"
+                aria-controls="#search-body" class="btn btn-outline-primary float-right"><i
+                class="fa fa-arrow-right"></i> {{"search.sidebar.close" | translate}}
+        </button>
+    </div>
+    <div id="search-sidebar-content">
+        Place filters and other search config here
+    </div>
 </div>

src/app/+search-page/search-sidebar/search-sidebar.component.scss

@@ -2,25 +2,7 @@
 @import '../../../styles/mixins.scss';
 
 :host {
-    display: block;
-    position: fixed;
-    background-color: red;
-    width: $search-sidebar-width;
-    padding: $spacer;
-    #filter1, #filter2 {
-        width: 100%;
-    }
-    #filter1 {
-        height: 300px;
-        background-color: yellow;
-    }
-    #filter2 {
-        height: 200px;
-        background-color: green;
-    }
-
-    @include media-breakpoint-down(sm) {
-        width: 100%;
-        display: none;
+    .results {
+        line-height: $button-height;
     }
 }

src/app/+search-page/search-sidebar/search-sidebar.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 /**
  * This component renders a simple item page.
@@ -13,7 +13,8 @@ import { Component } from '@angular/core';
 })
 
 export class SearchSidebarComponent {
+  @Input() resultCount;
+  @Output() toggleSidebar = new EventEmitter<boolean>();
   constructor() {
-    console.log('test');
   }
 }

src/app/+search-page/search-view-switch/search-view-switch.component.html

@@ -1,10 +0,0 @@
-<div id="search-view-switch">
-    <div *ngIf="!active" class="inactive-menu">
-        <span class="view-option-switch">TODO</span>
-        <button class="btn btn-outline-primary float-right"(click)="switchView(true)"><i class="fa fa-sliders"></i> {{"search.view-switch.open-sidebar" | translate}}</button>
-    </div>
-    <div *ngIf="active" class="active-menu">
-        <span class="results">{{resultCount}}</span>
-        <button class="btn btn-outline-primary float-right" (click)="switchView(false)"><i class="fa fa-arrow-right"></i> {{"search.view-switch.close-sidebar" | translate}}</button>
-    </div>
-</div>

src/app/+search-page/search-view-switch/search-view-switch.component.scss

@@ -1,3 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
-

src/app/+search-page/search-view-switch/search-view-switch.component.ts

@@ -1,25 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-/**
- * This component renders a simple item page.
- * The route parameter 'id' is used to request the item it represents.
- * All fields of the item that should be displayed, are defined in its template.
- */
-
-@Component({
-  selector: 'ds-search-view-switch',
-  styleUrls: ['./search-view-switch.component.scss'],
-  templateUrl: './search-view-switch.component.html',
-})
-
-export class SearchViewSwitchComponent {
-  @Input() resultCount;
-  @Input() active;
-  constructor() {
-    console.log('test');
-  }
-
-  switchView(b: boolean) {
-    this.active = b;
-  }
-}

src/app/app.component.scss

@@ -6,6 +6,10 @@ html {
   position: relative;
   min-height: 100%;
 }
+
+body {
+  overflow-x: hidden;
+}
 // Sticky Footer
 
 .outer-wrapper {

src/app/object-list/search-result-list-element/search-result-list-element.component.scss

@@ -1,6 +1,6 @@
 @import '../../../styles/variables.scss';
 :host {
-    /deep/ em {
+    ::ng-deep em {
         font-weight: bold;
         font-style: normal;
     }

src/styles/_custom_variables.scss

@@ -1,2 +1,3 @@
 $content-spacing: $spacer * 1.5;
-$search-sidebar-width: 300px;
+
+$button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);

src/styles/_functions.scss

@@ -0,0 +1,4 @@
+@function calculateRem($size) {
+    $remSize: $size / 16px;
+    @return $remSize;
+}

src/styles/_variables.scss

@@ -2,4 +2,5 @@
 @import '../../node_modules/font-awesome/scss/variables.scss';
 @import '../../node_modules/bootstrap/scss/functions.scss';
 @import '../../node_modules/bootstrap/scss/variables.scss';
+@import '_functions.scss';
 @import 'custom_variables.scss';