Added tutorial and session mechanism
diff --git a/public/scss/header.scss b/public/scss/header.scss
index 522be5e..f3f995a 100644
--- a/public/scss/header.scss
+++ b/public/scss/header.scss
@@ -4,6 +4,7 @@
header {
position: relative;
background-color: $light-green;
+// background-color: $ids-grey-1;
@include box-sizing-box();
padding: 8px;
padding-bottom: 0;
@@ -19,9 +20,8 @@
padding: 0;
outline: none;
}
- span.select, span.location {
+ span.select, #vc-choose { /* Formally vc.location */
cursor: pointer;
- font-weight: bold;
line-height: 1.8em;
border: {
width: 0;
@@ -35,16 +35,20 @@
border-color: $dark-green;
}
&::after {
- content: "\f0dd";
pointer-events: none;
font-family: FontAwesome;
text-align: center;
background-color: $light-green;
}
}
+ span.select::after {
+ content: "\f0dd";
+ }
+
form {
+ padding-left: $logo-left-distance;
+ min-height: 2.7em;
display: block;
- padding-left: 230px;
margin: 0px;
position: relative;
}
diff --git a/public/scss/kalamar.scss b/public/scss/kalamar.scss
index 1ffb671..582fe9b 100644
--- a/public/scss/kalamar.scss
+++ b/public/scss/kalamar.scss
@@ -13,4 +13,9 @@
@import "resultinfo"; // Information on results
@import "matchinfo"; // Match table and tree
@import "kwic"; // Kwic view information
-@import "vc"; // Kwic view information
+@import "vc"; // Virtual collection builder
+@import "tutorial"; // Embedded and non-embedded tutorial
+@import "query"; // View query
+@import "sidebar"; // Navigation on the left side
+
+@import "media"; // Media queries
diff --git a/public/scss/kwic.scss b/public/scss/kwic.scss
index e768e5a..c55c00a 100644
--- a/public/scss/kwic.scss
+++ b/public/scss/kwic.scss
@@ -106,56 +106,12 @@
> li {
ul.action {
display: none;
- > li {
- cursor: pointer;
- color: white;
- text-decoration: none;
- }
}
-
/* active actions */
&.active, &:target {
ul.action {
- background-color: $dark-orange;
- font-size: 12pt;
- color: white;
- text: {
- shadow: none;
- indent: 0;
- }
- margin: 0;
- padding: 0;
- z-index: 5;
-
display: block;
- list-style: {
- type: none;
- position: inline;
- }
- &.right {
- position: absolute;
- width: $right-match-distance;
- float: right;
- text-align: center;
- padding: 0pt 3pt;
- height: 100%;
- right: 0;
- top: 0;
- li {
- > span {
- @include blind;
- }
- &.close::after {
- font-family: "FontAwesome";
- content: "\f00d";
- }
- &.info::after {
- font-family: "FontAwesome";
- content: "\f05a";
- }
- }
- }
}
}
&:not(.active):not(:target) p.ref {
@@ -176,6 +132,51 @@
}
}
+ul.action {
+ background-color: $dark-orange;
+ font-size: 12pt;
+ color: white;
+ text: {
+ shadow: none;
+ indent: 0;
+ }
+ margin: 0;
+ padding: 0;
+ z-index: 5;
+
+ list-style: {
+ type: none;
+ position: inline;
+ }
+ &.right {
+ position: absolute;
+ width: $right-match-distance;
+ float: right;
+ text-align: center;
+ padding: 0pt 3pt;
+ height: 100%;
+ right: 0;
+ top: 0;
+ li {
+ cursor: pointer;
+ color: white;
+ text-decoration: none;
+
+ > span {
+ @include blind;
+ }
+ &.close::after {
+ font-family: "FontAwesome";
+ content: "\f00d";
+ }
+ &.info::after {
+ font-family: "FontAwesome";
+ content: "\f05a";
+ }
+ }
+ }
+}
+
/*
ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.left {
display: inline-block;
@@ -217,6 +218,11 @@
/**
* Highlights
*/
+mark {
+ background-color: inherit;
+ color: inherit;
+}
+
mark > mark,
em,
.level-0 {
diff --git a/public/scss/logos.scss b/public/scss/logos.scss
index 0141bf6..715bf71 100644
--- a/public/scss/logos.scss
+++ b/public/scss/logos.scss
@@ -85,13 +85,13 @@
*/
h1 {
position: absolute;
- margin-left:15px;
margin: 0;
+ margin-left:15px;
left: 0;
top: 0;
width: 7.8em;
height: 2.4em;
- z-index: 999;
+ z-index: 7200;
background: {
size: 72%;
image: url('#{$img-path}/korap-logo-kalamar.svg');
diff --git a/public/scss/matchinfo.scss b/public/scss/matchinfo.scss
index d26c6e5..4341f23 100644
--- a/public/scss/matchinfo.scss
+++ b/public/scss/matchinfo.scss
@@ -208,14 +208,19 @@
/**
* SVG tree
*/
-
path.edge {
stroke: $darker-orange;
stroke-width: 2px;
fill: none;
}
-g.middle > rect {
+g.root rect.empty {
+ stroke: $darker-orange;
+ fill: $darker-orange;
+ stroke-width: 2px;
+}
+
+g.middle rect {
stroke: $darker-orange;
stroke-width: 2px;
fill: $middle-orange;
diff --git a/public/scss/media.scss b/public/scss/media.scss
new file mode 100644
index 0000000..cef3fed
--- /dev/null
+++ b/public/scss/media.scss
@@ -0,0 +1,118 @@
+@charset "utf-8";
+@import "util";
+
+$standard-margin: 4px;
+
+@media (orientation: portrait), (max-width: 42.5em) {
+ body, #search ol, header, header input {
+ font-size: 9pt;
+ }
+ header form {
+ padding-left: 0px;
+ padding-top: 33px;
+ }
+ .vc {
+ font-size: 9pt;
+ }
+ h1 {
+ margin-left: 10px;
+ width: 130px;
+ height: 40px;
+ background-size: 100%;
+ background-position: 50% 0;
+ z-index: 300;
+ }
+
+ #searchbar {
+ padding-right: 30px;
+ input {
+ font-size: 9pt;
+ }
+ button[type=submit] {
+ right: 0;
+ }
+ }
+
+ .level-1 {
+ padding-bottom: 2px;
+ }
+
+ .level-2 {
+ padding-bottom: 4px;
+ }
+
+ main {
+ margin-left: $standard-margin;
+ margin-right: $standard-margin;
+ }
+
+ #search ol {
+ > li:target, > li.active {
+ > div > div.snippet {
+ margin: 2px 2em 2px 4px;
+ }
+ }
+ > li:not(:target):not(.active) {
+ padding: 3pt 0 3pt 0;
+ }
+ }
+
+ div.matchinfo {
+ font-size: 9pt;
+ }
+
+ div.matchtable tr > * {
+ padding: 1pt 3pt;
+ }
+
+ div.matchtree {
+ h6 {
+ display: block;
+ float: none;
+ }
+ > div {
+ margin-left: 2px;
+ }
+ }
+
+ div.resultinfo p.found,
+ #pagination > a {
+ font-size: 9pt;
+ }
+
+ #logos {
+ margin-left: 0;
+ margin-right: 0;
+
+ > div {
+ border-top-width: 14px;
+ }
+ }
+
+/*
+
+ #sidebar {
+ padding-top: 22px;
+ }
+ #tutorial {
+ border-radius: 0;
+ border-width: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ top: 0;
+ padding: 0;
+ }
+ #tutorial iframe {
+ border-radius: 0;
+ }
+ #sidebar:not(.active) > i.fa-bars {
+ font-size: 12pt;
+ width: 10pt;
+ height: 11pt;
+ }
+ pre.query {
+ font-size: 9.5pt;
+ }
+*/
+}
\ No newline at end of file
diff --git a/public/scss/menu.scss b/public/scss/menu.scss
index e8b9f41..2c3f24d 100644
--- a/public/scss/menu.scss
+++ b/public/scss/menu.scss
@@ -56,13 +56,6 @@
left-radius: $standard-border-radius;
right-radius: $standard-border-radius;
}
- &:not(.no-more):before {
- position: absolute;
- font-family: "FontAwesome";
- content: '\f0de';
- right: .5em;
- top: .4em;
- }
}
&:last-of-type {
border-bottom: {
@@ -70,14 +63,6 @@
left-radius: $standard-border-radius;
right-radius: $standard-border-radius;
}
-
- &:not(.no-more):before {
- position: absolute;
- font-family: "FontAwesome";
- content: '\f0dd';
- right: .5em;
- bottom: .4em;
- }
}
mark {
text-decoration: underline;
@@ -114,4 +99,42 @@
}
}
+/**
+ * Rolling menu
+ */
+ul.menu.roll {
+ > li:first-of-type {
+ &:not(.no-more):before {
+ position: absolute;
+ font-family: "FontAwesome";
+ content: '\f0de';
+ right: .5em;
+ top: .4em;
+ }
+ }
+ > li:last-of-type {
+ &:not(.no-more):before {
+ position: absolute;
+ font-family: "FontAwesome";
+ content: '\f0dd';
+ right: .5em;
+ bottom: .4em;
+ }
+ }
+}
+
+/**
+ * Sorting menu
+ */
+ul.menu.sort {
+ position: relative;
+ display: inline-block;
+ > li::before {
+ content: '';
+ }
+ > li.active:hover {
+ @include choose-remove;
+ }
+
+}
\ No newline at end of file
diff --git a/public/scss/query.scss b/public/scss/query.scss
new file mode 100644
index 0000000..4167059
--- /dev/null
+++ b/public/scss/query.scss
@@ -0,0 +1,24 @@
+@import "util";
+@charset "utf-8";
+
+
+pre.query {
+ overflow-x: hidden;
+ cursor: pointer;
+ padding: .5em;
+ @include choose-item;
+ position:relative;
+ border: {
+ width: 2px;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+ box-shadow: $choose-box-shadow;
+
+ &:hover {
+ @include choose-hover;
+ }
+ &:active {
+ @include choose-active;
+ }
+}
diff --git a/public/scss/searchbar.scss b/public/scss/searchbar.scss
index 2b54e01..098eacd 100644
--- a/public/scss/searchbar.scss
+++ b/public/scss/searchbar.scss
@@ -8,24 +8,21 @@
* Input field
*/
#q-field {
- @include box-sizing-box();
- outline: none;
- font-size: 11pt;
- border: $border-size solid $nearly-white;
- padding: 2px;
width: 100%;
margin: 0;
margin-bottom: 3px;
display: block;
}
-header > form {
- min-height: 2.7em;
+header input {
+ outline: none;
+ font-size: 11pt;
+ border: $border-size solid $nearly-white;
+ padding: 2px;
}
#searchbar {
position: relative;
- @include box-sizing-box();
width: 100%;
padding-right: 60px;
button[type=submit] {
@@ -99,7 +96,7 @@
border-color: $nearly-white;
}
*/
- &:after {
+ &::after {
font-family: "FontAwesome";
content: '\f096';
}
diff --git a/public/scss/sidebar.scss b/public/scss/sidebar.scss
new file mode 100644
index 0000000..3920ef5
--- /dev/null
+++ b/public/scss/sidebar.scss
@@ -0,0 +1,135 @@
+@charset "utf-8";
+@import "util";
+
+#sidebar {
+/*
+ box-shadow: 2px 2px 5px darken($dark-green, 15%);
+*/
+// box-shadow: $choose-box-shadow;
+ outline: none;
+ display: block;
+ background-color: $dark-green;
+ position: fixed;
+ z-index: 7100;
+ color: $nearly-white;
+ width: $logo-left-distance;
+ top: 0;
+ left: 0;
+ height: 100%;
+ padding-top: 80px;
+ transition: all .3s ease-in-out;
+
+ > * {
+ opacity: 1;
+ }
+ &::after {
+ display: block;
+ opacity: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ margin-right: -30px;
+ background-color: $dark-green;
+ content: '#';
+ font-size: 16pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
+ border-top-right-radius: $standard-border-radius;
+ }
+}
+
+#sidebar:not(:focus):not(.active) {
+ margin-left: -1 * ($logo-left-distance - 15px);
+// box-shadow: none;
+ &::after {
+ opacity: 1;
+ }
+ > * {
+ opacity: 0;
+ // TODO
+ transition: {
+ property: opacity;
+ duration: .3s;
+ }
+ }
+}
+
+/*
+#sidebar {
+ text-shadow: none;
+ height: 105%;
+ margin-top: -10px;
+ background-color: #496000;
+ left: 0;
+ top: 0;
+ &.active {
+ box-shadow: 2px 2px 5px darken($dark-green, 15%);
+ margin-left: 0px;
+ left: 0;
+ top: 0;
+ }
+ &:not(.active) > i.fa-bars {
+ opacity: 1;
+ cursor: pointer;
+ background-color: #496000;
+ position: fixed;
+ font-size: 16pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
+ bottom: 0;
+ left: 0;
+ border-top-right-radius: 5pt;
+ }
+ h2 {
+ font: {
+ size: 100%;
+ weight: bold;
+ }
+ text-align: center;
+ padding: 0;
+ margin: 0 0 5pt 0;
+ }
+ ul {
+ list-style-type: none;
+ margin: 0;
+ font-size: 10pt;
+ text-indent: 0;
+ padding: 0;
+ li {
+ padding: 4pt 10pt;
+ h3 {
+ font: {
+ weight: bold;
+ size: 100%;
+ }
+ padding: 0;
+ margin: 0;
+ }
+ &.active {
+ background-color: $light-green;
+// text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+ text-shadow: none;
+ h3 {
+ margin-bottom: 2pt;
+ padding-bottom: 2pt;
+ border-bottom: 1px solid black;
+ }
+ }
+ }
+ }
+ dl.info {
+ font-size: 9pt;
+ padding: 0 10pt;
+ > dt {
+ font-weight: bold;
+ float: left;
+ }
+ > dd {
+ text-align: right;
+ }
+ }
+}
+*/
\ No newline at end of file
diff --git a/public/scss/tutorial.scss b/public/scss/tutorial.scss
new file mode 100644
index 0000000..74937fc
--- /dev/null
+++ b/public/scss/tutorial.scss
@@ -0,0 +1,107 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 3px;
+
+body.embedded {
+ background-color: $nearly-white;
+}
+
+#tutorial {
+ position: fixed;
+ z-index: 9999;
+ top: 5%;
+ bottom: 5%;
+ left: 2%;
+ right: 2%;
+ padding-right: $right-match-distance;
+ background-color: $nearly-white;
+ ul.action {
+ display: block;
+ }
+ border: {
+ width: $border-size;
+ color: $dark-orange;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+ box-shadow: $choose-box-shadow;
+ iframe {
+ margin: 0;
+ width: 100%;
+ min-height: 100%;
+ border-width: 0;
+ background: {
+ image:url('#{$img-path}/korap-bg-kalamar.svg');
+ repeat: no-repeat;
+ position: center center;
+ size: 20%;
+ }
+ }
+}
+
+main.tutorial {
+ margin-left: $logo-left-distance + 15px;
+}
+
+/*
+#tutorial {
+ iframe {
+ width: 100%;
+ min-height: 100%;
+ border: {
+ width: 0;
+ radius: 10px;
+ }
+ background: {
+ image:url('#{$basepath}/img/korap-bg-kalamar.svg');
+ size: 10%;
+ repeat: no-repeat;
+ position: center center;
+ color: white;
+ }
+ }
+
+ display: block;
+ background-color: $dark-green;
+ border-radius: 15px;
+ &:not(.active) {
+ display: none;
+ }
+ &.active {
+ display: block;
+ }
+ > i,
+ > a > i {
+ font-size: 20pt;
+ color: $dark-green;
+ position: absolute;
+ background-color: rgba(255,255,255,0.5);
+ z-index: 100;
+ top: 10pt;
+ right: 20pt;
+ cursor: pointer;
+ }
+ > a > i {
+ right: 40pt;
+ }
+}
+
+div.test {
+ display: block;
+ border-left: 10px solid $dark-green;
+ margin: 1em;
+ padding-left: 5px;
+ p {
+ color: black;
+ &.fail {
+ font-weight: bold;
+ color: red;
+ }
+ &.pass {
+ font-weight: bold;
+ color: green;
+ }
+ }
+}
+*/
\ No newline at end of file
diff --git a/public/scss/util.scss b/public/scss/util.scss
index 7c3f056..d81b7f9 100644
--- a/public/scss/util.scss
+++ b/public/scss/util.scss
@@ -1,9 +1,23 @@
/**
+ * Official IDS colors
+ */
+$ids-orange-1: rgb(246, 168, 0);
+$ids-orange-2: rgb(242, 148, 0);
+$ids-grey-1: rgb(135, 136, 138);
+$ids-grey-2: rgb(217, 218, 219);
+$ids-blue-1: rgb( 0, 158, 224); // Pragmatik
+$ids-blue-2: rgb(188, 228, 247); // Pragmatik
+$ids-green-1: rgb( 99, 111, 7); // Grammatik
+$ids-green-2: rgb(227, 232, 163); // Grammatik
+$ids-pink-1: rgb(193, 0, 43); // Lexik
+$ids-pink-2: rgb(250, 243, 222); // Lexik
+
+/**
* Orange Colors
*/
$light-orange: #f4eebb; // #ffe56a;
$middle-orange: #ffd080;
-$dark-orange: #ffa500;
+$dark-orange: $ids-orange-1; // #ffa500;
$darker-orange: #ff8000;
$darkest-orange: darken($dark-orange, 20%);
// $light-orange-2: #f4eebb;, #ffd080;
@@ -12,9 +26,9 @@
/**
* Green Colors
*/
-$dark-green: #496000;
-$middle-green: #688704;
-$light-green: #7ba400;
+$dark-green: $ids-green-1; // #496000;
+$middle-green: lighten($ids-green-1, 5%); // $ids-green-1; // #688704;
+$light-green: lighten($ids-green-1, 10%); // #7ba400;
/**
* Blue Colors
@@ -27,12 +41,16 @@
/*
* Grey
*/
-$light-grey: #ddd;
+$light-grey: $ids-grey-2; // #ddd;
$dark-grey: #555;
$middle-grey: #999;
// $nearly-white: #f5f5f5;
$nearly-white: #fff;
+$middle-red: #c1002b;
+$light-red: lighten($middle-red, 40%);
+$dark-red: darken($middle-red, 40%);
+
$dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
$light-shadow: 1px 1px rgba(255,255,255,0.5);
@@ -47,7 +65,7 @@
$kwic-match-color: $dark-grey;
$kwic-match-shadow: $light-shadow;
-$kwic-highlight-1: #c1002b;
+$kwic-highlight-1: $middle-red;
$kwic-highlight-2: $dark-blue; // #009ee0;
$kwic-highlight-3: $dark-orange; // #f29400;
$kwic-highlight-4: $light-green;
@@ -57,7 +75,7 @@
$choose-border: 2px solid $choose-border-color;
$choose-color: $dark-grey;
$choose-blind-color: $middle-grey;
-$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
$standard-border-radius: 6px;
/**
@@ -71,6 +89,7 @@
*/
$standard-margin: 30px;
$right-match-distance: 20px;
+$logo-left-distance: 230px;
@mixin blind {
position: absolute;
@@ -98,6 +117,13 @@
border-color: $dark-green;
}
+@mixin choose-remove {
+ color: $nearly-white;
+ text-shadow: none;
+ background-color: $middle-red;
+ border-color: $dark-red;
+}
+
@mixin color-transition {
transition: color 0.3s ease 0s;
}
diff --git a/public/scss/vc.scss b/public/scss/vc.scss
index 4d759ef..1ed7959 100644
--- a/public/scss/vc.scss
+++ b/public/scss/vc.scss
@@ -2,11 +2,11 @@
@import "util";
$left-padding: 28pt; // 2.8em;
-$border-size: 4px;
+$border-size: 2px;
.vc {
background-color: $light-green;
-
+ margin-top: 10px;
.docGroup {
position: relative;
display: inline-block;
@@ -15,7 +15,7 @@
margin-left: $left-padding; // 2.8em
// .6em .5em
- border-width: 0 $border-size;
+ border-width: 0 (2 * $border-size);
padding: {
top: 10pt;
@@ -23,10 +23,7 @@
left: 0pt;
right: 6pt;
}
-/*
- background-color: yellow;
-*/
border: {
radius: $standard-border-radius * 2;
style: solid;