Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Defense colors and network layout #529

Merged
merged 7 commits into from
Apr 21, 2020
Merged

Defense colors and network layout #529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8bbf157
- change colors
Apr 19, 2020
9553f5b
fix network buttons misaligned icons
Apr 19, 2020
641a6f0
improve network layouts
Apr 19, 2020
68113a6
fix switch colors
Apr 19, 2020
ad06c75
improve info box position and layout
Apr 19, 2020
42bf74b
fix improve detail info display on mobile
Apr 19, 2020
1e5e4ef
revert box info position to top
Apr 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions app/models/network.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
56 changes: 35 additions & 21 deletions app/styles/_network.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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;
}

Expand All @@ -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;


Expand All @@ -70,6 +73,7 @@ body.network:not(.network-new) {
margin-bottom: 5px;
position: relative;
overflow: visible !important;
padding: 0;
.tooltip {
display: none;
}
Expand Down Expand Up @@ -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
Expand All @@ -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 {
Expand Down
20 changes: 9 additions & 11 deletions app/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand Down
28 changes: 15 additions & 13 deletions app/styles/components/box-details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -33,7 +36,6 @@ div#box-details-container {
margin-bottom: .5em;

[class*=figure-] {
font-size: .5rem;
position: relative;
left: -.5em;
//top: .25em;
Expand Down Expand Up @@ -70,8 +72,8 @@ div#box-details-container {
}

.action {
margin-top: 1.5em;
margin-bottom: .5em;
margin-top: .5em;
font-weight: bold;
}

.close {
Expand Down
18 changes: 5 additions & 13 deletions app/styles/components/detailview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;

Expand Down Expand Up @@ -111,6 +98,11 @@
}
a:not([class*=btn]) {
text-decoration: underline;
color: $text-muted-color;

&:hover {
color: $text-color;
}
}

table {
Expand Down
2 changes: 1 addition & 1 deletion app/styles/components/elvis-data-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

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

Expand Down
2 changes: 1 addition & 1 deletion app/styles/general/modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions app/styles/general/page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 3 additions & 1 deletion app/styles/general/typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,9 @@ h6 {

a {
color: $link-color;
&:hover { color: $link-color-hover; }
&:hover {
color: $link-color-hover;
}
}

hr {
Expand Down
3 changes: 2 additions & 1 deletion app/styles/network/legend.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@
}
.carousel-content {
width: 100%;
background: darkslateblue;
background: $bg-color;
filter: hue-rotate(-151deg);
}

.carousel-footer {
Expand Down
1 change: 1 addition & 0 deletions app/styles/network/vis/navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions app/templates/components/box-details.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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}}
Expand Down Expand Up @@ -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}}
Expand Down
Binary file modified public/images/wizard4/edges.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/wizard4/edges2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/wizard4/nodecontracts.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/wizard4/nodemoney.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.