diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index a76379924..eca821370 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -80,7 +80,7 @@
View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}
-
+
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
index 2cfaad8f6..835d0e89f 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
@@ -9,7 +9,7 @@
= 250" (click)="showMoreDescription()">
Show more
-
+
diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html
index 2bd11c6f7..5aa834f36 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -36,7 +36,7 @@
-
+
-
+
{{ label }}
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 776f6622e..cdd75d525 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -20,12 +20,6 @@
display: inline-block;
}
-my-small-loader ::ng-deep .root {
- display: inline-block;
- margin: 0 3px 0 0;
- width: 20px;
-}
-
a[class$=-button],
span[class$=-button] {
> span {
diff --git a/client/src/app/shared/shared-main/loaders/index.ts b/client/src/app/shared/shared-main/loaders/index.ts
index a061914d5..60483727c 100644
--- a/client/src/app/shared/shared-main/loaders/index.ts
+++ b/client/src/app/shared/shared-main/loaders/index.ts
@@ -1,2 +1 @@
export * from './loader.component'
-export * from './small-loader.component'
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.html b/client/src/app/shared/shared-main/loaders/loader.component.html
deleted file mode 100644
index ca8ed063e..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss
deleted file mode 100644
index b88b0db6a..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-// Thanks to https://loading.io/css/ (CC0 License)
-
-.loader {
- display: inline-block;
- position: relative;
- width: 50px;
- height: 50px;
-}
-
-.loader div {
- box-sizing: border-box;
- display: block;
- position: absolute;
- width: 44px;
- height: 44px;
- margin: 6px;
- border: 4px solid;
- border-radius: 50%;
- animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
- border-color: #999999 transparent transparent;
-}
-
-.loader div:nth-child(1) {
- animation-delay: -0.45s;
-}
-
-.loader div:nth-child(2) {
- animation-delay: -0.3s;
-}
-
-.loader div:nth-child(3) {
- animation-delay: -0.15s;
-}
-
-@keyframes loader {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index e3b1eea3a..ce8685a09 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -2,9 +2,27 @@ import { Component, Input } from '@angular/core'
@Component({
selector: 'my-loader',
- styleUrls: [ './loader.component.scss' ],
- templateUrl: './loader.component.html'
+ template: ``
})
export class LoaderComponent {
@Input() loading: boolean
+ @Input() size: 'sm' | 'xl'
+
+ private readonly sizes = {
+ sm: {
+ width: '1rem',
+ height: '1rem',
+ 'border-width': '.2em'
+ },
+ xl: {
+ width: '3rem',
+ height: '3rem'
+ }
+ }
+
+ getStyle () {
+ if (!this.size) return undefined
+
+ return this.sizes[this.size]
+ }
}
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.html b/client/src/app/shared/shared-main/loaders/small-loader.component.html
deleted file mode 100644
index 7886f8918..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.ts b/client/src/app/shared/shared-main/loaders/small-loader.component.ts
deleted file mode 100644
index 191877f14..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core'
-
-@Component({
- selector: 'my-small-loader',
- styleUrls: [ ],
- templateUrl: './small-loader.component.html'
-})
-
-export class SmallLoaderComponent {
- @Input() loading: boolean
-}
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 5629640bc..89f43239f 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -34,7 +34,7 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu
import { CustomPageService } from './custom-page'
import { DateToggleComponent } from './date'
import { FeedComponent } from './feeds'
-import { LoaderComponent, SmallLoaderComponent } from './loaders'
+import { LoaderComponent } from './loaders'
import {
ChannelsSetupMessageComponent,
HelpComponent,
@@ -97,7 +97,6 @@ import { VideoChannelService } from './video-channel'
FeedComponent,
LoaderComponent,
- SmallLoaderComponent,
ChannelsSetupMessageComponent,
HelpComponent,
@@ -157,7 +156,6 @@ import { VideoChannelService } from './video-channel'
FeedComponent,
LoaderComponent,
- SmallLoaderComponent,
ChannelsSetupMessageComponent,
HelpComponent,
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 20eeeb623..03b2e8b15 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -26,17 +26,13 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
+@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/helpers';
@import '~bootstrap/scss/utilities/api';
@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
-// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
-.glyphicon-refresh-animate {
- animation: spin 0.7s infinite linear;
-}
-
.flex-auto {
flex: auto;
}
@@ -45,16 +41,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
cursor: pointer !important;
}
-@keyframes spin {
- from {
- transform: scale(1) rotate(0deg);
- }
-
- to {
- transform: scale(1) rotate(360deg);
- }
-}
-
// ---------------------------------------------------------------------------
// Dropdown
// ---------------------------------------------------------------------------