fix(search): fix the search-results (#8)

* fix(search): tried to fix the search-results issue #7

* refactor (search-result): remove unused component

* style (homepage): make it responsive

* style: remove previous button on small devices

* refactor (routing): clean error path

package.json

@@ -27,7 +27,7 @@
     "@knora/authentication": "^7.2.0",
     "@knora/core": "^7.2.0",
     "@knora/search": "^7.2.0",
-    "@knora/viewer": "^7.2.0",
+    "@knora/viewer": "file:.yalc/@knora/viewer",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
     "jdnconvertiblecalendar": "^0.0.3",

src/app/app-routing.module.ts

@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { ResourceComponent } from './resource/resource.component';
 import { HomepageComponent } from './homepage/homepage.component';
-import { SearchResultsComponent } from '@knora/viewer';
 import { ResourcesListComponent } from './resource/resources-list/resources-list.component';
 import { ErrorComponent } from './error/error.component';
+import { SearchResultsComponent } from './search-results/search-results.component';
 
 const routes: Routes = [
   {
@@ -18,10 +18,6 @@ const routes: Routes = [
   {
     path: 'search',
     children: [
-      {
-        path: ':mode/:q/:project',
-        component: SearchResultsComponent
-      },
       {
         path: ':mode/:q',
         component: SearchResultsComponent
@@ -54,8 +50,7 @@ const routes: Routes = [
   },
   {
     path: '**',
-    component: ErrorComponent,
-    data: { status: 404 }
+    component: ErrorComponent
   }
 ];
 

src/app/app.component.html

@@ -7,10 +7,11 @@
 
   <span class="center">
     <!-- search panel: fulltext and extended search -->
-    <kui-fulltext-search [route]="'/search'" [filterbyproject]="'http://rdfh.ch/projects/0807'"></kui-fulltext-search>
+    <kui-fulltext-search [route]="'/search'"></kui-fulltext-search>
   </span>
 
 </mat-toolbar>
+
 <div class="app-content">
   <router-outlet></router-outlet>
 </div>

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 // style / design
 import { MaterialModule } from './material-module';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 // knora-ui modules
 import { KuiCoreConfig, KuiCoreModule, KuiCoreConfigToken } from '@knora/core';
@@ -20,10 +21,10 @@ import { AppRoutingModule } from './app-routing.module';
 // Components, Services, Directives and Pipes
 import { AppComponent } from './app.component';
 import { ResourceComponent } from './resource/resource.component';
-import { SearchResultComponent } from './search-result/search-result.component';
 import { HomepageComponent } from './homepage/homepage.component';
 import { AppInitService } from './app-init.service';
 import { ResourcesListComponent } from './resource/resources-list/resources-list.component';
+import { SearchResultsComponent } from './search-results/search-results.component';
 import { ErrorComponent } from './error/error.component';
 
 export function initializeApp(appInitService: AppInitService) {
@@ -36,9 +37,9 @@ export function initializeApp(appInitService: AppInitService) {
   declarations: [
     AppComponent,
     ResourceComponent,
-    SearchResultComponent,
     HomepageComponent,
     ResourcesListComponent,
+    SearchResultsComponent,
     ErrorComponent
   ],
   imports: [
@@ -48,6 +49,7 @@ export function initializeApp(appInitService: AppInitService) {
     ReactiveFormsModule,
     MaterialModule,
     NoopAnimationsModule,
+    FlexLayoutModule,
     KuiCoreModule,
     KuiAuthenticationModule,
     KuiActionModule,

src/app/homepage/homepage.component.html

@@ -1,19 +1,19 @@
 <div class="mls-intro middle">
-  <img width="300" alt="MLS Logo" src="assets/images/mls-logo.svg">
+  <img class="mls-logo" alt="MLS Logo" src="assets/images/mls-logo.svg">
   <h3>Die Musikgeschichte der Schweiz auf einen Klick: Das Musiklexikon der Schweiz (MLS)</h3>
   <p>Warum ein neues Musiklexikon? Die Schweiz verfügt im Gegensatz zu anderen europäischen Ländern über kein modernes Nachschlagewerk zur Musikgeschichte. Die bestehenden Lexika sind veraltet und werden der Vielfalt und dem Reichtum des Musiklebens der Schweiz nicht gerecht. Ein neues, wissenschaftlich fundiertes Musiklexikon wird schon seit Jahrzehnten verlangt. Diese Forderung nach fundiertem Wissen über die Schweizer Musik hat mit dem 2012 in die Bundesverfassung aufgenommenen Artikel 67a zur Stärkung der musikalischen Bildung eine neue Aktualität gewonnen: Um die neue Verfassungsbestimmung umzusetzen braucht es ein zeitgemässes Informationssystem zur Schweizer Musikgeschichte auf wissenschaftlicher Basis.</p>
 
-  <div class="index">
-    <button mat-raised-button color="accent" class="index-btn" routerLink="/lexika">Lexikon</button>
-    <button mat-raised-button color="accent" class="index-btn" routerLink="/lemmata">Lemmata</button>
-    <button mat-raised-button color="accent" class="index-btn" routerLink="/artikel">Artikel</button>
+  <div class="index" fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="center" fxLayoutGap="3%">
+    <button fxFlex mat-raised-button color="accent" class="index-btn" routerLink="/lexika">Lexikon</button>
+    <button fxFlex mat-raised-button color="accent" class="index-btn" routerLink="/lemmata">Lemmata</button>
+    <button fxFlex mat-raised-button color="accent" class="index-btn" routerLink="/artikel">Artikel</button>
   </div>
 
-  <div class="sub-index">
-    <button mat-stroked-button color="accent" class="sub-index-btn" routerLink="/bibliothek">Bibliothek</button>
-    <button mat-stroked-button color="accent" class="sub-index-btn" routerLink="/ort">Ort</button>
-    <button mat-stroked-button color="accent" class="sub-index-btn" routerLink="/taetigkeit">Tätigkeit</button>
-    <button mat-stroked-button color="accent" class="sub-index-btn" routerLink="/">Exemplar</button>
+  <div class="sub-index" fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="center" fxLayoutGap="3%">
+    <button fxFlex mat-stroked-button color="accent" class="sub-index-btn" routerLink="/bibliothek">Bibliothek</button>
+    <button fxFlex mat-stroked-button color="accent" class="sub-index-btn" routerLink="/ort">Ort</button>
+    <button fxFlex mat-stroked-button color="accent" class="sub-index-btn" routerLink="/taetigkeit">Tätigkeit</button>
+    <button fxFlex mat-stroked-button color="accent" class="sub-index-btn" routerLink="/">Exemplar</button>
   </div>
 
 </div>

src/app/homepage/homepage.component.scss

@@ -1,20 +1,30 @@
-.mls-intro {
-    text-align: center;
-    width: 560px;
+// desktop screen size: bigger than a tablet
+@media screen and (min-width: 768px) {
+    .mls-intro {
+        text-align: center;
+        width: 560px;
+    }
+
+    .mls-logo {
+        width: 300px;
+    }
+}
+
+// mobile device: tablet and smaller than a tablet
+@media screen and (max-width: 768px) {
+    .mls-intro {
+        text-align: center;
+    }
+    .mls-logo {
+        max-width: 100%;
+        max-height: auto;
+    }
 }
+
 .index {
     margin-top: 72px;
 }
-.index-btn {
-    margin-right: 24px;
-    margin-left: 24px;
-}
 
 .sub-index {
     margin-top: 48px;
 }
-
-.sub-index-btn {
-    margin-right: 8px;
-    margin-left: 8px;
-}

src/app/resource/resource.component.scss

@@ -1,4 +1,3 @@
-
 .hidden {
   display: none;
 }

src/app/resource/resource.component.ts

@@ -1,12 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ReadResourcesSequence, OntologyInformation, KnoraConstants, ResourceService, ApiServiceError, IncomingService, ImageRegion, StillImageRepresentation, ReadResource, ReadStillImageFileValue, ApiServiceResult, ConvertJSONLD, OntologyCacheService, ReadLinkValue } from '@knora/core';
-import { ActivatedRoute, Router, Params, ParamMap } from '@angular/router';
-import { MlsService } from '../services/mls.service';
-import { Subscription, Observable, interval } from 'rxjs';
+import { ReadResourcesSequence, OntologyInformation, KnoraConstants, ResourceService, ApiServiceError, IncomingService, ReadResource, ReadLinkValue } from '@knora/core';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
 import { Location } from '@angular/common';
 
-declare let require: any;
-const jsonld = require('jsonld');
 
 @Component({
     selector: 'mls-resource',
@@ -23,12 +19,10 @@ export class ResourceComponent implements OnInit {
     KnoraConstants = KnoraConstants;
 
     constructor(protected _route: ActivatedRoute,
-        protected _router: Router,
-        protected _resourceService: ResourceService,
-        protected _incomingService: IncomingService,
-        private _cacheService: OntologyCacheService,
-        private _mlsService: MlsService,
-        public location: Location
+                protected _router: Router,
+                protected _resourceService: ResourceService,
+                protected _incomingService: IncomingService,
+                public location: Location
     ) {
         const routeParams = this._route.snapshot.params;
         this.iri = routeParams.id;
@@ -44,7 +38,7 @@ export class ResourceComponent implements OnInit {
 
     /**
      * Get a resource by id with the ontology information and the incoming links
-     * 
+     *
      * @param id resource id - get from the url parameters
      */
     getResource(id: string) {
@@ -108,9 +102,9 @@ export class ResourceComponent implements OnInit {
     /**
      * Display incoming links as clickable links
      *
-     * @param resIri
+     * @param resIri IRI of the resource
      */
-    showIncomingRes(resIri) {
+    showIncomingRes(resIri: string) {
 
         this._router.navigateByUrl('resource/' + encodeURIComponent(resIri));
 

src/app/resource/resources-list/resources-list.component.html

@@ -3,6 +3,7 @@
     Zurück
 </button>
 
+
 <div class="container middle">
     <kui-search-results [searchMode]="'extended'" [searchQuery]="gravsearch"></kui-search-results>
 </div>

src/app/resource/resources-list/resources-list.component.scss

@@ -0,0 +1 @@
+