瀏覽代碼

fix(filmstrip-only): do not re-align local video for invite button

The bottom alignment of the local video container is adjusted
in horizontal filmstrip mode so that the videos remain evenly
aligned at the top but the invite button sticks out. With
the invite button hidden in filmstrip only, this only caused
misalignment. Re-adjust the local video container back down
and put transitions on the filmstrip wrapper itself, instead
of on the thumbnail wrapper level to avoid transitions
when re-adjusting.
j8
Leonard Kim 8 年之前
父節點
當前提交
a8cc65ab9a
共有 2 個檔案被更改,包括 15 行新增5 行删除
  1. 7
    1
      css/_filmstrip.scss
  2. 8
    4
      css/_vertical_filmstrip_overrides.scss

+ 7
- 1
css/_filmstrip.scss 查看文件

52
         /* The filmstrip should not be covered by the left toolbar. */
52
         /* The filmstrip should not be covered by the left toolbar. */
53
         bottom: 0;
53
         bottom: 0;
54
         width:auto;
54
         width:auto;
55
-        transition: bottom 2s;
56
         overflow: visible !important;
55
         overflow: visible !important;
57
 
56
 
58
         &#remoteVideos {
57
         &#remoteVideos {
59
             border: $thumbnailsBorder solid transparent;
58
             border: $thumbnailsBorder solid transparent;
60
             padding-left: $defaultToolbarSize + 5;
59
             padding-left: $defaultToolbarSize + 5;
60
+            transition: bottom 2s;
61
         }
61
         }
62
 
62
 
63
         /**
63
         /**
187
     &__videos-filmstripOnly {
187
     &__videos-filmstripOnly {
188
         margin-top: auto;
188
         margin-top: auto;
189
         margin-bottom: auto;
189
         margin-bottom: auto;
190
+
191
+        .filmstrip__videos {
192
+            &#filmstripLocalVideo {
193
+                bottom: 0px;
194
+            }
195
+        }
190
     }
196
     }
191
 
197
 
192
     .remote-videos-container {
198
     .remote-videos-container {

+ 8
- 4
css/_vertical_filmstrip_overrides.scss 查看文件

29
          */
29
          */
30
         .filmstrip__videos {
30
         .filmstrip__videos {
31
             right: 0;
31
             right: 0;
32
-            transition: right 2s;
33
 
32
 
34
             &.hidden {
33
             &.hidden {
35
                 bottom: auto;
34
                 bottom: auto;
37
             }
36
             }
38
 
37
 
39
             /**
38
             /**
40
-             * Remove horizontal filmstrip padding used to prevent videos from
41
-             * overlapping the left-side toolbar. An id selector is used to
42
-             * match id specificity with filmstrip styles.
39
+             * An id selector is used to match id specificity with existing
40
+             * filmstrip styles.
43
              */
41
              */
44
             &#remoteVideos {
42
             &#remoteVideos {
43
+                /**
44
+                 * Remove horizontal filmstrip padding used to prevent videos
45
+                 * from overlapping the left-side toolbar. An id selector is
46
+                 * used to match id specificity with filmstrip styles.
47
+                 */
45
                 padding-left: 0;
48
                 padding-left: 0;
49
+                transition: right 2s;
46
             }
50
             }
47
         }
51
         }
48
 
52
 

Loading…
取消
儲存