Skip to content
This repository was archived by the owner on May 26, 2025. It is now read-only.

Commit 274d361

Browse files
BotosioBotosio
authored
updated form spacing and mobile (#285)
* updated form spacing and mobile * fixed spacing
1 parent df241cc commit 274d361

File tree

9 files changed

+158
-123
lines changed

9 files changed

+158
-123
lines changed

‎src/app/components/forms/form-create/form-create.component.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="container-fluid">
22
<div class="d-flex flex-column mb-4">
33
<div class="cursor-pointer ">
4-
<span (click)="onBackPressed()">&#8592; {{ "BACK" | translate }}</span>
4+
<span (click)="onBackPressed()">&#8592; {{ "BACK" | translate }}</span>
55
</div>
66
<div class="control-container d-flex justify-content-between mt-2">
77
<h4>{{ "FORM_EDIT" | translate }}</h4>
@@ -13,14 +13,14 @@ <h4>{{ "FORM_EDIT" | translate }}</h4>
1313
{{ "FORM_PUBLISH" | translate }}
1414
</button>
1515
</div>
16-
</div>
16+
</div>
1717
</div>
18-
18+
1919
<div class="card">
2020
<div class="card-body">
2121
<form [formGroup]="formDetailsFormGroup">
22-
<div class="d-flex flex-row ">
23-
<div class="d-flex flex-column grow-1">
22+
<div class="row">
23+
<div class="col-lg-6">
2424
<div class="form-group">
2525
<label for="form-title">{{ "FORM_TITLE" | translate }}</label>
2626
<input
@@ -39,8 +39,8 @@ <h4>{{ "FORM_EDIT" | translate }}</h4>
3939
placeholder="{{ 'FORM_CODE_PLACEHOLDER' | translate }}"
4040
/>
4141
</div>
42-
</div>
43-
<div class="d-flex flex-column grow-1 ml-4">
42+
</div>
43+
<div class="col-lg-6">
4444
<div class="form-group">
4545
<label for="form-cde">{{ "FORM_DESCRIPTION" | translate }}</label>
4646
<textarea

‎src/app/components/forms/form-create/form-create.component.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22

3+
34
.form-create { //? this isn't on the form
45
.back-button {
56
font-weight: bold;
@@ -53,4 +54,7 @@
5354

5455
textarea {
5556
min-height: 124px; // aligns to 2 inputs in a column layout
56-
}
57+
}
58+
59+
60+

‎src/app/components/forms/forms.component.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import "node_modules/bootstrap/scss/functions";
2+
@import "node_modules/bootstrap/scss/variables";
3+
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
4+
5+
@include media-breakpoint-up(xl) {
6+
7+
}
8+
@include media-breakpoint-up(lg) {
9+
10+
}
11+
@include media-breakpoint-up(md) {
12+
13+
}
14+

‎src/app/components/forms/option/option.component.html

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
11
<form [formGroup]="optionFormGroup">
2+
<div class="mb-2">
3+
<div class="col-md-8 d-flex flex-row">
4+
<input type="text" class="form-control" placeholder="" formControlName="text">
25

3-
<div class="col-md-8 option-container">
4-
<input type="text" class="form-control" placeholder="" formControlName="text">
6+
<div class="icon-holder">
7+
<app-icon-toggle-input enabledIcon="/assets/forms/icon-text-enabled.png"
8+
enabledIconTooltip="{{'MARK_AS_FREE_TEXT' | translate}}"
9+
disabledIcon="/assets/forms/icon-text-disabled.png"
10+
disabledIconTooltip="{{'MARK_AS_REGULAR' | translate}}"
11+
formControlName="isFreeText">
12+
</app-icon-toggle-input>
13+
</div>
514

6-
<div class="icon-holder">
7-
<app-icon-toggle-input enabledIcon="/assets/forms/icon-text-enabled.png"
8-
enabledIconTooltip="{{'MARK_AS_FREE_TEXT' | translate}}"
9-
disabledIcon="/assets/forms/icon-text-disabled.png"
10-
disabledIconTooltip="{{'MARK_AS_REGULAR' | translate}}"
11-
formControlName="isFreeText">
12-
</app-icon-toggle-input>
13-
</div>
15+
<div class="icon-holder">
16+
<app-icon-toggle-input enabledIcon="/assets/forms/icon-flag-enabled.png"
17+
enabledIconTooltip="{{'FLAG_OPTION' | translate}}"
18+
disabledIcon="/assets/forms/icon-flag-disabled.png"
19+
disabledIconTooltip="{{'UNFLAG_OPTION' | translate}}"
20+
formControlName="flagged">
21+
</app-icon-toggle-input>
22+
</div>
1423

15-
<div class="icon-holder">
16-
<app-icon-toggle-input enabledIcon="/assets/forms/icon-flag-enabled.png"
17-
enabledIconTooltip="{{'FLAG_OPTION' | translate}}"
18-
disabledIcon="/assets/forms/icon-flag-disabled.png"
19-
disabledIconTooltip="{{'UNFLAG_OPTION' | translate}}"
20-
formControlName="flagged">
21-
</app-icon-toggle-input>
22-
</div>
23-
24-
<div class="icon-holder" (click)="optionDeleteEventEmitter.emit()">
25-
<img src="/assets/forms/icon-delete.png" alt="">
26-
</div>
24+
<div class="icon-holder" (click)="optionDeleteEventEmitter.emit()">
25+
<img src="/assets/forms/icon-delete.png" alt="">
26+
</div>
2727
</div>
28+
</div>
29+
2830
</form>
2931

‎src/app/components/forms/option/option.component.scss

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1-
.option-container {
1+
.icon-holder {
22
display: flex;
3-
flex-direction: row;
4-
margin: 4px auto;
3+
flex-direction: column;
4+
justify-content: space-around;
55

6-
.icon-holder {
7-
display: flex;
8-
flex-direction: column;
9-
justify-content: space-around;
6+
cursor: pointer;
107

11-
cursor: pointer;
12-
13-
margin: auto 4px;
14-
}
8+
margin: auto 4px;
159
}
10+

‎src/app/components/forms/question/question.component.html

Lines changed: 33 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,43 @@
11

2-
<div class="col-md-12 question-component">
3-
<div class="field icon-holder" (click)="toggleOptions()">
4-
<span *ngIf="hideOptions">
5-
&#9654;
6-
</span>
7-
<span *ngIf="!hideOptions">
8-
&#9660;
9-
</span>
2+
<div class="card mb-4">
3+
<div class="card-header d-flex flex-row justify-content-between">
4+
<div><span [ngClass]="{'rotate':hideOptions}" (click)="toggleOptions()"><img src="/assets/forms/down.png" alt=""></span> {{ questionFormGroup.controls['code']?.value || 'QUESTION_CODE' | translate }} - {{ questionFormGroup.controls['text']?.value || 'QUESTION_TEXT' | translate }}</div>
5+
<div class="field icon-holder" (click)="questionDeleteEventEmitter.emit()">
6+
<img src="/assets/forms/icon-delete.png" alt="">
7+
</div>
108
</div>
9+
<div class="card-body" [hidden]="hideOptions">
1110

12-
<div class="expandable-container">
13-
<form [formGroup]="questionFormGroup">
14-
<div class="main-fields-container">
15-
<div class="field col-md-2">
16-
<input class="form-control" formControlName="code" placeholder="{{'QUESTION_CODE' | translate}}">
17-
</div>
18-
<div class="field col-md-6">
19-
<input class="form-control" formControlName="text" placeholder="{{'QUESTION_TEXT' | translate}}">
20-
</div>
21-
<div class="field col-md-2">
22-
<select class="form-control" formControlName="questionType">
23-
<option *ngFor="let questionType of questionTypes" [ngValue]="questionType.id">{{questionType.name | translate}}</option>
24-
</select>
25-
</div>
26-
<div class="field icon-holder" (click)="questionDeleteEventEmitter.emit()">
27-
<img src="/assets/forms/icon-delete.png" alt="">
11+
<form [formGroup]="questionFormGroup">
12+
<div class="row">
13+
<div class="field col-lg-3 col-md-6">
14+
<input class="form-control" formControlName="code" placeholder="{{'QUESTION_CODE' | translate}}">
15+
</div>
16+
<div class="field col-lg-6 col-md-12 order-2 mt-md-4 mt-lg-0">
17+
<input class="form-control" formControlName="text" placeholder="{{'QUESTION_TEXT' | translate}}">
18+
</div>
19+
<div class="field col-lg-3 col-md-6 order-1">
20+
<select class="form-control" formControlName="questionType">
21+
<option *ngFor="let questionType of questionTypes" [ngValue]="questionType.id">{{questionType.name | translate}}</option>
22+
</select>
23+
</div>
2824
</div>
29-
</div>
30-
</form>
31-
32-
<div [hidden]="hideOptions" class="options-panel">
33-
34-
<div cdkDropList
35-
class="options-list"
36-
(cdkDropListDropped)="onReorder($event)">
37-
<div *ngFor="let option of optionFormGroupsArray; let i = index" cdkDrag class="option-line">
38-
<app-option [optionFormGroup]="option"
39-
(optionDeleteEventEmitter)="onOptionDelete(i)"
40-
class="option">
41-
</app-option>
25+
</form>
26+
<hr />
27+
<div cdkDropList class="options-list" (cdkDropListDropped)="onReorder($event)">
28+
<div *ngFor="let option of optionFormGroupsArray; let i = index" cdkDrag class="option-line">
29+
<app-option [optionFormGroup]="option"
30+
(optionDeleteEventEmitter)="onOptionDelete(i)"
31+
class="option">
32+
</app-option>
4233

43-
<div class="icon-holder icon-reorder" cdkDragHandle>
44-
<img src="/assets/forms/icon-reorder.png" alt="">
34+
<div class="icon-holder icon-reorder" cdkDragHandle>
35+
<img src="/assets/forms/icon-reorder.png" alt="">
36+
</div>
4537
</div>
4638
</div>
47-
</div>
4839

49-
<div class="col-md-12 add-option-button" (click)="addOption()">+ {{'OPTION_ADD' | translate}}</div>
50-
</div>
40+
<div class="col add-option-button" (click)="addOption()">+ {{'OPTION_ADD' | translate}}</div>
41+
5142
</div>
5243
</div>

‎src/app/components/forms/question/question.component.scss

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,39 @@
1+
2+
span {
3+
&.rotate {
4+
img {
5+
transform: rotate(270deg)
6+
}
7+
}
8+
}
9+
10+
.add-option-button {
11+
color: rebeccapurple;
12+
cursor: pointer;
13+
}
14+
15+
.options-list {
16+
display: flex;
17+
flex-direction: column;
18+
19+
.option-line {
20+
display: flex;
21+
flex-direction: row;
22+
23+
.option {
24+
flex-grow: 1;
25+
}
26+
}
27+
28+
}
29+
30+
131
.question-component {
232

333
display: flex;
434
flex-direction: row;
535

6-
.add-option-button {
7-
color: rebeccapurple;
8-
cursor: pointer;
9-
}
36+
1037

1138
.options-panel {
1239
background-color: #EDEDED;
@@ -53,7 +80,7 @@
5380
cursor: pointer;
5481
}
5582

56-
.field {
83+
/* .field {
5784
margin: 16px auto;
58-
}
85+
} */
5986
}

‎src/app/components/forms/section/section.component.html

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -14,41 +14,43 @@ <h4 class="header-text">{{
1414
<div class="card">
1515
<div class="card-body section-details">
1616
<form [formGroup]="sectionFormGroup">
17-
<div class="col-md-6">
18-
<div class="form-labeled-field">
19-
<div>
20-
<span>{{ "SECTION_TITLE" | translate }}</span>
17+
<div class="row">
18+
<div class="col-lg-6">
19+
<div class="form-labeled-field">
20+
<div>
21+
<span>{{ "SECTION_TITLE" | translate }}</span>
22+
</div>
23+
<div>
24+
<input
25+
class="form-control"
26+
formControlName="description"
27+
placeholder="{{ 'SECTION_TITLE_PLACEHOLDER' | translate }}"
28+
/>
29+
</div>
2130
</div>
22-
<div>
23-
<input
24-
class="form-control"
25-
formControlName="description"
26-
placeholder="{{ 'SECTION_TITLE_PLACEHOLDER' | translate }}"
27-
/>
31+
<div class="form-labeled-field">
32+
<div>
33+
<span>{{ "SECTION_CODE" | translate }}</span>
34+
</div>
35+
<div>
36+
<input
37+
class="form-control"
38+
formControlName="code"
39+
placeholder="{{ 'SECTION_CODE_PLACEHOLDER' | translate }}"
40+
/>
41+
</div>
2842
</div>
2943
</div>
30-
<div class="form-labeled-field">
31-
<div>
32-
<span>{{ "SECTION_CODE" | translate }}</span>
33-
</div>
34-
<div>
35-
<input
36-
class="form-control"
37-
formControlName="code"
38-
placeholder="{{ 'SECTION_CODE_PLACEHOLDER' | translate }}"
39-
/>
40-
</div>
41-
</div>
42-
</div>
43-
<div class="col-md-6">
44-
<!-- According to the design, this field should be here, but for now it has no correspondence in the model.-->
44+
<div class="col-lg-6">
45+
<!-- According to the design, this field should be here, but for now it has no correspondence in the model.-->
4546

46-
<!-- <div>-->
47-
<!-- <span>{{'SECTION_DESCRIPTION' | translate}}</span>-->
48-
<!-- </div>-->
49-
<!-- <div>-->
50-
<!-- <textarea rows="4" class="form-control" [(ngModel)]="section.description" placeholder="{{'SECTION_DESCRIPTION_PLACEHOLDER' | translate}}"></textarea>-->
51-
<!-- </div>-->
47+
<!-- <div>-->
48+
<!-- <span>{{'SECTION_DESCRIPTION' | translate}}</span>-->
49+
<!-- </div>-->
50+
<!-- <div>-->
51+
<!-- <textarea rows="4" class="form-control" [(ngModel)]="section.description" placeholder="{{'SECTION_DESCRIPTION_PLACEHOLDER' | translate}}"></textarea>-->
52+
<!-- </div>-->
53+
</div>
5254
</div>
5355
</form>
5456

‎src/app/components/forms/section/section.component.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@
4040
}
4141

4242
.icon-holder {
43-
display: flex;
43+
/* display: flex;
4444
flex-direction: column;
45-
justify-content: space-around;
45+
justify-content: space-around; */
4646

4747
cursor: pointer;
4848

49-
margin: auto 4px;
49+
margin: 12px 4px;
5050
}
5151

5252
.icon-reorder {

0 commit comments

Comments
 (0)