Format CSS/HTML with prettier

ThingooKNI · Jul 18, 2021 · 5910e19 · 5910e19
1 parent 7fcafa7
commit 5910e19
Show file tree

Hide file tree

Showing 22 changed files with 199 additions and 162 deletions.
diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
@@ -1,4 +1,7 @@
-<app-section-header iconName="dashboard" sectionTitle="Dashboard"></app-section-header>
+<app-section-header
+  iconName="dashboard"
+  sectionTitle="Dashboard"
+></app-section-header>
 <div class="content-wrapper padded-content">
-    <h1>Nothing here yet!</h1>
+  <h1>Nothing here yet!</h1>
 </div>
diff --git a/src/app/pages/device-details/device-details.component.html b/src/app/pages/device-details/device-details.component.html
@@ -1,23 +1,38 @@
-<app-section-header iconName="sensors" [isExpanded]="true" class="device-details__header">
-    <div class="section basic-info">
-      <span class="device-name">
-        {{ device.displayName }}
-      </span>
-      <div class="device-entities">
-        {{ device.entities.length }}
-        <span class="entities-text">ENTITIES</span>
-      </div>
-    </div>
-    <div class="section spacer"></div>
-    <div class="section details-info">
-      <app-value-row name="key" [value]="device.key" [nameWidth]=50></app-value-row>
-      <app-value-row name="mac" [value]="device.macAddress" [nameWidth]=50></app-value-row>
+<app-section-header
+  iconName="sensors"
+  [isExpanded]="true"
+  class="device-details__header"
+>
+  <div class="section basic-info">
+    <span class="device-name">
+      {{ device.displayName }}
+    </span>
+    <div class="device-entities">
+      {{ device.entities.length }}
+      <span class="entities-text">ENTITIES</span>
     </div>
+  </div>
+  <div class="section spacer"></div>
+  <div class="section details-info">
+    <app-value-row
+      name="key"
+      [value]="device.key"
+      [nameWidth]="50"
+    ></app-value-row>
+    <app-value-row
+      name="mac"
+      [value]="device.macAddress"
+      [nameWidth]="50"
+    ></app-value-row>
+  </div>
 </app-section-header>
 
 <div class="device-details__entities content-wrapper padded-content">
   <h1 class="entities-header">Entities:</h1>
   <div class="entities-list">
-    <app-entity-card *ngFor="let entity of device.entities" [entity]="entity"></app-entity-card>
+    <app-entity-card
+      *ngFor="let entity of device.entities"
+      [entity]="entity"
+    ></app-entity-card>
   </div>
 </div>
diff --git a/src/app/pages/device-list/device-list.component.html b/src/app/pages/device-list/device-list.component.html
@@ -1,10 +1,15 @@
-<app-section-header sectionTitle="Devices" iconName="build"
-                    sectionSubtitle="See which devices are currently connected.">
+<app-section-header
+  sectionTitle="Devices"
+  iconName="build"
+  sectionSubtitle="See which devices are currently connected."
+>
 </app-section-header>
 
 <div class="device-list content-wrapper padded-content">
   <div class="device-list__content">
-    <h1 class="device-list__text" *ngIf="devicesList.length == 0">You have no devices at this moment.</h1>
+    <h1 class="device-list__text" *ngIf="devicesList.length == 0">
+      You have no devices at this moment.
+    </h1>
     <app-device-card
       *ngFor="let device of devicesList"
       [device]="device"

diff --git a/src/app/pages/user-profile/user-profile.component.html b/src/app/pages/user-profile/user-profile.component.html
@@ -1,6 +1,14 @@
 <app-section-header iconName="account_circle" sectionTitle="Profile">
   <div class="user-profile">
-    <app-value-row [nameWidth]="75" name="nick" [value]="authService.userProfile.preferred_username"></app-value-row>
-    <app-value-row [nameWidth]="75" name="email" [value]="authService.userProfile.email"></app-value-row>
+    <app-value-row
+      [nameWidth]="75"
+      name="nick"
+      [value]="authService.userProfile.preferred_username"
+    ></app-value-row>
+    <app-value-row
+      [nameWidth]="75"
+      name="email"
+      [value]="authService.userProfile.email"
+    ></app-value-row>
   </div>
 </app-section-header>
