Fixed motion mobile view on iOS.

This commit is contained in:
Emanuel Schütze 2019-05-22 22:31:07 +02:00
parent f52ca7d941
commit 63daac7b65
4 changed files with 20 additions and 12 deletions

View File

@ -132,18 +132,15 @@
</div> </div>
<ng-template #mobileView> <ng-template #mobileView>
<div *ngIf="motion"> <div *ngIf="motion" class="mobile-view">
<!-- Meta info -->
<div class="hspacing"><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
<mat-divider *ngIf="!editMotion" class="spacer-top-10 spacer-bottom-20"></mat-divider> <!-- Meta info -->
<div class="on-transition-fade"><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
<!-- Content --> <!-- Content -->
<div class="hspacing" [ngClass]="editMotion ? 'os-form-card-mobile' : 'os-card-mobile'"> <mat-card [ngClass]="editMotion ? 'os-form-card-mobile' : 'os-card'">
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container> <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</div> </mat-card>
<mat-divider *ngIf="!editMotion" class="spacer-top-10 spacer-bottom-20"></mat-divider>
<!-- Comments --> <!-- Comments -->
<os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments> <os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments>
@ -157,9 +154,7 @@
<div class="desktop-view" *ngIf="motion"> <div class="desktop-view" *ngIf="motion">
<div class="desktop-left on-transition-fade"> <div class="desktop-left on-transition-fade">
<!-- Meta Info --> <!-- Meta Info -->
<div class="meta-info-block meta-info-desktop"> <div><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
<ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container>
</div>
<os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments> <os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments>
<os-personal-note *ngIf="!editMotion && !operator.isAnonymous" [motion]="motion"></os-personal-note> <os-personal-note *ngIf="!editMotion && !operator.isAnonymous" [motion]="motion"></os-personal-note>

View File

@ -156,6 +156,12 @@ span {
} }
} }
.mobile-view {
.os-card {
padding: 27px;
max-width: calc(100% - 54px);
}
}
.title-line { .title-line {
display: flex; display: flex;
} }

View File

@ -90,7 +90,7 @@
<!-- recommendation line --> <!-- recommendation line -->
<div <div
*ngIf="motion.recommendation && motion.state.next_states_id.length > 0" *ngIf="motion.recommendation && motion.state.next_states_id.length > 0"
class="ellipsis-overflow white" class="ellipsis-overflow white spacer-top-3"
> >
<mat-basic-chip class="bluegrey" [disabled]="true"> <mat-basic-chip class="bluegrey" [disabled]="true">
{{ getRecommendationLabel(motion) }} {{ getRecommendationLabel(motion) }}

View File

@ -266,6 +266,7 @@ mat-card {
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
font-size: 16px; font-size: 16px;
padding: 27px;
.mat-form-field { .mat-form-field {
width: 100%; width: 100%;
@ -274,6 +275,9 @@ mat-card {
} }
.os-form-card-mobile { .os-form-card-mobile {
margin-top: 20px !important;
margin-bottom: 20px !important;
.mat-form-field, .mat-form-field,
.mat-select { .mat-select {
width: 100%; width: 100%;
@ -498,6 +502,9 @@ button.mat-menu-item.selected {
} }
/** helper classes for margin/padding */ /** helper classes for margin/padding */
.spacer-top-3 {
margin-top: 3px !important;
}
.spacer-top-10 { .spacer-top-10 {
margin-top: 10px !important; margin-top: 10px !important;
} }