Added hint and vc to collected kalamar assets
diff --git a/public/scss/hint.scss b/public/scss/hint.scss
new file mode 100644
index 0000000..470cd17
--- /dev/null
+++ b/public/scss/hint.scss
@@ -0,0 +1,69 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+
+ul.menu.hint {
+ text-align:left;
+// margin-left: -1 * $border-size;
+ max-width: 23em !important;
+ min-width: 7em;
+
+ > li:first-of-type {
+ border-top: {
+ width: 1px;
+ left-radius: 0;
+ right-radius: 0;
+ }
+ }
+ span.desc {
+ display: block;
+ font-size: 75%;
+ }
+}
+
+#searchMirror {
+ position: absolute;
+ left: 0;
+ top: 0;
+ white-space: pre-wrap;
+ overflow: show;
+ height: 0;
+ > span {
+ display: block;
+ opacity: 0;
+ white-space: pre-wrap;
+ overflow: hidden;
+ }
+ // Todo: Besser nur, wenn im Focus
+ > div {
+ cursor: pointer;
+ transition: left 0.3s ease 0s;
+ position: absolute;
+ top: 0;
+ left: 0;
+ text-align: center;
+ padding: 0;
+ border-top: 5px solid $dark-orange;
+
+ height: 10px;
+ width: 1.2em;
+
+ &:hover {
+/*
+ border: {
+ width: $border-size;
+ style: solid;
+ radius: $standard-border-radius;
+ top: {
+ left-radius: 0;
+ right-radius: 0;
+ width: 0px;
+ }
+ }
+ @include choose-hover;
+*/
+ border-top: 10px solid $dark-orange;
+ }
+ }
+}
\ No newline at end of file
diff --git a/public/scss/kalamar.scss b/public/scss/kalamar.scss
index be2cf6f..1ffb671 100644
--- a/public/scss/kalamar.scss
+++ b/public/scss/kalamar.scss
@@ -8,7 +8,9 @@
@import "header"; // Top
@import "searchbar"; // The search bar
@import "menu"; // Menu list
+@import "hint"; // Hint specific menu list
@import "pagination"; // Pagination
@import "resultinfo"; // Information on results
@import "matchinfo"; // Match table and tree
@import "kwic"; // Kwic view information
+@import "vc"; // Kwic view information
diff --git a/public/scss/kwic.scss b/public/scss/kwic.scss
index 88a7da3..e768e5a 100644
--- a/public/scss/kwic.scss
+++ b/public/scss/kwic.scss
@@ -40,13 +40,17 @@
&:nth-of-type(even) {
background-color: $kwic-line-even;
}
- }
- > div {
- > div.snippet {
+ .matchinfo {
+ display: none;
+ }
+ > div > div.snippet {
text-overflow: ellipsis;
text-indent: 0;
text-shadow: $light-shadow;
-
+ }
+ }
+ > div {
+ > div.snippet {
> span,
> mark {
white-space: no-wrap !important;
diff --git a/public/scss/searchbar.scss b/public/scss/searchbar.scss
index 5ac8c0c..2b54e01 100644
--- a/public/scss/searchbar.scss
+++ b/public/scss/searchbar.scss
@@ -4,6 +4,9 @@
$border-size: 2px;
$right-distance: 30px;
+/**
+ * Input field
+ */
#q-field {
@include box-sizing-box();
outline: none;
@@ -12,9 +15,14 @@
padding: 2px;
width: 100%;
margin: 0;
+ margin-bottom: 3px;
display: block;
}
+header > form {
+ min-height: 2.7em;
+}
+
#searchbar {
position: relative;
@include box-sizing-box();
diff --git a/public/scss/vc.scss b/public/scss/vc.scss
new file mode 100644
index 0000000..4d759ef
--- /dev/null
+++ b/public/scss/vc.scss
@@ -0,0 +1,253 @@
+@charset "utf-8";
+@import "util";
+
+$left-padding: 28pt; // 2.8em;
+$border-size: 4px;
+
+.vc {
+ background-color: $light-green;
+
+ .docGroup {
+ position: relative;
+ display: inline-block;
+ color: $nearly-white;
+
+ margin-left: $left-padding; // 2.8em
+
+ // .6em .5em
+ border-width: 0 $border-size;
+
+ padding: {
+ top: 10pt;
+ bottom: 2pt;
+ left: 0pt;
+ right: 6pt;
+ }
+/*
+
+ background-color: yellow;
+*/
+ border: {
+ radius: $standard-border-radius * 2;
+ style: solid;
+ }
+
+ .docGroup {
+ display: block;
+ }
+
+ > .operators {
+ position: absolute;
+ display: block;
+ top: 10px;
+ vertical-align: middle;
+ left: 3px;
+ border-width: 2px 2px 2px 0;
+ border-top-right-radius: 7px;
+ border-bottom-right-radius: 7px;
+ margin-left: 100%;
+ padding: 0;
+ }
+
+ &:hover {
+ background-color: rgba(255,255,255,.05);
+ }
+
+ &[data-operation=or] {
+ border-color: $dark-orange;
+ > .doc::before,
+ > .docGroup::before {
+ content: "oder";
+ }
+ > .operators {
+ border-color: $dark-orange;
+ background-color: $dark-orange;
+ color: $nearly-white;
+ }
+ }
+
+ &[data-operation=and] {
+ > .doc::before,
+ > .docGroup::before {
+ content: "und";
+ }
+ }
+
+ &[data-operation] {
+ > .doc:first-child::before,
+ > .docGroup:first-child::before {
+ content: '';
+ }
+ > .doc::before,
+ > .docGroup::before {
+ display: inline-block;
+ text-align: right;
+// width: 2.2em;
+ width: $left-padding;
+ color: $dark-green;
+ }
+ > .doc::before {
+ padding-right: 1.2em;
+ margin-right: .1em;
+ }
+ > .docGroup::before {
+ position: absolute;
+ }
+ }
+ }
+
+ .doc {
+ > span + span {
+ margin-left: 5pt;
+ }
+ > span.key,
+ > span.value {
+ font-weight: bold;
+ }
+ > .operators {
+ display: inline-block;
+ border-color: $dark-orange;
+ border-width: 2px 2px 2px 2px;
+ border-radius: 7px;
+
+ margin-left: 10px;
+ > span {
+ &.and {
+ border: {
+ radius: inherit;
+ top-right-radius: 0;
+ bottom-right-radius: 0;
+ }
+ &.delete {
+ border: {
+ top-left-radius: 0;
+ bottom-left-radius: 0;
+ }
+ }
+ }
+ }
+ }
+ > span.key {
+ position: relative;
+ > ul {
+ margin: 0;
+ margin-left: 3.3em;
+ }
+ }
+ }
+
+ .rewritten {
+ .rewrite {
+ margin-left: 4pt;
+ display: inline-block;
+ color: $dark-orange;
+ &::after {
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ content: "\f040"; // "\f14b";
+ text-decoration: underline;
+ }
+ span {
+ display: none;
+ }
+ }
+ }
+
+ .operators {
+ opacity: 0;
+ white-space: nowrap;
+ padding: 0;
+ font-size: 0;
+ line-height: 0;
+ color: $light-green;
+ border-color: $nearly-white;
+ text-align: center;
+ font-weight: bold;
+ border-style: solid;
+
+ > span {
+ cursor: pointer;
+ font-size: 9pt;
+ line-height: 1.3em;
+ padding: 0 4px;
+ display: inline-block;
+ &.and {
+ background-color: $nearly-white;
+ color: $light-green;
+ }
+ &.or {
+ background-color: $dark-orange;
+ color: $nearly-white;
+ }
+ &.delete {
+ background-color: red;
+ border-radius: inherit;
+ color: $nearly-white;
+ }
+ }
+ }
+
+ > .docGroup {
+ margin-left: 0;
+ }
+
+
+ .docGroup > .docGroup::before {
+ background-color: red;
+ margin-left: -1 * $left-padding; // -3.4em;
+ }
+
+ .doc, .docGroup {
+ &:hover > .operators {
+ opacity: 1;
+ }
+ }
+
+}
+
+
+/*
+.vc .docGroup[data-operation=and]::before,
+.vc .docGroup[data-operation=and] .operators {
+ background-color: white;
+}
+*/
+
+$dg-index : 30;
+
+.docGroup {
+ > .operators {
+ z-index: $dg-index;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 1;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 2;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 3;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 4;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 5;
+ }
+ .docGroup {
+ > .operators {
+ z-index: $dg-index + 6;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}