meeting

angular/src/app/_components/layout/two-column/two-column.component.html

@@ -16,6 +16,20 @@
                     </div>
                 </a>
             </li>
+            <li class="nav-item mb-3">
+                <a class="card" routerLink="/trips" routerLinkActive="active">
+                    <div class="card-body position-relative" data-cat="dashboard">
+                        <h3 class="position-absolute m-0">{{'trips.view' | translate}}</h3>
+                    </div>
+                </a>
+            </li>
+            <li class="nav-item mb-3">
+                <a class="card" routerLink="/user-trips" routerLinkActive="active">
+                    <div class="card-body position-relative" data-cat="dashboard">
+                        <h3 class="position-absolute m-0">{{'user_trips.view' | translate}}</h3>
+                    </div>
+                </a>
+            </li>
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/users" routerLinkActive="active">
                     <div class="card-body position-relative" data-cat="user">

angular/src/app/app.component.html

@@ -33,6 +33,8 @@
     <router-outlet></router-outlet>
     <alert></alert>
 </div>
-<div *ngIf="loading" class="spt-loader-box">
-    <span class="spt-loader"></span>
-</div>
+@if (loading) {
+    <div class="spt-loader-box">
+        <span class="spt-loader"></span>
+    </div>
+}

angular/src/assets/i18n/en.json

@@ -15,6 +15,14 @@
     "code": "Code",
     "created_at": "Created at"
   },
+  "trips":
+  {
+    "view": "Trips"
+  },
+  "user_trips":
+  {
+    "view": "User Trips"
+  },
   "base_data":
   {
     "view": "Base data",

angular/src/assets/scss/_basics.scss

@@ -443,51 +443,90 @@ textarea#pasteCodes {
   top: 50%;
   z-index: 9999;
   //background: #9eb3c1;
-  width: 130px;
-  height: 130px;
+  width: 90px;
+  height: 90px;
   //border: 3px solid #2b3a44;
   //border-radius: 50%;
   transform: translate(-50%, -50%);
+  background: #000;
+  border-radius: 50%;
 }
 
 .spt-loader {
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%);
-}
 
-.spt-loader:after {
-  content: '$';
-  display: inline-block;
-  width: 96px;
-  height: 96px;
+  transform: translate(-50%,-50%) rotateZ(45deg);
+  perspective: 1000px;
   border-radius: 50%;
-  text-align: center;
-  line-height: 80px;
-  font-size: 64px;
-  font-weight: bold;
-  background: #FFD700;
-  color: #DAA520;
-  border: 4px double;
-  box-sizing: border-box;
-  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .1);
-  animation: coin-flip 4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-}
-
-@keyframes coin-flip {
-  0%, 100% {
-    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  width: 48px;
+  height: 48px;
+  color: #fff;
+
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: inherit;
+    height: inherit;
+    border-radius: 50%;
+    transform: rotateX(70deg);
+    animation: 1s spin linear infinite;
+  }
+  &:after {
+    color: #FF3D00;
+    transform: rotateY(70deg);
+    animation-delay: .4s;
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: translate(-50%, -50%) rotateZ(0deg);
   }
+  100% {
+    transform: translate(-50%, -50%) rotateZ(360deg);
+  }
+}
+
+@keyframes rotateccw {
   0% {
-    transform: rotateY(0deg);
+    transform: translate(-50%, -50%) rotate(0deg);
   }
-  50% {
-    transform: rotateY(1800deg);
-    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  100% {
+    transform: translate(-50%, -50%) rotate(-360deg);
   }
+}
+
+@keyframes spin {
+  0%,
   100% {
-    transform: rotateY(3600deg);
+    box-shadow: .2em 0px 0 0px currentcolor;
+  }
+  12% {
+    box-shadow: .2em .2em 0 0 currentcolor;
+  }
+  25% {
+    box-shadow: 0 .2em 0 0px currentcolor;
+  }
+  37% {
+    box-shadow: -.2em .2em 0 0 currentcolor;
+  }
+  50% {
+    box-shadow: -.2em 0 0 0 currentcolor;
+  }
+  62% {
+    box-shadow: -.2em -.2em 0 0 currentcolor;
+  }
+  75% {
+    box-shadow: 0px -.2em 0 0 currentcolor;
+  }
+  87% {
+    box-shadow: .2em -.2em 0 0 currentcolor;
   }
 }