简柏林 / thingskit · Commits

Commit 5da827bf4859265116a953affe6ad86f3d83496f

Authored by ArtemDzhereleiko
1 parent 77b9a8c1

UI: Fix layout for firefox

Inline Side-by-side
Showing 2 changed files with 25 additions and 23 deletions
@@ -295,8 +295,7 @@ @@ -295,8 +295,7 @@
295 <mat-panel-title translate>widget-config.data-settings</mat-panel-title> 295 <mat-panel-title translate>widget-config.data-settings</mat-panel-title>
296 </mat-expansion-panel-header> 296 </mat-expansion-panel-header>
297 <ng-template matExpansionPanelContent> 297 <ng-template matExpansionPanelContent>
298 - <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"  
299 - fxLayoutGap="8px"> 298 + <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px">
300 <mat-form-field fxFlex> 299 <mat-form-field fxFlex>
301 <mat-label translate>widget-config.units</mat-label> 300 <mat-label translate>widget-config.units</mat-label>
302 <input matInput formControlName="units"> 301 <input matInput formControlName="units">
@@ -320,13 +319,12 @@ @@ -320,13 +319,12 @@
320 <mat-tab label="{{ 'widget-config.settings' | translate }}"> 319 <mat-tab label="{{ 'widget-config.settings' | translate }}">
321 <div class="mat-content mat-padding" fxLayout="column"> 320 <div class="mat-content mat-padding" fxLayout="column">
322 <div [formGroup]="widgetSettings" fxLayout="column"> 321 <div [formGroup]="widgetSettings" fxLayout="column">
323 - <fieldset class="fields-group" fxLayout="column"> 322 + <fieldset class="fields-group">
324 <legend class="group-title" translate>widget-config.title</legend> 323 <legend class="group-title" translate>widget-config.title</legend>
325 - <mat-slide-toggle formControlName="showTitle" style="margin: 8px 0"> 324 + <mat-slide-toggle class="mat-slide" formControlName="showTitle">
326 {{ 'widget-config.display-title' | translate }} 325 {{ 'widget-config.display-title' | translate }}
327 </mat-slide-toggle> 326 </mat-slide-toggle>
328 - <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"  
329 - fxLayoutGap="8px"> 327 + <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px">
330 <mat-form-field fxFlex> 328 <mat-form-field fxFlex>
331 <mat-label translate>widget-config.title</mat-label> 329 <mat-label translate>widget-config.title</mat-label>
332 <input matInput formControlName="title"> 330 <input matInput formControlName="title">
@@ -336,13 +334,12 @@ @@ -336,13 +334,12 @@
336 <input matInput formControlName="titleTooltip"> 334 <input matInput formControlName="titleTooltip">
337 </mat-form-field> 335 </mat-form-field>
338 </div> 336 </div>
339 - <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px" style="margin: 0"> 337 + <fieldset class="fields-group" fxLayoutGap="8px" style="margin: 0">
340 <legend class="group-title" translate>widget-config.title-icon</legend> 338 <legend class="group-title" translate>widget-config.title-icon</legend>
341 - <mat-slide-toggle formControlName="showTitleIcon"> 339 + <mat-slide-toggle class="mat-slide" formControlName="showTitleIcon">
342 {{ 'widget-config.display-icon' | translate }} 340 {{ 'widget-config.display-icon' | translate }}
343 </mat-slide-toggle> 341 </mat-slide-toggle>
344 - <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row wrap" fxLayoutAlign="start center"  
345 - fxLayoutGap="8px"> 342 + <div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="8px">
346 <tb-material-icon-select fxFlex 343 <tb-material-icon-select fxFlex
347 formControlName="titleIcon"> 344 formControlName="titleIcon">
348 </tb-material-icon-select> 345 </tb-material-icon-select>
@@ -374,12 +371,10 @@ @@ -374,12 +371,10 @@
374 </ng-template> 371 </ng-template>
375 </mat-expansion-panel> 372 </mat-expansion-panel>
376 </fieldset> 373 </fieldset>
377 - <fieldset class="fields-group" fxLayout="column"> 374 + <fieldset class="fields-group">
378 <legend class="group-title" translate>widget-config.widget-style</legend> 375 <legend class="group-title" translate>widget-config.widget-style</legend>
379 - <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-md="row" fxLayoutAlign.gt-md="start center"  
380 - fxFlex="100%" fxLayoutGap="8px" class="tb-widget-style">  
381 - <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"  
382 - fxLayoutGap="8px" fxFlex.gt-md> 376 + <div fxLayout="column" fxLayout.gt-md="row wrap" fxFlex fxLayoutGap="8px" class="tb-widget-style">
  377 + <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex>
383 <tb-color-input fxFlex 378 <tb-color-input fxFlex
384 label="{{'widget-config.background-color' | translate}}" 379 label="{{'widget-config.background-color' | translate}}"
385 icon="format_color_fill" 380 icon="format_color_fill"
@@ -393,8 +388,7 @@ @@ -393,8 +388,7 @@
393 formControlName="color"> 388 formControlName="color">
394 </tb-color-input> 389 </tb-color-input>
395 </div> 390 </div>
396 - <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"  
397 - fxLayoutGap="8px" fxFlex.gt-md> 391 + <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex>
398 <mat-form-field fxFlex> 392 <mat-form-field fxFlex>
399 <mat-label translate>widget-config.padding</mat-label> 393 <mat-label translate>widget-config.padding</mat-label>
400 <input matInput formControlName="padding"> 394 <input matInput formControlName="padding">
@@ -405,10 +399,10 @@ @@ -405,10 +399,10 @@
405 </mat-form-field> 399 </mat-form-field>
406 </div> 400 </div>
407 </div> 401 </div>
408 - <mat-slide-toggle formControlName="dropShadow" style="margin-bottom: 8px"> 402 + <mat-slide-toggle class="slide-block" formControlName="dropShadow">
409 {{ 'widget-config.drop-shadow' | translate }} 403 {{ 'widget-config.drop-shadow' | translate }}
410 </mat-slide-toggle> 404 </mat-slide-toggle>
411 - <mat-slide-toggle formControlName="enableFullscreen"> 405 + <mat-slide-toggle class="slide-block" formControlName="enableFullscreen">
412 {{ 'widget-config.enable-fullscreen' | translate }} 406 {{ 'widget-config.enable-fullscreen' | translate }}
413 </mat-slide-toggle> 407 </mat-slide-toggle>
414 <mat-expansion-panel class="tb-settings"> 408 <mat-expansion-panel class="tb-settings">
@@ -427,7 +421,7 @@ @@ -427,7 +421,7 @@
427 </ng-template> 421 </ng-template>
428 </mat-expansion-panel> 422 </mat-expansion-panel>
429 </fieldset> 423 </fieldset>
430 - <fieldset class="fields-group fields-group-slider" fxLayout="column"> 424 + <fieldset class="fields-group fields-group-slider">
431 <legend class="group-title" translate>widget-config.legend</legend> 425 <legend class="group-title" translate>widget-config.legend</legend>
432 <mat-expansion-panel class="tb-settings"> 426 <mat-expansion-panel class="tb-settings">
433 <mat-expansion-panel-header fxLayout="row wrap"> 427 <mat-expansion-panel-header fxLayout="row wrap">
@@ -445,7 +439,7 @@ @@ -445,7 +439,7 @@
445 </ng-template> 439 </ng-template>
446 </mat-expansion-panel> 440 </mat-expansion-panel>
447 </fieldset> 441 </fieldset>
448 - <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider" fxLayout="column"> 442 + <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider">
449 <legend class="group-title" translate>widget-config.mobile-mode-settings</legend> 443 <legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
450 <mat-expansion-panel class="tb-settings"> 444 <mat-expansion-panel class="tb-settings">
451 <mat-expansion-panel-header> 445 <mat-expansion-panel-header>
@@ -459,8 +453,7 @@ @@ -459,8 +453,7 @@
459 </mat-panel-description> 453 </mat-panel-description>
460 </mat-expansion-panel-header> 454 </mat-expansion-panel-header>
461 <ng-template matExpansionPanelContent> 455 <ng-template matExpansionPanelContent>
462 - <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"  
463 - fxLayoutGap="8px"> 456 + <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" fxFlex>
464 <mat-form-field fxFlex> 457 <mat-form-field fxFlex>
465 <mat-label translate>widget-config.order</mat-label> 458 <mat-label translate>widget-config.order</mat-label>
466 <input matInput formControlName="mobileOrder" type="number" step="1"> 459 <input matInput formControlName="mobileOrder" type="number" step="1">
@@ -201,6 +201,15 @@ @@ -201,6 +201,15 @@
201 } 201 }
202 } 202 }
203 } 203 }
  204 + .mat-slide {
  205 + margin: 8px 0;
  206 + }
  207 + .slide-block {
  208 + display: block;
  209 + &:not(:last-child) {
  210 + margin-bottom: 8px;
  211 + }
  212 + }
204 .mat-slide-toggle-content { 213 .mat-slide-toggle-content {
205 white-space: normal; 214 white-space: normal;
206 } 215 }