Browse Source

fix(tile-view): hidden thumbnails on scroll

master
Hristo Terezov 5 years ago
parent
commit
145596ac6a
2 changed files with 7 additions and 4 deletions
  1. 4
    3
      css/filmstrip/_tile_view.scss
  2. 3
    1
      react/features/filmstrip/functions.web.js

+ 4
- 3
css/filmstrip/_tile_view.scss View File

15
         box-sizing: border-box;
15
         box-sizing: border-box;
16
         display: flex;
16
         display: flex;
17
         flex-direction: column;
17
         flex-direction: column;
18
-        height: 100vh;
18
+        height: calc(100vh - 200px);
19
         width: 100vw;
19
         width: 100vw;
20
+        margin: 100px 0px;
20
     }
21
     }
21
 
22
 
22
     .filmstrip__videos .videocontainer {
23
     .filmstrip__videos .videocontainer {
77
         box-sizing: border-box;
78
         box-sizing: border-box;
78
         display: flex;
79
         display: flex;
79
         flex-wrap: wrap;
80
         flex-wrap: wrap;
80
-        height: 100vh;
81
+        margin-top: auto;
82
+        margin-bottom: auto;
81
         justify-content: center;
83
         justify-content: center;
82
-        padding: 100px 0;
83
 
84
 
84
         .videocontainer {
85
         .videocontainer {
85
             border: 0;
86
             border: 0;

+ 3
- 1
react/features/filmstrip/functions.web.js View File

104
     // Minimum space to keep between the sides of the tiles and the sides
104
     // Minimum space to keep between the sides of the tiles and the sides
105
     // of the window.
105
     // of the window.
106
     const sideMargins = 30 * 2;
106
     const sideMargins = 30 * 2;
107
+
108
+    const verticalMargins = visibleRows * 10;
107
     const viewWidth = clientWidth - sideMargins;
109
     const viewWidth = clientWidth - sideMargins;
108
-    const viewHeight = clientHeight - topBottomPadding;
110
+    const viewHeight = clientHeight - topBottomPadding - verticalMargins;
109
     const initialWidth = viewWidth / columns;
111
     const initialWidth = viewWidth / columns;
110
     const aspectRatioHeight = initialWidth / TILE_ASPECT_RATIO;
112
     const aspectRatioHeight = initialWidth / TILE_ASPECT_RATIO;
111
     const height = Math.floor(Math.min(aspectRatioHeight, viewHeight / visibleRows));
113
     const height = Math.floor(Math.min(aspectRatioHeight, viewHeight / visibleRows));

Loading…
Cancel
Save