Merge pull request #1483 from DashboardHub/issue-1474

feature(design) #1474 fix design of project
DashboardHub · Sep 10, 2019 · f83afc6 · f83afc6
2 parents 3c87556 + 5233517
commit f83afc6
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 66 deletions.
diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
@@ -2,10 +2,6 @@
   <mat-sidenav #sidenav [mode]="sideNavMode" class="sidenav" [ngClass]="{'sidenav__open': menuTriger}" fixedInViewport="false" role="navigation" [opened]="!isSmallScreen">
     <div class="heading" (click)="openMenu($event)">
       <mat-icon svgIcon="logo_icon" class="heading__logo"></mat-icon>
-      <div class="heading__icon" *ngIf="!isSmallScreen" (click)="openMenu($event)">
-        <mat-icon class="heading__icon__item" *ngIf="menuTriger">keyboard_arrow_left</mat-icon>
-        <mat-icon class="heading__icon__item" *ngIf="!menuTriger">keyboard_arrow_right</mat-icon>
-      </div>
     </div>
     <mat-nav-list class="menu">
       <ng-container *ngFor="let item of publicRoutes">
@@ -100,14 +96,10 @@
       <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="40px" class="app-toolbar__profile-block">
         <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="10px">
           <div fxLayoutAlign="space-between center">
-            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between center" matTooltip="Login" class="app-toolbar__profile-block__button" (click)="login()" *ngIf="!isAuthenticated(); else notification" dashboardLogin>
+            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between center" matTooltip="Login" class="app-toolbar__profile-block__button" (click)="login()" *ngIf="!isAuthenticated()" dashboardLogin>
               Login
               <mat-icon class="app-toolbar__profile-block__icon" svgIcon="header_login_icon"></mat-icon>
             </div>
-            <ng-template #notification>
-              <mat-icon class="app-toolbar__profile-block__icon" svgIcon="header_notificarion_icon"></mat-icon>
-            </ng-template>
-
           </div>
           <div>
             <a matTooltip="Github" href="http://github.com/DashboardHub/PipelineDashboard" target="_blank" fxLayout="row" fxLayoutAlign="space-between center">
@@ -140,18 +132,20 @@
       </div>
       <div fxLayout="row" fxLayout.lt-lg="column-reverse">
         <div fxLayout="row">
-          <!-- <div>
+          <!--
+          <div>
             <div [routerLink]="['/privacy']" class="footer__button">
               <mat-icon svgIcon="private_toolbar_icon"></mat-icon>
               Privacy
             </div>
           </div>
           <div>
-            <div [routerLink]="['/terms-and-conditions']" class="footer__button">
+            <div class="footer__button">
               <mat-icon svgIcon="terms_toolbar_icon"></mat-icon>
               Terms & Conditions
             </div>
-          </div> -->
+          </div>
+          -->
           <div>
             <div (click)="showDoorbell()" class="footer__button">
               <mat-icon svgIcon="feedback_toolbar_icon"></mat-icon>

diff --git a/web/src/app/main/components/features/features.component.html b/web/src/app/main/components/features/features.component.html
@@ -97,9 +97,9 @@
       <div class="feature__card__price__card__item">£0.00 Free</div>
     </mat-card>
     <div fxHide.gt-sm class="feature__card__price__card__price">£0.00 Free</div>
-    <!-- <mat-card fxHide.gt-sm class="feature__card__price__card__grey">
+    <mat-card fxHide.gt-sm class="feature__card__price__card__grey">
       <div class="feature__card__price__card__item">Choose</div>
-    </mat-card> -->
+    </mat-card>
   </div>
   <div class="feature__card__content">
     <div *ngFor="let item of starter" class="feature__card__content__item" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="center center">

diff --git a/web/src/app/main/components/features/features.component.scss b/web/src/app/main/components/features/features.component.scss
@@ -24,6 +24,7 @@
 
       &__title {
         font-size: 16px;
+        white-space: nowrap;
       }
 
       &__card {
@@ -33,6 +34,7 @@
 
         &__item {
           color: $dark-grey-color;
+          white-space: nowrap;
           font-size: 30px;
           padding: 0 5px;
         }
@@ -50,7 +52,7 @@
 
         }
 
