[#00] feat (user.list;skill.list) -> add spinner

greengiraffe · Feb 5, 2017 · 33ed9ef · 33ed9ef
1 parent fe6e0ac
commit 33ed9ef
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 18 deletions.
diff --git a/assets/app/admin/skillList/skill.list.style.scss b/assets/app/admin/skillList/skill.list.style.scss
@@ -56,6 +56,10 @@ h1 {
   max-width: 300px;
 }
 
+.g-ducspinner {
+  margin-top: 23%;
+}
+
 :host .modal-delete-skill /deep/ .modal-dialog {
   max-width: 500px;
 }
diff --git a/assets/app/admin/skillList/skill.list.template.html b/assets/app/admin/skillList/skill.list.template.html
@@ -14,8 +14,9 @@ <h1>Skills</h1>
     </form>
   </div>
 
-  <div class="content-wrapper">
+  <div class="g-ducspinner" *ngIf="skills === undefined"></div>
 
+  <div class="content-wrapper" *ngIf="skills">
     <div class="content-wrapper">
 
       <div class="table-wrapper">

diff --git a/assets/app/authenticated/project/project.list.style.scss b/assets/app/authenticated/project/project.list.style.scss
@@ -138,19 +138,3 @@
 .order-buttons {
   display: inline-block;
 }
-
-//spinner
-.ducspinner {
-  margin: 20% auto 0 auto;
-  height: 28px;
-  width: 28px;
-  animation: rotate 0.5s infinite linear;
-  border: 6px solid $grey-medium;
-  border-right-color: transparent;
-  border-radius: 50%;
-}
-
-@keyframes rotate {
-  0%    { transform: rotate(0deg); }
-  100%  { transform: rotate(360deg); }
-}
diff --git a/assets/app/authenticated/project/project.list.template.html b/assets/app/authenticated/project/project.list.template.html
@@ -64,7 +64,7 @@ <h6 class="settings-title">Order by:</h6>
     </div>
 
     <main class="content">
-      <div class="ducspinner" *ngIf="projects === undefined"></div>
+      <div class="g-ducspinner" *ngIf="projects === undefined"></div>
       <div id="projects" class="tabpane" [ngClass]="{ active: activeTab === 'projects' }">
         <app-project-card
           [project]="project"

diff --git a/assets/app/authenticated/userList/user.list.style.scss b/assets/app/authenticated/userList/user.list.style.scss
@@ -40,3 +40,7 @@ h1 {
     color: $danger;
   }
 }
+
+.g-ducspinner {
+  margin-top: 30%;
+}
diff --git a/assets/app/authenticated/userList/user.list.template.html b/assets/app/authenticated/userList/user.list.template.html
@@ -5,6 +5,7 @@ <h1>People</h1>
       New User
     </button>
     <div class="users">
+      <div class="g-ducspinner" *ngIf="users === undefined"></div>
       <app-user-card *ngFor="let user of users" (onDelete)="deleteUser(user)" [user]="user"></app-user-card>
     </div>
 

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
@@ -7,6 +7,7 @@
 @import 'components/tag';
 @import 'components/table';
 @import 'components/card';
+@import 'components/ducspinner';
 @import 'components/input';
 @import 'components/switch';
 @import 'components/avatar';