diff --git a/src/components/Experiment/Diff.js b/src/components/Experiment/Diff.js index 308e5c4..fcc41e7 100644 --- a/src/components/Experiment/Diff.js +++ b/src/components/Experiment/Diff.js @@ -19,6 +19,7 @@ class Diff extends PureComponent { render() { const { diffString, leftLoc, rightLoc, className } = this.props; + const showLoc = leftLoc && rightLoc; const diffHTML = Diff2Html.getPrettyHtml(diffString, { inputFormat: 'diff', outputFormat: 'side-by-side', @@ -29,12 +30,14 @@ class Diff extends PureComponent { }); return (
-
-
{leftLoc} lines of code
-
{rightLoc} lines of code
-
+ {showLoc && ( +
+
{leftLoc} lines of code
+
{rightLoc} lines of code
+
+ )}
diff --git a/src/components/Experiment/Diff.less b/src/components/Experiment/Diff.less index 0f3efe2..df9d398 100644 --- a/src/components/Experiment/Diff.less +++ b/src/components/Experiment/Diff.less @@ -19,6 +19,10 @@ margin-bottom: -5px; } +.d2h-diff-tbody { + background: #fff; +} + .diff { // there is a bug in Chrome if I use flex here location div gets 0px height // but I can't reproduce it on simpler example @@ -43,7 +47,9 @@ } &__content { - padding-top: 20px; height: 100%; } + &__content._with-loc { + padding-top: 20px; + } } diff --git a/src/components/Review/FeaturesTable.js b/src/components/Review/FeaturesTable.js index 8fec4ed..ecabfbe 100644 --- a/src/components/Review/FeaturesTable.js +++ b/src/components/Review/FeaturesTable.js @@ -2,9 +2,9 @@ import React from 'react'; import { Table } from 'react-bootstrap'; import './FeaturesTable.less'; -function FeaturesTable({ title, features }) { +function FeaturesTable({ title, features, bsStyle }) { return ( - +
+ - Most similar & disimilar Features + Most similar & dissimilar Features {' '} Full Output - - - Users Annotations: {annotations.yes || 0} Similar &{' '} - {annotations.no || 0} Disimilar - - +
+ Users Annotations: {annotations.yes || 0} Similar &{' '} + {annotations.no || 0} Dissimilar +
Similarity Score: {score}
@@ -71,8 +71,9 @@ class Results extends Component { features={mostSimilarFeatures} /> ) : ( diff --git a/src/components/Review/Results.less b/src/components/Review/Results.less index dbd56d2..d06c735 100644 --- a/src/components/Review/Results.less +++ b/src/components/Review/Results.less @@ -1,7 +1,6 @@ @import '../../../node_modules/bootstrap/less/variables.less'; .review-results { - //height: 100%; flex: 1; display: flex; flex-direction: column; @@ -9,12 +8,44 @@ &__info { flex: 0 0; padding-top: 10px; + margin: 0 -30px 20px; + } + + &__info-col { + display: flex; + justify-content: space-between; + align-items: center; + } + + .form-group { + margin: 0; + } + + &__stats { + flex: 1; + + padding: 0 36px; + + text-align: right; + color: @gray-lighter; + font-weight: 300; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; + + b { + white-space: nowrap; + } } &__score { - margin-top: -10px; - padding: 10px 20px; - background: @gray-lighter; + padding: 10px 36px; + color: @brand-success; + font-weight: 400; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; + background: @gray-dark; } &__main { @@ -65,4 +96,82 @@ margin-bottom: 0; } } + + // bootstrap style overrides + .radio-inline { + color: @gray-lighter; + position: relative; + padding-left: 32px; + cursor: pointer; + line-height: 23px; + display: inline-block; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 300; + margin-right: 16px; + + input { + position: absolute; + left: -9999px; + } + + &:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 22px; + height: 22px; + background: @gray-dark; + border-radius: 100%; + } + + &._checked:after { + content: ''; + width: 8px; + height: 8px; + background: @brand-info; + position: absolute; + top: 7px; + left: 7px; + border-radius: 100%; + transition: all 0.2s ease; + } + + &:last-child { + margin-right: 0; + } + } + + .nav-tabs { + border-bottom: 1px solid transparent; + } + + .nav-tabs > li > a, + .nav-tabs > li > a:hover, + .nav-tabs > li > a:focus { + background: @gray-dark; + color: @gray-lighter; + border: none; + border-radius: 0; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 300; + padding: 12px 26px; + margin-right: 6px; + + &:hover { + color: @brand-info; + } + } + + .nav-tabs > li.active > a, + .nav-tabs > li.active > a:hover, + .nav-tabs > li.active > a:focus { + background: @gray-darker; + color: @brand-info; + padding: 12px 40px; + } } diff --git a/src/pages/Review.less b/src/pages/Review.less index eacddb8..f165126 100644 --- a/src/pages/Review.less +++ b/src/pages/Review.less @@ -4,6 +4,7 @@ height: 100%; display: flex; flex-direction: column; + background: @gray; .navbar { flex: 0; @@ -59,6 +60,8 @@ } &__diff { + flex: 1; + margin-bottom: 10px; } @@ -67,10 +70,15 @@ position: relative; flex: 0 0 auto; display: block; + border-top: 1px solid @gray; border-bottom: 1px solid @gray; margin-bottom: 10px; - color: @gray; + padding: 2px 0; + + color: @brand-info; + background: @gray-darker; + cursor: row-resize; &:before { @@ -86,5 +94,7 @@ min-width: 0; min-height: 0; + + background: @gray; } }
diff --git a/src/components/Review/FeaturesTable.less b/src/components/Review/FeaturesTable.less index c9eafd6..4f889ea 100644 --- a/src/components/Review/FeaturesTable.less +++ b/src/components/Review/FeaturesTable.less @@ -1,6 +1,66 @@ +@import '../../../node_modules/bootstrap/less/variables.less'; + .features-table { &__cell-name { max-width: 600px; overflow: hidden; } + + th, + td { + border: 1px solid transparent !important; + } + + thead { + background: @gray-darker; + + th { + color: @gray-lighter; + font-weight: 300; + font-size: 10px; + text-transform: uppercase; + letter-spacing: 1px; + } + + th:nth-child(3), + th:nth-child(4) { + text-align: right; + color: @gray-light; + } + } + + tbody { + tr { + background: @gray-darker; + } + + tr:nth-of-type(odd) { + background-color: @gray-dark; + } + + td:nth-child(1) { + color: @gray; + text-align: center; + } + + td:nth-child(2) { + color: @brand-success; + letter-spacing: 1px; + font-weight: 300; + } + + td:nth-child(3), + td:nth-child(4) { + color: @gray-lighter; + text-align: right; + } + } + + &.danger { + tbody { + td:nth-child(2) { + color: @brand-danger; + } + } + } } diff --git a/src/components/Review/Results.js b/src/components/Review/Results.js index a6fe689..c9ed98e 100644 --- a/src/components/Review/Results.js +++ b/src/components/Review/Results.js @@ -30,31 +30,31 @@ class Results extends Component { return ( -