Redesign of VC section
Change-Id: Id1eb6e86aff2632036e2ca21b119f3a1cf80dce7
diff --git a/Gruntfile.js b/Gruntfile.js
index 2bd8bb2..e8623a6 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -141,9 +141,10 @@
watch: {
css: {
files: ['dev/scss/{util,base,fonts,kalamar,media,no-js}.scss',
+ 'dev/scss/base/flextable.scss',
'dev/scss/footer/footer.scss',
'dev/scss/sidebar/sidebar.scss',
- 'dev/scss/header/{header,hint,menu,searchbar,vc,datepicker}.scss',
+ 'dev/scss/header/{header,hint,menu,searchbar,vc,statistics,datepicker}.scss',
'dev/scss/main/{alertify,intro,koralquery,highlight,kwic,logos,tagger,' +
'main,matchinfo,panel,tree,pagination,query,'+
'resultinfo,sidebar,tutorial,plugin,buttongroup}.scss'
diff --git a/dev/demo/alldemo.js b/dev/demo/alldemo.js
index 3b75c80..5a3d3c8 100644
--- a/dev/demo/alldemo.js
+++ b/dev/demo/alldemo.js
@@ -747,6 +747,15 @@
}
};
+//corpus statistic
+var statistic = {
+ "documents":1,
+ "tokens":222222,
+ "sentences":33333,
+ "paragraphs":444
+};
+
+
requirejs.config({
baseUrl: '../js/src',
paths : {
@@ -782,7 +791,13 @@
KorAP.API.getTextInfo = function (doc, param, cb) {
cb(textInfo);
};
-
+
+ //get the corpus statistic (demo function)
+ KorAP.API.getCorpStat = function(collQu, cb){
+ return cb(statistic);
+ };
+
+
/**
* Do some things at the beginning.
*/
diff --git a/dev/demo/vc.html b/dev/demo/vc.html
index a3e27df..139bb1b 100644
--- a/dev/demo/vc.html
+++ b/dev/demo/vc.html
@@ -26,7 +26,7 @@
</style>
</head>
<body>
- <div id="vc"></div>
+ <div id="vc-view"></div>
<div id="menu" class="vc"></div>
<p><a onclick="KorAP.makeVCPersistant()" style="cursor:pointer">make persistant!</a></p>
diff --git a/dev/demo/vcdemo.js b/dev/demo/vcdemo.js
index b1bf843..9bb67e2 100644
--- a/dev/demo/vcdemo.js
+++ b/dev/demo/vcdemo.js
@@ -125,7 +125,7 @@
['author', 'text']
]).fromJson(json);
- document.getElementById('vc').appendChild(vc.element());
+ document.getElementById('vc-view').appendChild(vc.element());
// show the current JSON serialization
KorAP.showJSON = function () {
diff --git a/dev/js/spec/statSpec.js b/dev/js/spec/statSpec.js
index e442ee2..32a9e36 100644
--- a/dev/js/spec/statSpec.js
+++ b/dev/js/spec/statSpec.js
@@ -107,7 +107,11 @@
expect(descL.children[0].children[0].firstChild.nodeValue).toEqual('documents');
expect(descL.children[0].children[1].firstChild.nodeValue).toEqual('12');
expect(descL.children[0].children[0].attributes[0].value).toEqual('documents');
- });
+
+ expect(descL.children[1].children[0].firstChild.nodeValue).toEqual('tokens');
+ expect(descL.children[1].children[1].firstChild.nodeValue).toEqual(new Number(2323).toLocaleString());
+ expect(descL.children[1].children[0].attributes[0].value).toEqual('tokens');
+ });
it('should display corpus statistic after creating a corpus statistic view', function(){
diff --git a/dev/js/src/match/meta.js b/dev/js/src/match/meta.js
index a9bf2db..8667953 100644
--- a/dev/js/src/match/meta.js
+++ b/dev/js/src/match/meta.js
@@ -41,6 +41,7 @@
return;
var metaDL = document.createElement('dl');
+ metaDL.classList.add("flex");
this._element = metaDL;
diff --git a/dev/js/src/vc/statistic.js b/dev/js/src/vc/statistic.js
index 95710db..eb626dc 100644
--- a/dev/js/src/vc/statistic.js
+++ b/dev/js/src/vc/statistic.js
@@ -42,6 +42,7 @@
// create HTML Description List Element
var statDL = document.createElement('dl');
+ statDL.classList.add("flex");
var statistic = this._statistic;
var keys = Object.keys(statistic);
@@ -52,7 +53,7 @@
statDT.addT(k);
statDT.setAttribute('title', k);
statDD = statSp.addE('dd');
- statDD.addT(statistic[k]);
+ statDD.addT(statistic[k].toLocaleString());
}
this._element = statDL;
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 6da7901..902b27c 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,5 +1,6 @@
@charset "utf-8";
@import "util";
+@import "base/flextable";
/**
* Basic global CSS rules for Kalamar
diff --git a/dev/scss/base/flextable.scss b/dev/scss/base/flextable.scss
new file mode 100644
index 0000000..52594c2
--- /dev/null
+++ b/dev/scss/base/flextable.scss
@@ -0,0 +1,69 @@
+/**
+ * This defines flexible table cells
+ * for views.
+ */
+
+dl.flex {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: stretch;
+ width: auto;
+ padding-bottom: 0;
+
+ > div {
+ display: flex;
+ flex-direction: row;
+ text-align: center;
+ width: 100%;
+ border-width: $border-size / 2;
+ border-style: solid;
+ align-items: stretch;
+ > * {
+ @include cell-info;
+ }
+ > dt {
+ text-align: left;
+ width: 12.5em;
+ margin: 0;
+ }
+ > dd {
+ text-align: left;
+ padding: 2px;
+ margin: 0;
+ width: 100%;
+ max-width: none;
+ max-height: 6em;
+ margin-left: $border-size;
+ white-space: normal;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+ }
+}
+
+
+@media (min-width:640px) {
+ dl.flex > div {
+ width: 50%; // 2*
+ }
+}
+
+@media (min-width:800px) {
+ dl.flex > div {
+ width: 33.3333333333333%; // 3*
+ }
+}
+
+@media (min-width:1200px) {
+ dl.flex > div {
+ width: 25%; // 4*
+ }
+}
+
+@media (min-width:1680px) {
+ dl.flex > div {
+ width: 20%; // 5*
+ }
+}
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index b29be0c..2bd0158 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -1,18 +1,19 @@
@charset "utf-8";
@import "../util";
-@import "hint"; // Hint specific menu list
-@import "menu"; // Menu list
-@import "searchbar"; // The search bar
-@import "vc"; // Virtual collection builder
-@import "datepicker"; // Datepicker
+@import "hint"; // Hint specific menu list
+@import "menu"; // Menu list
+@import "searchbar"; // The search bar
+@import "vc"; // Virtual corpus builder
+@import "statistics"; // Statistics for VCs
+@import "datepicker"; // Datepicker
header {
position: relative;
background-color: $light-green;
// @include light-noise;
@include box-sizing-box();
- padding: $base-padding;
- padding-bottom: 0;
+ padding-top: $base-padding;
+ // padding-bottom: 0;
font-size: 10pt;
color: $nearly-white;
// text-shadow: none;
@@ -124,10 +125,6 @@
content: $fa-logout;
}
}
-
- #vc-view > div {
- margin: 1.3em 0 .5em 0;
- }
}
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
new file mode 100644
index 0000000..44d8930
--- /dev/null
+++ b/dev/scss/header/statistics.scss
@@ -0,0 +1,83 @@
+@charset "utf-8";
+@import "../util";
+
+/*
+div.view.vcstatistic {
+ position: relative;
+ display: inline-flex;
+ width: auto;
+}
+*/
+
+div.stattable {
+ display: flex;
+ flex-direction: row;
+}
+/*
+div.stattable ul.action.image {
+ display: block;
+ li {
+ cursor: pointer;
+ color: $nearly-white;
+ text-decoration: none;
+ > span {
+ @include blind;
+ }
+ border-width: 0;
+ // z-index: 8;
+ text-decoration:none;
+ text-align: center;
+ font-style: normal;
+
+ &.close::after {
+ font-family: 'FontAwesome';
+ content: $fa-close;
+ }
+ }
+}
+*/
+
+div.stattable > dl {
+ display: flex;
+ flex-flow: row wrap;
+ //margin-top: 4 * $border-size !important;
+ margin-top:4px;
+ margin-bottom:4px;
+ padding-bottom: 1px;
+ > div {
+ /*
+ display: flex;
+ margin-right: 5px;
+ margin-left: 5px;
+ > * {
+ @include cell-info;
+ }
+ */
+ border-color: $dark-green;
+ > dt {
+ background-color: $middle-green;
+ /*
+ text-align: right;
+ // padding: 1px;
+ */
+ width: 15em;
+ margin: 0;
+ &:after {
+ content: ":";
+ }
+ }
+ > dd {
+ /*
+ text-align: left;
+ // padding: 1px;
+ margin: 0;
+ width: 100%;
+ max-width: none;
+ max-height: 6em;
+ margin-left: $border-size;
+ */
+ background-color: $lightest-green;
+ color: $dark-grey;
+ }
+ }
+}
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 668d871..b7b97cd 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -12,6 +12,13 @@
.vc {
margin-top: 4pt;
+ .docGroup, .doc {
+ // color: $nearly-white;
+ // color: $dark-green;
+ color: $dark-grey;
+ // text-shadow: $light-shadow;
+ }
+
/**
* Rules for all docGroups
*/
@@ -22,7 +29,6 @@
.docGroup { display: block; }
- color: $nearly-white;
padding: 4pt 2pt 4pt 0pt;
border: {
radius: $standard-border-radius * 2;
@@ -33,7 +39,8 @@
// Whiten on hover
&:hover {
- background-color: rgba(255,255,255,.06);
+ // background-color: rgba(255,255,255,.06);
+ background-color: rgba(255,255,255,.3);
}
&[data-operation] {
@@ -48,7 +55,8 @@
text-align: right;
width: $left-padding;
margin-left: -1 * ($left-padding + .5em); // -28pt
- color: $dark-green;
+ // color: $dark-green;
+ color: $dark-orange;
line-height: 1.5em;
border-top: $border-size solid transparent;
}
@@ -65,37 +73,34 @@
// This will be overruled by JS!
content: "or";
}
-
- &:after {
- .button-stat {
-
-
- > span {
- cursor: pointer;
- box-shadow: $choose-box-shadow;
- font-size: 9pt;
- line-height: 1.5em;
- padding: 0 4px;
- display: inline-block;
- @include choose-item;
- border-style: solid;
- border-width: $border-size 0;
- &:hover {
- @include choose-hover;
- }
- &:first-child {
- border: {
- left-width: $border-size;
- right-width: $border-size;
- }
- }
-
- }
-}
-
-
+ /*
+ &:after {
+ .button-stat {
+ > span {
+ cursor: pointer;
+ box-shadow: $choose-box-shadow;
+ font-size: 9pt;
+ line-height: 1.5em;
+ padding: 0 4px;
+ display: inline-block;
+ @include choose-item;
+ border-style: solid;
+ border-width: $border-size 0;
+ &:hover {
+ @include choose-hover;
+ }
+ &:first-child {
+ border: {
+ left-width: $border-size;
+ right-width: $border-size;
+ }
+ }
+
+ }
+ }
}
+ */
}
// And operation
@@ -191,7 +196,8 @@
.doc > span {
cursor: pointer;
&:hover {
- color: $dark-green;
+ // color: $dark-green;
+ color: $dark-orange;
}
}
@@ -314,6 +320,10 @@
border-radius: $standard-border-radius;
}
+header #vc-view > div {
+ margin: 1.3em 0 .5em 0;
+}
+
#vc-choose > span.rewritten {
&::after {
@@ -330,64 +340,31 @@
}
}
-div.stattable{
- display: flex;
- flex-direction: row;
- }
-
-div.stattable ul.action.image {
- display: block;
- li {
- cursor: pointer;
- color: $nearly-white;
- text-decoration: none;
- > span {
- @include blind;
- }
- border-width: 0;
- // z-index: 8;
- text-decoration:none;
- text-align: center;
- font-style: normal;
-
- &.close::after {
- font-family: 'FontAwesome';
- content: $fa-close;
- }
+div#vc-view > div.vc {
+ border: 2px solid $dark-green;
+ background-color: $nearly-white;
+ > div:first-child {
+ margin: 1.3em;
}
}
-
-div.stattable > dl {
- display: flex;
- flex-flow: row wrap;
+div.panel.vcinfo {
+ padding: 3pt 0pt 3pt 3pt;
background-color: $dark-green;
- //margin-top: 4 * $border-size !important;
- margin-top:4px;
- margin-bottom:4px;
- padding-bottom: 1px;
- > div {
- display: flex;
- margin-right: 5px;
- margin-left: 5px;
- > dt {
- text-align: right;
- padding: 1px;
- margin: 0;
- &:after {
- content: ":";
- }
+ /*
+ div.button-group {
+ display: inline-block;
+ margin-right: .5em;
+ > span {
+ position: relative;
+ box-shadow: none;
}
- > dd {
- text-align: left;
- padding: 1px;
- margin: 0;
- width: 100%;
- max-width: none;
- max-height: 6em;
- margin-left: $border-size;
- }
}
+*/
}
-
+/*
+.button-group.vcstatistic{
+ position:relative;
+ }
+*/
\ No newline at end of file
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
index f98f723..6a1ad38 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/main/buttongroup.scss
@@ -84,11 +84,6 @@
}
-.button-group.vcstatistic{
- position:relative;
- }
-
-
ul.menu.button-group-list {
border-top-right-radius: 8px;
font-size: 10pt;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 6bce8b8..0d257a3 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -5,15 +5,6 @@
$border-size: 2px;
$left-distance: $left-width + ($border-size * 2);
-@mixin cell-info {
- text-overflow: ellipsis;
- white-space: nowrap;
- max-width: 25em;
- overflow: hidden;
- padding: 1px 6px;
- margin: 0px;
-}
-
/**
* Table view
*
@@ -251,77 +242,22 @@
// Metatable
div.metatable > dl {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-start;
- align-items: stretch;
- width: auto;
- padding-bottom: 0;
margin-right: $right-match-distance;
margin-top: $border-size;
> div {
- display: flex;
- flex-direction: row;
- text-align: center;
- width: 100%;
- border: ($border-size / 2) solid $dark-orange;
- align-items: stretch;
- > * {
- @include cell-info;
- }
+ border-color: $dark-orange;
> dt {
- text-align: left;
background: $darker-orange;
color: $nearly-white;
width: 12.5em;
- margin: 0;
}
> dd {
- text-align: left;
background-color: $light-orange;
- padding: 2px;
- margin: 0;
- width: 100%;
- max-width: none;
- max-height: 6em;
- margin-left: $border-size;
- white-space: normal;
- overflow-y: auto;
- overflow-x: hidden;
- text-overflow: ellipsis;
}
}
}
-@media (min-width:640px) {
- div.metatable > dl {
- > div {
- width: 50%; // 2*
- }
- }
-}
-
-@media (min-width:800px) {
- div.metatable > dl > div {
- width: 33.3333333333333%; // 3*
- }
-}
-
-@media (min-width:1200px) {
- div.metatable > dl > div {
- width: 25%; // 4*
- }
-}
-
-@media (min-width:1680px) {
- div.metatable > dl > div {
- width: 20%; // 5*
- }
-}
-
-
div.loading {
background-color: transparent !important;
height: 16px !important;
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
index fef814f..55d0c9c 100644
--- a/dev/scss/main/panel.scss
+++ b/dev/scss/main/panel.scss
@@ -12,16 +12,3 @@
display: block;
width: 100%;
}
-
-
-div.result.panel .view {
- border: 1px solid $kwic-border;
- background-color: $dark-orange;
-}
-
-div.view.vcstatistic{
- position: relative;
- display: inline-flex;
- width: auto;
- }
-
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index f53de78..d1c7f86 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -17,6 +17,11 @@
}
}
+div.result.panel .view {
+ border: 1px solid $kwic-border;
+ background-color: $dark-orange;
+}
+
// Specify result button group layout
.result.button-group.button-panel {
width: auto;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 16cea3e..aa13a3c 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -34,9 +34,10 @@
* Green Colors
*/
$dark-green: $ids-green-1; // #496000;
-$middle-green: lighten($ids-green-1, 5%); // $ids-green-1; // #688704;
+// $middle-green: lighten($ids-green-1, 5%);
+$middle-green: lighten($ids-green-1, 9%);
$light-green: lighten($ids-green-1, 13%); // #7ba400;
-$lightest-green: lighten($ids-green-1, 26%);
+$lightest-green: #d8e38c; // lighten($ids-green-1, 26%);
/**
* Blue Colors
@@ -169,6 +170,15 @@
border-color: $dark-red;
}
+@mixin cell-info {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 25em;
+ overflow: hidden;
+ padding: 1px 6px;
+ margin: 0px;
+}
+
/**
* Mixin for basic color transition
*/