Home view improvement

138db4bd · Tim Pez · Christopher Mark Fullarton · 88979b7a · 138db4bd · 138db4bd
Commit 138db4bd authored Feb 01, 2022 by Tim Pez Committed by Christopher Mark Fullarton Feb 01, 2022
--- a/src/app/root/home/home.component.html
+++ b/src/app/root/home/home.component.html
@@ -8,6 +8,12 @@
 <div class="row"
     id="landingPageContent">

+  <div class="bg-object bg-circle-1"></div>
+  <div class="bg-object bg-circle-2"></div>
+  <div class="bg-object bg-circle-3"></div>
+  <div class="bg-object bg-cube-1"></div>
+  <div class="bg-object bg-cube-2 "></div>
+
  <div *ngIf="!isShowingQuiznameDatalist"
       class="col-12 text-center my-5 my-sm-5"
       id="arsnova-click-description">
@@ -281,7 +287,7 @@
  </ng-container>

  <app-statistics *ngIf="!disableStatistics && !isShowingQuiznameDatalist && (connectionService.serverAvailable || isServer)"
-                  class="col-12 px-0 px-sm-3 mt-2 d-block"></app-statistics>
+                  class="col-12 px-0 px-sm-3 mt-2 mb-2 mt-lg-5 d-block"></app-statistics>

 </div>

--- a/src/app/root/home/home.component.scss
+++ b/src/app/root/home/home.component.scss
@@ -55,3 +55,64 @@
    }
  }
 }
+
+@mixin bg-object-fade-in($animation-delay) {
+  animation: bg-object-anim 10s ease-in forwards infinite;
+  animation-delay: $animation-delay;
+}
+.bg-circle-1 {
+  top: 20%;
+  left: 20%;
+  border-radius: 50%;
+  @include media-breakpoint-up(lg) {
+    @include bg-object-fade-in(0);
+  }
+}
+.bg-circle-2 {
+  top: 30%;
+  left: 80%;
+  border-radius: 50%;
+  @include media-breakpoint-up(lg) {
+    @include bg-object-fade-in(2s);
+  }
+}
+.bg-circle-3 {
+  top: 70%;
+  left: 60%;
+  border-radius: 50%;
+  @include media-breakpoint-up(lg) {
+    @include bg-object-fade-in(6s);
+  }
+}
+.bg-cube-1 {
+  top: 40%;
+  left: 50%;
+  @include media-breakpoint-up(lg) {
+    @include bg-object-fade-in(4s);
+  }
+}
+.bg-cube-2 {
+  top: 70%;
+  left: 30%;
+  @include media-breakpoint-up(lg) {
+    @include bg-object-fade-in(8s);
+  }
+}
+.bg-object {
+  width: 15px;
+  height: 15px;
+  border: 1px solid white;
+  position: absolute;
+  opacity: 0.25;
+  transform: scale(0) rotate(0deg) translate(-50%, -50%);
+}
+@keyframes bg-object-anim {
+  from {
+    opacity: 0.25;
+    transform: scale(0) rotate(0deg) translate(-50%, -50%);
+  }
+  to {
+    opacity: 0;
+    transform: scale(10) rotate(720deg) translate(-50%, -50%);
+  }
+}
--- a/src/app/root/statistics/statistics.component.html
+++ b/src/app/root/statistics/statistics.component.html
 <div *ngIf="statistics"
