diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss index 91091a5bb..3f9c73a29 100644 --- a/client/src/app/shared/video/abstract-video-list.scss +++ b/client/src/app/shared/video/abstract-video-list.scss @@ -18,31 +18,6 @@ my-video-feed { @media screen and (max-width: 500px) { .videos { - text-align: center; - - /deep/ .video-miniature { - padding-right: 0; - height: auto; - width: 100%; - margin-bottom: 20px; - - .video-miniature-information { - width: 100% !important; - - span { - width: 100%; - } - } - - .video-thumbnail { - width: 100%; - height: auto; - - img { - width: 100%; - height: auto; - } - } - } + @include video-miniature-small-screen; } } diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html index be9db3d90..4150cd5e1 100644 --- a/client/src/app/videos/video-list/video-overview.component.html +++ b/client/src/app/videos/video-list/video-overview.component.html @@ -7,9 +7,7 @@ {{ object.category.label }} -
- -
+
@@ -17,9 +15,7 @@ {{ object.tag }}
-
- -
+
@@ -31,9 +27,7 @@
-
- -
+ diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss index 73b6d2e53..e7dc60b4b 100644 --- a/client/src/app/videos/video-list/video-overview.component.scss +++ b/client/src/app/videos/video-list/video-overview.component.scss @@ -7,6 +7,10 @@ &:first-child { padding-top: 30px; } + + my-video-miniature { + text-align: left; + } } .section-title { @@ -33,4 +37,10 @@ margin-right: 10px; } } +} + +@media screen and (max-width: 500px) { + .section { + @include video-miniature-small-screen; + } } \ No newline at end of file diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 547f03caa..765297c87 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -471,4 +471,33 @@ text-align: center; align-items: center; } +} + +@mixin video-miniature-small-screen { + text-align: center; + + /deep/ .video-miniature { + padding-right: 0; + height: auto; + width: 100%; + margin-bottom: 20px; + + .video-miniature-information { + width: 100% !important; + + span { + width: 100%; + } + } + + .video-thumbnail { + width: 100%; + height: auto; + + img { + width: 100%; + height: auto; + } + } + } } \ No newline at end of file