New Interview page

seeVcam/dashboard/templates/dashboard.html

@@ -15,7 +15,7 @@
         <script type="text/javascript" src="/js/dashboard.min.js"></script>
     {% else %}
         {# less #}
-        <link rel="stylesheet/less" type="text/css" href="{% static "apps/dashboard/dashboard.less" %}" />
+        <link rel="stylesheet/less" type="text/css" href="{% static "apps/env/local.less" %}" />
         <script type="text/javascript" src="{% static "bower_components/less/dist/less-1.7.5.min.js" %}"></script>
         {# app.js #}
         <script type="text/javascript" data-main="{% static "" %}"  src="{% static "bower_components/requirejs/require.js" %}"></script>

seeVcam/static/apps/dashboard/constants.less

@@ -0,0 +1,19 @@
+/* Colors */
+
+@white:#fff;
+@black: #000;
+@orange : #D14232;
+@light-orange : #FF9861;
+@light-grey: #f1f1f1;
+@gray : #666;
+@nav-bar-grey : #cccccc;
+@blue : #0071bb;
+@background-grey : #eeeeee;
+@silver: #bdc3c7;
+@a:#dddddd;
+@date-gray:#9b9b9b;
+@report-color : #400065;
+@green: #009145;
+
+/* Seevcam properties */
+@nav-height: 40px;

seeVcam/static/apps/dashboard/dashboard.less

@@ -1,28 +1,10 @@
-@import (inline) "../../bower_components/bootstrap/dist/css/bootstrap.css";
+@import "../../bower_components/bootstrap/less/bootstrap";
 @import (inline) "../../bower_components/bootstrap/dist/css/bootstrap-theme.css";
 
 @import (inline) "../../lib/components/questions/questions.css";
 @import (inline) "../../lib/components/interviews/style/fullcalendar.css";
-/*
-  Colors
-*/
 
-@orange : #D14232;
-@light-orange : #FF9861;
-@light-grey: #f1f1f1;
-@grey : #666;
-@nav-bar-grey :#cccccc;
-@blue : #0071bb;
-@background-grey : #eeeeee;
-@silver: #bdc3c7;
-
-/*
-  Seevcam properties
-*/
-
-@report-color : #400065;
-
-@nav-height : 40px;
+@import "constants";
 
 html, body {
     font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
@@ -50,15 +32,12 @@ hr {
     display: inline-block;
 }
 
-#container {
-}
-
 #content-wrap {
     min-width: 100%;
     height: ~"calc(100% - 60px)";
     margin-top: 20px;
 }
-/** Adjusting Bootstrap classes */
+/* Adjusting Bootstrap classes */
 .container {
     /*max-width: 1000px;*/
     height: 100%;
@@ -82,7 +61,7 @@ hr {
 }
 
 label {
-    color: #666666;
+    color: @gray;
 }
 
 [type=text],
@@ -117,12 +96,12 @@ select.form-control {
 .btn-orange {
   background-color : @light-orange;
   border-color: @light-orange;
-  color: #fff;
+  color: @white;
 
   &:hover, &:focus {
     background-color : darken(@light-orange, 5%);
     border-color : darken(@light-orange, 5%);
-    color: #fff;
+    color: @white;
   }
 
 }
@@ -132,19 +111,19 @@ select.form-control {
   border-color : @silver;
 
   &:hover, &:focus {
-    background-color : lighten(@grey, 5%);;
+    background-color : lighten(@gray, 5%);;
     border-color : @silver;
   }
 
 }
 .btn-blue {
   background-color : @blue;
   border-color : @blue;
-  color:#fff;
+  color:@white;
   &:hover, &:focus {
     background-color : lighten(@blue, 5%);
     border-color : @blue;
-    color:#fff;
+    color:@white;
   }
 
 }
@@ -159,7 +138,7 @@ select.form-control {
 }
 
 .fc-view-container {
-  background: white;
+  background: @white;
 }
 
 .fc-button {

seeVcam/static/apps/env/local.less

@@ -0,0 +1,8 @@
+@import "../dashboard/dashboard";
+
+/* new definitions */
+
+/* @overrides */
+
+//** Load fonts from this directory.
+@icon-font-path:"../../bower_components/bootstrap/fonts/";

seeVcam/static/lib/components/interviews/interview_router.js

@@ -48,7 +48,7 @@ define(function(require){
           var interviewsApp = new InterviewApp({
             interviews: window.cache.interviews.getInterviews(),
             activeClock: false,
-            interview : true
+            isInterview : true
           });
 
           Utils.safelyUpdateCurrentView(interviewsApp);

seeVcam/static/lib/components/interviews/style/interview-mixins.less

@@ -0,0 +1,166 @@
+.block-mixin(@columns:12; @color:@blue; @back-color:@white) {
+
+  .make-md-column(@columns);
+
+  .container {
+    background-color: @back-color;
+    border-top: 7px solid @color;
+    border-radius: 0px;
+    margin-bottom: 20px;
+
+    .action-icons {
+      position: absolute;
+      right: 25px;
+      display: none;
+      cursor: pointer;
+    }
+    .header {
+      text-align: center;
+
+      h4 {
+        font-size: 20px;
+        font-weight: 400;
+        text-shadow: none;
+        padding: 10px;
+        display: inline-block;
+        vertical-align: bottom;
+      }
+      p {
+        font-size: 15px;
+      }
+    }
+
+    .interview-time {
+      width: 80%;
+      margin: 15px auto 0px auto;
+      border-top: 1px solid @date-gray;
+      padding: 5px 0px 0px 0px;
+      font-size: 14px;
+
+      .interview-hours {
+        float: right;
+      }
+
+      p {
+        display: inline-block;
+      }
+    }
+    .score{
+      font-size: 50px;
+      text-align: center;
+    }
+    .block-color();
+  }
+}
+
+.block-hover(@color:@blue) {
+  .container {
+    .smooth-hover();
+    &:hover {
+      .block-color(@white;@white;#ddd);
+      background-color: @color;
+      color: @white;
+      .action-icons {
+        display: block;
+      }
+    }
+  }
+}
+
+.block-compact() {
+  .container {
+    .header {
+      h4 {
+        margin-bottom: 0px;
+        padding: 0px;
+      }
+      p {
+        margin: 0px;
+      }
+    }
+    .interview-time {
+      margin-top: 0px;
+    }
+  }
+}
+
+.block-color(@name:@black;@job:@black;@time:@date-gray) {
+    .header {
+      color: @name;
+      p {
+        color: @job;
+      }
+    }
+    .interview-time {
+      border-top: 1px solid @time;
+      color: @time;
+    }
+}
+
+.list-mixin(@columns:12) {
+  margin-bottom: 5px;
+
+  .container {
+    background: @white;
+    line-height: 30px;
+
+    .date-group{
+      padding: 0px;
+      float: left;
+      border-right: 1px solid @date-gray;
+    }
+    .interview-name {
+      font-size: 20px;
+      border-right: 1px solid @date-gray;
+      .text-overflow();
+    }
+    .interview-job {
+      color: @date-gray;
+      .text-overflow();
+    }
+    .action-icons {
+      display: none;
+      cursor: pointer;
+      color: @white;
+      position: absolute;
+      right: 10px;
+    }
+    .interview-time {
+      text-align: center;
+    }
+    .interview-date {
+      text-align: center;
+      background: @date-gray;
+      color: @white;
+      font-size: 16px;
+      line-height: 31px;
+    }
+    .score{
+      font-size: 15px;
+      text-align: center;
+    }
+  }
+}
+
+.list-hover(@color:@blue) {
+  .container {
+    .smooth-hover();
+    &:hover {
+      background: @color;
+      & > * {
+        color: @white;
+      }
+      .action-icons {
+        display: block;
+      }
+    }
+  }
+}
+
+.smooth-hover(@time:0.3s){
+  -webkit-transition: all @time;
+  -moz-transition: all @time;
+  -ms-transition: all @time;
+  -o-transition: all @time;
+  transition: all @time;
+}