Add little animation to organizations page

src/app/core/components/notifications/notifications.component.spec.ts

@@ -61,7 +61,7 @@ describe('NotificationsComponent', () => {
         type: 'error',
       }];
       fixture.detectChanges();
-      const notification = debugElement.query(By.css('.notification'));
+      const notification = debugElement.query(By.css('.appNotification'));
       const notificationContent = debugElement.query(By.css('.notification-content')).nativeElement;
 
       // Then
@@ -79,7 +79,7 @@ describe('NotificationsComponent', () => {
 
       // When
       fixture.detectChanges();
-      const notification = debugElement.query(By.css('.notification'));
+      const notification = debugElement.query(By.css('.appNotification'));
       const notificationContent = debugElement.query(By.css('.notification-content')).nativeElement;
 
       // Then
@@ -95,7 +95,7 @@ describe('NotificationsComponent', () => {
         type: 'success',
       }];
       fixture.detectChanges();
-      const notification = debugElement.query(By.css('.notification'));
+      const notification = debugElement.query(By.css('.appNotification'));
       const notificationContent = debugElement.query(By.css('.notification-content')).nativeElement;
 
       // Then
@@ -122,7 +122,7 @@ describe('NotificationsComponent', () => {
       ];
 
       fixture.detectChanges();
-      const notificationNumber = debugElement.queryAll(By.css('.notification')).length;
+      const notificationNumber = debugElement.queryAll(By.css('.appNotification')).length;
 
       // Then
       expect(notificationNumber).toBe(3);

src/app/editorialisation/components/organizations/organizations.component.html

@@ -17,7 +17,8 @@
           </div>
           <div class="column is-12">
             <div *ngIf="organization.datasetsCount" class="columns is-vcentered">
-              <div class="column is-6"><span class="has-text-danger has-text-weight-bold">
+              <div class="column is-6 datasetsCount">
+                <span class="has-text-danger has-text-weight-bold count">
                   {{ organization.datasetsCount}}</span><br /> <span i18n="@@organizations.datasets">datasets</span>
               </div>
               <div class="column is-6">

src/app/editorialisation/components/organizations/organizations.component.scss

@@ -14,32 +14,118 @@ img {
   /* Masonry bricks or child elements */
   .notification {
     background-color: white;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: inset 0px 0px 3px 0px grey;
+    }
+
+    // Transition effects
+    img {
+      transition: transform 1s;
+    }
+
+    &:hover {
+      img {
+        transform: scale(1.15, 1.15);
+      }
+
+      .button {
+        animation: bg 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1;
+        border: none;
+        // color: #d5232a;
+        text-decoration: none;
+        background-image: linear-gradient(to right, grey 100%, grey 100%),
+          linear-gradient(to bottom, grey 100%, grey 100%),
+          linear-gradient(to right, grey 100%, grey 100%),
+          linear-gradient(to bottom, grey 100%, grey 100%);
+      }
+
+    }
+
+
+
+    @keyframes bg {
+      0% {
+        background-size: 0 1px,
+          1px 0,
+          0 1px,
+          1px 0;
+      }
+
+      25% {
+        background-size: 100% 1px,
+          1px 0,
+          0 1px,
+          1px 0;
+      }
+
+      50% {
+        background-size: 100% 1px,
+          1px 100%,
+          0 1px,
+          1px 0;
+      }
+
+      75% {
+        background-size: 100% 1px,
+          1px 100%,
+          100% 1px,
+          1px 0;
+      }
+
+      100% {
+        background-size: 100% 1px,
+          1px 100%,
+          100% 1px,
+          1px 100%;
+      }
+    }
+
+
+    .button {
+      background-repeat: no-repeat;
+
+      background-size: 100% 1px,
+        1px 100%,
+        100% 1px,
+        1px 100%;
+      background-position: 0 0,
+        100% 0,
+        100% 100%,
+        0 100%;
+
+      border: none;
+      border-radius: 0;
+    }
+
   }
 
   display: inline-block;
   margin: 0 0 1em;
   width: 100%;
 
-  p {
-    text-align: justify;
-  }
+}
 
-  .logo-content {
-    min-height: 100px;
-    line-height: 100px;
-    max-height: 100px;
-    text-align: center;
+p {
+  text-align: justify;
+}
 
-    img {
-      max-height: 90px;
-    }
+.logo-content {
+  min-height: 100px;
+  line-height: 100px;
+  max-height: 100px;
+  text-align: center;
+
+  img {
+    max-height: 90px;
   }
-  
+
   a:not(.button) {
     text-decoration: underline;
   }
-  
-  .button {
+
+  button {
     background-color: #e8ecef;
     border: none;
     border-radius: 0;