Commit 138db4bd authored by Tim Pez's avatar Tim Pez Committed by Christopher Mark Fullarton
Browse files

Home view improvement

parent 88979b7a
......@@ -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>
......@@ -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%);
}
}
<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>
@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;
}
}
......
......@@ -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;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment