refactor pane components

src/app/members/projects/overview/overview.component.html

 <app-two-panes>
-  <app-open-registrations pane="left" [editions]="editions"></app-open-registrations>
-  <app-my-participations-overview pane="right" [participations]="participations"></app-my-participations-overview>
+  <app-pane id="open-registrations">
+    <app-open-registrations [editions]="editions"></app-open-registrations>
+  </app-pane>
+  <app-pane id="my-participations">
+    <app-my-participations-overview [participations]="participations"></app-my-participations-overview>
+  </app-pane>
 </app-two-panes>

src/app/members/projects/overview/overview.component.scss

-@import '~sass/mixins';
 @import '~sass/variables';
-@import '~sass/media-queries';
 
-.panes {
-  display: grid;
-  grid-template-columns: 1fr;
-  @include media-xs {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.pane-content {
-  padding: 3em;
-  width: fit-content;
-}
-
-.pane-left {
+#open-registrations {
   background: $color-light-blue;
-  @include drop-shadow($shadow-sm,$inset: true);
-  @include media-xs {
-    .pane-content {
-      margin-left: auto;
-    }
-  }
 }
 
-.pane-right {
+#my-participations {
   background: lighten($color-purple-light, 15);
-  @include drop-shadow($shadow-sm, $inset: true);
 }

src/app/members/student-home/student-home.component.html

-<h1 class="text-center">Mon espace</h1>
+<h1 class="text-center">
+  Mon espace
+</h1>
 
 <app-two-panes>
-  <visits-overview pane="left"></visits-overview>
-  <projects-overview pane="right"></projects-overview>
+  <app-pane id="visits">
+    <visits-overview class="pane-content"></visits-overview>
+  </app-pane>
+  <app-pane id="projects">
+    <projects-overview class="pane-content"></projects-overview>
+  </app-pane>
 </app-two-panes>
 
 <div class="container">

src/app/members/student-home/student-home.component.scss

 @import '~sass/mixins';
 @import '~sass/variables';
-@import '~sass/media-queries';
 
-.panes {
-  display: grid;
-  grid-template-columns: 1fr;
-  @include media-xs {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.pane-content {
-  padding: 3em;
-  width: fit-content;
+.container {
+  @include margin-page;
 }
 
-.pane-left {
+#visits {
+  // TODO use a background image
   background: $color-light-blue;
-  @include drop-shadow($shadow-sm,$inset: true);
-  @include media-xs {
-    .pane-content {
-      margin-left: auto;
-    }
-  }
-}
-
-.pane-right {
-  background: lighten($color-purple-light, 15);
-  @include drop-shadow($shadow-sm, $inset: true);
 }
 
-
-.container {
-  @include margin-page;
+#projects {
+  // TODO use a background image
+  background: $color-purple-light;
 }

src/app/panes/pane/pane.component.html

+<div class="pane">
+  <div class="pane-content">
+    <ng-content></ng-content>
+  </div>
+</div>

src/app/panes/pane/pane.component.scss

+@import '~sass/mixins';
+@import '~sass/variables';
+
+.pane {
+  height: 100%;
+  @include drop-shadow($shadow-sm, $inset: true);
+}
+
+.pane-content {
+  padding: 3em;
+  width: fit-content;
+}

src/app/panes/pane/pane.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-pane',
+  templateUrl: './pane.component.html',
+  styleUrls: ['./pane.component.scss']
+})
+export class PaneComponent {}

src/app/panes/panes.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { TwoPanesComponent } from './two-panes/two-panes.component';
+import { PaneComponent } from './pane/pane.component';
 
 @NgModule({
   imports: [
@@ -9,9 +10,11 @@ import { TwoPanesComponent } from './two-panes/two-panes.component';
   ],
   declarations: [
     TwoPanesComponent,
+    PaneComponent,
   ],
   exports: [
     TwoPanesComponent,
+    PaneComponent,
   ]
 })
 export class PanesModule { }

src/app/panes/two-panes/two-panes.component.html

-<div class="panes">
-  <div class="pane-left">
-    <div class="pane-content">
-      <ng-content select="[pane=left]"></ng-content>
-    </div>
-  </div>
-  <div class="pane-right">
-    <div class="pane-content">
-      <ng-content select="[pane=right]"></ng-content>
-    </div>
-  </div>
-</div>
+<ng-content></ng-content>

src/app/panes/two-panes/two-panes.component.scss

-@import '~sass/mixins';
-@import '~sass/variables';
 @import '~sass/media-queries';
 
-.panes {
+:host {
   display: grid;
   grid-template-columns: 1fr;
   @include media-xs {
     grid-template-columns: 1fr 1fr;
   }
 }
-
-.pane-content {
-  padding: 3em;
-  width: fit-content;
-}
-
-.pane-left {
-  background: $color-light-blue;
-  @include drop-shadow($shadow-sm,$inset: true);
-  @include media-xs {
-    .pane-content {
-      margin-left: auto;
-    }
-  }
-}
-
-.pane-right {
-  background: lighten($color-purple-light, 15);
-  @include drop-shadow($shadow-sm, $inset: true);
-}