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