Skip to content
Snippets Groups Projects
Commit 68c021e7 authored by ncastejon's avatar ncastejon
Browse files

Add little animation to organizations page

parent c78c9cc1
Branches
Tags
No related merge requests found
Pipeline #
...@@ -61,7 +61,7 @@ describe('NotificationsComponent', () => { ...@@ -61,7 +61,7 @@ describe('NotificationsComponent', () => {
type: 'error', type: 'error',
}]; }];
fixture.detectChanges(); 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; const notificationContent = debugElement.query(By.css('.notification-content')).nativeElement;
// Then // Then
...@@ -79,7 +79,7 @@ describe('NotificationsComponent', () => { ...@@ -79,7 +79,7 @@ describe('NotificationsComponent', () => {
// When // When
fixture.detectChanges(); 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; const notificationContent = debugElement.query(By.css('.notification-content')).nativeElement;
// Then // Then
...@@ -95,7 +95,7 @@ describe('NotificationsComponent', () => { ...@@ -95,7 +95,7 @@ describe('NotificationsComponent', () => {
type: 'success', type: 'success',
}]; }];
fixture.detectChanges(); 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; const notificationContent = debugElement.query(By.css('.notification-content')).nativeElement;
// Then // Then
...@@ -122,7 +122,7 @@ describe('NotificationsComponent', () => { ...@@ -122,7 +122,7 @@ describe('NotificationsComponent', () => {
]; ];
fixture.detectChanges(); fixture.detectChanges();
const notificationNumber = debugElement.queryAll(By.css('.notification')).length; const notificationNumber = debugElement.queryAll(By.css('.appNotification')).length;
// Then // Then
expect(notificationNumber).toBe(3); expect(notificationNumber).toBe(3);
......
...@@ -17,7 +17,8 @@ ...@@ -17,7 +17,8 @@
</div> </div>
<div class="column is-12"> <div class="column is-12">
<div *ngIf="organization.datasetsCount" class="columns is-vcentered"> <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> {{ organization.datasetsCount}}</span><br /> <span i18n="@@organizations.datasets">datasets</span>
</div> </div>
<div class="column is-6"> <div class="column is-6">
......
...@@ -14,32 +14,118 @@ img { ...@@ -14,32 +14,118 @@ img {
/* Masonry bricks or child elements */ /* Masonry bricks or child elements */
.notification { .notification {
background-color: white; 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; display: inline-block;
margin: 0 0 1em; margin: 0 0 1em;
width: 100%; width: 100%;
p { }
text-align: justify;
}
.logo-content { p {
min-height: 100px; text-align: justify;
line-height: 100px; }
max-height: 100px;
text-align: center;
img { .logo-content {
max-height: 90px; min-height: 100px;
} line-height: 100px;
max-height: 100px;
text-align: center;
img {
max-height: 90px;
} }
a:not(.button) { a:not(.button) {
text-decoration: underline; text-decoration: underline;
} }
.button { button {
background-color: #e8ecef; background-color: #e8ecef;
border: none; border: none;
border-radius: 0; border-radius: 0;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment