Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(*): Improved layout of note details in mobile view #1290

Merged
merged 18 commits into from
Jul 4, 2022
Merged

fix(*): Improved layout of note details in mobile view #1290

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
aef984a
fix(*): Improved layout of note details in mobile view
TheSlimvReal May 25, 2022
033b539
Merge branch 'master' into note_attendance_mobile
TheSlimvReal May 26, 2022
1b3f36e
Center the indicator
Schottkyc137 May 26, 2022
3b48fe2
replace fxFlex with flex
Schottkyc137 May 26, 2022
db3f04c
Merge remote-tracking branch 'origin/note_attendance_mobile' into not…
Schottkyc137 May 26, 2022
c76b329
Merge branch 'master' into note_attendance_mobile
sleidig Jun 3, 2022
961d250
better margins
sleidig Jun 3, 2022
f572296
Merge branch 'master' into note_attendance_mobile
sleidig Jun 3, 2022
95aa9e7
Merge remote-tracking branch 'origin/master' into note_attendance_mobile
Schottkyc137 Jun 20, 2022
4075894
fix styles
Schottkyc137 Jun 20, 2022
652e779
Implement a working prototype for a new design
Schottkyc137 Jun 30, 2022
2480156
Rework basic design
Schottkyc137 Jun 30, 2022
de6e8f7
Component works different on screens with different sizes
Schottkyc137 Jun 30, 2022
dab06b6
Add some comments
Schottkyc137 Jun 30, 2022
12bb9de
Merge remote-tracking branch 'origin/master' into note_attendance_mobile
Schottkyc137 Jun 30, 2022
49f7dea
removed justify content to have elements left aligned
TheSlimvReal Jul 4, 2022
04ecb1b
moved meeting attendance section to own component
TheSlimvReal Jul 4, 2022
21a9c29
fixed e2e test
TheSlimvReal Jul 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions ...d-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@
display: inline-block;
vertical-align: text-top;
border-radius: 50%;

margin-right: 8px;
margin-top: 3px;
}

.compact-form-field {
margin-bottom: -10px;
margin-top: -10px;
}
39 changes: 19 additions & 20 deletions .../notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
<div fxLayout="col" fxLayoutGap="4px" fxLayoutAlign="start baseline">
<div class="actions" fxFlex="40px" *ngIf="!disabled">
<button mat-icon-button (click)="remove.emit()">
<fa-icon icon="times"></fa-icon>
</button>
</div>
<div class="attendance-box">

<div class="content-wrapper">
<app-child-block [entityId]="childId"></app-child-block>

<div fxFlex="250px">
<app-attendance-status-select
[(value)]="attendance.status"
(valueChange)="change.emit(attendance)"
[disabled]="disabled"
>
</app-attendance-status-select>
</div>

<app-child-block [entityId]="childId" fxFlex> </app-child-block>
<mat-form-field class="flex-grow">
<input
matInput
i18n-placeholder
placeholder="Remarks"
name="remarks"
type="text"
[(ngModel)]="attendance.remarks"
[disabled]="disabled"
/>
</mat-form-field>
</div>

<mat-form-field class="dense-form-field" fxFlex>
<input
matInput
i18n-placeholder
placeholder="Remarks"
name="remarks"
type="text"
[(ngModel)]="attendance.remarks"
[disabled]="disabled"
/>
</mat-form-field>
<button mat-icon-button>
<fa-icon *ngIf="!disabled" icon="trash" (click)="remove.emit()"></fa-icon>
</button>
</div>
19 changes: 17 additions & 2 deletions .../notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,21 @@
display: none;
}

.dense-form-field {
margin-top: -1em;
.attendance-box {
border: 1px solid lightgrey;
border-radius: 5px;
padding: 10px;
margin-bottom: 7px;
display: flex;
align-items: center;
gap: 12px;
}

.content-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
gap: 12px;
flex-grow: 1;
}
2 changes: 1 addition & 1 deletion src/app/child-dev-project/notes/note-details/note-details.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default {
{ provide: MatDialogRef, useValue: {} },
{
provide: ChildrenService,
useValue: { getChild: () => of(new Child()) },
useValue: { getChild: () => of(Child.create("John Doe")) },
},
],
}),
Expand Down
2 changes: 0 additions & 2 deletions src/app/child-dev-project/notes/notes.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { NotesManagerComponent } from "./notes-manager/notes-manager.component";
import { MatExpansionModule } from "@angular/material/expansion";
import { MatButtonToggleModule } from "@angular/material/button-toggle";
import { MatTableModule } from "@angular/material/table";
import { FlexLayoutModule } from "@angular/flex-layout";
import { RouterModule } from "@angular/router";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
Expand Down Expand Up @@ -61,7 +60,6 @@ import { ExportModule } from "../../core/export/export.module";
CommonModule,
FormsModule,
ConfirmationDialogModule,
FlexLayoutModule,
RouterModule,
MatFormFieldModule,
MatInputModule,
Expand Down
4 changes: 1 addition & 3 deletions src/app/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,7 @@ const userGenerator = new DemoUserGeneratorService();
const data = new DemoNoteGeneratorService(
{ minNotesPerChild: 5, maxNotesPerChild: 10, groupNotes: 2 },
childGenerator,
userGenerator,
schemaService,
configService
userGenerator
).generateEntities();

export default {
Expand Down
8 changes: 8 additions & 0 deletions src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,3 +274,11 @@ $standard-icon-size: 1.5em;
.margin-bottom-small {
margin-bottom: $standard-margin-small;
}

/**
* Flex
*/

.flex-grow {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isn't this something FlexLayoutModule can provide?
@Schottkyc137, wanna keep an eye on this while refactoring and cleaning up the styles?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually do believe that this is a better way of doing things (I am using a similar approach while refactoring). I actually think that we should get rid of FxFlex altogether. We will probably have a discussion about this topic when I'm ready for review but the basic reasoning is that CSS flex classes are in most cases (all that I have encountered in the app) just as potent and – at least from my point of view – more clear than fxFlex. The latter works using "magic" by using styles that are added dynamically via scripts. This is almost never needed.

flex-grow: 1;
}