summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--Makefile2
-rw-r--r--index.html36
-rw-r--r--res/css/modules/colors.scss1
-rw-r--r--res/css/modules/mixins.scss6
-rw-r--r--res/css/modules/typography.scss9
-rw-r--r--res/css/partials/buttons.scss24
-rw-r--r--res/css/partials/graph-view.scss16
-rw-r--r--res/css/partials/info-box.scss19
-rw-r--r--res/css/partials/info-card.scss88
-rw-r--r--res/css/partials/input-bar.scss2
-rw-r--r--res/css/partials/search-bar.scss2
-rw-r--r--res/css/style.css117
-rw-r--r--res/css/style.scss2
-rw-r--r--res/img/cancel-button.png (renamed from res/img/cancel-input-button.png)bin1141 -> 1038 bytes
-rw-r--r--res/img/drop-down-arrow.pngbin0 -> 1038 bytes
-rw-r--r--res/img/person_icon.pngbin0 -> 1687 bytes
-rw-r--r--res/img/url-Icon.pngbin0 -> 1225 bytes
-rw-r--r--src/view/helpers.js23
-rw-r--r--src/view/node_info.js39
19 files changed, 299 insertions, 87 deletions
diff --git a/Makefile b/Makefile
index a2e8694d..8be0aa5a 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
%.css: %.scss
sass $< $@
-res/css/style.css: ./res/css/style.scss ./res/css/modules/positions.scss ./res/css/modules/colors.scss ./res/css/modules/typography.scss ./res/css/modules/mixins.scss ./res/css/partials/input-bar.scss ./res/css/partials/reset.scss ./res/css/partials/input-bubble.scss ./res/css/partials/top-bar.scss ./res/css/partials/metro-view.scss ./res/css/partials/graph-view.scss ./res/css/partials/info-box.scss ./res/css/partials/base.scss ./res/css/partials/search-bar.scss ./res/css/partials/grid.scss ./res/css/partials/dev-area.scss ./res/css/partials/typography.scss ./res/css/partials/buttons.scss ./res/css/partials/task-alert.scss
+res/css/style.css: ./res/css/style.scss ./res/css/modules/positions.scss ./res/css/modules/colors.scss ./res/css/modules/typography.scss ./res/css/modules/mixins.scss ./res/css/partials/input-bar.scss ./res/css/partials/reset.scss ./res/css/partials/input-bubble.scss ./res/css/partials/top-bar.scss ./res/css/partials/metro-view.scss ./res/css/partials/graph-view.scss ./res/css/partials/info-card.scss ./res/css/partials/base.scss ./res/css/partials/search-bar.scss ./res/css/partials/grid.scss ./res/css/partials/dev-area.scss ./res/css/partials/typography.scss ./res/css/partials/buttons.scss ./res/css/partials/task-alert.scss
diff --git a/index.html b/index.html
index 81c7491c..bf69bc84 100644
--- a/index.html
+++ b/index.html
@@ -51,19 +51,31 @@
</div>
</div>
<div class="info-container">
- <div class="edge_info" style="display:none">Title: <span id="edgetitle"></span><br/>
- <button id="deleteedge">Delete</button>
- </div>
- <div class="info" style="display:none">Node info :<br/>
+ <div class="edge_info" style="display:none">Title: <span id="edgetitle"></span><br/>
+ <button id="deleteedge">Delete</button>
+ </div>
+ <div class="info" style="display:none">
+ <p>Node info</p>
<div class="subtitle">Click on a node to display info</div>
- <form id="node-editbox">
- <label>name:</label><input id="editboxname"/>
- <label>description:</label><input id="editdescription"/>
- <label>URL DLKJ:</label><input id="editurl"/>
- <button>edit</button>
- </form>
- <button id="deletenode">Delete</button>
- </div>
+ <form id="node-editbox">
+ <p class="info-card-attr">Name</p><p class="info-card-attr-val"><input id="editformname"></p>
+ <label class="info-card-attr">Type</label><select id="edittype">
+ <option value="person">Person</option><option value="club">Club</option><option value="skill">Skill</option><option value="interest">Interest</option><option value="third-internship-proposal">Third-internship-proposal</option><option value="internship">Internship</option>
+ </select><br/>
+ <div id="status">
+ <label class="info-card-attr">Status</label><select id="editstatus">
+ <option value="waiting">Waiting</option><option value="approved">Approved</option><option value="notapproved">Not Approved</option>
+ </select><br/>
+ </div>
+ <div id="startdate"><label class="info-card-attr">Start date</label><input id="editstartdate"/></br></div>
+ <div id="enddate"><label class="info-card-attr">End date:</label><input id="editenddate"/></div>
+ <div id="desc"><label>Description</label><input id="editdescription"/></div>
+ <div id="url"><p class="info-card-attr">URL</p><p class="info-card-attr-val"><input id="editurl"></p></div>
+ <hr>
+ <button class="btn-regular btn-regular-outline">Save</button>
+ <button id="deletenode" class="btn-regular">Delete</button>
+ </form>
+ </div>
</div>
<div class="typeselection">
diff --git a/res/css/modules/colors.scss b/res/css/modules/colors.scss
index 11337ef7..905d239d 100644
--- a/res/css/modules/colors.scss
+++ b/res/css/modules/colors.scss
@@ -1,4 +1,5 @@
$light-grey: #f5f5fa;
+$mid-light-grey: #d4d4d9;
$mid-grey: #919095;
$dark-grey: #363636;
$magenta: #ee3654;
diff --git a/res/css/modules/mixins.scss b/res/css/modules/mixins.scss
index 9afcbe80..3c431be0 100644
--- a/res/css/modules/mixins.scss
+++ b/res/css/modules/mixins.scss
@@ -8,4 +8,10 @@
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
+}
+
+@mixin rz-box-sizing-padding() {
+ -webkit-box-sizing: padding-box;
+ -moz-box-sizing: padding-box;
+ box-sizing: padding-box;
} \ No newline at end of file
diff --git a/res/css/modules/typography.scss b/res/css/modules/typography.scss
index 8a7d8fe7..6a8c1102 100644
--- a/res/css/modules/typography.scss
+++ b/res/css/modules/typography.scss
@@ -16,6 +16,14 @@
url('../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.ttf') format('truetype'); /* Safari, Android, iOS */
}
+@font-face {
+ font-family: 'Source_Bold';
+ src: url('../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.eot'); /* IE9 Compat Modes */
+ src: url('../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.woff') format('woff'), /* Modern Browsers */
+ url('../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.ttf') format('truetype'); /* Safari, Android, iOS */
+}
+
//Font size
$h1-size: 30px;
$h2-size: 24px;
@@ -31,6 +39,7 @@ $bold: 600;
// Base font
$base-font-family: 'Source_Regular', sans-serif;
$semibold-font-family: 'Source_Semibold', sans-serif;
+$bold-font-family: 'Source_Bold', sans-serif;
$base-font-weight: $regular;
$base-font-size: 12px;
diff --git a/res/css/partials/buttons.scss b/res/css/partials/buttons.scss
index e69de29b..379157c4 100644
--- a/res/css/partials/buttons.scss
+++ b/res/css/partials/buttons.scss
@@ -0,0 +1,24 @@
+.btn-regular {
+ cursor: pointer;
+ background-color: white;
+ font-family: $base-font-family;
+ font-size: $h4-size;
+ color: $blue;
+ padding: $one-baseline $two-baselines $one-baseline $two-baselines;
+ margin-right: 6px;
+ border-radius: 4px;
+ border: none;
+}
+
+.btn-regular:hover {
+ color: $dark-cyan;
+ border-color: $dark-cyan;
+}
+
+.btn-regular:focus {
+ outline: none;
+}
+
+.btn-regular-outline {
+ border: 1px solid $blue;
+} \ No newline at end of file
diff --git a/res/css/partials/graph-view.scss b/res/css/partials/graph-view.scss
index 758285ea..44575d4e 100644
--- a/res/css/partials/graph-view.scss
+++ b/res/css/partials/graph-view.scss
@@ -1,6 +1,7 @@
.graph-view {
width:100%;
background-color: #f5f5fa; //$light-grey
+ position: relative;
}
.node {
@@ -106,9 +107,8 @@
fill: $blue;
}
-
.circle.club {
- fill: $purple;
+ fill: $magenta;
}
.circle.skill {
@@ -116,7 +116,7 @@
}
.circle.interest {
- fill: $orange;
+ fill: $purple;
}
.circle.project {
@@ -124,23 +124,23 @@
}
.circle.third-internship-proposal {
- fill: $magenta;
+ fill: $cyan;
}
.circle.internship {
- fill: $cyan;
+ fill: $orange;
}
.circle.empty {
- fill: #080808;
+ fill: $mid-grey;
}
.circle.chainlink {
- fill: #fff;
+ fill: $dark-grey;
}
.circle.bubble {
- fill: rgba(0,0,0,0.2);
+ fill: rgba(255,255,255,0.2);
}
diff --git a/res/css/partials/info-box.scss b/res/css/partials/info-box.scss
deleted file mode 100644
index 0b0a4c08..00000000
--- a/res/css/partials/info-box.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.subtitle{
- font-style:italic;
- color: #bbb;
- font-size: 12px;
- float:right;
-}
-
-.edge_info, .info {
- background-color: rgba(17,17,17,0.8);
- position:fixed;
- top:150px;
- width:250px;
- right:10px;
- font-size: 18px;
- border: 1px solid;
- padding: 5px;
- line-height: 45px;
- border-color: #303030;
-} \ No newline at end of file
diff --git a/res/css/partials/info-card.scss b/res/css/partials/info-card.scss
new file mode 100644
index 00000000..d3907679
--- /dev/null
+++ b/res/css/partials/info-card.scss
@@ -0,0 +1,88 @@
+@import '../modules/mixins'; // For box-shadow and box-sizing
+
+.info-container {
+ position: absolute;
+ right: $doc-margin;
+ top: $two-baselines;
+}
+
+.subtitle{
+ font-style:italic;
+ color: #bbb;
+ font-size: 12px;
+ float:right;
+}
+
+.edge_info, .info {
+ color: $dark-grey;
+ background-color: white;
+ @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
+ position: relative;
+ width:250px;
+ padding: 24px;
+ @include rz-box-sizing-border;
+ border-top: 6px solid $dark-grey;
+}
+
+// change card top border color by node type
+.info.type-person {
+ border-top: 6px solid $blue;
+}
+
+.info.type-club {
+ border-top: 6px solid $magenta;
+}
+
+.info.type-skill {
+ border-top: 6px solid $yellow;
+}
+
+.info.type-third-internship-proposal {
+ border-top: 6px solid $cyan;
+}
+
+.info.type-internship {
+ border-top: 6px solid $orange;
+}
+
+.info.type-interest {
+ border-top: 6px solid $purple;
+}
+
+.info.type-empty {
+ border-top: 6px solid $mid-grey;
+}
+
+.info.type-chainlink {
+ border-top: 6px solid $dark-grey;
+}
+
+.info.type-project {
+ border-top: 6px solid $green;
+}
+
+// card elements styles
+
+.info .info-card-attr {
+ display: block;
+ text-transform: capitalize;
+ font-size: $h4-size;
+ font-family: $bold-font-family;
+}
+
+.info .info-card-attr-val {
+ display: block;
+ text-transform: capitalize;
+ font-size: $h2-size;
+ margin: 12px 0px 24px 0px;
+}
+
+.info hr {
+ width: 250px;
+ position: relative;
+ left: -24px;
+ border: none;
+ background-color: $mid-light-grey;
+ height: 2px;
+ margin: $two-baselines 0px $two-baselines 0px;
+} \ No newline at end of file
diff --git a/res/css/partials/input-bar.scss b/res/css/partials/input-bar.scss
index 1bce345c..913c7e48 100644
--- a/res/css/partials/input-bar.scss
+++ b/res/css/partials/input-bar.scss
@@ -1,4 +1,4 @@
-@import '../modules/mixins';
+@import '../modules/mixins'; // For box-shadow
.input-container {
position: fixed;
diff --git a/res/css/partials/search-bar.scss b/res/css/partials/search-bar.scss
index cd671f33..db46df31 100644
--- a/res/css/partials/search-bar.scss
+++ b/res/css/partials/search-bar.scss
@@ -1,4 +1,4 @@
-@import '../modules/mixins';
+@import '../modules/mixins'; // For box-shadow
.search-bar{
width:100%;
diff --git a/res/css/style.css b/res/css/style.css
index 6ef5bcae..d12f7a39 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -11,6 +11,12 @@
/* IE9 Compat Modes */
src: url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.woff") format("woff"), url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.ttf") format("truetype");
/* Safari, Android, iOS */ }
+@font-face {
+ font-family: 'Source_Bold';
+ src: url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.eot");
+ /* IE9 Compat Modes */
+ src: url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.woff") format("woff"), url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.ttf") format("truetype");
+ /* Safari, Android, iOS */ }
/* Vertical spacing */
/* Horizontal spacing */
html, body {
@@ -127,6 +133,27 @@ table {
border-collapse: collapse;
border-spacing: 0; }
+.btn-regular {
+ cursor: pointer;
+ background-color: white;
+ font-family: "Source_Regular", sans-serif;
+ font-size: 14px;
+ color: #004681;
+ padding: 12px 24px 12px 24px;
+ margin-right: 6px;
+ border-radius: 4px;
+ border: none; }
+
+.btn-regular:hover {
+ color: #8eb6bf;
+ border-color: #8eb6bf; }
+
+.btn-regular:focus {
+ outline: none; }
+
+.btn-regular-outline {
+ border: 1px solid #004681; }
+
.debug-ui {
display: none; }
@@ -148,7 +175,8 @@ body.debug .debug-ui-right {
.graph-view {
width: 100%;
- background-color: #f5f5fa; }
+ background-color: #f5f5fa;
+ position: relative; }
.node {
stroke-width: 1px;
@@ -233,31 +261,31 @@ body.debug .debug-ui-right {
fill: #004681; }
.circle.club {
- fill: #8b3ab0; }
+ fill: #ee3654; }
.circle.skill {
fill: #fad900; }
.circle.interest {
- fill: #ff8b11; }
+ fill: #8b3ab0; }
.circle.project {
fill: #40c200; }
.circle.third-internship-proposal {
- fill: #ee3654; }
+ fill: #33c2e0; }
.circle.internship {
- fill: #33c2e0; }
+ fill: #ff8b11; }
.circle.empty {
- fill: #080808; }
+ fill: #919095; }
.circle.chainlink {
- fill: #fff; }
+ fill: #363636; }
.circle.bubble {
- fill: rgba(0, 0, 0, 0.2); }
+ fill: rgba(255, 255, 255, 0.2); }
/* Selected parts of the graph, right now by clicking, later with search. */
.notselected {
@@ -409,6 +437,11 @@ body.debug .debug-ui-right {
#keys {
opacity: 0.5; }
+.info-container {
+ position: absolute;
+ right: 70px;
+ top: 24px; }
+
.subtitle {
font-style: italic;
color: #bbb;
@@ -416,16 +449,66 @@ body.debug .debug-ui-right {
float: right; }
.edge_info, .info {
- background-color: rgba(17, 17, 17, 0.8);
- position: fixed;
- top: 150px;
+ color: #363636;
+ background-color: white;
+ -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+ box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+ position: relative;
width: 250px;
- right: 10px;
- font-size: 18px;
- border: 1px solid;
- padding: 5px;
- line-height: 45px;
- border-color: #303030; }
+ padding: 24px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ border-top: 6px solid #363636; }
+
+.info.type-person {
+ border-top: 6px solid #004681; }
+
+.info.type-club {
+ border-top: 6px solid #ee3654; }
+
+.info.type-skill {
+ border-top: 6px solid #fad900; }
+
+.info.type-third-internship-proposal {
+ border-top: 6px solid #33c2e0; }
+
+.info.type-internship {
+ border-top: 6px solid #ff8b11; }
+
+.info.type-interest {
+ border-top: 6px solid #8b3ab0; }
+
+.info.type-empty {
+ border-top: 6px solid #919095; }
+
+.info.type-chainlink {
+ border-top: 6px solid #363636; }
+
+.info.type-project {
+ border-top: 6px solid #40c200; }
+
+.info .info-card-attr {
+ display: block;
+ text-transform: capitalize;
+ font-size: 14px;
+ font-family: "Source_Bold", sans-serif; }
+
+.info .info-card-attr-val {
+ display: block;
+ text-transform: capitalize;
+ font-size: 24px;
+ margin: 12px 0px 24px 0px; }
+
+.info hr {
+ width: 250px;
+ position: relative;
+ left: -24px;
+ border: none;
+ background-color: #d4d4d9;
+ height: 2px;
+ margin: 24px 0px 24px 0px; }
.search-bar {
width: 100%;
diff --git a/res/css/style.scss b/res/css/style.scss
index 562b6238..9deb7798 100644
--- a/res/css/style.scss
+++ b/res/css/style.scss
@@ -11,7 +11,7 @@
@import "partials/grid";
@import "partials/input-bar";
@import "partials/input-bubble";
-@import "partials/info-box";
+@import "partials/info-card";
@import "partials/metro-view";
@import "partials/search-bar";
@import "partials/task-alert";
diff --git a/res/img/cancel-input-button.png b/res/img/cancel-button.png
index 76f7cbfa..58c8e8da 100644
--- a/res/img/cancel-input-button.png
+++ b/res/img/cancel-button.png
Binary files differ
diff --git a/res/img/drop-down-arrow.png b/res/img/drop-down-arrow.png
new file mode 100644
index 00000000..376e2947
--- /dev/null
+++ b/res/img/drop-down-arrow.png
Binary files differ
diff --git a/res/img/person_icon.png b/res/img/person_icon.png
new file mode 100644
index 00000000..c6dbc501
--- /dev/null
+++ b/res/img/person_icon.png
Binary files differ
diff --git a/res/img/url-Icon.png b/res/img/url-Icon.png
new file mode 100644
index 00000000..bd39e5ea
--- /dev/null
+++ b/res/img/url-Icon.png
Binary files differ
diff --git a/src/view/helpers.js b/src/view/helpers.js
index 41d99891..ad11763a 100644
--- a/src/view/helpers.js
+++ b/src/view/helpers.js
@@ -5,35 +5,38 @@ function customColor(type) {
var color;
switch (type) {
case "person":
- color = '#FCB924';
+ color = '#FCB924'; //blue
break;
case "club":
- color = '#009DDC';
+ color = '#ee3654'; //magenta
break;
case "skill":
- color = '#62BB47';
+ color = '#fad900'; //yellow
break;
case "third-internship-proposal":
- color = '#202020';
+ color = '#33c2e0'; //cyan
break;
case "internship":
- color = '#933E99';
+ color = '#ff8b11'; //orange
break;
case "interest":
- color = '#933E99';
+ color = '#8b3ab0'; //purple
+ break;
+ case "project":
+ color = "#40C200"; //green
break;
case "empty":
- color = "#080808";
+ color = "#919095"; //mid-grey
break;
case "chainlink":
- color = "#fff";
+ color = "#363636"; //dark-grey
break;
case "bubble":
- color = "rgba(0,0,0,0.2)";
+ color = "rgba(255,255,255,0.2)"; // white, 0.2 opaque
break;
default:
console.log('bug: unknown type ' + type);
- color = '#080808';
+ color = '#d4d4d9'; //mid-light grey
break;
}
return color;
diff --git a/src/view/node_info.js b/src/view/node_info.js
index a3b8f7d4..494b674b 100644
--- a/src/view/node_info.js
+++ b/src/view/node_info.js
@@ -2,34 +2,39 @@ define(['jquery', 'jquery-ui', 'view/helpers', 'view/internal'],
function($, _unused_jquery_ui, view_helpers, internal) {
function show(d) {
- var editURL = '',
- name_field = 'Name: ' + '<input id="editformname">',
- html;
-
+ var info = $('.info'), // #TODO - move to tab
+ f = false,
+ t = true,
+ visible = {
+ "third-internship-proposal": [t, t, t, f, f],
+ "chainlink": [f, f, f, f, f],
+ "skill": [f, f, f, f, t],
+ "interest": [f, f, f, f, t],
+ "_defaults": [f, f, f, f, t],
+ },
+ fields = ["status", "startdate", "enddate", "desc", "url"],
+ flags = visible.hasOwnProperty(d.type) ? visible[d.type] : visible._defaults,
+ i;
+
internal.edit_tab.show('node');
- if (d.type === "third-internship-proposal") {
- html = '<br/><form id="editbox"><label>Type:</label><select id="edittype"><option value="person">Person</option><option value="club">Club</option><option value="skill">Skill</option><option value="interest">Interest</option><option value="third-internship-proposal">Third-internship-proposal</option><option value="internship">Internship</option></select><br/><label>Status</label><select id="editstatus"><option value="waiting">Waiting</option><option value="approved">Approved</option><option value="notapproved">Not Approved</option></select><br/><label>Start date:</label><input id="editstartdate"/></br><label>End date:</label><input id="editenddate"/></br><button>Save</button><button id="deletenode">Delete</button></form>';
- } else if(d.type=== "chainlink"){
- html = '<br/><form id="editbox"><button>Save</button><button id="deletenode">Delete</button></form>';
- }else{
- if (d.type !== 'skill' && d.type !== 'interest') {
- editURL = '<label>URL:</label><input id="editurl"/>'
- }
- html = '<br/><form id="editbox"><label>Type:</label><select id="edittype"><option value="person">Person</option><option value="club">Club</option><option value="skill">Skill</option><option value="interest">Interest</option><option value="third-internship-proposal">Third-internship-proposal</option><option value="internship">Internship</option></select><br/>' + editURL + '<br/><button>Save</button><button id="deletenode">Delete</button></form>';
+ for (i = 0 ; i < flags.length; ++i) {
+ if (flags[i]) {
+ info.find(fields[i]).show();
+ } else {
+ info.find(fields[i]).hide();
+ }
}
- $('.info').html(name_field + html);
- $('.info').css("border-color", view_helpers.customColor(d.type));
+ $('.info').attr('class', 'info');
+ $('.info').addClass('type-' + d.type); // Add a class to distinguish types for css
$('.info').find('#editformname').val(d.name);
-
$("#editenddate").datepicker({
inline: true,
showOtherMonths: true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
});
-
$("#editstartdate").datepicker({
inline: true,
showOtherMonths: true,
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-15 14:03:32 +0000