Skip to:
Content

BuddyPress.org

Ticket #6290: 6290.css.04

File 6290.css.04, 6.6 KB (added by hnla, 5 years ago)

Update styles for improved handling of upload screen where avatar default sizes changed by user.

Line 
1Index: src/bp-core/css/avatar.css
2===================================================================
3--- src/bp-core/css/avatar.css  (revision 9785)
4+++ src/bp-core/css/avatar.css  (working copy)
5@@ -1,6 +1,6 @@
6 div.bp-avatar-status {
7-       clear:both;
8-       margin:1em 0;
9+       clear: both;
10+       margin: 1em 0;
11 }
12 
13 div.bp-avatar-status p.updated {
14@@ -21,47 +21,47 @@
15 }
16 
17 .progress {
18+       background: none;
19+       border: 1px solid #d1d1d1;
20        float: right;
21        height: 22px;
22+       line-height: 2em;
23        margin: 6px 10px 0 0;
24-       width: 200px;
25-       line-height: 2em;
26+       margin-bottom: 2px;
27        padding: 0;
28        overflow: hidden;
29-       margin-bottom: 2px;
30-       border: 1px solid #d1d1d1;
31-       background: none;
32+       width: 200px;
33 }
34 
35 .bar {
36-       z-index: 9;
37+       background-color: #c3ff88;
38        width: 0;
39        height: 100%;
40-       background-color: #c3ff88;
41+       z-index: 9;
42 }
43 
44 .bp-uploader-progress div.error {
45-       font-size: 90%;
46-       display: block;
47-       padding: 10px 15px;
48        background-color: #fdc;
49        border: 1px solid #a00;
50        color: #800;
51+       display: block;
52+       font-size: 90%;
53+       padding: 10px 15px;
54 }
55 
56 #bp-uploader-warning, #bp-webcam-message p.warning {
57-       margin:1em 0;
58-       font-size: 90%;
59-       display: block;
60-       padding: 10px 15px;
61        background-color: #ffec8b;
62        border: 1px solid #fc0;
63        color: #440;
64+       display: block;
65+       font-size: 90%;
66+       margin: 1em 0;
67+       padding: 10px 15px;
68 }
69 
70 div.bp-avatar-nav {
71-       clear:both;
72        background: transparent;
73+       clear: both;
74        margin: 10px 0 10px;
75        overflow: hidden;
76 }
77@@ -72,22 +72,22 @@
78 }
79 
80 .bp-avatar-nav .avatar-nav-items li.avatar-nav-item {
81-       float: left;
82-       margin: 0;
83-       list-style: none;
84- }
85+ float: left;
86+ margin: 0;
87+ list-style: none;
88+}
89 
90 .avatar-nav-items li a {
91-       display: block;
92-       padding: 5px 10px;
93-       text-decoration: none;
94+ display: block;
95+ padding: 5px 10px;
96+ text-decoration: none;
97 }
98 
99 .avatar-nav-items li.current a {
100        background-color: #eee;
101        color: #555;
102-       opacity: .8;
103        font-weight: bold;
104+       opacity: 0.8;
105 }
106 
107 #drag-drop-area {
108@@ -100,24 +100,34 @@
109 }
110 
111 .drag-drop-inside p {
112-       display:none;
113+       display: none;
114 }
115 
116 .drag-drop-inside p.drag-drop-buttons {
117-       margin-top:80px;
118+       margin-top: 80px;
119        text-align: center;
120 }
121+
122 .drag-drop .drag-drop-inside p.drag-drop-buttons {
123-       margin:auto;
124+       margin: auto;
125        text-align: auto;
126 }
127 
128+.drag-drop #drag-drop-area {
129+       display: table;
130+       height: 100%;
131+       width: 100%;
132+}
133+
134 .drag-drop .drag-drop-inside {
135-       margin: 70px auto 0;
136-       width: 250px;
137+       display: table-cell;
138+       padding: 40px 0;
139+       text-align: center;
140+       vertical-align: middle;
141 }
142 
143-.drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons {
144+.drag-drop .drag-drop-inside p,
145+.drag-drop-inside p.drag-drop-buttons {
146        display: block;
147 }
148 
149@@ -128,19 +138,76 @@
150        text-align: center;
151 }
152 
153+.drag-drop-inside p.drag-drop-info {margin-top: 0;}
154+
155 #avatar-to-crop {
156-       float: left;
157-       margin: 0 20px 20px 0;
158+       margin: 0 auto 20px ;
159        text-align: left;
160 }
161+
162+#bp-webcam-avatar #avatar-to-crop {
163+       float: left;
164+       margin: 0 0 20px;
165+}
166+
167+#avatar-to-crop .jcrop-holder {
168+       margin: 0 auto;
169+}
170+
171+.avatar-crop-management {
172+       clear: left;
173+       overflow: hidden;
174+       padding-top: 20px;
175+       text-align: center;
176+}
177+
178+#bp-webcam-avatar .avatar-crop-management {
179+       clear: none;
180+       float: none;
181+       overflow: visible;
182+       padding-top: 0;
183+       width: auto;
184+}
185+
186 #avatar-crop-pane {
187+       margin: 0 auto;
188        overflow: hidden;
189 }
190 
191-#avatar-crop-actions {
192-       margin: 20px 0;
193+#bp-webcam-avatar #avatar-to-crop {
194+       border: 1px solid #eee;
195+       max-width: 100%;
196+       width: 100%;
197 }
198 
199+@media screen and (min-width: 801px) {
200+       #bp-webcam-avatar #avatar-to-crop {
201+               max-width: 64%;
202+               width: 64%;
203+       }
204+}
205+
206+#avatar-crop-actions a {
207+       display: block;
208+}
209+
210+#bp-webcam-avatar #avatar-crop-actions {
211+       float: left;
212+       margin: 0 0 20px 0;
213+       width: 50%;
214+}
215+
216+#avatar-crop-actions a.button {
217+       margin-top: 10px;
218+}
219+
220+#bp-webcam-avatar #avatar-crop-actions a.button {
221+       display: block;
222+       margin: 0 0 5px;
223+       padding: 4px 0;
224+       width: 100%;
225+}
226+
227 #avatar-to-crop img,
228 #avatar-crop-pane img,
229 #avatar-crop-pane canvas,
230@@ -152,19 +219,83 @@
231 }
232 
233 #bp-webcam-avatar video {
234-       float:left;
235-       width:450px;
236+       float: left;
237+       margin-bottom: 0;
238+       max-width: 100%;
239+       width: 100%;
240 }
241 
242 #bp-webcam-avatar #avatar-crop-pane {
243        border: 2px dashed #bbb;
244+       clear: left;
245+       float: right;
246+       margin: 0  40px 10px 0;
247+       overflow: hidden;
248 }
249 
250+/**
251+*  Users can define avatar constants with new dimension values
252+*  If they do, we'll ensure the layouts preserved by enforcing a max width
253+*  that matches bp default settings.
254+*/
255+#bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
256+       max-width: 150px;
257+       max-height: 150px;
258+}
259+
260+#avatar-crop-pane canvas {
261+       height: auto;
262+       width: 100%;
263+       max-width: 100%;
264+}
265+
266+.group-avatar .bp-avatar .avatar-crop-management {
267+       margin-left: 0;
268+       padding-top: 0;
269+       width: auto;
270+}
271+
272+@media screen and (max-width: 480px) {
273+
274+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions,
275+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
276+               float: none;
277+       }
278+
279+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
280+               margin: 0 auto 10px;
281+       }
282+
283+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions  {
284+               width: auto;
285+       }
286+
287+}
288+
289+@media screen and (min-width: 801px) {
290+
291+       #bp-webcam-avatar .avatar-crop-management {
292+               clear: none;
293+               float: right;
294+       }
295+
296+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
297+               float: none;
298+               margin: 0 auto 10px;
299+       }
300+
301+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions {
302+               float: left;
303+               width: 100%;
304+       }
305+
306+}
307+
308 /** Admin Profile **/
309 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent,
310 body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent {
311-       width:95%!important;
312-       height:95%!important;
313+       height: 95% !important;
314+       width: 95% !important;
315 }
316 
317 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent p.updated,
318@@ -174,3 +305,44 @@
319        display: block;
320        padding: 10px 15px;
321 }
322+
323+.wp-admin #TB_window .bp-avatar #avatar-to-crop {
324+       float: left;
325+       margin: 0;
326+}
327+.wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
328+       margin-bottom: 20px;
329+}
330+@media screen and (min-width: 783px) {
331+
332+       .wp-admin #TB_window .bp-avatar .avatar-crop-management {
333+               clear: none;
334+               float: left;
335+               margin-left: 20px;
336+               padding-top: 0;
337+               text-align: center;
338+
339+       }
340+
341+}
342+
343+.wp-admin #TB_window .bp-avatar #avatar-to-crop video {
344+               width: 100%;
345+       }
346+
347+.wp-admin #TB_window .bp-avatar .avatar-crop-management a.button {
348+       height: auto;
349+       line-height: inherit;
350+}
351+
352+@media screen and (min-width: 810px) {
353+       .wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
354+               max-width: none;
355+               width: 76%;
356+       }
357+
358+       .wp-admin #TB_window #bp-webcam-avatar .avatar-crop-management {
359+               max-width: none;
360+               width: auto;
361+       }
362+}