Merge pull request #529 from tenders-exposed/defense-colors-and-netwo…

…rk-layout

Defense colors and network layout

app/models/network.js

@@ -1,17 +1,11 @@
 import DS from 'ember-data';
-//import tinycolor from 'tinycolor';
 
 import { computed } from '@ember/object';
 const { Model, attr } = DS;
 
 const color = {
-  'buyer': '#87bf80',
-  'bidder': '#f0e968'
-};
-
-const colorRgb = {
-  'buyer': 'rgb(246, 49, 136)',
-  'bidder': 'rgb(36, 243, 255)'
+  'bidder': '#FFC776', // rgb(255,199,118)
+  'buyer': '#008D85' // rgb(0,141,133)
 };
 
 export default Model.extend({

app/styles/_network.scss

@@ -1,8 +1,9 @@
-$network-bg: #101010;
+$network-bg: $bg-color;
 $network-inner-offset: 20px;
 $network-inner-width: calc(100vw - #{2*$network-inner-offset});
-$network-inner-height: calc(100vh - #{2*$network-inner-offset});
+$network-inner-height: calc(100vh - #{$navbar-height + $network-inner-offset});
 $network-controls-width: 50px;
+$network-sidebar-width: 300px;
 
 // basic network look & layout
 body.network:not(.network-new) {
@@ -20,16 +21,18 @@ body.network:not(.network-new) {
     background: $network-sidebar-bg;
     box-shadow: 0px 0px 55px 1px rgba(0, 0, 0, 0.25);
     border-radius: 3px; //TODO variable
+    border: 1px solid lighten($network-sidebar-bg,5%);
+    backdrop-filter: blur(2px)
   }
 
   // contains whole network with all sidebars and controls
   #network-container {
     position: absolute;
     top: 0;
     left: 0;
-    height: calc(100vh - #{2*$network-inner-offset});
-    width: calc(100vw - #{2*$network-inner-offset});
-    margin: $network-inner-offset;
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
     overflow: hidden;
   }
 
@@ -53,10 +56,10 @@ body.network:not(.network-new) {
   #network-controls {
     position: absolute;
     top: 210px;
-    right: 0;
+    right: $network-inner-offset;
     padding: 5px;
     max-width: 1.2*$button-height;
-    z-index: 100;
+    z-index: 10;
     text-align: center;
 
 
@@ -70,6 +73,7 @@ body.network:not(.network-new) {
       margin-bottom: 5px;
       position: relative;
       overflow: visible !important;
+      padding: 0;
       .tooltip {
         display: none;
       }
@@ -98,6 +102,7 @@ body.network:not(.network-new) {
     margin-top: $navbar-height - 15px;
     text-align: center;
     height: auto;
+    margin-right: $network-inner-offset;
   }
 
   // network actors container
@@ -106,45 +111,54 @@ body.network:not(.network-new) {
     position: absolute;
     overflow: hidden;
     pointer-events: none;
-    height: calc(100vh - #{$navbar-height + 2*$network-inner-offset});
+    padding: 0 $network-inner-offset;
+    height: $network-inner-height;
     top: $navbar-height;
     width: 100%;
+    display: flex;
 
     // network actors list
     // @TODO: rename
     #details-sidebar {
       display: inline-block;
       z-index: $zindex-network-sidebar;
       pointer-events: all;
-      width: $network-sidebar-width;
-      min-width: 300px;
+      min-width: $network-sidebar-width;
       max-width: 400px;
-      min-height: 400px;
-      position: absolute;
+      flex: 1 0 auto;
+      //position: absolute;
       height: 100%;
-      top: 0;
-      left: 0;
-      bottom: 0;
       clear: both;
+      overflow: auto;
+      overflow: overlay;
 
       font-family: $font-family-sans;
     }
 
     // actor/contract detail
     #details-info {
       height: 100%;
-      width: 800px;
-      position: absolute;
-      left: $network-sidebar-width;
-      // right: $network-controls-width + $network-inner-offset;
+      flex: 0 1 auto;
+      width: 100%;
+      max-width:800px;
+      margin-left: 10px;
       display: inline-block;
       pointer-events: none;
 
+      @media (max-width: 900px) {
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin-right: 10px;
+        width: auto;
+        z-index: $zindex-network-sidebar+1;
+
+      }
+
       .contract-info-wrapper,
       .details-info-wrapper {
-        height: calc(#{$network-inner-height} - #{$navbar-height});
+        height: $network-inner-height;
         pointer-events: all;
-        border: 0;
       }
 
       #loader {

app/styles/_variables.scss

@@ -10,14 +10,14 @@
    ========================================================================== */
 
 // general colors
-$primary-color:           #87bf80;
+$primary-color:           #008d85;
 $primary-color-light:     lighten($primary-color, 15%);
 $primary-color-dark:      darken($primary-color, 15%);
 
-$secondary-color:         #f0e968;
+$secondary-color:         #ffc776;
 
-$error-color:             #ff533c;
-$success-color:           #00ff7e;
+$error-color:             #DA2C38;
+$success-color: #4d9139;
 $warning-color:           orangered;
 
 $color-bidder:            $secondary-color;
@@ -27,16 +27,16 @@ $color-flags:             #DA2C38;
 
 $color-dark:              #444;
 
-$link-color:              fade-out($primary-color,.25);
-$link-color-hover:        $primary-color;
+$link-color:              $primary-color;
+$link-color-hover:        fade-out($primary-color,.25);
 
 // TODO: all these variables should be compressed to just one
-$base-bg-color:           #0e0e11;
+$base-bg-color:           #181b17;
 $main-bg:                 $base-bg-color;
 $bg-color:                $base-bg-color;
 $bg-dark-color:           $base-bg-color;
 
-$text-color:              #DFF2D2;
+$text-color:              $color-relationship;
 $text-muted:              fade_out($text-color,0.5);
 $text-inverse-color:      #222;
 $text-dark-color:         grey;
@@ -286,10 +286,8 @@ $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width
 
 /* NETWORK vars
   =========================================================================== */
-$network-sidebar-width: 30vw;
 $network-sidebar-padding: $padding-base;
-$network-sidebar-bg: fade-out(lighten($bg-color,2%), 0.1);
-$network-infowindow-width: calc(100% - #{$network-sidebar-width});
+$network-sidebar-bg: rgba(lighten($bg-color,2%), 0.85);
 $network-sidebar-border: $border-base;
 
 /* NETWORK vars

app/styles/components/box-details.scss

@@ -1,28 +1,31 @@
+@import '../_network.scss';
+
 div#box-details-container {
   @keyframes slide-up {
     from { top: -100%; }
-    to { top: 20px; }
+    to { top: $navbar-height; }
   }
   animation: slide-up ease .4s;
 
   z-index: $zindex-infobox;
   position: absolute;
-  top: 20px;
+  top: $navbar-height;
   right: 60px;
-  width: 245px;
+  left: 20px;
   height: auto !important;
   display: block;
 
   #box-details-card {
-    border: 1px solid rgba(255,255,255,0.15);
-    background: fade-out($bg-color,0.1);
-    //box-shadow: 0 5px 20px rgba(0,0,0,0.75);
-    border-radius: $border-radius-base;
+    background: $network-sidebar-bg;
+    box-shadow: 0px 0px 55px 1px rgba(0, 0, 0, 0.25);
+    border-radius: 3px; //TODO variable
+    border: 1px solid lighten($network-sidebar-bg,5%);
+    backdrop-filter: blur(2px);
     padding: $padding-base;
-    width: 100%;
+    max-width: 300px;
     position: absolute;
-    top: $navbar-height;
-    right: 50px; //@TODO: variable
+    top: 0;
+    right: $network-inner-offset;
 
     .actor {
       position: relative;
@@ -33,7 +36,6 @@ div#box-details-container {
       margin-bottom: .5em;
 
       [class*=figure-] {
-        font-size: .5rem;
         position: relative;
         left: -.5em;
         //top: .25em;
@@ -70,8 +72,8 @@ div#box-details-container {
     }
 
     .action {
-      margin-top: 1.5em;
-      margin-bottom: .5em;
+      margin-top: .5em;
+      font-weight: bold;
     }
 
     .close {

app/styles/components/detailview.scss

@@ -3,23 +3,10 @@
   $detailview-head-height: 60px;
   $detailview-width: 700px;
 
-  // slide from left
-  @keyframes slide-from-left {
-    from { left: -200vw; }
-    to { left: 0px; }
-  }
-  animation: slide-from-left ease .4s;
   position: relative;
   left: 0;
 
 
-  border-right: $network-sidebar-border;
-  border-left: $network-sidebar-border;
-  margin-left: 1px;
-  background: darken($network-sidebar-bg,2%);
-  backdrop-filter: blur(10px);
-  box-shadow: 5px 0px 15px -2px rgba(0,0,0,0.8);
-
   position: relative;
   width: 100%;
 
@@ -111,6 +98,11 @@
   }
   a:not([class*=btn]) {
     text-decoration: underline;
+    color: $text-muted-color;
+
+    &:hover {
+      color: $text-color;
+    }
   }
 
   table {

app/styles/components/elvis-data-table.scss

@@ -39,7 +39,7 @@
 
   table.data-table {
     width: 100%;
-    height: calc(100vh - 390px);
+    height: calc(100vh - 330px);
     position: relative;
     display: block;
 

app/styles/general/modal.scss

@@ -43,7 +43,7 @@ $modal-bg: $main-bg;
 }
 // overlay opacity
 .lean-modal {
-  background: rgba(0,0,0,0.85);
+  background: rgba(darken($bg-color,5%),0.8);
 }
 
 .login-modal {

app/styles/general/page.scss

@@ -8,8 +8,8 @@
   &:before {
     content: "";
     background-color: $bg-dark-color;
-    background-image: linear-gradient(rgba(255,255,255,0) 0%, $bg-dark-color 70vw),
-                      url(../images/journalists-filmnoir-scene.jpg);
+    //background-image: linear-gradient(rgba(255,255,255,0) 0%, $bg-dark-color 70vw),
+    //                  url(../images/journalists-filmnoir-scene.jpg);
     background-repeat: no-repeat;
 
     background-size: contain;

app/styles/general/typography.scss

@@ -62,7 +62,9 @@ h6 {
 
 a {
   color: $link-color;
-  &:hover { color: $link-color-hover; }
+  &:hover {
+    color: $link-color-hover;
+  }
 }
 
 hr {

app/styles/network/legend.scss

@@ -54,7 +54,8 @@
     }
     .carousel-content {
       width: 100%;
-      background: darkslateblue;
+      background: $bg-color;
+      filter: hue-rotate(-151deg);
     }
 
     .carousel-footer {

app/styles/network/vis/navigation.scss

@@ -28,6 +28,7 @@ div.vis-network div.vis-navigation {
     text-align: center;
     line-height: $button-height;
     box-sizing: content-box;
+    padding: 0;
 
     // basic style for transparent button
     @extend .btn.link;

app/templates/components/box-details.hbs

@@ -10,10 +10,8 @@
       {{/each}}
     {{else}}
       {{#if (eq graphElementType "node")}}
-
         <h5>{{model.nodeType}}</h5>
           <div class="actor"><span class="figure-{{class}}"></span> {{model.label}}</div>
-        <hr>
         {{#each-in model.flags as |keyValue value|}}
             <div class="flags">
                 <div class="flag">
@@ -45,8 +43,9 @@
           </tr>
         </table>
         <div class="action">
-            {{#link-to "network.show.details.show" model.route model.link class="btn-tiny transparent primary" invokeAction="close"}}
+            {{#link-to "network.show.details.show" model.route model.link invokeAction="close"}}
               Show details
+              <i class="fa fa-eye fa-fw"></i>
             {{/link-to}}
         </div>
       {{/if}}
@@ -77,8 +76,9 @@
           </tr>
       </table>
       <div class="action">
-          {{#link-to "network.show.details.show" model.route model.link class="btn-tiny transparent primary" invokeAction="close"}}
+          {{#link-to "network.show.details.show" model.route model.link invokeAction="close"}}
               Show details
+            <i class="fa fa-eye fa-fw"></i>
           {{/link-to}}
       </div>
     {{else}}