Skip to content

Commit 3c308f3

Browse files
RobinDaughertyRobinDaugherty
committed
Console layout WIP
1 parent 7f95a8f commit 3c308f3

File tree

2 files changed

+102
-48
lines changed

2 files changed

+102
-48
lines changed

‎lib/better_errors/error_page.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ def eval_and_respond(index, code)
118118
result, prompt, prefilled_input = @repls[index].send_input(code)
119119

120120
{
121-
highlighted_input: CodeRay.scan(code, :ruby).div(wrap: nil),
121+
highlighted_input: CodeRay.scan(code, :ruby).html(wrap: :span),
122122
prefilled_input: prefilled_input,
123123
prompt: prompt,
124124
result: result

‎lib/better_errors/templates/main.css‎

Lines changed: 101 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -382,14 +382,9 @@ ul.frames li .method {
382382
* Display area
383383
* --------------------------------------------------------------------- */
384384

385-
.trace_info {
386-
margin-bottom: 2px;
387-
}
388-
389-
.code_block{
385+
.code_block {
390386
background: #f1f1f1;
391387
padding-bottom: 1px;
392-
border-bottom: 1px solid #ccc;
393388
}
394389

395390
/* Titlebar */
@@ -437,10 +432,6 @@ ul.frames li .method {
437432
font-weight: 200;
438433
}
439434

440-
.code, .be-console, .unavailable {
441-
background: #fff;
442-
}
443-
444435
.code_linenums{
445436
background:#f1f1f1;
446437
padding-top:10px;
@@ -513,28 +504,27 @@ h3 {
513504
color: white;
514505
padding: 4px;
515506
font-size: 8pt;
516-
margin-top: 1rem;
517507

518508
-webkit-font-smoothing: antialiased;
519509
}
520510

521511
/* REPL shell */
522512
.be-console {
513+
background-color: #002B36;
514+
color: white;
523515
}
524516

525517
.be-console .output {
526518
max-height: 15rem;
527-
overflow-x: none;
519+
overflow-x: hidden;
528520
overflow-y: auto;
529521

530522
padding: 8px;
531-
margin-bottom: 8px;
532523
border-bottom: 1px solid #ccc;
533524
}
534525
.be-console .output:not(.used) {
535-
padding-bottom: 0;
526+
padding: 0;
536527
border-bottom: 0;
537-
margin-bottom: 0;
538528
}
539529
@media screen and (min-height: 800px) {
540530
.be-console .output {
@@ -549,14 +539,25 @@ h3 {
549539
width: 100%;
550540
}
551541
.be-console .output h4 {
552-
background-color: #ddd;
553-
padding: 5px 0;
542+
padding: 8px;
554543
margin-top: 10px;
555544
}
545+
.be-console .output h4:first-child {
546+
margin-top: 0;
547+
}
548+
549+
.be-console .output h4, .be-console .command-line {
550+
background-color: #555;
551+
}
552+
553+
.be-console .output pre {
554+
padding: 8px;
555+
}
556556

557557
/* .command-line > span + input */
558558
.be-console .command-line {
559559
display: table;
560+
padding: 8px 0;
560561
}
561562

562563
.be-console .command-line .prompt,
@@ -585,6 +586,7 @@ h3 {
585586
padding: 0;
586587
background: transparent;
587588
margin: 0;
589+
color: inherit;
588590
}
589591

590592
/* Hint text */
@@ -663,33 +665,85 @@ nav.sidebar:hover::-webkit-scrollbar-thumb {
663665
background: #888;
664666
}
665667

666-
.bold {
667-
font-weight: bold;
668-
}
669-
.black {
670-
color: black;
671-
}
672-
.red {
673-
color: red;
674-
}
675-
.green {
676-
color: green;
677-
}
678-
.yellow {
679-
color: yellow;
680-
}
681-
.blue {
682-
color: blue;
683-
}
684-
.magenta {
685-
color: magenta;
686-
}
687-
.cyan {
688-
color: cyan;
689-
}
690-
.white {
691-
color: white;
692-
}
693-
.green {
694-
color: green;
695-
}
668+
669+
.CodeRay .debug{color:#fff;background:#00f}
670+
.CodeRay .annotation{color:#586E75}
671+
.CodeRay .attribute-name{color:#93A1A1}
672+
.CodeRay .attribute-value{color:#93A1A1}
673+
.CodeRay .binary{color:#509}
674+
.CodeRay .char .content{color:#d20}
675+
.CodeRay .char .delimiter{color:#710}
676+
.CodeRay .char{color:#2AA198}
677+
.CodeRay .class{color:#268BD2;font-weight:bold}
678+
.CodeRay .class-variable{color:#268BD2}
679+
.CodeRay .color{color:#eee8d5}
680+
.CodeRay .comment{color:#586E75}
681+
.CodeRay .comment .char{color:#859900}
682+
.CodeRay .comment .delimiter{color:#859900}
683+
.CodeRay .complex{color:#a08}
684+
.CodeRay .constant{color:#B58900;font-weight:bold}
685+
.CodeRay .decorator{color:#268BD2}
686+
.CodeRay .definition{color:#099;font-weight:bold}
687+
.CodeRay .delimiter{color:#000}
688+
.CodeRay .directive{color:#088;font-weight:bold}
689+
.CodeRay .doc{color:#93A1A1}
690+
.CodeRay .doc-string{color:#93A1A1;font-weight:bold}
691+
.CodeRay .doctype{color:#DC322F}
692+
.CodeRay .entity{color:#CB4B16;font-weight:bold}
693+
.CodeRay .error{color:#93A1A1;background-color:#faa}
694+
.CodeRay .escape{color:#CB4B16}
695+
.CodeRay .exception{color:#CB4B16;font-weight:bold}
696+
.CodeRay .float{color:#2AA198}
697+
.CodeRay .function{color:#268BD2;font-weight:bold}
698+
.CodeRay .global-variable{color:#268BD2}
699+
.CodeRay .hex{color:#2AA198}
700+
.CodeRay .imaginary{color:#f00}
701+
.CodeRay .include{color:#b44;font-weight:bold}
702+
.CodeRay .inline{background-color:transparent;color:#93A1A1!important}
703+
.CodeRay .inline-delimiter{font-weight:bold;color:#DC322F}
704+
.CodeRay .instance-variable{color:#268BD2}
705+
.CodeRay .integer{color:#2AA198}
706+
.CodeRay .key .char{color:#DC322F}
707+
.CodeRay .key .delimiter{color:#268BD2}
708+
.CodeRay .key{color:#859900}
709+
.CodeRay .keyword{color:#859900;font-weight:bold}
710+
.CodeRay .label{color:#93A1A1;font-weight:bold}
711+
.CodeRay .local-variable{color:#268BD2}
712+
.CodeRay .namespace{color:#859900;font-weight:bold}
713+
.CodeRay .octal{color:#2AA198}
714+
.CodeRay .operator, .predefined{color:#859900;font-weight:bold}
715+
.CodeRay .predefined-constant{color:#2AA198}
716+
.CodeRay .predefined-type{color:#DC322F;font-weight:bold}
717+
.CodeRay .preprocessor{color:#859900}
718+
.CodeRay .pseudo-class{color:#859900;font-weight:bold}
719+
.CodeRay .regexp .content{color:#2AA198}
720+
.CodeRay .regexp .delimiter{color:#DC322F}
721+
.CodeRay .regexp .modifier{color:#CB4B16}
722+
.CodeRay .regexp{background-color:transparent}
723+
.CodeRay .reserved{color:#268BD2;font-weight:bold}
724+
.CodeRay .shell .content{color:#2b2}
725+
.CodeRay .shell .delimiter{color:#161}
726+
.CodeRay .shell{background-color:transparent}
727+
.CodeRay .string .char{color:#2AA198}
728+
.CodeRay .string .content{color:#2AA198}
729+
.CodeRay .string .delimiter{color:#DC322F}
730+
.CodeRay .string .modifier{color:#2AA198}
731+
.CodeRay .string{background-color:transparent}
732+
.CodeRay .symbol .content{color:#2AA198}
733+
.CodeRay .symbol .delimiter{color:#2AA198}
734+
.CodeRay .symbol{color:#2AA198}
735+
.CodeRay .tag{color: #268BD2}
736+
.CodeRay .type{color:#DC322F;font-weight:bold}
737+
.CodeRay .value{color:#268BD2}
738+
.CodeRay .variable{color:#268BD2}
739+
.CodeRay .insert{background:transparent}
740+
.CodeRay .delete{background:transparent}
741+
.CodeRay .change{color:#CB4B16;background:transparent}
742+
.CodeRay .head{color:#CB4B16;background:transparent}
743+
.CodeRay .head .filename{color:#CB4B16}
744+
.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
745+
.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
746+
.CodeRay .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}
747+
.CodeRay .delete .delete{color:##2AA198;background:transparent;font-weight:bold}
748+
.CodeRay .change .change{color:#CB4B16}
749+
.CodeRay .head .head{color:#CB4B16}

0 commit comments

Comments
 (0)