From d6658c97b82d2c1f64d4f07148bdc633000ffdc3 Mon Sep 17 00:00:00 2001
From: florimondmanca <florimond.manca@gmail.com>
Date: Thu, 20 Sep 2018 18:31:50 +0200
Subject: [PATCH] refactor pane components

---
 .../projects/overview/overview.component.html |  8 +++--
 .../projects/overview/overview.component.scss | 26 ++------------
 .../student-home/student-home.component.html  | 12 +++++--
 .../student-home/student-home.component.scss  | 34 ++++---------------
 src/app/panes/pane/pane.component.html        |  5 +++
 src/app/panes/pane/pane.component.scss        | 12 +++++++
 src/app/panes/pane/pane.component.ts          |  8 +++++
 src/app/panes/panes.module.ts                 |  3 ++
 .../panes/two-panes/two-panes.component.html  | 13 +------
 .../panes/two-panes/two-panes.component.scss  | 24 +------------
 10 files changed, 54 insertions(+), 91 deletions(-)
 create mode 100644 src/app/panes/pane/pane.component.html
 create mode 100644 src/app/panes/pane/pane.component.scss
 create mode 100644 src/app/panes/pane/pane.component.ts

diff --git a/src/app/members/projects/overview/overview.component.html b/src/app/members/projects/overview/overview.component.html
index 88b4c72..dbc6a42 100644
--- a/src/app/members/projects/overview/overview.component.html
+++ b/src/app/members/projects/overview/overview.component.html
@@ -1,4 +1,8 @@
 <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>
diff --git a/src/app/members/projects/overview/overview.component.scss b/src/app/members/projects/overview/overview.component.scss
index 76c22b7..9736f12 100644
--- a/src/app/members/projects/overview/overview.component.scss
+++ b/src/app/members/projects/overview/overview.component.scss
@@ -1,31 +1,9 @@
-@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);
 }
diff --git a/src/app/members/student-home/student-home.component.html b/src/app/members/student-home/student-home.component.html
index acbf72e..9693f0e 100644
--- a/src/app/members/student-home/student-home.component.html
+++ b/src/app/members/student-home/student-home.component.html
@@ -1,8 +1,14 @@
-<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">
diff --git a/src/app/members/student-home/student-home.component.scss b/src/app/members/student-home/student-home.component.scss
index 078c18c..4b74178 100644
--- a/src/app/members/student-home/student-home.component.scss
+++ b/src/app/members/student-home/student-home.component.scss
@@ -1,36 +1,16 @@
 @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);
+#projects {
+  // TODO use a background image
+  background: $color-purple-light;
 }
-
-
-.container {
-  @include margin-page;
-}
\ No newline at end of file
diff --git a/src/app/panes/pane/pane.component.html b/src/app/panes/pane/pane.component.html
new file mode 100644
index 0000000..f9dfff2
--- /dev/null
+++ b/src/app/panes/pane/pane.component.html
@@ -0,0 +1,5 @@
+<div class="pane">
+  <div class="pane-content">
+    <ng-content></ng-content>
+  </div>
+</div>
diff --git a/src/app/panes/pane/pane.component.scss b/src/app/panes/pane/pane.component.scss
new file mode 100644
index 0000000..a0ca093
--- /dev/null
+++ b/src/app/panes/pane/pane.component.scss
@@ -0,0 +1,12 @@
+@import '~sass/mixins';
+@import '~sass/variables';
+
+.pane {
+  height: 100%;
+  @include drop-shadow($shadow-sm, $inset: true);
+}
+
+.pane-content {
+  padding: 3em;
+  width: fit-content;
+}
diff --git a/src/app/panes/pane/pane.component.ts b/src/app/panes/pane/pane.component.ts
new file mode 100644
index 0000000..3d98c3d
--- /dev/null
+++ b/src/app/panes/pane/pane.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-pane',
+  templateUrl: './pane.component.html',
+  styleUrls: ['./pane.component.scss']
+})
+export class PaneComponent {}
diff --git a/src/app/panes/panes.module.ts b/src/app/panes/panes.module.ts
index 04acaae..4318091 100644
--- a/src/app/panes/panes.module.ts
+++ b/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 { }
diff --git a/src/app/panes/two-panes/two-panes.component.html b/src/app/panes/two-panes/two-panes.component.html
index efd2a97..6dbc743 100644
--- a/src/app/panes/two-panes/two-panes.component.html
+++ b/src/app/panes/two-panes/two-panes.component.html
@@ -1,12 +1 @@
-<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>
diff --git a/src/app/panes/two-panes/two-panes.component.scss b/src/app/panes/two-panes/two-panes.component.scss
index 76c22b7..d0f6903 100644
--- a/src/app/panes/two-panes/two-panes.component.scss
+++ b/src/app/panes/two-panes/two-panes.component.scss
@@ -1,31 +1,9 @@
-@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);
-}
-- 
GitLab