diff --git a/src/app/pages/user-profile/user-profile.component.scss b/src/app/pages/user-profile/user-profile.component.scss
@@ -1,6 +1,6 @@
 .user-profile {
-    margin-left: 8vw;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
+  margin-left: 8vw;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 }
diff --git a/src/app/shared/device-card/device-card.component.html b/src/app/shared/device-card/device-card.component.html
@@ -1,7 +1,15 @@
 <mat-card class="device-card" [routerLink]="device.id.toString()">
-    <mat-card-content class="device-card__content">
-        <app-device-icon class="device-card__icon" iconName="sensors" [size]=70></app-device-icon>
-        <mat-card-title class="device-card__title">{{ device.displayName }}</mat-card-title>
-        <mat-card-subtitle class="device-card__subtitle">entities: {{ device.entities.length }}</mat-card-subtitle>
-    </mat-card-content>
+  <mat-card-content class="device-card__content">
+    <app-device-icon
+      class="device-card__icon"
+      iconName="sensors"
+      [size]="70"
+    ></app-device-icon>
+    <mat-card-title class="device-card__title">{{
+      device.displayName
+    }}</mat-card-title>
+    <mat-card-subtitle class="device-card__subtitle"
+      >entities: {{ device.entities.length }}</mat-card-subtitle
+    >
+  </mat-card-content>
 </mat-card>
diff --git a/src/app/shared/device-card/device-card.component.scss b/src/app/shared/device-card/device-card.component.scss
@@ -1,24 +1,24 @@
-@import '~@angular/material/theming';
+@import "~@angular/material/theming";
 @import "~src/variables.scss";
 @import "~src/mixins.scss";
 
 .device-card {
-    padding: 30px;
+  padding: 30px;
 
-    @include mat-card-hover;
+  @include mat-card-hover;
 
-    &__content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 
-    &__title {
-        margin-top: 30px !important;
-    }
+  &__title {
+    margin-top: 30px !important;
+  }
 
-    &__subtitle {
-        color: darken($color: $thingoo-text, $amount: 30%);
-        font-size: 13px;
-    }
+  &__subtitle {
+    color: darken($color: $thingoo-text, $amount: 30%);
+    font-size: 13px;
+  }
 }
diff --git a/src/app/shared/device-card/device-card.component.ts b/src/app/shared/device-card/device-card.component.ts
@@ -4,14 +4,12 @@ import { Device } from 'src/app/api/device.model';
 @Component({
   selector: 'app-device-card',
   templateUrl: './device-card.component.html',
-  styleUrls: ['./device-card.component.scss']
+  styleUrls: ['./device-card.component.scss'],
 })
 export class DeviceCardComponent implements OnInit {
   @Input() device!: Device;
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }
diff --git a/src/app/shared/device-icon/device-icon.component.html b/src/app/shared/device-icon/device-icon.component.html
@@ -1,7 +1,10 @@
 <div class="device-icon">
-    <div class="device-icon__container" [ngStyle]="{'height.px':[size], 'width.px':[size]}">
-        <span class="material-icons" [ngStyle]="{'fontSize.px':[size * 0.55]}">
-            {{ iconName }}
-        </span>
-    </div>
+  <div
+    class="device-icon__container"
+    [ngStyle]="{ 'height.px': [size], 'width.px': [size] }"
+  >
+    <span class="material-icons" [ngStyle]="{ 'fontSize.px': [size * 0.55] }">
+      {{ iconName }}
+    </span>
+  </div>
 </div>
diff --git a/src/app/shared/device-icon/device-icon.component.scss b/src/app/shared/device-icon/device-icon.component.scss
@@ -1,10 +1,10 @@
 .device-icon {
-    &__container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+  &__container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-        border-radius: 50%;
-        background-color: transparentize($color: white, $amount: 0.8)
-    }
+    border-radius: 50%;
+    background-color: transparentize($color: white, $amount: 0.8);
+  }
 }
