Improve css for mobile, fix some css issues, apply wordpress css only on...

Improve css for mobile, fix some css issues, apply wordpress css only on concerned components to avoid conficts

webapp/src/app/editorialisation/components/home/home.component.html

-
-    <section class="section">
+<section class="section">
+    <div class="container is-fluid">
         <app-wordpress-posts-list [posts]="posts"></app-wordpress-posts-list>
-    </section>
+    </div>
+</section>
 
-    <section class="video-post">
+<section class="video-post">
+    <div class="container is-fluid">
         <div [innerHTML]='videoPost.content | keepHtml'></div>
-    </section>
-
-
+    </div>
+</section>
\ No newline at end of file

webapp/src/app/geosource/components/filter-list/filter-detail/filter-detail.component.html

@@ -5,7 +5,7 @@
   <ul class="menu-list">
     <li *ngFor="let aggregation of filter.aggregations; let i=index" [ngClass]="{'is-hidden': ((i > 2) && (showList == false)), 'active': (aggregation.isActive == true) }">
       <a>
-        <div class="columns filter-item justify-content-between">
+        <div class="columns filter-item justify-content-between is-mobile">
           <div class="column is-9 " (click)="changeFilter(filter.field, aggregation)">
             <input type="checkbox" [checked]="aggregation.isActive"><!-- Used to remove manually text space nodes inside browser.
           --><span style="margin-left: 7px">

webapp/src/app/geosource/components/metadata-list/metadata-list.component.html

-<div class="columns">
-  <div class="column is-3 has-text-danger" i18n="@@global.resultsFound">
+<div class="columns is-mobile is-multiline">
+  <div class="column is-9-touch is-3-desktop has-text-danger" i18n="@@global.resultsFound">
     {{ paginator.length }} results found
   </div>
-  <div class="column is-9">
+  <div class="column is-3 is-hidden-tablet has-text-right">
+      <a (click)="toggleFilters()">Filtrer</a>
+  </div>
+  <div class="column is-6 ">
     <app-suggestion></app-suggestion>
   </div>
 </div>
+
 <div class="columns">
-  <div class="column is-3">
+  <div class="column is-3 is-hidden-mobile" [ngClass]="{'is-hidden-mobile': displayFilters === false}">
     <div class="sort-container">
       <app-sort></app-sort>
     </div>

webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts

@@ -17,18 +17,19 @@ interface PaginatorOptions {
   styleUrls: ['./metadata-list.component.scss']
 })
 export class MetadataListComponent implements OnInit, OnDestroy {
-  // @ViewChild('paginator') paginator: MatPaginator;
 
   datasetList: Dataset[];
   searchChangeSub: Subscription;
   showProgressBar = false;
-  loading = false;
+  loading = false; // True when loading data over http
+  // Paginator options
   paginator: PaginatorOptions = {
     pageIndex: 0,
     length: 0,
     pageSize: 5,
     pageSizeOptions: [3, 5, 10]
   };
+  displayFilters = false;
 
   constructor(
     private metadataService: MetadataService
@@ -73,7 +74,7 @@ export class MetadataListComponent implements OnInit, OnDestroy {
   }
 
   changePageSize(pageSize) {
-    this.metadataService.paginationChanged(pageSize, this.paginator.pageIndex - 1 );
+    this.metadataService.paginationChanged(pageSize, 0 );
   }
 
   formatFoundItem(e) {
@@ -86,4 +87,8 @@ export class MetadataListComponent implements OnInit, OnDestroy {
     }).join(', ');
   }
 
+  toggleFilters() {
+    this.displayFilters = !this.displayFilters;
+  }
+
 }

webapp/src/app/geosource/components/research/research.component.html

@@ -8,7 +8,7 @@
 
 
 <section>
-  <div class="container">
+  <div class="container is-fluid">
       <router-outlet></router-outlet>
   </div>
 </section>
\ No newline at end of file

webapp/src/app/geosource/components/search-bar/search-bar.component.html

 <div class="columns">
   <div class="column is-4 is-offset-4">
-    <div class=" is-vcentered">
-      <div class="field has-addons">
+    <div class="is-vcentered">
+      <div class="field has-addons is-centered">
         <p class="control">
           <input type="text" class="input is-medium" [(ngModel)]="searchValue" placeholder="Research one dataset" i18n-placeholder="@@research.dataset"
             (keyup)="searchChanged($event.key)" list="keywords" />

webapp/src/app/geosource/components/search-bar/search-bar.component.scss

@@ -19,4 +19,8 @@
   i {
     color: white;
   }
+}
+
+.is-centered {
+  justify-content: center !important;
 }
\ No newline at end of file

webapp/src/app/geosource/components/sort/sort.component.html

 <div>
-  <div class="columns is-vcentered">
+  <div class="columns is-vcentered is-mobile">
     <div class="column">
       <span class="is-size-6" i18n="@@global.sort">Sort by</span>
     </div>

webapp/src/app/shared/components/paginator/paginator.component.html

 <div class="columns">
-  <div class="column is-narrow">
+  <div class="column is-narrow has-text-centered">
     <!-- Dropdown list of pageSize number -->
     <div class="dropdown" [ngClass]="{'is-active': pageSizeDropdownToggle}" (click)="pageSizeDropdownToggle=!pageSizeDropdownToggle">
       <div class="dropdown-trigger">