##// END OF EJS Templates
jro_apps » redmine
RSS
Makes the application settings forms responsive (#19097)....
Jean-Philippe Lang -
r14463:093c80cd0981
parent child
Show More
Side by Side Unified
Context file:
r14463:093c80cd0981 Loading diff...:
Show file before | Show file after | Hide comments
@@ -1,779 +1,779
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 67 min-width: 0; /* reset the min-width of 900px */
68 68
69 69 -webkit-overflow-scrolling: touch;
70 70 }
71 71
72 72
73 73 body,
74 74 input,
75 75 select,
76 76 textarea,
77 77 button
78 78 {
79 79 font-size: 14px; /* Set font-size for standard elements to 14px */
80 80 }
81 81
82 82
83 83 select
84 84 {
85 85 max-width: 100%; /* prevent long names within select menues from breaking content */
86 86 }
87 87
88 88
89 89 #wrapper
90 90 {
91 91 position: relative;
92 92
93 93 overflow-x: hidden; /* hide horizontal overflow */
94 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 606 overflow: visible;
607 607
608 608 height: 100%;
609 609 }
610 610
611 611 .flyout-is-active .mobile-toggle-button:after
612 612 {
613 613 content: '\00D7'; /* close glyph */
614 614 }
615 615
616 616 .flyout-is-active #wrapper2
617 617 {
618 618
619 619 /*
620 620 * only relevant for devices with cursor when flyout it active, in order to show,
621 621 * that whole wrapper content is clickable and closes flyout menu
622 622 */
623 623 cursor: pointer;
624 624 }
625 625
626 626
627 627 #admin-menu
628 628 {
629 629 padding-left: 0;
630 630 }
631 631
632 632 #admin-menu li
633 633 {
634 634 padding-bottom: 0;
635 635 }
636 636
637 637 #admin-menu a,
638 638 #admin-menu a.selected
639 639 {
640 640 line-height: 40px;
641 641
642 642 padding: 0;
643 643 padding-left: 32px !important;
644 644
645 645 background-position: 8px 50%;
646 646 }
647 647
648 648 /*----------------------------------------*\
649 649 E) UX ELEMENTS
650 650 \*----------------------------------------*/
651 651
652 652 /* Contextual Buttons */
653 653
654 654 #content>.contextual
655 655 {
656 656 width: 100%;
657 657 margin-bottom: .5em;
658 658 padding-left: 0; /* reset left padding in order to use whole space */
659 659
660 660 white-space: normal;
661 661
662 662 color: transparent;
663 663 }
664 664
665 665 #content>.contextual a,
666 666 p.buttons a
667 667 {
668 668 font-weight: bold;
669 669
670 670 display: inline-block;
671 671
672 672 margin: 5px 0;
673 673 margin-right: 2px;
674 674 padding: 9px 9px 9px 9px;
675 675
676 676 border: 1px solid #ddd;
677 677 -webkit-border-radius: 3px;
678 678 border-radius: 3px;
679 679 background-color: transparent;
680 680 background-position-x: 4px;
681 681 }
682 682
683 683 #content>.contextual a.icon,
684 684 p.buttons a.icon
685 685 {
686 686 padding-left: 25px;
687 687 }
688 688
689 689 .flyout-menu .contextual
690 690 {
691 691 float: none;
692 692 }
693 693
694 694 /* loading indicator */
695 695 #ajax-indicator {
696 696 width: 60%;
697 697 left: 20%;
698 698 }
699 699
700 700 /* jquery ui dialogs */
701 701 .ui-dialog
702 702 {
703 703 max-width: 98%;
704 704 margin: 1%;
705 705 }
706 706
707 707 .ui-dialog .ui-dialog-content
708 708 {
709 709 padding-left: 0;
710 710 padding-right: 0;
711 711 }
712 712
713 713 #filters-table {width:100%; float:none;}
714 714 .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;}
715 715
716 716 /*----------------------------------------*\
717 717 F) PAGE SPECIFIC STYLES
718 718 \*----------------------------------------*/
719 719
720 720 /* page /login */
721 721
722 722 #login-form table
723 723 {
724 724 width: 100%;
725 725 }
726 726
727 727 #login-form input#username,
728 728 #login-form input#password,
729 729 #login-form input#openid_url
730 730 {
731 731 width: 100%;
732 732 height: auto;
733 733 }
734 734
735 735 /* some themes add a margin to login page, remove it on mobile */
736 736 .action-login #main
737 737 {
738 738 margin: 0;
739 739 }
740 740
741 741 /*----------------------------------------*\
742 742 G) FORMS
743 743 \*----------------------------------------*/
744 744
745 745 /* tabular forms resets for mobile */
746 .box.tabular p {
746 .tabular p, .tabular.settings p {
747 747 padding-left: 0;
748 748 }
749 749
750 .box.tabular label {
750 .tabular label, .tabular.settings label {
751 751 display: block;
752 752 width: 100%;
753 753 margin-left: 0;
754 754 text-align: left;
755 755 }
756 756
757 .box.tabular input, .box.tabular select, .box.tabular textarea {
757 .tabular input, .tabular select, .tabular textarea {
758 758 width: 100%;
759 759 max-width: 100%;
760 760 }
761 761
762 .box.tabular input[type="checkbox"], .box.tabular input.date {
762 .tabular input[type="checkbox"], .tabular input.date {
763 763 width: auto;
764 764 max-width: 95%;
765 765 }
766 766
767 767 /* new issue form */
768 768 #all_attributes p:first-child {
769 769 float: none !important;
770 770 }
771 771
772 772 #issue_is_private_label {
773 773 display: inline;
774 774 }
775 775
776 776 span#watchers_inputs {
777 777 width: 100%;
778 778 }
779 779 }
General Comments 0
You need to be logged in to leave comments. Login now