diff options
| -rw-r--r-- | res/css/modules/colors.scss | 1 | ||||
| -rw-r--r-- | res/css/partials/graph-view.scss | 35 | ||||
| -rw-r--r-- | res/css/partials/input-bar.scss | 20 | ||||
| -rw-r--r-- | res/css/style.css | 60 | ||||
| -rw-r--r-- | src/view/completer.js | 2 |
5 files changed, 81 insertions, 37 deletions
diff --git a/res/css/modules/colors.scss b/res/css/modules/colors.scss index 95956a49..11337ef7 100644 --- a/res/css/modules/colors.scss +++ b/res/css/modules/colors.scss @@ -8,6 +8,7 @@ $blue: #004681; $purple: #8b3ab0; $orange: #ff8b11; $yellow: #fad900; +$green: #40C200; $light-cyan: #D3F2F8; $dark-cyan: #8eb6bf; $darker-cyan: #1D6E7F;
\ No newline at end of file diff --git a/res/css/partials/graph-view.scss b/res/css/partials/graph-view.scss index a129d41b..78765353 100644 --- a/res/css/partials/graph-view.scss +++ b/res/css/partials/graph-view.scss @@ -5,7 +5,7 @@ .node { stroke-width: 1px; - font-size: 16px; + font-size: $h3-size; z-index:100; } @@ -14,16 +14,13 @@ } .circle { - stroke: $light-grey; - stroke-width: 1.5px; z-index: 100; pointer-events:all; - box-shadow: 0 0 0px #FFFF8F; } .nodetext { - fill: $dark-grey; - font-size:17px; + fill: $mid-grey; + font-size: $h3-size; z-index:3; } @@ -40,7 +37,7 @@ .linklabel{ stroke: $dark-grey; - font-size:14px; + font-size: $h5-size; background-color: transparent; } @@ -68,7 +65,8 @@ } .circle.chosen { - stroke: #EDE275; + stroke: $cyan; + stroke-opacity: 0.5; } .circle.enter { stroke: #EDE275; @@ -100,28 +98,32 @@ */ .circle.person { - fill: #FCB924; + fill: $blue; } .circle.club { - fill: #009DDC; + fill: $purple; } .circle.skill { - fill: #62BB47; + fill: $yellow; } .circle.interest { - fill: #f9f5f1; + fill: $orange; +} + +.circle.project { + fill: $green; } .circle.third-internship-proposal { - fill: #202020; + fill: $magenta; } .circle.internship { - fill: #933E99; + fill: $cyan; } .circle.empty { @@ -140,7 +142,7 @@ /* Selected parts of the graph, right now by clicking, later with search. */ .notselected { - opacity: 0.2; + opacity: 0.3; } .graph.link.temp_and { @@ -149,7 +151,8 @@ .highlightlink { fill: none; - stroke: #EDE275; + stroke: $cyan; + stroke-opacity: 0.5; stroke-width: 2px; z-index:1; } diff --git a/res/css/partials/input-bar.scss b/res/css/partials/input-bar.scss index 4e87c369..1bce345c 100644 --- a/res/css/partials/input-bar.scss +++ b/res/css/partials/input-bar.scss @@ -56,11 +56,29 @@ } .suggestion{ + color: $dark-grey; + max-height: 580px; + overflow-y: scroll; + font-size: $h3-size; list-style-type: none; + width: inherit; + position: relative; + margin-top: 6px; + border: 1px solid $mid-grey; + @include rz-box-sizing-border; + background: white; + // this box should have a shadow but we need a js solution to hide it before its appears - @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) ); +} + +.suggestion-item { + padding: 6px 0px 6px 18px; } .suggestion .selected { - color: blue; + padding-left: 16px; + background-color: $light-grey; + border-left: 2px solid $cyan; + @include rz-box-sizing-border; } .suggestion td{ diff --git a/res/css/style.css b/res/css/style.css index 280a5254..3b95af2e 100644 --- a/res/css/style.css +++ b/res/css/style.css @@ -152,19 +152,16 @@ body.debug .debug-ui-right { .node { stroke-width: 1px; - font-size: 16px; + font-size: 18px; z-index: 100; } .circle { - stroke: #f5f5fa; - stroke-width: 1.5px; z-index: 100; - pointer-events: all; - box-shadow: 0 0 0px #FFFF8F; } + pointer-events: all; } .nodetext { - fill: #363636; - font-size: 17px; + fill: #919095; + font-size: 18px; z-index: 3; } .svg-input-fo-node { @@ -177,7 +174,7 @@ body.debug .debug-ui-right { .linklabel { stroke: #363636; - font-size: 14px; + font-size: 12px; background-color: transparent; } .svg-input-fo-link { @@ -200,7 +197,8 @@ body.debug .debug-ui-right { /* higher than link, lower than node */ } .circle.chosen { - stroke: #EDE275; } + stroke: #33c2e0; + stroke-opacity: 0.5; } .circle.enter { stroke: #EDE275; } @@ -227,22 +225,25 @@ body.debug .debug-ui-right { * note that this should be automatically generated somehow for user settings. */ .circle.person { - fill: #FCB924; } + fill: #004681; } .circle.club { - fill: #009DDC; } + fill: #8b3ab0; } .circle.skill { - fill: #62BB47; } + fill: #fad900; } .circle.interest { - fill: #f9f5f1; } + fill: #ff8b11; } + +.circle.project { + fill: #40c200; } .circle.third-internship-proposal { - fill: #202020; } + fill: #ee3654; } .circle.internship { - fill: #933E99; } + fill: #33c2e0; } .circle.empty { fill: #080808; } @@ -255,14 +256,15 @@ body.debug .debug-ui-right { /* Selected parts of the graph, right now by clicking, later with search. */ .notselected { - opacity: 0.2; } + opacity: 0.3; } .graph.link.temp_and { stroke-dasharray: 3,3; } .highlightlink { fill: none; - stroke: #EDE275; + stroke: #33c2e0; + stroke-opacity: 0.5; stroke-width: 2px; z-index: 1; } @@ -350,10 +352,30 @@ body.debug .debug-ui-right { outline: none; } .suggestion { - list-style-type: none; } + color: #363636; + max-height: 580px; + overflow-y: scroll; + font-size: 18px; + list-style-type: none; + width: inherit; + position: relative; + margin-top: 6px; + border: 1px solid #919095; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + background: white; } + +.suggestion-item { + padding: 6px 0px 6px 18px; } .suggestion .selected { - color: blue; } + padding-left: 16px; + background-color: #f5f5fa; + border-left: 2px solid #33c2e0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .suggestion td { position: fixed; } diff --git a/src/view/completer.js b/src/view/completer.js index 86f746b0..a05a56d7 100644 --- a/src/view/completer.js +++ b/src/view/completer.js @@ -79,7 +79,7 @@ var completer = (function (input_element, dropdown) { } // [hash] [cursor] [space/end] completions(text.slice(hash + 1, space)).forEach(function(name) { - dropdown.append($('<div>' + name + '</div>')); + dropdown.append($('<div class="suggestion-item">' + name + '</div>')); }); dropdown.children().each(function (index, elem) { elem.onclick = function() { _applySuggestion(index); }; |