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 (
-
+
|
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 (
-
+
- 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;
}
}