card shadow (#150)

ludeknovy · May 13, 2021 · 5acce58 · 5acce58
1 parent 3a5f94f
commit 5acce58
Show file tree

Hide file tree

Showing 15 changed files with 30 additions and 26 deletions.
diff --git a/src/app/administration/api-token/api-keys.component.html b/src/app/administration/api-token/api-keys.component.html
@@ -8,7 +8,7 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col">
-        <div class="card card-content">
+        <div class="card card-content card-shadow">
           <div class="card-body" *ngIf="apiKeys$ | async; let apiKeys">
             <div class="card-body">
               <div class="table-responsive" *ngIf="apiKeys$ | async; let apiKeys">

diff --git a/src/app/administration/my-profile/my-profile.component.html b/src/app/administration/my-profile/my-profile.component.html
@@ -7,7 +7,7 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-md-4">
-        <div class="card card-content">
+        <div class="card card-content card-shadow">
           <h6 class="card-header projects-header">Change password
           </h6>
           <div class="card-body">

diff --git a/src/app/administration/projects/administration.component.html b/src/app/administration/projects/administration.component.html
@@ -8,7 +8,7 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col">
-        <div class="card card-content">
+        <div class="card card-content card-shadow">
           <div class="card-body" *ngIf="projects$ | async; let projects">
             <div class="card-body">
               <div class="table-responsive" *ngIf="projects$ | async; let projects">

diff --git a/src/app/administration/users/users.component.html b/src/app/administration/users/users.component.html
@@ -8,7 +8,7 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col">
-        <div class="card card-content">
+        <div class="card card-content card-shadow">
           <div class="card-body" *ngIf="users$ | async; let users">
             <div class="card-body">
                 <div class="table-responsive" *ngIf="users$ | async; let users">

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
@@ -5,7 +5,7 @@
     <div class="stats">
       <div class="row" *ngIf="overallStats">
         <div class="col">
-          <div class="card">
+          <div class="card card-shadow">
             <div class="card-body">
               <div class="row">
 
@@ -65,7 +65,7 @@ <h2 *ngIf="overallStats.totalDuration < 60" class="card-title">{{
     <div class="recent-runs">
       <div class="row">
         <div class="col">
-          <div class="card recent-runs">
+          <div class="card recent-runs card-shadow">
             <h6 class="card-header bg-transparent">Recent Test Runs</h6>
             <div class="card-body ">
               <div class="table-responsive">

diff --git a/src/app/item-detail/analyze-charts/analyze-charts.component.html b/src/app/item-detail/analyze-charts/analyze-charts.component.html
@@ -1,4 +1,4 @@
-<div class="card" *ngIf="customChartsOptions">
+<div class="card card-shadow" *ngIf="customChartsOptions">
   <h6 class="card-header bg-transparent">
     Custom Chart
     <span class="float-right">

diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html
@@ -73,7 +73,7 @@
       <div class="row">
         <div class="col-sm">
           <div class="card">
-            <div class="card-body performance-overview-card">
+            <div class="card-body performance-overview-card card-shadow">
 
               <div class="row">
                 <div class="col-sm">
@@ -190,7 +190,7 @@ <h2 class="card-title">{{itemData.overview.errorRate}} <span
 
     </div>
 
-    <div class="overview-additional">
+    <div class="overview-additional card-shadow">
       <div class="row info">
         <div class="col-sm">
           <div class="date top">
@@ -254,7 +254,7 @@ <h2 class="card-title">{{itemData.overview.errorRate}} <span
             <ng-template ngbNavContent>
               <div class="row charts chart-fix">
                 <div class="col">
-                  <div class="card overview-chart-card">
+                  <div class="card overview-chart-card card-shadow">
                     <h6 class="card-header bg-transparent">Overall Chart</h6>
                     <div class="card-body">
                       <div class="chart">
@@ -291,7 +291,7 @@ <h6 class="card-header bg-transparent">Overall Chart</h6>
 
     <div class="row" *ngIf="itemData.sutOverview && itemData.sutOverview.length > 1">
       <div class="col">
-        <div class="card table-stats">
+        <div class="card table-stats card-shadow">
           <h6 class="card-header bg-transparent">SUT Statistics <span class="compare">
             </span></h6>
           <div class="card-body card-body-request-stats">

diff --git a/src/app/item-detail/label-chart/label-chart.component.html b/src/app/item-detail/label-chart/label-chart.component.html
@@ -1,4 +1,4 @@
-<div class="card" *ngIf="labelChartOptions">
+<div class="card card-shadow" *ngIf="labelChartOptions">
   <h6 class="card-header bg-transparent">
     Label Chart - {{labelChartMetric}}
     <span *ngIf="!labelCompareChartOptions" class="float-right">

diff --git a/src/app/item-detail/performance-analysis/performance-analysis.component.html b/src/app/item-detail/performance-analysis/performance-analysis.component.html
@@ -1,5 +1,5 @@
 
-<div class="card"
+<div class="card card-shadow"
 [ngClass]="(perfAnalysis.onePerc.failed || perfAnalysis.variability.failed || perfAnalysis.throughputVariability.failed) ? 'performance-analysis-warning' : 'performance-analysis-success'">
 <div class="card-body">
   <h6 class="overview-body perf-analysis">Performance Analysis</h6>

diff --git a/src/app/item-detail/request-stats-compare/request-stats-compare.component.html b/src/app/item-detail/request-stats-compare/request-stats-compare.component.html
@@ -1,4 +1,4 @@
-<div class="card table-stats request-stats">
+<div class="card table-stats request-stats card-shadow">
 
   <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
 

diff --git a/src/app/item-detail/thresholds-alert/thresholds-alert.component.html b/src/app/item-detail/thresholds-alert/thresholds-alert.component.html
@@ -8,7 +8,7 @@
     Error rate increase toleration: {{itemData.thresholds.thresholds.errorRate}}%
   </p>
 </ng-template>
-<div class="card perf-issue">
+<div class="card perf-issue card-shadow">
   <div class="card-body">
     <h6 class="card-title text-alizarin">Performance threshold failure <i class="ttp text-secondary"
         placement="bottom" [ngbTooltip]="tipContent"><i class="far fa-question-circle icon"></i></i></h6>

diff --git a/src/app/project/project.component.html b/src/app/project/project.component.html
@@ -35,7 +35,7 @@
     </div>
     <div class="row" *ngIf="filteredScenarios && viewType === 'cards'">
       <div class="col-md-3" *ngFor="let _ of filteredScenarios">
-        <div class="card card-scenario">
+        <div class="card card-scenario card-shadow">
           <h6 class="card-header bg-transparent">
             <a routerLink="/project/{{projectName}}/scenario/{{_.name}}/items">{{_.name}}</a>
           </h6>
@@ -55,17 +55,17 @@ <h6 class="card-header bg-transparent">
     </div>
     <div class="row" *ngIf="filteredScenarios && viewType === 'list'">
       <div class="col">
-        <div class="card card-list">
-          <h6 class="card-header">Scenarios</h6>
+        <div class="card card-list card-shadow">
+          <h6 class="card-header bg-transparent">Scenarios</h6>
           <div class="card-body">
             <div class="labels-detail table-responsive">
-              <table class="table" [mfData]="filteredScenarios" #mf="mfDataTable">
+              <table class="table jtl-table" [mfData]="filteredScenarios" #mf="mfDataTable">
                 <thead>
                   <tr>
-                    <th scope="col" class="hd">
+                    <th scope="col" class="hd jtl-head">
                       <mfDefaultSorter by="name">name</mfDefaultSorter>
                     </th>
-                    <th scope="col" class="hd">
+                    <th scope="col" class="hd jtl-head">
                       <mfDefaultSorter by="data[0].startDate">last run</mfDefaultSorter>
                     </th>
                   </tr>

diff --git a/src/app/scenario/scenario-trends/scenario-trends.component.html b/src/app/scenario/scenario-trends/scenario-trends.component.html
@@ -1,4 +1,4 @@
-<div class="card scenario-custom-chart">
+<div class="card scenario-custom-chart card-shadow">
   <h6 class="card-header bg-transparent">
     Scenario Trends
     <span class="float-right">

diff --git a/src/app/scenario/scenario.component.html b/src/app/scenario/scenario.component.html
@@ -35,7 +35,7 @@
             <div class="container-fluid">
               <div class="row">
                 <div class="col-md-4">
-                  <div class="card">
+                  <div class="card card-shadow">
                     <h6 class="card-header bg-transparent">90% response time</h6>
                     <div class="card-body">
                       <div class="graph">
@@ -46,7 +46,7 @@ <h6 class="card-header bg-transparent">90% response time</h6>
                   </div>
                 </div>
                 <div class="col-md-4">
-                  <div class="card">
+                  <div class="card card-shadow">
                     <h6 class="card-header bg-transparent">Throughput</h6>
                     <div class="card-body">
                       <div class="graph">
@@ -57,7 +57,7 @@ <h6 class="card-header bg-transparent">Throughput</h6>
                   </div>
                 </div>
                 <div class="col-md-4">
-                  <div class="card">
+                  <div class="card card-shadow">
                     <h6 class="card-header bg-transparent">Error rate</h6>
                     <div class="card-body">
                       <div class="graph">
@@ -70,7 +70,7 @@ <h6 class="card-header bg-transparent">Error rate</h6>
               </div>
               <div class="row rr">
                 <div class="col" *ngIf="items$ | async; let items">
-                  <div class="card recent-runs">
+                  <div class="card recent-runs card-shadow">
                     <h6 class="card-header bg-transparent">Test Runs
                       <span title="Total ready items" class="text-secondary total">{{items.total}} <i
                           class="far fa-check-circle"></i></span>

diff --git a/src/styles.scss b/src/styles.scss
@@ -167,3 +167,7 @@ a:hover {
   font-weight: 600;
   padding-top: 1.25rem;
 }
+
+.card-shadow {
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}