-     class="card">
-  <div *ngFor="let elem of data; even as isEven"
-       [class.flex-column-reverse]="!isEven"
-       class="form-row mx-0 position-relative px-3 px-md-5 py-3 py-md-0 my-4 my-lg-0 d-flex flex-md-row">
-    <ng-template #amountTemplate>
-      <div class="col-md-6 d-flex justify-content-center align-items-center flex-column my-auto my-md-0 flex-grow-1">
-        <fa-icon *ngIf="isLoading" [spin]="true" [icon]="'spinner'" size="4x" class="loading-icon d-flex align-items-center"></fa-icon>
-        <h3 *ngIf="!isLoading" class="w-100 text-truncate text-center fs-xxl mb-0">{{elem.amount}}</h3>
-      </div>
-    </ng-template>
-
-    <ng-template #contentTemplate>
-      <div class="col-md-6 d-flex justify-content-center flex-column flex-grow-1">
-        <h4 class="text-center">{{elem.title | translate}}</h4>
-        <p class="text-hyphen text-justify">{{elem.content | translate}}</p>
-      </div>
-    </ng-template>
-
-    <div [style.color]="elem.iconColor"
-         class="position-absolute d-flex align-items-md-center justify-content-center h-100 icon-wrapper statistics-icon-opacity">
-      <fa-layers *ngIf="elem.iconLayer">
-        <fa-icon *ngFor="let icon of elem.iconLayer"
-                 [icon]="icon.classes"
-                 [mask]="icon.mask"
-                 [transform]="icon.transform"
-                 size="10x"></fa-icon>
-      </fa-layers>
-      <fa-icon *ngIf="!elem.iconLayer"
-               [icon]="elem.icon"
-               size="10x"></fa-icon>
-    </div>
-
-    <ng-container *ngIf="isEven">
-      <ng-container *ngTemplateOutlet="amountTemplate"></ng-container>
-      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
-    </ng-container>
-
-    <ng-container *ngIf="!isEven">
-      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
-      <ng-container *ngTemplateOutlet="amountTemplate"></ng-container>
-    </ng-container>
+     class="statistics-wrapper card d-flex p-2 mb-1 flex-column flex-md-row flex-nowrap justify-content-around align-items-center">
+  <div *ngFor="let elem of data"
+       class="button-wrapper container-fluid container-md px-0 mx-md-1 mx-xl-4 my-1 my-md-0 d-flex justify-content-md-center justify-content-between align-items-center">
+      <button
+              type="button"
+              class="btn statistic-btn d-flex btn-block btn-md align-items-center justify-content-between justify-content-md-center btn-outline-primary"
+              placement="top"
+              [ngbPopover]="elem.content | translate" >
+        <div
+                class="d-flex justify-content-center align-items-center">
+          <div [style.color]="elem.iconColor"
+               class="icon-wrapper pr-2 pr-md-0 statistics-icon-opacity">
+            <fa-layers *ngIf="elem.iconLayer">
+              <fa-icon *ngFor="let icon of elem.iconLayer"
+                       [icon]="icon.classes"
+                       [mask]="icon.mask"
+                       [transform]="icon.transform"
+                       size="1x"></fa-icon>
+            </fa-layers>
+            <fa-icon *ngIf="!elem.iconLayer"
+                     [icon]="elem.icon"
+                     size="1x"></fa-icon>
+          </div>
+          <div>
+            <fa-icon *ngIf="isLoading" [spin]="true" [icon]="'spinner'" size="1x" class="loading-icon"></fa-icon>
+            <h5 *ngIf="!isLoading" class="mb-0">{{elem.amount}}</h5>
+          </div>
+        </div>
+        <p class="d-md-none px-2">
+          {{elem.title | translate}}
+        </p>
+      </button>
  </div>
 </div>
--- a/src/app/root/statistics/statistics.component.scss
+++ b/src/app/root/statistics/statistics.component.scss
 @import "prebuild";
 @import "../variables";

-.form-row {
-  min-height: 350px;
-
+.statistics-wrapper {
  @include media-breakpoint-up(md) {
-    &:nth-of-type(2n) {
-      .icon-wrapper {
-        left: 50%;
-      }
+    margin-top: 5rem;
+    h5 {
+      font-size: 1.2rem;
    }
  }
-
-  .icon-wrapper {
-    width: calc(100% - 2rem + 5px);
-
-    @include media-breakpoint-up(md) {
-      width: calc(50% - 3rem);
-    }
+}
+.statistic-btn {
+  height: 2.5rem;
+}
+.button-wrapper {
+  border-radius: 0.5rem;
+  &:hover {
+    animation: pulsating 0.75s;
  }
-
-  .fs-xxl {
-    font-size: 6rem;
+}
+.icon-wrapper {
+  width: 3rem;
+  @include media-breakpoint-up(md) {
+    width: 1.75rem;
+  }
+  @include media-breakpoint-up(lg) {
+    width: 2rem;
+  }
+}
+@keyframes pulsating {
+  from {
+    box-shadow: 0 0 0 0 #d5d5d550;
+  }
+  to {
+    box-shadow: 0 0 0 2rem #B2B2B200;
  }
 }


--- a/src/styles/themes/theme-Material.scss
+++ b/src/styles/themes/theme-Material.scss
@@ -46,7 +46,7 @@ $splash-screen-corner-radius: 10px;
 $font-size-base: 1rem;
 $small-font-size: 80%;

-$statistics-icon-opacity: 0.2;
+$statistics-icon-opacity: 0.8;

 $paragraph-margin-bottom: 0;