##// END OF EJS Templates
jro_apps » redmine
RSS
Make UI Dialogs responsive (#19097)....
Jean-Philippe Lang -
r14442:e9a01896d0b9
parent child
Show More
Side by Side Unified
Context file:
r14442:e9a01896d0b9 Loading diff...:
Show file before | Show file after | Hide comments
@@ -1,727 +1,740
1 1 /*----------------------------------------*\
2 2 RESPONSIVE CSS
3 3 \*----------------------------------------*/
4 4
5 5
6 6 /*
7 7
8 8 CONTENTS
9 9
10 10 A) BASIC MOBILE RESETS
11 11 B) HEADER & TOP MENUS
12 12 C) MAIN CONTENT & SIDEBAR
13 13 D) TOGGLE BUTTON & FLYOUT MENU
14 14 E) UX ELEMENTS
15 15 F) PAGE SPECIFIC STYLES
16 16
17 17 */
18 18
19 19
20 20 /* Hide new elements (toggle button and flyout menu) above 900px */
21 21 .mobile-toggle-button,
22 22 .flyout-menu
23 23 {
24 24 display: none;
25 25 }
26 26
27 27 /*
28 28 redmine's body is set to min-width: 900px
29 29 add first breakpoint here and start adding responsiveness
30 30 */
31 31
32 32 @media all and (max-width: 899px)
33 33 {
34 34 /*----------------------------------------*\
35 35 A) BASIC MOBILE RESETS
36 36 \*----------------------------------------*/
37 37
38 38 /*
39 39 apply natural border box, see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
40 40 this helps us to better deal with percentages and padding / margin
41 41 */
42 42 *,
43 43 *:before,
44 44 *:after
45 45 {
46 46 -webkit-box-sizing: border-box;
47 47 -moz-box-sizing: border-box;
48 48 box-sizing: border-box;
49 49 }
50 50
51 51 body,
52 52 html
53 53 {
54 54 height: 100%;
55 55 margin: 0;
56 56 padding: 0;
57 57 }
58 58
59 59 html
60 60 {
61 61 overflow-y: auto; /* avoid 2nd scrollbar on desktop */
62 62 }
63 63
64 64 body
65 65 {
66 66 overflow-x: hidden; /* hide horizontal overflow */
67 67
68 68 min-width: 0; /* reset the min-width of 900px */
69 69
70 70 -webkit-overflow-scrolling: touch;
71 71 }
72 72
73 73
74 74 body,
75 75 input,
76 76 select,
77 77 textarea,
78 78 button
79 79 {
80 80 font-size: 14px; /* Set font-size for standard elements to 14px */
81 81 }
82 82
83 83
84 84 select
85 85 {
86 86 max-width: 100%; /* prevent long names within select menues from breaking content */
87 87 }
88 88
89 89
90 90 #wrapper
91 91 {
92 92 position: relative;
93 93
94 94 max-width: 100%;
95 95 }
96 96
97 97 #wrapper,
98 98 #wrapper2
99 99 {
100 100 margin: 0;
101 101 }
102 102
103 103 /*----------------------------------------*\
104 104 B) HEADER & TOP MENUS
105 105 \*----------------------------------------*/
106 106
107 107 #header
108 108 {
109 109 width: 100%;
110 110 height: 64px; /* the height of our header on mobile */
111 111 min-height: 0;
112 112 margin: 0;
113 113 padding: 0;
114 114
115 115 border: none;
116 116 background-color: #628db6;
117 117 }
118 118
119 119 /* Hide project name on mobile (project name is still visible in select menu) */
120 120 #header h1
121 121 {
122 122 display: none !important;
123 123 }
124 124
125 125 /* reset #header a color for mobile toggle button */
126 126 #header a.mobile-toggle-button
127 127 {
128 128 color: #f8f8f8;
129 129 }
130 130
131 131
132 132 /* Hide top-menu and main-menu on mobile, because it's placed in our flyout menu */
133 133 #top-menu,
134 134 #header #main-menu
135 135 {
136 136 display: none;
137 137 }
138 138
139 139 /* the quick search within header holding search form and #project_quick_jump_box box*/
140 140 #header #quick-search
141 141 {
142 142 float: none;
143 143 clear: none; /* there are themes which set clear property, this resets it */
144 144
145 145 max-width: 100%; /* reset max-width */
146 146 margin: 0;
147 147
148 148 background: inherit;
149 149 }
150 150
151 151 /* this represents the dropdown arrow to left of the mobile project menu */
152 152 #header .jump-box-arrow:before
153 153 {
154 154 /* set a font-size in order to achive same result in different themes */
155 155 font-family: Verdana, sans-serif;
156 156 font-size: 2em;
157 157 line-height: 64px;
158 158
159 159 position: absolute;
160 160 left: 0;
161 161
162 162 width: 2em;
163 163 padding: 0 .5em;
164 164 /* achieve dropdwon arrow by scaling a caret character */
165 165
166 166 content: '^';
167 167 -webkit-transform: scale(1,-.8);
168 168 -ms-transform: scale(1,-.8);
169 169 transform: scale(1,-.8);
170 170 text-align: right;
171 171 pointer-events: none;
172 172
173 173 opacity: .6;
174 174 }
175 175
176 176 /* styles for combobox within quick-search (#project_quick_jump_box) */
177 177 #header #quick-search select
178 178 {
179 179 font-size: 1.5em;
180 180 font-weight: bold;
181 181 line-height: 1.2;
182 182
183 183 position: absolute;
184 184 top: 15px;
185 185 left: 0;
186 186
187 187 float: left;
188 188
189 189 width: 100%;
190 190 max-width: 100%;
191 191 height: 2em;
192 192 height: 35px;
193 193 padding: 5px;
194 194 padding-right: 72px;
195 195 padding-left: 50px;
196 196
197 197 text-indent: .01px;
198 198
199 199 color: inherit;
200 200 border: 0;
201 201 -webkit-border-radius: 0;
202 202 border-radius: 0;
203 203 background: none;
204 204 -webkit-box-shadow: none;
205 205 box-shadow: none;
206 206 /* hide default browser arrow */
207 207
208 208 -webkit-appearance: none;
209 209 -moz-appearance: none;
210 210 }
211 211
212 212 #header #quick-search form
213 213 {
214 214 display: none;
215 215 }
216 216
217 217 /*----------------------------------------*\
218 218 C) MAIN CONTENT & SIDEBAR
219 219 \*----------------------------------------*/
220 220
221 221 #main
222 222 {
223 223 padding: 0;
224 224 }
225 225
226 226 #main.nosidebar #content,
227 227 div#content
228 228 {
229 229 width: 100%;
230 230 min-height: 0; /* reset min-height of #content */
231 231 margin: 0;
232 232 }
233 233
234 234
235 235 /* hide sidebar and sidebar switch panel, since it's placed in mobile flyout menu */
236 236 #sidebar,
237 237 #sidebar-switch-panel
238 238 {
239 239 display: none;
240 240 }
241 241
242 242 .splitcontentleft
243 243 {
244 244 width: 100%; /* use full width */
245 245 }
246 246
247 247 .splitcontentright
248 248 {
249 249 width: 100%; /* use full width */
250 250 }
251 251
252 252 /*----------------------------------------*\
253 253 D) TOGGLE BUTTON & FLYOUT MENU
254 254 \*----------------------------------------*/
255 255
256 256 /* Mobile toggle button */
257 257
258 258 .mobile-toggle-button
259 259 {
260 260 font-size: 42px;
261 261 line-height: 64px;
262 262
263 263 position: relative;
264 264 z-index: 10;
265 265
266 266 display: block; /* remove display: none; of non-mobile version */
267 267 float: right;
268 268
269 269 width: 60px;
270 270 height: 64px;
271 271 margin-top: 0;
272 272
273 273 text-align: center;
274 274
275 275 border-left: 1px solid #ddd;
276 276 }
277 277
278 278 .mobile-toggle-button:hover,
279 279 .mobile-toggle-button:active
280 280 {
281 281 text-decoration: none;
282 282 }
283 283
284 284 .mobile-toggle-button:after
285 285 {
286 286 font-family: Verdana, sans-serif;
287 287
288 288 display: block;
289 289
290 290 margin-top: -3px;
291 291
292 292 content: '\2261';
293 293 }
294 294
295 295 /* search magnifier icon */
296 296 .search-magnifier
297 297 {
298 298 font-family: Verdana;
299 299
300 300 cursor: pointer;
301 301 -webkit-transform: rotate(-45deg);
302 302 -moz-transform: rotate(45deg);
303 303 -o-transform: rotate(45deg);
304 304
305 305 color: #bbb;
306 306 }
307 307
308 308 .search-magnifier--flyout
309 309 {
310 310 font-size: 25px;
311 311 line-height: 54px;
312 312
313 313 position: absolute;
314 314 z-index: 1;
315 315 left: 12px;
316 316 }
317 317
318 318
319 319 /* Flyout Menu */
320 320
321 321 .flyout-menu
322 322 {
323 323 position: absolute;
324 324 right: -250px;
325 325
326 326 display: block; /* remove display: none; of non-mobile version */
327 327 overflow-x: hidden;
328 328
329 329 width: 250px;
330 330 height: 100%;
331 331 margin: 0; /* reset margin for themes that define it */
332 332 padding: 0; /* reset padding for themes that define it */
333 333
334 334 color: white;
335 335 background-color: #3e5b76;
336 336 }
337 337
338 338
339 339 /* avoid zoom on search input focus for ios devices */
340 340 .flyout-menu input[type='text']
341 341 {
342 342 font-size: 16px;
343 343 }
344 344
345 345 .flyout-menu h3
346 346 {
347 347 font-size: 11px;
348 348 line-height: 19px;
349 349
350 350 height: 20px;
351 351 margin: 0;
352 352 padding: 0;
353 353
354 354 letter-spacing: .1em;
355 355 text-transform: uppercase;
356 356
357 357 color: white;
358 358 border-top: 1px solid #506a83;
359 359 border-bottom: 1px solid #506a83;
360 360 background-color: #628db6;
361 361 }
362 362
363 363 .flyout-menu h4
364 364 {
365 365 color: white;
366 366 }
367 367
368 368 .flyout-menu h3,
369 369 .flyout-menu h4,
370 370 .flyout-menu > p,
371 371 .flyout-menu > a,
372 372 .flyout-menu ul li a,
373 373 .flyout-menu__search,
374 374 .flyout-menu__sidebar > div,
375 375 .flyout-menu__sidebar > p,
376 376 .flyout-menu__sidebar > a,
377 377 .flyout-menu__sidebar > form,
378 378 .flyout-menu > div,
379 379 .flyout-menu > form
380 380 {
381 381 padding-left: 8px;
382 382 }
383 383
384 384 .flyout-menu .flyout-menu__avatar
385 385 {
386 386 margin-top: -1px; /* move avatar up 1px */
387 387 padding-left: 0;
388 388 }
389 389
390 390 .flyout-menu__sidebar > form
391 391 {
392 392 display: block;
393 393 }
394 394
395 395 .flyout-menu__sidebar > form h3
396 396 {
397 397 margin-left: -8px;
398 398 }
399 399
400 400 .flyout-menu__sidebar > form label
401 401 {
402 402 display: inline-block;
403 403
404 404 margin: 8px 0;
405 405 }
406 406
407 407 .flyout-menu__sidebar > form br br
408 408 {
409 409 display: none;
410 410 }
411 411
412 412 .flyout-menu ul
413 413 {
414 414 margin: 0;
415 415 padding: 0;
416 416
417 417 list-style: none;
418 418 }
419 419
420 420 .flyout-menu #watchers
421 421 {
422 422 display: -webkit-flex;
423 423 display: -ms-flexbox;
424 424 display: -webkit-box;
425 425 display: flex;
426 426 flex-direction: column;
427 427
428 428 -webkit-flex-direction: column;
429 429 -ms-flex-direction: column;
430 430 -webkit-box-orient: vertical;
431 431 -webkit-box-direction: normal;
432 432 }
433 433
434 434 .flyout-menu #watchers .contextual
435 435 {
436 436 -webkit-box-ordinal-group: 4;
437 437 -webkit-order: 3;
438 438 -ms-flex-order: 3;
439 439 order: 3;
440 440 }
441 441
442 442 .flyout-menu #watchers h3
443 443 {
444 444 margin-left: -8px;
445 445 }
446 446
447 447 .flyout-menu #watchers ul li
448 448 {
449 449 display: -webkit-flex;
450 450 display: -ms-flexbox;
451 451 display: -webkit-box;
452 452 display: flex;
453 453 flex-direction: row;
454 454
455 455 -webkit-flex-direction: row;
456 456 -ms-flex-direction: row;
457 457 -webkit-box-orient: horizontal;
458 458 -webkit-box-direction: normal;
459 459 -webkit-align-items: center;
460 460 -ms-flex-align: center;
461 461 -webkit-box-align: center;
462 462 align-items: center;
463 463 }
464 464
465 465 .flyout-menu ul li a
466 466 {
467 467 line-height: 40px;
468 468
469 469 display: block;
470 470 overflow: hidden;
471 471
472 472 height: 40px;
473 473
474 474 white-space: nowrap;
475 475 text-overflow: ellipsis;
476 476
477 477 border-top: 1px solid rgba(255,255,255,.1);
478 478 }
479 479
480 480 .flyout-menu ul li:first-child a
481 481 {
482 482 line-height: 39px;
483 483
484 484 height: 39px;
485 485
486 486 border-top: none;
487 487 }
488 488
489 489 .flyout-menu a
490 490 {
491 491 color: white;
492 492 }
493 493
494 494 .flyout-menu ul li a:hover
495 495 {
496 496 text-decoration: none;
497 497 }
498 498
499 499 .flyout-menu ul li a.new-object,
500 500 .new-object ~ .menu-children
501 501 {
502 502 display: none;
503 503 }
504 504
505 505 /* Left flyout search container */
506 506 .flyout-menu__search
507 507 {
508 508 line-height: 54px;
509 509
510 510 height: 64px;
511 511 padding-top: 3px;
512 512 padding-right: 8px;
513 513 }
514 514
515 515 .flyout-menu__search input[type='text']
516 516 {
517 517 line-height: 2;
518 518
519 519 width: 100%;
520 520 height: 38px;
521 521 padding-left: 27px;
522 522
523 523 vertical-align: middle;
524 524
525 525 border: none;
526 526 -webkit-border-radius: 3px;
527 527 border-radius: 3px;
528 528 background-color: #fff;
529 529 }
530 530
531 531 .flyout-menu__avatar
532 532 {
533 533 display: -webkit-box;
534 534 display: -webkit-flex;
535 535 display: -ms-flexbox;
536 536 display: flex;
537 537
538 538 width: 100%;
539 539
540 540 border-top: 1px solid rgba(255,255,255,.1);
541 541 }
542 542
543 543
544 544 .flyout-menu__avatar img.gravatar
545 545 {
546 546 width: 40px;
547 547 height: 40px;
548 548 padding: 0;
549 549
550 550 vertical-align: top;
551 551
552 552 border-width: 0;
553 553 }
554 554
555 555 .flyout-menu__avatar a
556 556 {
557 557 line-height: 40px;
558 558
559 559 height: auto;
560 560 height: 40px;
561 561
562 562 text-decoration: none;
563 563
564 564 color: white;
565 565 }
566 566
567 567 /* avatar */
568 568 .flyout-menu__avatar a:first-child
569 569 {
570 570 line-height: 0;
571 571
572 572 width: 40px;
573 573 padding: 0;
574 574 }
575 575
576 576 .flyout-menu__avatar .user
577 577 {
578 578 padding-left: 15px;
579 579 }
580 580
581 581 /* user link when no avatar is present */
582 582 .flyout-menu__avatar--no-avatar a.user
583 583 {
584 584 line-height: 40px;
585 585
586 586 padding-left: 8px;
587 587 }
588 588
589 589
590 590 .flyout-is-active body
591 591 {
592 592 overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */
593 593 }
594 594
595 595 html.flyout-is-active
596 596 {
597 597 overflow: hidden;
598 598 }
599 599
600 600
601 601 .flyout-is-active #wrapper
602 602 {
603 603 right: 250px; /* when left flyout is active, move body to the right (same amount like flyout-menu's width) */
604 604
605 605 height: 100%;
606 606 }
607 607
608 608 .flyout-is-active .mobile-toggle-button:after
609 609 {
610 610 content: '\00D7'; /* close glyph */
611 611 }
612 612
613 613 .flyout-is-active #wrapper2
614 614 {
615 615
616 616 /*
617 617 * only relevant for devices with cursor when flyout it active, in order to show,
618 618 * that whole wrapper content is clickable and closes flyout menu
619 619 */
620 620 cursor: pointer;
621 621 }
622 622
623 623
624 624 #admin-menu
625 625 {
626 626 padding-left: 0;
627 627 }
628 628
629 629 #admin-menu li
630 630 {
631 631 padding-bottom: 0;
632 632 }
633 633
634 634 #admin-menu a,
635 635 #admin-menu a.selected
636 636 {
637 637 line-height: 40px;
638 638
639 639 padding: 0;
640 640 padding-left: 32px !important;
641 641
642 642 background-position: 8px 50%;
643 643 }
644 644
645 645 /*----------------------------------------*\
646 646 E) UX ELEMENTS
647 647 \*----------------------------------------*/
648 648
649 649 /* Contextual Buttons */
650 650
651 651 .contextual
652 652 {
653 653 width: 100%;
654 654 margin-bottom: .5em;
655 655 padding-left: 0; /* reset left padding in order to use whole space */
656 656
657 657 white-space: normal;
658 658
659 659 color: transparent;
660 660 }
661 661
662 662 .contextual a,
663 663 p.buttons a
664 664 {
665 665 font-weight: bold;
666 666
667 667 display: inline-block;
668 668
669 669 margin: 5px 0;
670 670 margin-right: 2px;
671 671 padding: 9px 9px 9px 9px;
672 672
673 673 border: 1px solid #ddd;
674 674 -webkit-border-radius: 3px;
675 675 border-radius: 3px;
676 676 background-color: transparent;
677 677 background-position-x: 4px;
678 678 }
679 679
680 680 .contextual a.icon,
681 681 p.buttons a.icon
682 682 {
683 683 padding-left: 25px;
684 684 }
685 685
686 686 .flyout-menu .contextual
687 687 {
688 688 float: none;
689 689 }
690 690
691 691 #issue_tree .contextual a,
692 692 #relations .contextual a
693 693 {
694 694 float: right;
695 695 }
696 696
697 697 /* loading indicator */
698 698 #ajax-indicator {
699 699 width: 60%;
700 700 left: 20%;
701 701 }
702 702
703 /* jquery ui dialogs */
704 .ui-dialog
705 {
706 max-width: 98%;
707 margin: 1%;
708 }
709
710 .ui-dialog .ui-dialog-content
711 {
712 padding-left: 0;
713 padding-right: 0;
714 }
715
703 716 /*----------------------------------------*\
704 717 F) PAGE SPECIFIC STYLES
705 718 \*----------------------------------------*/
706 719
707 720 /* page /login */
708 721
709 722 #login-form table
710 723 {
711 724 width: 100%;
712 725 }
713 726
714 727 #login-form input#username,
715 728 #login-form input#password,
716 729 #login-form input#openid_url
717 730 {
718 731 width: 100%;
719 732 height: auto;
720 733 }
721 734
722 735 /* some themes add a margin to login page, remove it on mobile */
723 736 .action-login #main
724 737 {
725 738 margin: 0;
726 739 }
727 740 }
General Comments 0
You need to be logged in to leave comments. Login now