diff --git a/src/app/shared/device-icon/device-icon.component.ts b/src/app/shared/device-icon/device-icon.component.ts
@@ -3,15 +3,13 @@ import { Component, Input, OnInit } from '@angular/core';
 @Component({
   selector: 'app-device-icon',
   templateUrl: './device-icon.component.html',
-  styleUrls: ['./device-icon.component.scss']
+  styleUrls: ['./device-icon.component.scss'],
 })
 export class DeviceIconComponent implements OnInit {
   @Input() size!: number;
   @Input() iconName!: string;
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }
diff --git a/src/app/shared/entity-card/entity-card.component.html b/src/app/shared/entity-card/entity-card.component.html
@@ -1,10 +1,14 @@
 <mat-card class="entity-card">
-    <mat-card-content class="entity-card__content">
-        <app-device-icon class="entity-card__icon" iconName="keyboard_voice" [size]=70></app-device-icon>
-        <mat-card-subtitle class="entity-card__name">{{ entity.displayName }}</mat-card-subtitle>
-        <mat-card-title class="entity-card__value">24 dB</mat-card-title>
-        <div class="entity-card__timestamp">
-            42 minutes ago
-        </div>
-    </mat-card-content>
+  <mat-card-content class="entity-card__content">
+    <app-device-icon
+      class="entity-card__icon"
+      iconName="keyboard_voice"
+      [size]="70"
+    ></app-device-icon>
+    <mat-card-subtitle class="entity-card__name">{{
+      entity.displayName
+    }}</mat-card-subtitle>
+    <mat-card-title class="entity-card__value">24 dB</mat-card-title>
+    <div class="entity-card__timestamp">42 minutes ago</div>
+  </mat-card-content>
 </mat-card>
diff --git a/src/app/shared/entity-card/entity-card.component.scss b/src/app/shared/entity-card/entity-card.component.scss
@@ -1,30 +1,30 @@
-@import '~@angular/material/theming';
+@import "~@angular/material/theming";
 @import "~src/variables.scss";
 @import "~src/mixins.scss";
 
 .entity-card {
-    padding: 20px 35px;
+  padding: 20px 35px;
 
-    @include mat-card-hover;
+  @include mat-card-hover;
 
-    &__content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 
-    &__name {
-        margin-top: 12px !important;
-        margin-bottom: 30px;
-        font-size: 16px;
-    }
+  &__name {
+    margin-top: 12px !important;
+    margin-bottom: 30px;
+    font-size: 16px;
+  }
 
-    &__value {
-        font-size: 24px;
-    }
+  &__value {
+    font-size: 24px;
+  }
 
-    &__timestamp {
-        color: darken($color: $thingoo-text, $amount: 30%);
-        font-size: 13px;
-    }
+  &__timestamp {
+    color: darken($color: $thingoo-text, $amount: 30%);
+    font-size: 13px;
+  }
 }
diff --git a/src/app/shared/entity-card/entity-card.component.ts b/src/app/shared/entity-card/entity-card.component.ts
@@ -4,14 +4,12 @@ import { Entity } from 'src/app/api/entity.model';
 @Component({
   selector: 'app-entity-card',
   templateUrl: './entity-card.component.html',
-  styleUrls: ['./entity-card.component.scss']
+  styleUrls: ['./entity-card.component.scss'],
 })
 export class EntityCardComponent implements OnInit {
   @Input() entity!: Entity;
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }
diff --git a/src/app/shared/section-header/section-header.component.html b/src/app/shared/section-header/section-header.component.html
@@ -1,11 +1,12 @@
 <div class="section-header" [class.expanded]="isExpanded">
-    <div class="section-header__content content-wrapper">
-        <app-device-icon [iconName]="iconName" [size]=80></app-device-icon>
-        <div class="section-title" *ngIf="sectionTitle">
-            <div class="title-text">{{ sectionTitle }}</div>
-            <div class="subtitle-text" *ngIf="sectionSubtitle">{{ sectionSubtitle }}</div>
-        </div>
-        <ng-content></ng-content>
+  <div class="section-header__content content-wrapper">
+    <app-device-icon [iconName]="iconName" [size]="80"></app-device-icon>
+    <div class="section-title" *ngIf="sectionTitle">
+      <div class="title-text">{{ sectionTitle }}</div>
+      <div class="subtitle-text" *ngIf="sectionSubtitle">
+        {{ sectionSubtitle }}
+      </div>
     </div>
+    <ng-content></ng-content>
+  </div>
 </div>
-