From 06bf38e88bd54e109cdb3f666a8ad79feed16579 Mon Sep 17 00:00:00 2001
From: David Dorchies <david.dorchies@irstea.fr>
Date: Mon, 16 Jul 2018 17:26:28 +0200
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20responsive=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/field-set/field-set.component.html | 2 +-
.../components/field-set/field-set.component.scss | 12 ++++++++++++
src/app/components/field-set/field-set.component.ts | 12 +-----------
.../fieldset-container.component.html | 4 ++--
.../generic-calculator/calculator.component.html | 4 ++--
5 files changed, 18 insertions(+), 16 deletions(-)
create mode 100644 src/app/components/field-set/field-set.component.scss
diff --git a/src/app/components/field-set/field-set.component.html b/src/app/components/field-set/field-set.component.html
index 027976c4b..a90516337 100644
--- a/src/app/components/field-set/field-set.component.html
+++ b/src/app/components/field-set/field-set.component.html
@@ -2,7 +2,7 @@
<div class="col fieldset_title">
{{title}}
</div>
- <div *ngIf="_showButtons" class="col-3 fa-stack fa-2x hyd-window-btns">
+ <div *ngIf="_showButtons" class="col-sm-4 fa-stack fa-2x hyd-window-btns">
<i class="fa fa-plus" (click)='onAddClick()'></i>
<i class="fa fa-trash" [style.color]='removeButtonColor' (click)='onRemoveClick()'></i>
<i class="fa fa-arrow-up" [style.color]='upButtonColor' (click)='onMoveUpClick()'></i>
diff --git a/src/app/components/field-set/field-set.component.scss b/src/app/components/field-set/field-set.component.scss
new file mode 100644
index 000000000..dbe81a510
--- /dev/null
+++ b/src/app/components/field-set/field-set.component.scss
@@ -0,0 +1,12 @@
+.fieldset_title {
+ font-weight: bold;
+}
+.radio_param_header {
+ width: 10em;
+}
+.fieldset_backgrd {
+ background-color: #eeeeee;
+}
+.hyd-window-btns {
+ text-align: right;
+}
diff --git a/src/app/components/field-set/field-set.component.ts b/src/app/components/field-set/field-set.component.ts
index d75abd49e..9b4a682c1 100644
--- a/src/app/components/field-set/field-set.component.ts
+++ b/src/app/components/field-set/field-set.component.ts
@@ -11,17 +11,7 @@ import { CheckField } from "../../formulaire/check-field";
@Component({
selector: "field-set",
templateUrl: "./field-set.component.html",
- styles: [`.fieldset_title {
- font-weight: bold;
- padding: 0.3em;
- }`,
- `.radio_param_header {
- width: 10em;
- }`,
- `.fieldset_backgrd {
- background-color: #eeeeee;
- }`
- ]
+ styleUrls: ["./field-set.component.scss"]
})
export class FieldSetComponent implements DoCheck {
/**
diff --git a/src/app/components/fieldset-container/fieldset-container.component.html b/src/app/components/fieldset-container/fieldset-container.component.html
index 2d50dba9b..96cb31b2c 100644
--- a/src/app/components/fieldset-container/fieldset-container.component.html
+++ b/src/app/components/fieldset-container/fieldset-container.component.html
@@ -1,6 +1,6 @@
-<div class="container-fluid" style="border-style:solid; border-color: lightgray">
+<div class="container-fluid" style="border-style:solid; border-color: lightgray; border-radius: 10px; margin-bottom: 10px;">
<div class="row">
- <h4>{{title}}</h4>
+ <h4 class="col">{{title}}</h4>
</div>
<field-set *ngFor="let fs of fieldsets" [fieldSet]=fs (onRadio)=onRadioClick($event) (onValid)=onFieldsetValid() (inputChange)=onInputChange()
diff --git a/src/app/components/generic-calculator/calculator.component.html b/src/app/components/generic-calculator/calculator.component.html
index 0ea6ec6a4..b0ef881e1 100644
--- a/src/app/components/generic-calculator/calculator.component.html
+++ b/src/app/components/generic-calculator/calculator.component.html
@@ -5,7 +5,7 @@
<h1 [innerHTML]="uitextTitre"></h1>
</div>
- <div class="col-3 px-0 mx-0 fa-stack fa-2x hyd-window-btns">
+ <div class="col-sm-3 px-0 mx-0 fa-stack fa-2x hyd-window-btns">
<!-- bouton d'aide -->
<i *ngIf="enableHelpButton" class="fa fa-question-circle" style="color:blue" (click)="openHelp()"></i>
<!-- bouton de sauvegarde -->
@@ -17,7 +17,7 @@
<!-- nom de la calculette -->
<div class="row">
- <div class="col-6">
+ <div class="col-md-6">
<calc-name title="Nom de la calculette"></calc-name>
</div>
</div>
--
GitLab