feat: rounded corners

mediacms-io · Oct 2, 2024 · 5fe4d3a · 5fe4d3a
1 parent 94c646f
commit 5fe4d3a
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 128 deletions.
diff --git a/docs/admins_docs.md b/docs/admins_docs.md
@@ -19,6 +19,7 @@
 - [16. Frequently Asked Questions](#16-frequently-asked-questions)
 - [17. Cookie consent code](#17-cookie-consent-code)
 - [18. Disable encoding and show only original file](#18-disable-encoding-and-show-only-original-file)
+- [19. Rounded corners on videos](#19-rounded-corners)
 
 ## 1. Welcome
 This page is created for MediaCMS administrators that are responsible for setting up the software, maintaining it and making modifications.
@@ -778,4 +779,15 @@ When videos are uploaded, they are getting encoded to multiple resolutions, a pr
 DO_NOT_TRANSCODE_VIDEO = True
 ```
 
-This will disable the transcoding process and only the original file will be shown. Note that this will also disable the sprites file creation, so you will not have the preview thumbnails on the video player.
+This will disable the transcoding process and only the original file will be shown. Note that this will also disable the sprites file creation, so you will not have the preview thumbnails on the video player.
+
+## 19. Rounded corners on videos
+
+By default the video player and media items are now having rounded corners, on larger screens (not in mobile). If you don't like this change, remove the `border-radius` added on the following files:
+
+```
+frontend/src/static/css/_extra.css
+frontend/src/static/js/components/list-item/Item.scss
+frontend/src/static/js/components/media-page/MediaPage.scss
+```
+you now have to re-run the frontend build in order to see the changes (check docs/dev_exp.md)
diff --git a/frontend/packages/player/dist/mediacms-player.css b/frontend/packages/player/dist/mediacms-player.css
@@ -61,8 +61,8 @@
 /* SPACES */
 /* ANIMATIONS */
 /* FUNCTIONS */
-/*@function calc_($expression) {
-    @return $expression;
+/*@function calc_($expression) {
+    @return $expression;
 }*/
 /*  ANIMATION KEYFRAMES */
 @keyframes onHoverFullscreenToggle {
@@ -232,11 +232,11 @@
   outline-color: rgba(0, 0, 0, 0);
   outline-color: transparent;
   /* Doesn't work properly in Safari browser.*/
-  /*&.vjs-loading-video {
-        video {
-            opacity: 0;
-            visibility: hidden;
-        }
+  /*&.vjs-loading-video {
+        video {
+            opacity: 0;
+            visibility: hidden;
+        }
     }*/ }
   .video-js.vjs-mediacms video {
     width: 100%;
@@ -321,11 +321,11 @@
     display: none;
     font-size: 0.8125em;
     z-index: +1;
-    /*display:block;
-        opacity: 0;
-        height:0;
-        visibility: hidden;
-        @include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
+    /*display:block;
+        opacity: 0;
+        height:0;
+        visibility: hidden;
+        @include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
         will-change:height;*/ }
     .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > [role='button'] {
       position: relative; }
@@ -337,8 +337,8 @@
       outline: 0; }
     .video-js.vjs-mediacms .vjs-settings-panel.vjs-visible-panel {
       display: block;
-      /*opacity: 1;
-            visibility: visible;
+      /*opacity: 1;
+            visibility: visible;
             height:auto;*/ }
     .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-panel-inner {
       display: block;
@@ -679,7 +679,7 @@
   .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
     transition: width 0.2s linear;
     transition-delay: 0.15s;
-    /* transition: width 0s linear;
+    /* transition: width 0s linear;
             transition-delay: 0s; */ }
   .video-js.vjs-mediacms .vjs-actions-anim {
     -webkit-user-select: none;
@@ -986,31 +986,31 @@
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     white-space: normal;
-    /*@-moz-document url-prefix() {
-
-        position: relative;
-        padding-right: $font-size * 1.1;
-        overflow: hidden;
-
-        &:before {
-            background-color: $bg-color;
-            bottom: 0;
-            position: absolute;
-            right: 0;
-            float: right;
-            text-align:right;
-            content: '\2026';
-            width: $font-size * 1.1;
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            height: 100%;
-            width: 100%;
-            z-index: +1;
-            background: $bg-color;
-        }
+    /*@-moz-document url-prefix() {
+
+        position: relative;
+        padding-right: $font-size * 1.1;
+        overflow: hidden;
+
+        &:before {
+            background-color: $bg-color;
+            bottom: 0;
+            position: absolute;
+            right: 0;
+            float: right;
+            text-align:right;
+            content: '\2026';
+            width: $font-size * 1.1;
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            z-index: +1;
+            background: $bg-color;
+        }
     }*/
     color: #eee; }
     .video-js.vjs-mediacms .vjs-corner-layer .title-link:hover {
@@ -1057,28 +1057,28 @@
   .video-js.vjs-mediacms:hover .vjs-big-play-button {
     background-color: #009933; }
 
-/* @-webkit-keyframes vjs-poster-reveal {
-    0%{
-        opacity:0;
-    }
-    40%{
-        opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
-}
-
-@keyframes vjs-poster-reveal {
-    0%{
-        opacity:0;
-    }
-    40%{
-        opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
+/* @-webkit-keyframes vjs-poster-reveal {
+    0%{
+        opacity:0;
+    }
+    40%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
+}
+
+@keyframes vjs-poster-reveal {
+    0%{
+        opacity:0;
+    }
+    40%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
 } */
 .video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip,
 .video-js.vjs-mediacms .vjs-preview-thumb .vjs-preview-thumb-time-display {

diff --git a/frontend/packages/vjs-plugin/dist/mediacms-vjs-plugin.css b/frontend/packages/vjs-plugin/dist/mediacms-vjs-plugin.css
@@ -61,8 +61,8 @@
 /* SPACES */
 /* ANIMATIONS */
 /* FUNCTIONS */
-/*@function calc_($expression) {
-    @return $expression;
+/*@function calc_($expression) {
+    @return $expression;
 }*/
 /*  ANIMATION KEYFRAMES */
 @keyframes onHoverFullscreenToggle {
@@ -232,11 +232,11 @@
   outline-color: rgba(0, 0, 0, 0);
   outline-color: transparent;
   /* Doesn't work properly in Safari browser.*/
-  /*&.vjs-loading-video {
-        video {
-            opacity: 0;
-            visibility: hidden;
-        }
+  /*&.vjs-loading-video {
+        video {
+            opacity: 0;
+            visibility: hidden;
+        }
     }*/ }
   .video-js.vjs-mediacms video {
     width: 100%;
@@ -321,11 +321,11 @@
     display: none;
     font-size: 0.8125em;
     z-index: +1;
-    /*display:block;
-        opacity: 0;
-        height:0;
-        visibility: hidden;
-        @include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
+    /*display:block;
+        opacity: 0;
+        height:0;
+        visibility: hidden;
+        @include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
         will-change:height;*/ }
     .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > [role='button'] {
       position: relative; }
@@ -337,8 +337,8 @@
       outline: 0; }
     .video-js.vjs-mediacms .vjs-settings-panel.vjs-visible-panel {
       display: block;
-      /*opacity: 1;
-            visibility: visible;
+      /*opacity: 1;
+            visibility: visible;
             height:auto;*/ }
     .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-panel-inner {
       display: block;
@@ -679,7 +679,7 @@
   .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
     transition: width 0.2s linear;
     transition-delay: 0.15s;
-    /* transition: width 0s linear;
+    /* transition: width 0s linear;
             transition-delay: 0s; */ }
   .video-js.vjs-mediacms .vjs-actions-anim {
     -webkit-user-select: none;
@@ -986,31 +986,31 @@
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     white-space: normal;
-    /*@-moz-document url-prefix() {
-
-        position: relative;
-        padding-right: $font-size * 1.1;
-        overflow: hidden;
-
-        &:before {
-            background-color: $bg-color;
-            bottom: 0;
-            position: absolute;
-            right: 0;
-            float: right;
-            text-align:right;
-            content: '\2026';
-            width: $font-size * 1.1;
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            height: 100%;
-            width: 100%;
-            z-index: +1;
-            background: $bg-color;
-        }
+    /*@-moz-document url-prefix() {
+
+        position: relative;
+        padding-right: $font-size * 1.1;
+        overflow: hidden;
+
+        &:before {
+            background-color: $bg-color;
+            bottom: 0;
+            position: absolute;
+            right: 0;
+            float: right;
+            text-align:right;
+            content: '\2026';
+            width: $font-size * 1.1;
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            z-index: +1;
+            background: $bg-color;
+        }
     }*/
     color: #eee; }
     .video-js.vjs-mediacms .vjs-corner-layer .title-link:hover {
@@ -1057,28 +1057,28 @@
   .video-js.vjs-mediacms:hover .vjs-big-play-button {
     background-color: #009933; }
 
-/* @-webkit-keyframes vjs-poster-reveal {
-    0%{
-        opacity:0;
-    }
-    40%{
-        opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
-}
-
-@keyframes vjs-poster-reveal {
-    0%{
-        opacity:0;
-    }
-    40%{
-        opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
+/* @-webkit-keyframes vjs-poster-reveal {
+    0%{
+        opacity:0;
+    }
+    40%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
+}
+
+@keyframes vjs-poster-reveal {
+    0%{
+        opacity:0;
+    }
+    40%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
 } */
 .video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip,
 .video-js.vjs-mediacms .vjs-preview-thumb .vjs-preview-thumb-time-display {

diff --git a/frontend/src/static/css/_extra.css b/frontend/src/static/css/_extra.css
@@ -0,0 +1,15 @@
+body {
+  /* THIS is not a good way to handle this, and a proper refactoring needs to be performed
+    This allows bigger images of media on listings for large screens
+    It would be great to adapt to other sizes, but this requires a good refaftoring
+     */
+
+  @media screen and (min-width: 2200px) {
+      --default-item-width: 342px !important;
+      --default-max-item-width: 342px !important;
+      --default-item-margin-right-width: 17px !important;
+      --default-item-margin-bottom-width: 27px !important;
+  }
+}
+
+
diff --git a/frontend/src/static/js/components/list-item/Item.scss b/frontend/src/static/js/components/list-item/Item.scss
@@ -13,6 +13,11 @@
 
 .item-thumb,
 a.item-thumb {
+
+  @media screen and (min-width: 480px) {
+    border-radius: 10px;
+  }
+
   position: relative;
   display: block;
   height: auto;