瀏覽代碼

fix(prejoin): Fix CSS for prejoin page according to design

j8
Vlad Piersec 5 年之前
父節點
當前提交
8115f86f59
共有 2 個檔案被更改,包括 23 行新增12 行删除
  1. 18
    9
      css/_premeeting-screens.scss
  2. 5
    3
      react/features/base/premeeting/components/web/CopyMeetingUrl.js

+ 18
- 9
css/_premeeting-screens.scss 查看文件

40
             font-weight: 300;
40
             font-weight: 300;
41
             justify-content: center;
41
             justify-content: center;
42
             line-height: 24px;
42
             line-height: 24px;
43
+            margin-bottom: 16px;
43
 
44
 
44
             .url {
45
             .url {
45
                 display: flex;
46
                 display: flex;
59
                 }
60
                 }
60
             }
61
             }
61
 
62
 
63
+            .copy-meeting-text {
64
+                width: 266px;
65
+                white-space: nowrap;
66
+                overflow: hidden;
67
+                text-overflow: ellipsis;
68
+            }
69
+
62
             &:hover {
70
             &:hover {
63
                 align-self: stretch;
71
                 align-self: stretch;
64
             }
72
             }
77
             border: 1px solid transparent;
85
             border: 1px solid transparent;
78
             color: white;
86
             color: white;
79
             outline-width: 0;
87
             outline-width: 0;
80
-            padding: 20px;
88
+            padding: 8px 0;
81
             text-align: center;
89
             text-align: center;
90
+            width: 100%;
82
 
91
 
83
             &.focused {
92
             &.focused {
84
                 border-bottom: 1px solid white;
93
                 border-bottom: 1px solid white;
96
             display: inline-block;
105
             display: inline-block;
97
             font-size: 15px;
106
             font-size: 15px;
98
             line-height: 24px;
107
             line-height: 24px;
99
-            margin: 10px;
108
+            margin-top: 16px;
100
             padding: 7px 16px;
109
             padding: 7px 16px;
101
             position: relative;
110
             position: relative;
102
             text-align: center;
111
             text-align: center;
103
             width: 286px;
112
             width: 286px;
104
-    
113
+
105
             &.primary {
114
             &.primary {
106
                 background: #0376DA;
115
                 background: #0376DA;
107
                 border: 1px solid #0376DA;
116
                 border: 1px solid #0376DA;
108
             }
117
             }
109
-    
118
+
110
             &.secondary {
119
             &.secondary {
111
                 background: transparent;
120
                 background: transparent;
112
                 border: 1px solid #5E6D7A;
121
                 border: 1px solid #5E6D7A;
113
             }
122
             }
114
-    
123
+
115
             &.text {
124
             &.text {
116
                 width: auto;
125
                 width: auto;
117
                 font-size: 13px;
126
                 font-size: 13px;
118
                 margin: 0;
127
                 margin: 0;
119
                 padding: 0;
128
                 padding: 0;
120
             }
129
             }
121
-    
130
+
122
             &.disabled {
131
             &.disabled {
123
                 background: #5E6D7A;
132
                 background: #5E6D7A;
124
                 border: 1px solid #5E6D7A;
133
                 border: 1px solid #5E6D7A;
125
                 color: #AFB6BC;
134
                 color: #AFB6BC;
126
                 cursor: initial;
135
                 cursor: initial;
127
-    
136
+
128
                 .icon {
137
                 .icon {
129
                     & > svg {
138
                     & > svg {
130
                         fill: #AFB6BC;
139
                         fill: #AFB6BC;
131
                     }
140
                     }
132
                 }
141
                 }
133
-    
142
+
134
                 .options {
143
                 .options {
135
                     border-left: 1px solid #AFB6BC;
144
                     border-left: 1px solid #AFB6BC;
136
                 }
145
                 }
191
         position: absolute;
200
         position: absolute;
192
         width: 100%;
201
         width: 100%;
193
     }
202
     }
194
-}
203
+}

+ 5
- 3
react/features/base/premeeting/components/web/CopyMeetingUrl.js 查看文件

163
                 <div
163
                 <div
164
                     className = { `url ${showLinkCopied ? 'done' : ''}` }
164
                     className = { `url ${showLinkCopied ? 'done' : ''}` }
165
                     onClick = { _copyUrl } >
165
                     onClick = { _copyUrl } >
166
-                    { !showCopyLink && !showLinkCopied && url }
167
-                    { showCopyLink && t('prejoin.copyAndShare') }
168
-                    { showLinkCopied && t('prejoin.linkCopied') }
166
+                    <div className = 'copy-meeting-text'>
167
+                        { !showCopyLink && !showLinkCopied && url }
168
+                        { showCopyLink && t('prejoin.copyAndShare') }
169
+                        { showLinkCopied && t('prejoin.linkCopied') }
170
+                    </div>
169
                     <Icon
171
                     <Icon
170
                         onClick = { _copyUrl }
172
                         onClick = { _copyUrl }
171
                         size = { 24 }
173
                         size = { 24 }

Loading…
取消
儲存