Skip to content
Snippets Groups Projects
Unverified Commit d6658c97 authored by florimondmanca's avatar florimondmanca
Browse files

refactor pane components

parent 494d81a2
No related branches found
No related tags found
2 merge requests!20Espace membre,!26Release first-users version to production
<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>
@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);
}
<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">
......
@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;
}
<div class="pane">
<div class="pane-content">
<ng-content></ng-content>
</div>
</div>
@import '~sass/mixins';
@import '~sass/variables';
.pane {
height: 100%;
@include drop-shadow($shadow-sm, $inset: true);
}
.pane-content {
padding: 3em;
width: fit-content;
}
import { Component } from '@angular/core';
@Component({
selector: 'app-pane',
templateUrl: './pane.component.html',
styleUrls: ['./pane.component.scss']
})
export class PaneComponent {}
......@@ -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 { }
<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>
@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);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment