44988: started search page sidebar

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

@@ -1,9 +1,14 @@
 <div class="search-page">
-    <ds-search-form
-      [query]="query"
-      [scope]="scopeObject?.payload | async"
-      [currentParams]="currentParams"
-      [scopes]="scopeList?.payload">
-    </ds-search-form>
-    <ds-search-results [searchResults]="results" [searchConfig]="searchOptions"></ds-search-results>
+    <ds-search-sidebar></ds-search-sidebar>
+    <div id="search-content">
+        <ds-search-form
+                [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>

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

@@ -1 +1,9 @@
 @import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+#search-content {
+    margin-left: $search-sidebar-width;
+    @include media-breakpoint-down(sm) {
+        margin-left: 0;
+    }
+}

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

@@ -12,6 +12,8 @@ import { ItemSearchResultListElementComponent } from '../object-list/search-resu
 import { CollectionSearchResultListElementComponent } from '../object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
 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';
 
 @NgModule({
   imports: [
@@ -24,6 +26,8 @@ import { SearchService } from './search-service/search.service';
   declarations: [
     SearchPageComponent,
     SearchResultsComponent,
+    SearchSidebarComponent,
+    SearchViewSwitchComponent,
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
     CommunitySearchResultListElementComponent

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

@@ -0,0 +1,4 @@
+<div id="search-sidebar">
+<div id="filter1"></div>
+<div id="filter2"></div>
+</div>

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

@@ -0,0 +1,26 @@
+@import '../../../styles/variables.scss';
+@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;
+    }
+}

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

@@ -0,0 +1,19 @@
+import { Component } 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-sidebar',
+  styleUrls: ['./search-sidebar.component.scss'],
+  templateUrl: './search-sidebar.component.html',
+})
+
+export class SearchSidebarComponent {
+  constructor() {
+    console.log('test');
+  }
+}

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

@@ -0,0 +1,10 @@
+<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

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

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

@@ -0,0 +1,25 @@
+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/styles/_custom_variables.scss

@@ -1 +1,2 @@
-$content-spacing: $spacer * 1.5;
+$content-spacing: $spacer * 1.5;
+$search-sidebar-width: 300px;