Add vc-fragment styling
Change-Id: I072c15a9ed22da1982e1bf8ac5b9255f42cd15d0
diff --git a/Gruntfile.js b/Gruntfile.js
index e8623a6..a6cfb95 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -142,6 +142,7 @@
css: {
files: ['dev/scss/{util,base,fonts,kalamar,media,no-js}.scss',
'dev/scss/base/flextable.scss',
+ 'dev/scss/base/fragment.scss',
'dev/scss/footer/footer.scss',
'dev/scss/sidebar/sidebar.scss',
'dev/scss/header/{header,hint,menu,searchbar,vc,statistics,datepicker}.scss',
diff --git a/dev/demo/vc.html b/dev/demo/vc.html
index 139bb1b..e6cdbe0 100644
--- a/dev/demo/vc.html
+++ b/dev/demo/vc.html
@@ -41,5 +41,7 @@
<p><a onclick="KorAP.showQuery()" style="cursor:pointer">show Query!</a></p>
<div id="query" class="info"></div>
+ <div id="fragment"></div>
+
</body>
</html>
diff --git a/dev/demo/vcdemo.js b/dev/demo/vcdemo.js
index 87a2c74..0c66dd3 100644
--- a/dev/demo/vcdemo.js
+++ b/dev/demo/vcdemo.js
@@ -97,7 +97,7 @@
];
-require(['vc','lib/domReady', 'lib/highlight/highlight.pack'], function (vcClass, domReady) {
+require(['vc','vc/fragment','lib/domReady', 'lib/highlight/highlight.pack'], function (vcClass, fragmentClass, domReady) {
var loc = KorAP.Locale;
@@ -153,7 +153,18 @@
//get the corpus statistic (demo function)
KorAP.API.getCorpStat = function(collQu, cb){
return cb(statistic);
- };
-});
+ };
+
+
+ var f = fragmentClass.create();
+ f.add("author", "Peter");
+ f.add("title", "Sonstiges");
+ f.add("subTitle", "Anderes");
+
+ document.getElementById('fragment').appendChild(
+ f.element()
+ );
+
+ });
});
diff --git a/dev/js/src/match/querycreator.js b/dev/js/src/match/querycreator.js
index 78a422b..d7c5edf 100644
--- a/dev/js/src/match/querycreator.js
+++ b/dev/js/src/match/querycreator.js
@@ -83,7 +83,7 @@
// Initialize element
this._element = document.createElement('p');
- this._element.className = 'queryfragment';
+ this._element.classList.add('query','fragment');
// Prepend info text
this._element.addE('span').addT(loc.NEW_QUERY + ':');
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 902b27c..7b32e76 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,6 +1,7 @@
@charset "utf-8";
@import "util";
@import "base/flextable";
+@import "base/fragment";
/**
* Basic global CSS rules for Kalamar
diff --git a/dev/scss/base/fragment.scss b/dev/scss/base/fragment.scss
new file mode 100644
index 0000000..5c59a43
--- /dev/null
+++ b/dev/scss/base/fragment.scss
@@ -0,0 +1,44 @@
+@charset "utf-8";
+@import "../util";
+
+.vc.fragment, p.query.fragment {
+ position:relative;
+ @include choose-item;
+
+ border : {
+ width: $border-size;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+ padding: 2pt 4pt !important;
+ margin: {
+ // left: $border-size;
+ left: $left-distance;
+ top: .5em;
+ bottom: .5em;
+ right: $right-match-distance;
+ }
+ &:hover {
+ cursor:pointer;
+ @include choose-hover;
+ }
+
+ // This is the description
+ > span:first-of-type {
+ font-weight: bold;
+ padding-right: 4pt;
+ }
+
+ // Query fragment
+ > span:nth-of-type(2) {
+ padding-right: 1.2em;
+ }
+
+ &::after {
+ font-family: 'FontAwesome';
+ content: $fa-to-query;
+ position: absolute;
+ right: 4pt;
+ top: $border-size;
+ }
+}
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 799a6ef..bb098f3 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -9,23 +9,9 @@
* Virtual Collection Builder
*/
-.vc .builder {
- position: initial;
-
- // Unfortunately that does not work:
- // overflow-x: auto;
+.vc {
margin-top: 4pt;
- .docGroup, .doc {
- // color: $nearly-white;
- // color: $dark-green;
- color: $dark-grey;
- // text-shadow: $light-shadow;
- }
-
- /**
- * Rules for all docGroups
- */
.docGroup {
position: relative;
@@ -41,13 +27,6 @@
width: 0 $bracket-size; // .6em .5em
}
-
- // Whiten on hover
- &:hover {
- // background-color: rgba(255,255,255,.06);
- background-color: rgba(255,255,255,.3);
- }
-
&[data-operation] {
> .doc:first-child::before,
> .docGroup:first-child::before {
@@ -60,8 +39,6 @@
text-align: right;
width: $left-padding;
margin-left: -1 * ($left-padding + .5em); // -28pt
- // color: $dark-green;
- color: $dark-orange;
line-height: 1.5em;
border-top: $border-size solid transparent;
}
@@ -72,7 +49,6 @@
// Or operation
&[data-operation=or] {
- border-color: $dark-orange;
> .doc::before,
> .docGroup::before {
// This will be overruled by JS!
@@ -110,11 +86,12 @@
}
}
-
+
/**
* All document rules
*/
.doc {
+ line-height: 170%;
padding-left: $left-padding;
> span + span,
> span + div + span,
@@ -191,14 +168,6 @@
}
}
- .doc > span:not(.fixed) {
- cursor: pointer;
- &:hover {
- // color: $dark-green;
- color: $dark-orange;
- }
- }
-
/**
* All operators
*/
@@ -215,12 +184,6 @@
margin-left: 0;
}
- .doc, .docGroup {
- &:hover > .operators {
- opacity: 1;
- }
- }
-
.menu {
display: inline-block;
}
@@ -232,14 +195,12 @@
padding-right: 4pt;
style: normal;
weight: normal;
- }
+ }
div.value {
position: absolute;
display: inline-block;
z-index: 8000;
- @include choose-item;
- box-shadow: $choose-box-shadow;
padding: 4pt;
margin-top: -6pt;
border: {
@@ -281,6 +242,64 @@
}
}
+.vc:not(.fragment) {
+ .docGroup, .doc {
+ // color: $nearly-white;
+ // color: $dark-green;
+ color: $dark-grey;
+ // text-shadow: $light-shadow;
+ }
+
+ /**
+ * Rules for all docGroups
+ */
+ // Whiten on hover
+ .docGroup:hover {
+ // background-color: rgba(255,255,255,.06);
+ background-color: rgba(255,255,255,.3);
+ }
+
+ .doc > span.key.fixed {
+ color: $light-green;
+ }
+
+ .doc > span:not(.fixed) {
+ cursor: pointer;
+ &:hover {
+ // color: $dark-green;
+ color: $dark-orange;
+ }
+ }
+
+ .rewritten .rewrite {
+ color: $dark-orange;
+ }
+
+ .doc, .docGroup {
+ &:hover > .operators {
+ opacity: 1;
+ }
+ }
+
+ .docGroup {
+ &[data-operation] {
+ > .doc::before,
+ > .docGroup::before {
+ // color: $dark-green;
+ color: $dark-orange;
+ }
+ }
+ &[data-operation=or] {
+ border-color: $dark-orange;
+ }
+ }
+
+ div.value {
+ @include choose-item;
+ box-shadow: $choose-box-shadow;
+ }
+}
+
/**
* The z-index cascade for groups.
@@ -322,6 +341,12 @@
}
}
+.vc.fragment {
+ .doc {
+ margin-right: 2em;
+ }
+}
+
#collection {
line-height: 1em;
border-radius: $standard-border-radius;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 1f56fb0..2116512 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -29,48 +29,8 @@
height: auto;
font-size: 10pt;
text-align: left;
- p.queryfragment {
- position:relative;
- @include choose-item;
- border : {
- width: $border-size;
- style: solid;
- radius: $standard-border-radius;
- }
- padding: 2pt 4pt !important;
- margin: {
- // left: $border-size;
- left: $left-distance;
- top: .5em;
- bottom: .5em;
- right: $right-match-distance;
- }
- &:hover {
- cursor:pointer;
- @include choose-hover;
- }
-
- // This is the description
- > span:first-of-type {
- font-weight: bold;
- padding-right: 4pt;
- }
-
- // Query fragment
- > span:nth-of-type(2) {
- padding-right: 1.2em;
- }
-
- &::after {
- font-family: 'FontAwesome';
- content: $fa-to-query;
- position: absolute;
- right: 4pt;
- top: $border-size;
- }
- }
}
-
+
div.matchtable > div {
z-index: 20;
margin-left: $left-distance - ($border-size / 2);
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 077ba10..bb82ca0 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -96,6 +96,10 @@
$result-border-size: 1px;
$total-results: $light-green;
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
/**
* Path information - relative to css!
*/