Start improving design of scorecard view

reichert621 · Dec 31, 2017 · 21ae614 · 21ae614
1 parent 1d34fce
commit 21ae614
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 18 deletions.
diff --git a/client/react/app/App.less b/client/react/app/App.less
@@ -5,9 +5,12 @@
 /* Colors */
 @border-gray: #d0d0d0;
 @light-gray: #eee;
+@light-gray-2: #D8D8D8;
+@gray: #979797;
 @black: #2b2b2b;
 @dark-green: #3e886b;
 @bright-green: #3db787;
+@bright-blue: #33A2CC;
 @red: #da2a54;
 @white: #fff;
 
@@ -23,8 +26,9 @@ html,
 body,
 .app {
   height: 100%;
-  font-family: @font-serif;
+  font-family: @font-san-serif;
   font-size: 14px;
+  font-weight: 300;
 }
 
 .app {
@@ -58,7 +62,7 @@ h3 {
 }
 
 h4 {
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 500;
 }
 
@@ -136,7 +140,59 @@ h5 {
 }
 
 .checkbox-container {
+  display: block;
+  font-size: 18px;
+  margin-bottom: 12px;
+  padding-left: 32px;
+  position: relative;
+
+  input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+  }
+
+  .checkbox-indicator {
+    cursor: pointer;
+    border: 1px solid @gray;
+    border-radius: 2px;
+    height: 16px;
+    left: 0px;
+    position: absolute;
+    top: 1px;
+    width: 16px;
+
+    &.on {
+      border-color: @bright-blue;
+      background-color: @bright-blue;
+      transition: all ease 0.2s;
+      -webkit-transition: all ease 0.2s;
+    }
+  }
+
+  .checkbox-label {
+    cursor: pointer;
+    line-height: 20px;
+
+    &.on {
+      color: @bright-blue;
+      // font-weight: 500;
+      transition: all ease 0.2s;
+      -webkit-transition: all ease 0.2s;
+    }
+  }
+}
+
+.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 
+.hidden {
+  display: none;
+  visibility: hidden;
 }
 
 .clearfix {

diff --git a/client/react/app/components/scorecard/ScoreCard.js b/client/react/app/components/scorecard/ScoreCard.js
@@ -82,10 +82,10 @@ class ScoreCard extends React.Component {
 
       return (
         <div key={index}>
-          <h5 className="category-label">
+          <h4 className="category-label">
             <span>{category}</span>
-            <span className="score-details">(score: {score})</span>
-          </h5>
+            <span className="score-details hidden">(score: {score})</span>
+          </h4>
           {
             subtasks.map((task, key) => {
               return (
@@ -112,11 +112,17 @@ class ScoreCard extends React.Component {
           Scorecard
         </h1>
 
-        <DatePicker
-          selected={date}
-          onChange={this.handleDateChange.bind(this)} />
+        <h3 className="scorecard-date">
+          {date.format('dddd MMMM DD, YYYY')}
+        </h3>
 
-        <div className="component-container">
+        <div className="hidden">
+          <DatePicker
+            selected={date}
+            onChange={this.handleDateChange.bind(this)} />
+        </div>
+
+        <div className="scorecard-container">
           {this.renderCheckboxes()}
         </div>
 

diff --git a/client/react/app/components/scorecard/ScoreCard.less b/client/react/app/components/scorecard/ScoreCard.less
@@ -1,8 +1,16 @@
-.category-label {
-  margin-top: 8px;
-  margin-bottom: 8px;
+@scorecard-gray: #d3d3d3;
+
+.scorecard-container {
+  border-top: 1px solid @scorecard-gray;
+  margin-bottom: 40px;
+  width: 60%;
 }
 
-.score-details {
-  margin-left: 4px;
+.scorecard-date {
+  font-weight: 100;
+}
+
+.category-label {
+  margin-top: 32px;
+  margin-bottom: 16px;
 }
diff --git a/client/react/app/components/scorecard/TaskCheckbox.js b/client/react/app/components/scorecard/TaskCheckbox.js
@@ -4,16 +4,24 @@ const TaskCheckbox = ({ task, onToggle }) => {
   const { id, description, points, isComplete = false } = task;
 
   return (
-    <div className="checkbox-container">
+    <label className="checkbox-container unselectable clearfix">
       <input
         type="checkbox"
         id={`task-${id}`}
         value={description}
         checked={isComplete}
         onChange={onToggle} />
-      <label htmlFor={`task-${id}`}>{description}</label>
-      <span className="score-details">({points} points)</span>
-    </div>
+      <div className={`checkbox-indicator ${isComplete ? 'on' : 'off'}`} />
+      <span
+        className={`checkbox-label pull-left ${isComplete ? 'on' : 'off'}`}
+        htmlFor={`task-${id}`}>
+        {description}
+      </span>
+      <span
+        className={`checkbox-label pull-right ${isComplete ? 'on' : 'off'}`}>
+        {points} points
+      </span>
+    </label>
   );
 };