Download as
Browse Code »

Commit 6ebd360cf2627f874532db6b6fa7f14d4b23984b

Authored by Dmitriy Zaporozhets
1 parent 463644c8
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Modern theme restyled. Better Profile -> Ui page

Showing 7 changed files with 272 additions and 181 deletions   Show diff stats
app/assets/images/gitlab_classic.png 0 → 100644
View file @6ebd360

2.98 KB
app/assets/images/gitlab_default.png 0 → 100644
View file @6ebd360

6.28 KB
app/assets/images/gitlab_modern.png 0 → 100644
View file @6ebd360

3.8 KB
app/assets/stylesheets/common.scss
  Diff comments   View file @6ebd360
... ... @@ -6,28 +6,28 @@
6 6  
7 7 /** LAYOUT **/
8 8  
9   -.container {
  9 +.container {
10 10 padding-top:0;
11 11 z-index:5;
12 12 }
13 13  
14   -.container .content {
  14 +.container .content {
15 15 margin:0 0;
16 16 }
17 17  
18   -.container .sidebar {
  18 +.container .sidebar {
19 19 width: 200px;
20 20 height:100%;
21 21 min-height:450px;
22 22 float:right;
23 23 }
24 24  
25   -.profile_avatar_holder {
  25 +.profile_avatar_holder {
26 26 float:left;
27 27 width:60px;
28 28 height:60px;
29 29 margin-right:20px;
30   - img {
  30 + img {
31 31 width:60px;
32 32 height:60px;
33 33 background:#eee;
... ... @@ -36,11 +36,11 @@
36 36  
37 37  
38 38 .visible_link,
39   -.author_link {
  39 +.author_link {
40 40 color: $link_color;
41 41 }
42 42  
43   -.widget {
  43 +.widget {
44 44 @include shade;
45 45 padding:20px;
46 46 margin-bottom:20px;
... ... @@ -48,7 +48,7 @@
48 48 border-radius: 5px;
49 49 background:#fafafa;
50 50  
51   - .link_holder {
  51 + .link_holder {
52 52 background:#eee;
53 53 position:relative;
54 54 left:-20px;
... ... @@ -57,16 +57,16 @@
57 57 width:100%;
58 58 border-top:1px solid #ccc;
59 59  
60   - a {
  60 + a {
61 61 font-size:14px;
62 62 color:#666;
63 63 }
64 64 }
65 65 }
66 66  
67   -.help li { color:#111 }
  67 +.help li { color:#111 }
68 68  
69   -.back_link {
  69 +.back_link {
70 70 text-decoration:underline;
71 71 font-size:14px;
72 72 font-weight:bold;
... ... @@ -74,31 +74,31 @@
74 74 padding-bottom:0;
75 75 }
76 76  
77   -.info_link {
  77 +.info_link {
78 78 margin-right:5px;
79 79 float:left;
80 80  
81   - img {
  81 + img {
82 82 width:20px;
83 83 }
84 84 }
85 85  
86   -.download_repo_link {
  86 +.download_repo_link {
87 87 background: url("images.png") no-repeat 0 -48px;
88 88 padding-left:20px;
89 89 }
90 90  
91   -.number {
92   - border-radius: 4px;
93   - text-shadow: none;
94   - background: rgba(0,0,0,.12);
95   - text-align: center;
96   - padding: 2px 4px;
  91 +.number {
  92 + border-radius: 4px;
  93 + text-shadow: none;
  94 + background: rgba(0,0,0,.12);
  95 + text-align: center;
  96 + padding: 2px 4px;
97 97 line-height:18px;
98 98 margin-left:2px;
99 99 }
100 100  
101   -table a code {
  101 +table a code {
102 102 position: relative;
103 103 top: -2px;
104 104 margin-right: 3px;
... ... @@ -108,7 +108,7 @@ table a code {
108 108 margin-top: 5px;
109 109 }
110 110  
111   -.loading {
  111 +.loading {
112 112 margin:20px auto;
113 113 background: url(ajax_loader.gif) no-repeat center center;
114 114 width:40px;
... ... @@ -198,12 +198,12 @@ a.project-update.titled {
198 198 }
199 199 }
200 200  
201   -input.git_clone_url {
  201 +input.git_clone_url {
202 202 width:325px;
203 203 }
204 204  
205 205 .merge-request-form-holder {
206   - select {
  206 + select {
207 207 width:300px;
208 208 }
209 209 }
... ... @@ -217,17 +217,17 @@ input.git_clone_url {
217 217 height: 100px;
218 218 }
219 219  
220   -.project_list_url {
  220 +.project_list_url {
221 221 width:250px;
222 222 background:#fff !important;
223 223 }
224 224  
225 225  
226 226 /** bordered list **/
227   -ul.bordered-list {
  227 +ul.bordered-list {
228 228 margin:5px 0px;
229 229 padding:0px;
230   - li {
  230 + li {
231 231 padding: 5px 0;
232 232 border-bottom: 1px solid #EEE;
233 233 overflow: hidden;
... ... @@ -236,25 +236,25 @@ ul.bordered-list {
236 236 }
237 237 }
238 238  
239   -ul.bordered-list li:last-child { border:none }
  239 +ul.bordered-list li:last-child { border:none }
240 240  
241   -.line_holder {
242   - &:hover {
243   - td {
  241 +.line_holder {
  242 + &:hover {
  243 + td {
244 244 background: #FFFFCF !important;
245 245 }
246 246 }
247 247 }
248 248  
249   -li.commit {
250   - .avatar {
  249 +li.commit {
  250 + .avatar {
251 251 width:24px;
252 252 top:-3px;
253 253 margin-right:10px;
254 254 margin-left:10px;
255 255 }
256 256  
257   - code {
  257 + code {
258 258 padding: 2px 2px 0;
259 259 margin-top: -2px;
260 260 &:hover {
... ... @@ -270,21 +270,21 @@ p.time {
270 270 }
271 271  
272 272  
273   -/**
  273 +/**
274 274 * Dashboard page
275   - *
  275 + *
276 276 */
277   -.dashboard_category {
  277 +.dashboard_category {
278 278 margin-bottom:30px;
279   - h3 a {
  279 + h3 a {
280 280 color:#474D57;
281   - &:hover {
  281 + &:hover {
282 282 text-decoration:underline;
283 283 }
284 284 }
285 285  
286   - .dashboard_block {
287   - .dash_project_item {
  286 + .dashboard_block {
  287 + .dash_project_item {
288 288 margin-bottom:10px;
289 289 border:none;
290 290 padding:0px 5px;
... ... @@ -292,7 +292,7 @@ p.time {
292 292 color:#888;
293 293 &:hover {
294 294 color:#111;
295   - .ico.project {
  295 + .ico.project {
296 296 background-position:-209px -21px;
297 297 }
298 298 }
... ... @@ -304,7 +304,7 @@ p.time {
304 304 }
305 305 }
306 306  
307   -.styled_image {
  307 +.styled_image {
308 308 -webkit-border-radius: 4px;
309 309 -moz-border-radius: 4px;
310 310 border-radius: 4px;
... ... @@ -313,23 +313,23 @@ p.time {
313 313 box-shadow: 0 0 5px #888;
314 314 }
315 315  
316   -.event_feed {
  316 +.event_feed {
317 317 min-height:40px;
318 318 border-bottom:1px solid #ddd;
319   - .avatar {
  319 + .avatar {
320 320 width:32px;
321 321 }
322   - .event_icon {
  322 + .event_icon {
323 323 float:right;
324 324 margin-right:2px;
325   - img {
  325 + img {
326 326 width:20px;
327 327 }
328 328 }
329   - ul {
  329 + ul {
330 330 margin-left:50px;
331 331 margin-bottom:5px;
332   - .avatar {
  332 + .avatar {
333 333 width:24px;
334 334 }
335 335 }
... ... @@ -338,17 +338,18 @@ p.time {
338 338 &:last-child { border:none }
339 339 .wll:hover { background:none }
340 340  
341   - .event_commits {
  341 + .event_commits {
342 342 margin-top: 5px;
343 343  
344   - li.commit {
  344 + li.commit {
  345 + background: transparent;
345 346 padding:5px;
346 347 border:none;
347 348 }
348 349 }
349 350 }
350 351  
351   -.ico {
  352 +.ico {
352 353 background: url("images.png") no-repeat -85px -77px;
353 354 width: 19px;
354 355 height: 16px;
... ... @@ -357,24 +358,24 @@ p.time {
357 358 margin-right: 10px;
358 359 top: 8px;
359 360  
360   - &.project {
  361 + &.project {
361 362 background-position: -37px -77px;
362 363 }
363 364  
364   - &.activities {
  365 + &.activities {
365 366 background-position:-162px -22px;
366 367 }
367   - &.projects {
  368 + &.projects {
368 369 background-position:-209px -21px;
369 370 }
370 371 }
371 372  
372   -.leftbar {
373   - h5, .title {
  373 +.leftbar {
  374 + h5, .title {
374 375 padding:5px 10px;
375 376 }
376 377  
377   - h4 {
  378 + h4 {
378 379 font-size:14px;
379 380 padding:2px 10px;
380 381 color:#666;
... ... @@ -382,41 +383,41 @@ p.time {
382 383 }
383 384 a:last-child h4 { border:none; }
384 385  
385   - a:hover {
  386 + a:hover {
386 387 h4 {
387 388 color:#111;
388 389 background:$hover;
389 390 border-color:#CCC;
390   - .ico.project {
  391 + .ico.project {
391 392 background-position:-209px -21px;
392 393 }
393 394 }
394 395 }
395   - .bottom {
  396 + .bottom {
396 397 padding:10px;
397 398 }
398 399 }
399 400  
400   -.btn {
401   - &.very_small {
  401 +.btn {
  402 + &.very_small {
402 403 font-size:11px;
403 404 padding:2px 6px;
404 405 margin:2px;
405 406 }
406 407  
407   - &.grouped {
  408 + &.grouped {
408 409 margin-right:7px;
409 410 float:left;
410 411 }
411 412  
412   - &.padded {
  413 + &.padded {
413 414 margin-right:3px;
414 415 padding:4px 10px 4px;
415 416 }
416 417 }
417 418  
418 419  
419   -.prettyprint {
  420 +.prettyprint {
420 421 background-color: #fefbf3;
421 422 padding: 9px;
422 423 border: 1px solid rgba(0,0,0,.2);
... ... @@ -443,7 +444,7 @@ p.time {
443 444 .readme {
444 445 pre {
445 446 background: white !important;
446   -
  447 +
447 448 code {
448 449 background: none !important;
449 450 }
... ... @@ -451,11 +452,11 @@ p.time {
451 452 }
452 453  
453 454  
454   -.highlight_word {
  455 +.highlight_word {
455 456 background:#EEDC94;
456 457 }
457 458  
458   -.status_info {
  459 +.status_info {
459 460 font-size:14px;
460 461 padding:5px 15px;
461 462 line-height:24px;
... ... @@ -464,13 +465,13 @@ p.time {
464 465 float:left;
465 466 margin-right:20px;
466 467  
467   - &.success {
  468 + &.success {
468 469 background: #5BB75B;
469 470 color: white;
470 471 text-shadow: 0 1px #111;
471 472 border-color: #9A9;
472 473 }
473   - &.error {
  474 + &.error {
474 475 background: #DA4E49;
475 476 border-color: #BD362F;
476 477 color: white;
... ... @@ -478,7 +479,7 @@ p.time {
478 479 }
479 480 }
480 481  
481   -.arrow{
  482 +.arrow{
482 483 background: #E3E5EA;
483 484 padding: 5px;
484 485 margin-top:5px;
... ... @@ -493,12 +494,12 @@ p.time {
493 494 height: 150px;
494 495 }
495 496  
496   -.gitlab_pagination {
  497 +.gitlab_pagination {
497 498 span a { color:$link_color; }
498   - .prev, .next, .current, .page a {
  499 + .prev, .next, .current, .page a {
499 500 padding:10px;
500 501 }
501   - .current {
  502 + .current {
502 503 border-bottom:2px solid $style_color;
503 504 }
504 505 }
... ... @@ -524,8 +525,8 @@ li.note {
524 525 }
525 526 }
526 527  
527   -.markdown {
528   - img {
  528 +.markdown {
  529 + img {
529 530 max-width:100%;
530 531 }
531 532 }
... ... @@ -534,20 +535,20 @@ li.note {
534 535 background-color: inherit;
535 536 }
536 537  
537   -.team_member_show {
538   - td:first-child {
  538 +.team_member_show {
  539 + td:first-child {
539 540 color:#aaa;
540 541 }
541 542 }
542 543  
543   -.remember_me {
  544 +.remember_me {
544 545 text-align:left;
545 546  
546   - input {
  547 + input {
547 548 margin:0;
548 549 }
549 550  
550   - span {
  551 + span {
551 552 padding-left:5px;
552 553 }
553 554 }
... ... @@ -558,7 +559,7 @@ li.note {
558 559 *
559 560 */
560 561  
561   -.milestone {
  562 +.milestone {
562 563 @extend .wll;
563 564 }
564 565  
... ... @@ -566,10 +567,10 @@ li.note {
566 567 * Admin area
567 568 *
568 569 */
569   -.admin_dash {
570   - .data {
571   - a {
572   - h1 {
  570 +.admin_dash {
  571 + .data {
  572 + a {
  573 + h1 {
573 574 line-height:48px;
574 575 font-size:48px;
575 576 padding:20px;
... ... @@ -585,7 +586,7 @@ li.note {
585 586 vertical-align:top;
586 587 }
587 588  
588   - strong {
  589 + strong {
589 590 line-height:24px;
590 591 }
591 592 }
... ... @@ -593,20 +594,20 @@ li.note {
593 594  
594 595  
595 596 /* CHZN reset few styles */
596   -.chzn-container-single .chzn-single {
  597 +.chzn-container-single .chzn-single {
597 598 background:#FFF;
598 599 border: 1px solid #bbb;
599 600 box-shadow:none;
600 601 }
601   -.chzn-container-active .chzn-single {
  602 +.chzn-container-active .chzn-single {
602 603 background:#fff;
603 604 }
604 605  
605 606 /**
606 607 * Push event widget
607   - *
  608 + *
608 609 */
609   -.event_lp {
  610 +.event_lp {
610 611 @extend .alert-info;
611 612 margin-bottom:20px;
612 613 padding:8px;
... ... @@ -615,19 +616,19 @@ li.note {
615 616 @include border-radius(4px);
616 617 min-height:22px;
617 618  
618   - .avatar {
  619 + .avatar {
619 620 width:24px;
620 621 }
621 622 }
622 623  
623 624 .supp_diff_link,
624   -.mr_show_all_commits {
  625 +.mr_show_all_commits {
625 626 cursor:pointer;
626 627 }
627 628  
628 629 /**
629   - * Issues, MRs legend
630   - *
  630 + * Issues, MRs legend
  631 + *
631 632 */
632 633  
633 634 .list_legend {
... ... @@ -640,32 +641,32 @@ li.note {
640 641 margin-right:5px;
641 642 margin-top: 2px;
642 643 @include border-radius(4px);
643   - &.today{
  644 + &.today{
644 645 background: #ADA;
645 646 border:1px solid #8B8;
646 647 }
647   - &.closed {
  648 + &.closed {
648 649 background: #DDD;
649 650 border:1px solid #BBB;
650 651 }
651   - &.yours {
  652 + &.yours {
652 653 background: #AAD;
653 654 border:1px solid #88B;
654 655 }
655   - &.merged {
  656 + &.merged {
656 657 background: #DAD;
657 658 border:1px solid #B8B;
658 659 }
659 660 }
660   - .text {
  661 + .text {
661 662 padding-bottom: 10px;
662 663 float:left;
663 664 }
664 665 }
665 666  
666 667 .merge_request,
667   -.issue {
668   - .list_legend {
  668 +.issue {
  669 + .list_legend {
669 670 margin-right: 5px;
670 671 margin-top: 14px;
671 672 .icon {
... ... @@ -678,34 +679,53 @@ li.note {
678 679 }
679 680 }
680 681  
681   - &.today{
  682 + &.today{
682 683 background: #EFE;
683 684 border-color:#CEC;
684   - .icon {
  685 + .icon {
685 686 background: #ADA;
686 687 border:1px solid #8B8;
687 688 }
688 689 }
689   - &.closed {
  690 + &.closed {
690 691 background: #F5f5f5;
691 692 border-color:#E5E5E5;
692   - .icon {
  693 + .icon {
693 694 background: #DDD;
694 695 border:1px solid #BBB;
695 696 }
696 697 }
697   - &.yours {
698   - .icon {
  698 + &.yours {
  699 + .icon {
699 700 background: #AAD;
700 701 border:1px solid #88B;
701 702 }
702 703 }
703   - &.merged {
  704 + &.merged {
704 705 background: #F5f5f5;
705 706 border-color:#E5E5E5;
706   - .icon {
  707 + .icon {
707 708 background: #DAD;
708 709 border:1px solid #B8B;
709 710 }
710 711 }
711 712 }
  713 +
  714 +.themes_opts {
  715 + padding-left:20px;
  716 +
  717 + label {
  718 + width:175px;
  719 + margin-right:40px;
  720 +
  721 + .prev {
  722 + @extend .borders;
  723 + height:120px;
  724 + width:175px;
  725 + margin-bottom:10px;
  726 + img {
  727 + width:180px;
  728 + }
  729 + }
  730 + }
  731 +}
... ...
app/assets/stylesheets/themes/ui_modern.scss
  Diff comments   View file @6ebd360
1 1 /**
2   - * This file represent some UI that can be changed
3   - * during web app restyle or theme select.
4   - *
  2 + * This file represent some UI that can be changed
  3 + * during web app restyle or theme select.
  4 + *
5 5 * Next items should be placed there
6 6 * - link colors
7 7 * - header styles
8 8 * - main menu styles
9 9 *
10 10 */
11   -.ui_modern {
12   - ul.main_menu {
13   - background:none;
14   - box-shadow:none;
15   - @include border-radius(0px);
16   - border:none;
17   - border-bottom:2px solid #456;
  11 +.ui_modern {
  12 + /*
  13 + * Application Header
  14 + *
  15 + */
  16 + header {
  17 + height:40px;
  18 + background-image: -moz-linear-gradient(top, #333, #222);
  19 + background-image: -ms-linear-gradient(top, #333, #222);
  20 + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222));
  21 + background-image: -webkit-linear-gradient(top, #333, #222);
  22 + background-image: -o-linear-gradient(top, #333, #222);
  23 + background-image: linear-gradient(top, #333, #222);
  24 + background-repeat: repeat-x;
  25 + background-repeat: repeat-x;
  26 + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
  27 + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  28 + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  29 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  30 +
  31 + .container .top_panel_content { padding: 5px 0; }
18 32  
19   - li {
20   - border:none;
21 33  
22   - &.current {
23   - border-bottom:2px solid #f90;
24   - background-color:#fff;
25   - position:relative;
26   - top:2px;
  34 + /**
  35 + *
  36 + * Logo holder
  37 + *
  38 + */
  39 + .app_logo {
  40 + a {
  41 + h1 {
  42 + opacity: 0.7;
  43 + background: url('images.png') no-repeat -3px -6px;
  44 + width: 65px;
  45 + height: 26px;
  46 + margin: 6px 0;
  47 + padding: 0;
  48 + float: left;
  49 + text-indent: -1000em;
  50 + float:left;
  51 + &:hover {
  52 + opacity: 1.0;
  53 + }
  54 + }
  55 + }
  56 + .separator {
  57 + width: 1px;
  58 + height: 40px;
  59 + margin: 0 9px;
  60 + overflow: hidden;
  61 + background: #222;
  62 + border-left: 1px solid #333;
27 63 }
28 64 }
29   - }
30 65  
31   - /*
32   - * Common styles
33   - *
34   - */
35   - a {
36   - color: #E28934;
37   - &:hover {
38   - text-decoration:none;
39   - color: #f90;
  66 + .fbtn {
  67 + .btn {
  68 + i {
  69 + @extend .icon-white;
  70 + position: relative;
  71 + top: 2px;
  72 + }
  73 + background:none;
  74 + margin-left:8px;
  75 + font-size: 13px;
  76 + line-height: 19px;
  77 + color:#ccc;
  78 + &:hover {
  79 + color:#fff;
  80 + }
  81 + border: none;
  82 + box-shadow:none;
  83 + text-shadow: 0 -1px 0 #000000;
  84 + }
40 85 }
41   - }
42 86  
43   - .btn {
44   - &.primary,
45   - &.btn-primary {
46   - border-color:#C60;
47   - background:#D70;
  87 + /**
  88 + *
  89 + * Search box
  90 + *
  91 + */
  92 + .search {
  93 + float: right;
  94 + margin-right: 55px;
  95 + .search-input {
  96 + border: 1px solid rgba(0, 0, 0, 0.7);
  97 + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.4) inset;
  98 + background-color: #D2D5DA;
  99 + background-color: rgba(255, 255, 255, 0.5);
48 100  
49   - &:hover {
50   - background:#F90;
  101 + &:focus {
  102 + background-color: white;
  103 + }
  104 + }
  105 + .search-input::-webkit-input-placeholder {
  106 + color: #666;
51 107 }
52 108 }
53   - }
54   -
55   - .alert-info {
56   - border-color:#FDA;
57   - background:#FED;
58   - color:#D70;
59   - }
60   -
61 109  
62   - .progress .bar {
63   - background:#D80;
64   - }
  110 + /**
  111 + *
  112 + * Project / Area name
  113 + *
  114 + */
  115 + .project_name {
  116 + line-height:34px;
  117 + font-size:22px;
  118 + color:#fff;
  119 + text-shadow: 0 1px 1px #111;
  120 + }
65 121  
66   - .back_link {
67   - color:#D80;
  122 + /**
  123 + *
  124 + * Account box
  125 + *
  126 + */
  127 + .account-box {
  128 + top:6px;
  129 + img {
  130 + right: 5px;
  131 + width: 26px;
  132 + height: 26px;
  133 + }
  134 + }
68 135 }
69 136 }
... ...
app/views/events/_commit.html.haml
  Diff comments   View file @6ebd360
1 1 - commit = CommitDecorator.decorate(commit)
2   -%li.wll.commit
  2 +%li.commit
3 3 %p
4   - = link_to commit.short_id(8), project_commit_path(project, id: commit.id), class: "commit_short_id"
  4 + = link_to commit.short_id(8), project_commit_path(project, id: commit.id), class: "commit_short_id"
5 5 %strong.cdark= commit.author_name
6 6 –
7 7 = image_tag gravatar_icon(commit.author_email), class: "avatar", width: 16
... ...
app/views/profile/design.html.haml
  Diff comments   View file @6ebd360
1 1 = form_for @user, url: profile_update_path, remote: true, method: :put do |f|
2 2 %div
3   - %h3 Application theme
4   - %hr
5   - .clearfix
  3 + %h3.page_title Application theme
  4 + %br
  5 + .themes_opts
6 6 = label_tag do
  7 + .prev
  8 + = image_tag "gitlab_default.png"
7 9 = f.radio_button :theme_id, 1
8 10 Default
9 11  
10 12 = label_tag do
  13 + .prev
  14 + = image_tag "gitlab_classic.png"
11 15 = f.radio_button :theme_id, 2
12 16 Classic
13 17  
14 18 = label_tag do
  19 + .prev
  20 + = image_tag "gitlab_modern.png"
15 21 = f.radio_button :theme_id, 3
16 22 Modern
17 23 %br
18   - %h3 Code review
19   - %hr
20   - .row
21   - %label.span3{for: "user_dark_scheme_false"}
22   - .thumbnail
23   - = image_tag "white.png", width: 260, class: "styled_image"
24   - .caption
25   - %h5
26   - = f.radio_button :dark_scheme, false
27   - White code preview
28   - %label.span3{for: "user_dark_scheme_true"}
29   - .thumbnail
30   - = image_tag "dark.png", width: 260, class: "styled_image"
31   - .caption
32   - %h5
33   - = f.radio_button :dark_scheme, true
34   - Dark code preview
  24 + .clearfix
  25 +
  26 + %h3.page_title Code review
  27 + %br
  28 + .themes_opts
  29 + = label_tag do
  30 + .prev
  31 + = image_tag "white.png"
  32 + = f.radio_button :dark_scheme, false
  33 + White code preview
  34 + = label_tag do
  35 + .prev
  36 + = image_tag "dark.png"
  37 + = f.radio_button :dark_scheme, true
  38 + Dark code preview
35 39  
36 40 :javascript
37 41 $(function(){
... ...