Fix statistics view to span the whole flexbox,
Rename match-distance to view-distance,
Align refresh button,
Functionally recreate grey-green colors
Change-Id: Iac653aca504515073a0823052123fde41fd5ac64
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index f7f16ca..6c121cf 100644
--- a/dev/js/src/loc/de.js
+++ b/dev/js/src/loc/de.js
@@ -38,6 +38,7 @@
//Corpus statistic
loc.SHOW_STAT = 'Korpusstatistik';
+ loc.REFRESH = 'Neu laden';
//verbose description, for title attributes for example
//loc.VERB_SHOWSTAT = 'Korpusstatistik';
diff --git a/dev/js/src/vc/statistic.js b/dev/js/src/vc/statistic.js
index eb626dc..dd955b7 100644
--- a/dev/js/src/vc/statistic.js
+++ b/dev/js/src/vc/statistic.js
@@ -38,7 +38,6 @@
if (this._element !== undefined) {
return this._element;
}
- ;
// create HTML Description List Element
var statDL = document.createElement('dl');
diff --git a/dev/js/src/view/corpstatv.js b/dev/js/src/view/corpstatv.js
index 81c18cd..410ee42 100644
--- a/dev/js/src/view/corpstatv.js
+++ b/dev/js/src/view/corpstatv.js
@@ -4,9 +4,11 @@
* @author Helge Stallkamp
*/
-define([ 'view', 'vc/statistic' ], function(viewClass, statClass) {
+define([ 'view', 'vc/statistic', 'buttongroup' ], function(viewClass, statClass, buttonGroup) {
- const d = document;
+ // Localization values
+ const loc = KorAP.Locale;
+ loc.REFRESH = loc.REFRESH || 'Refresh';
return {
create : function(vc, panel) {
@@ -139,21 +141,13 @@
var statt = this._show;
if(statt.getElementsByClassName('reloadStatB').length == 0){
- var reloadspan = document.createElement('div');
- reloadspan.classList.add('reloadStatB');
- reloadspan.classList.add('button-group');
- reloadspan.classList.add('button-panel');
- reloadb = reloadspan.addE('span');
- reloadb.classList.add('refresh');
-
+ let btg = buttonGroup.create(['reloadStatB', 'button-panel']);
var that = this;
- reloadb.addEventListener("click", function (e){
- statt.classList.remove('stdisabled');
- that.panel.reloadCorpStat();
+ btg.add(loc.REFRESH, ['refresh', 'button-icon'], function (e) {
+ statt.classList.remove('stdisabled');
+ that.panel.reloadCorpStat();
});
-
-
- statt.appendChild(reloadspan);
+ statt.appendChild(btg.element());
statt.classList.add('stdisabled');
}
},
diff --git a/dev/scss/base/flextable.scss b/dev/scss/base/flextable.scss
index 52594c2..910d275 100644
--- a/dev/scss/base/flextable.scss
+++ b/dev/scss/base/flextable.scss
@@ -26,11 +26,12 @@
> dt {
text-align: left;
width: 12.5em;
+ padding: $item-padding;
margin: 0;
}
> dd {
text-align: left;
- padding: 2px;
+ padding: $item-padding;
margin: 0;
width: 100%;
max-width: none;
@@ -39,6 +40,7 @@
white-space: normal;
overflow-y: auto;
overflow-x: hidden;
+ text-overflow: ellipsis;
}
}
}
diff --git a/dev/scss/base/fragment.scss b/dev/scss/base/fragment.scss
index 4cab900..0a986d5 100644
--- a/dev/scss/base/fragment.scss
+++ b/dev/scss/base/fragment.scss
@@ -16,7 +16,7 @@
left: $left-distance;
top: .5em;
bottom: .5em;
- right: $right-match-distance;
+ right: $right-view-distance;
}
&:hover {
cursor:pointer;
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
index 3952e66..234e81b 100644
--- a/dev/scss/header/statistics.scss
+++ b/dev/scss/header/statistics.scss
@@ -9,57 +9,49 @@
div.stattable {
display: flex;
flex-direction: row;
+ margin-right: $right-view-distance;
}
div.stattable {
- > dl {
- display: flex;
- flex-flow: row wrap;
- margin-top:4px;
- margin-bottom:4px;
- padding-bottom: 1px;
- > div {
- border-color: $dark-green;
- > dt {
- background-color: $middle-green;
- width: 15em;
- margin: 0;
- &:after {
- content: ":";
- }
- }
- > dd {
- background-color: $lightest-green;
- color: $dark-grey;
- }
- }
- }
- &.stdisabled {
- > dl
- > div {
- > dt {
- @include vcinfo-inactive;
- }
- > dd {
- @include vcinfo-inactive;
- }
- }
+ > dl {
+ margin-bottom:4px;
+ > div {
+ border-color: $dark-green;
+ > dt {
+ background-color: $middle-green;
+ width: 15em;
+ margin: 0;
+ &:after {
+ content: ":";
}
+ }
+ > dd {
+ background-color: $lightest-green;
+ color: $dark-grey;
+ }
+ }
+ }
+ &.stdisabled {
+ dt, dd {
+ @include vcinfo-inactive;
+ }
+ }
}
/* Corpus statistic reload button */
-div.reloadStatB {
- font-family: 'FontAwesome';
- padding-left: 2px;
- z-index: 30;
- }
-span.refresh::after{
- line-height: normal;
- content : $fa-redo;
- font-size: 15pt;
- }
+div.reloadStatB > span.refresh {
+ margin-left: 2pt;
+}
-/* Close-button should always be seen next to or above reload-button */
-.button-view.vcstatistic {
- z-index: 30;
- }
+span.refresh::after{
+ vertical-align: sub;
+ content : $fa-redo;
+}
+
+// Default value 20% doesn't work with < 5 items,
+// which is the default case with corpus statistics
+@media (min-width:1680px) {
+ div.stattable dl.flex > div {
+ width: inherit;
+ }
+}
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
index 8c3d620..fd0866d 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/main/buttongroup.scss
@@ -52,7 +52,7 @@
z-index: 20;
margin: 0;
padding: 0;
- width: $right-match-distance;
+ width: $right-view-distance;
> span:first-child {
margin-top: $border-size
}
diff --git a/dev/scss/main/koralquery.scss b/dev/scss/main/koralquery.scss
index 6a9550d..402f477 100644
--- a/dev/scss/main/koralquery.scss
+++ b/dev/scss/main/koralquery.scss
@@ -11,7 +11,7 @@
background-color: $nearly-white;
margin: {
top: 2pt;
- right: $right-match-distance; // 3em;
+ right: $right-view-distance; // 3em;
bottom: 2pt;
left: 2pt;
}
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index 76fb330..4a3ecce 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -259,7 +259,7 @@
padding: 2pt 0 5pt 5pt;
margin: {
top: 0;
- right: $right-match-distance; // 3em;
+ right: $right-view-distance;
bottom: 0;
left: 0; // 5pt margin-top
}
@@ -299,7 +299,7 @@
display: block;
color: $nearly-white;
padding: 3pt 10pt 3pt 3pt;
- padding-right: $right-match-distance;
+ padding-right: $right-view-distance;
margin: 0pt;
width: 100%;
bottom: 0;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 9d3bf50..e4540e9 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -34,7 +34,7 @@
div.matchtable > div {
z-index: 20;
margin-left: $left-distance - ($border-size / 2);
- margin-right: $right-match-distance;
+ margin-right: $right-view-distance;
padding: 0;
overflow-x: auto;
overflow-y: visible;
@@ -189,7 +189,7 @@
overflow-x: auto;
margin: $border-size;
margin-left: $left-distance;
- margin-right: $right-match-distance;
+ margin-right: $right-view-distance;
background-color: $light-orange;
}
@@ -211,7 +211,7 @@
// Metatable
div.metatable > dl {
- margin-right: $right-match-distance;
+ margin-right: $right-view-distance;
margin-top: $border-size;
> div {
diff --git a/dev/scss/main/plugin.scss b/dev/scss/main/plugin.scss
index d8c26a2..42867f6 100644
--- a/dev/scss/main/plugin.scss
+++ b/dev/scss/main/plugin.scss
@@ -1,7 +1,7 @@
@import "../util";
div.view.widget {
- padding-right: $right-match-distance;
+ padding-right: $right-view-distance;
> iframe {
margin: 0;
box-sizing: border-box;
diff --git a/dev/scss/main/tutorial.scss b/dev/scss/main/tutorial.scss
index 9678ca9..004d3d1 100644
--- a/dev/scss/main/tutorial.scss
+++ b/dev/scss/main/tutorial.scss
@@ -10,7 +10,7 @@
bottom: 5%;
left: 2%;
right: 2%;
- padding-right: $right-match-distance;
+ padding-right: $right-view-distance;
/*
padding: 0;
margin: 0;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 90e20b1..6edd3e7 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -37,8 +37,8 @@
// $middle-green: lighten($ids-green-1, 5%);
$middle-green: lighten($ids-green-1, 9%);
$light-green: lighten($ids-green-1, 13%); // #7ba400;
-$lightest-green: #d8e38c; // lighten($ids-green-1, 26%);
-$grey-green: #bcc387;
+$lightest-green: desaturate(lighten($light-green, 35%), 20%); // #d8e38c;
+$grey-green: darken(desaturate($lightest-green, 25%), 12%); // #bcc387;
/**
* Blue Colors
@@ -51,10 +51,11 @@
* Grey Colors
*/
$middle-grey: $ids-grey-1; // #999;
-$semilight-grey: #8d8d8d;
+// $semilight-grey: #8d8d8d;
$light-grey: $ids-grey-2; // #ddd;
$dark-grey: darken($middle-grey, 15%);
$nearly-white: #fefefe;
+
/**
* Red Colors (no IDS relation)
*/
@@ -112,7 +113,7 @@
*/
$standard-margin: 40px;
$right-distance: $standard-margin;
-$right-match-distance: $standard-margin / 2;
+$right-view-distance: $standard-margin / 2;
$logo-left-distance: 230px;
/**
@@ -240,8 +241,8 @@
*/
@mixin vcinfo-inactive{
background-color: $grey-green;
- color: $semilight-grey;
- border-color: $semilight-grey;
+ color: $dark-green; // $semilight-grey;
+ // border-color: $semilight-grey;
text-shadow: none;
}
/**