-        @media (max-width: $breakpoint-sm) {
+        @media (max-width: $breakpoint-md) {
           &__item {
             font-size: 22px;
           }
@@ -86,7 +88,7 @@
 
       @media (max-width: $breakpoint-md) {
         &__title {
-          font-size: 12px;
+          font-size: 20px;
         }
 
       }
@@ -218,7 +220,7 @@
       }
     }
 
-    @media (max-width: $breakpoint-sm) {
+    @media (max-width: 960px) {
       &__content {
         &__item {
           display: flex;

diff --git a/web/src/app/main/components/features/features.component.ts b/web/src/app/main/components/features/features.component.ts
@@ -59,7 +59,7 @@ export class FeaturesComponent implements OnInit {
     },
     {
       icon: 'graphs_icon',
-      name: 'Deployments/Releases graphs',
+      name: 'Deployments /  Releases graphs',
       value: false,
     },
     {
@@ -116,7 +116,7 @@ export class FeaturesComponent implements OnInit {
     },
     {
       icon: 'graphs_icon',
-      name: 'Deployments/Releases graphs',
+      name: 'Deployments / Releases graphs',
       value: false,
     },
     {
@@ -173,7 +173,7 @@ export class FeaturesComponent implements OnInit {
     },
     {
       icon: 'graphs_icon',
-      name: 'Deployments/Releases graphs',
+      name: 'Deployments / Releases graphs',
       value: false,
     },
     {

diff --git a/web/src/app/monitors/monitors-list/monitors-list.component.html b/web/src/app/monitors/monitors-list/monitors-list.component.html
@@ -8,7 +8,10 @@
         {{ project.title }} >
       </a><span>Monitors</span>
     </div>
-    <div>
+    <div fxLayout="row" fxLayoutGap="5px">
+      <div class="monitor-list__header__pings" fxLayout="row" fxLayoutGap="5px" fxHide.lt-md>
+        <mat-icon svgIcon="ping_icon"></mat-icon><span>{{ project.getTotalPings() }} | Total Pings</span>
+      </div>
       <button mat-button class="monitor-list__header__add-button" [routerLink]="[ './create' ]">
         <mat-icon svgIcon="create_project_icon"></mat-icon>
         Add monitor
@@ -60,13 +63,15 @@
         <ng-container matColumnDef="ping">
           <th mat-header-cell *matHeaderCellDef>Ping</th>
           <td mat-cell *matCellDef="let element" class="monitor-list__card__content__table__ping">
-            <span>Successful pings: {{ element.successfulPings || 0 }} | Unsuccessful pings : {{ element.unsuccessgulPings || 0 }}</span>
+            <span>Successful pings: {{ element.successfulPings || 0 }} | Unsuccessful pings :
+              {{ element.unsuccessfulPings || 0 }}</span>
           </td>
         </ng-container>
         <ng-container matColumnDef="action">
           <th mat-header-cell *matHeaderCellDef></th>
           <td mat-cell *matCellDef="let element">
-            <mat-icon [matMenuTriggerFor]="menu" class="project__list__actions">more_horiz</mat-icon>
+            <mat-icon [matMenuTriggerFor]="menu" class="monitor-list__card__content__table__action">more_horiz
+            </mat-icon>
             <mat-menu #menu="matMenu">
               <button mat-menu-item [disabled]="manualPing || !project.url" (click)="pingMonitor(element.uid)">
                 <mat-icon svgIcon="ping_icon"></mat-icon>Ping

diff --git a/web/src/app/monitors/monitors-list/monitors-list.component.scss b/web/src/app/monitors/monitors-list/monitors-list.component.scss
@@ -1,5 +1,6 @@
 @import "../../../assets/scss/variable";
 @import "../../../assets/scss/mixin.scss";
+
 .monitor-list {
   @include pageContainer;
 
@@ -12,6 +13,19 @@
       background-color: $orange-3-color
     }
 
+    &__pings {
+      border-radius: 4px;
+      background-color: #fff;
+      cursor: default;
+      height: 35px;
+      display: flex;
+      font-size: 14px;
+      align-items: center;
+      justify-content: center;
+      padding: 0 10px;
+      font-weight: lighter;
+    }
+
     &__content {
       &__avatar {
         cursor: pointer;
@@ -71,6 +85,10 @@
           @include ellipsisText;
           max-width: 15vw;
         }
+
+        &__action {
+          cursor: pointer;
+        }
       }
     }
   }