Add grunt and coherent styles
diff --git a/public/Gruntfile.js b/public/Gruntfile.js
new file mode 100644
index 0000000..f625e2d
--- /dev/null
+++ b/public/Gruntfile.js
@@ -0,0 +1,87 @@
+/**
+ */
+/*
+ * http://gruntjs.com/getting-started
+ *
+ * TODO: Use https://www.npmjs.com/package/grunt-contrib-compress
+ * for assets.
+ * http://yui.github.io/yuidoc/
+ * use it with https://www.npmjs.com/package/grunt-contrib-yuidoc
+ *
+ * RequireJS
+ * http://addyosmani.com/writing-modular-js/
+ * http://qnundrum.com/question/393866
+ */
+
+module.exports = function(grunt) {
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('package.json'),
+ concat: {
+ dist: {
+ src : [
+ 'js/lib/dagre/dagre.min.js',
+ 'js/src/menu.js',
+ 'js/src/matchInfo.js',
+ 'js/src/hint.js',
+ 'js/src/vc.js'
+ ],
+ dest: 'js/build/kalamar.js'
+ }
+ },
+ uglify : {
+ build : {
+ src: 'js/build/kalamar.js',
+ dest: 'js/build/kalamar.min.js'
+ }
+ },
+ imagemin: {
+ dynamic: {
+ files: [{
+ expand: true,
+ cwd: 'img/',
+ src: ['**/*.{png,gif,jpg,svg}'],
+ dest: 'img/build/'
+ }]
+ }
+ },
+ sass: {
+ dist: {
+ options: {
+ style: 'compressed'
+ },
+ files: {
+ 'css/build/kalamar.css': 'scss/kalamar.scss'
+ }
+ }
+ },
+ watch: {
+/*
+ options: {
+ livereload: true
+ },
+ scripts: {
+ files: ['js/*.js'],
+ tasks: ['concat', 'uglify'],
+ options: {
+ spawn: false
+ },
+ },
+*/
+ css: {
+ files: ['scss/{colors,base,matchinfo,menu,pagination,kalamar}.scss'],
+ tasks: ['sass'],
+ options: {
+ spawn: false
+ }
+ }
+ }
+ });
+
+ grunt.loadNpmTasks('grunt-contrib-concat');
+ grunt.loadNpmTasks('grunt-contrib-uglify');
+ grunt.loadNpmTasks('grunt-contrib-imagemin');
+ grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.loadNpmTasks('grunt-contrib-sass');
+ grunt.registerTask('css', ['sass']);
+ grunt.registerTask('default', ['concat', 'uglify', 'imagemin', 'sass']);
+};
diff --git a/public/css/menu.css b/public/css/menu.css
index 1ab5162..0417fd1 100644
--- a/public/css/menu.css
+++ b/public/css/menu.css
@@ -1,29 +1,5 @@
/* List view */
-ul.menu {
- position: absolute;
- text-indent: 0;
- list-style-type: none;
- list-style-position: outside;
- padding-left: 0;
- padding-bottom: 3px;
- background-color: #ddd; /* $pagination-bg */
-}
-
-ul.menu,
-ul.menu > span.pref:not(:empty) {
- text-shadow: none;
-/*
- background-color: #7ba400;
-*/
- font-weight: normal;
- border: 2px solid #688704; /* $middle-green */
- box-shadow: 2px 2px 2px rgba(0,0,0,0.2); /* $pagination-box-shadow */
- z-index: 16;
- border-bottom-right-radius: 6px;
- border-bottom-left-radius: 6px;
-}
-
/*
.hint {
max-width: 23em;
@@ -34,54 +10,6 @@
}
*/
-ul.menu > li,
-ul.menu > span.pref:not(:empty) {
- cursor: pointer;
- padding: 3px 8pt;
- white-space: normal;
-}
-
-ul.menu > li,
-ul.menu > span.pref:not(.active) {
- background-color: #ddd; /* $pagination-bg */
- color: #7ba400; /* $light-green */
-}
-
-ul.menu > li:first-of-type {
- border-top: 3px solid transparent;
-}
-
-ul.menu > li:last-of-type {
- border-bottom: 3px solid transparent;
-}
-
-ul.menu > li:first-of-type:not(.no-more) {
- border-top-color: #ffa500; /* $dark-orange */
-}
-
-ul.menu > li:last-of-type:not(.no-more) {
- border-bottom-color: #ffa500; /* $dark-orange */
-}
-
-ul.menu > li mark {
- text-decoration: underline;
- background-color: transparent;
- color: inherit;
- font-weight: bold; /* #496000; */
-}
-
-ul.menu > span.pref:not(:empty) {
- position: absolute;
- min-width: 2px;
- border-bottom-right-radius: 10px;
- left: 0;
- bottom: 0;
- display: block;
- margin-bottom: -2.1em;
- padding: .1em .3em;
- margin-left: -2px;
- border-radius: 6px;
-}
/*
border: 2px solid white;
@@ -95,17 +23,6 @@
border-bottom: 5px solid transparent;
}
*/
-ul.menu > *.active {
- background-color: #7ba400; /* $light-green; */
- color: #496000; /* $dark-green; */
-}
-ul.menu > li:hover,
-ul.menu > span.pref:hover {
-/*
- background-color: rgba(255,255,255,.25);
- color: #496000;
-*/
- background-color: #ffa500; /* $dark-orange; */
- color: white;
-}
+
+
diff --git a/public/js/demo/matchInfo.html b/public/js/demo/matchInfo.html
index 11ba7eb..c79642b 100644
--- a/public/js/demo/matchInfo.html
+++ b/public/js/demo/matchInfo.html
@@ -7,8 +7,7 @@
<script src="../src/menu.js"></script>
<script src="../src/matchInfo.js"></script>
<link type="text/css" rel="stylesheet" href="../../css/font-awesome.min.css"></link>
- <link type="text/css" rel="stylesheet" href="../../css/matchinfo.css"></link>
- <link type="text/css" rel="stylesheet" href="../../css/menu.css"></link>
+ <link type="text/css" rel="stylesheet" href="../../css/build/kalamar.css"></link>
<style type="text/css" rel="stylesheet">
body {
@@ -161,8 +160,12 @@
}
};
-var e = KorAP.MatchInfo.create(match, available).element();
-document.getElementsByTagName('body')[0].appendChild(e);
+var e = KorAP.MatchInfo.create(match, available);
+
+document.getElementsByTagName('body')[0].appendChild(e.element());
+
+
+e.addTree('cnx', 'c');
/*
var t = KorAP.MatchInfo.create(match, available).getTable();
diff --git a/public/package.json b/public/package.json
new file mode 100755
index 0000000..a632a94
--- /dev/null
+++ b/public/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "kalamar-static",
+ "version": "0.1.0",
+ "devDependencies": {
+ "grunt": "~0.4.1",
+ "grunt-contrib-concat": "^0.5.1",
+ "grunt-contrib-imagemin": "^0.9.4",
+ "grunt-contrib-sass": "^0.9.2",
+ "grunt-contrib-uglify": "^0.8.0",
+ "grunt-contrib-watch": "^0.6.1"
+ }
+}
diff --git a/public/scss/base.scss b/public/scss/base.scss
new file mode 100644
index 0000000..8337b78
--- /dev/null
+++ b/public/scss/base.scss
@@ -0,0 +1,8 @@
+@charset "utf-8";
+@import "colors";
+
+body, html, select {
+ color: $dark-grey;
+ font-family: verdana, tahoma, arial;
+ margin: 0;
+}
diff --git a/public/scss/colors.scss b/public/scss/colors.scss
new file mode 100644
index 0000000..40082e1
--- /dev/null
+++ b/public/scss/colors.scss
@@ -0,0 +1,61 @@
+/*
+ * Orange
+ */
+// $light-orange-2: #f4eebb;
+$light-orange: #ffe56a;
+// #ffd080;
+$dark-orange: #ffa500;
+$darker-orange: #ff8000;
+$darkest-orange: darken($dark-orange, 20%);
+
+// Yellow: #fff48d
+
+/*
+ * Blue
+ */
+$light-blue: #cfe6f4;
+$dark-blue: #73b2f4;
+$darkest-blue: darken($dark-blue, 40%);
+
+/*
+ * Green
+ */
+$dark-green: #496000;
+$middle-green: #688704;
+$light-green: #7ba400;
+
+/*
+ * Grey
+ */
+$light-grey: #ddd;
+$middle-grey: #999;
+$dark-grey: #333;
+// $nearly-white: #f5f5f5;
+$nearly-white: #fff;
+
+$light-shadow: 3px 3px 3px rgba(0,0,0,0.3);
+
+/**
+ * KWIC colors
+ */
+$kwic-border: $middle-grey;
+$kwic-line-noneven: $nearly-white;
+$kwic-line-even: $light-grey;
+$kwic-match-color: $dark-grey;
+$kwic-match-shadow: $light-shadow;
+
+$kwic-highlight-1: #c1002b;
+$kwic-highlight-2: $dark-blue; // #009ee0;
+$kwic-highlight-3: $dark-orange; // #f29400;
+$kwic-highlight-4: $light-green;
+
+$pagination-bg: $light-grey;
+$pagination-border: $middle-grey;
+$pagination-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+
+$standard-border-radius: 6px;
+
+@mixin standard-text-padding {
+ padding-left: .4em;
+ padding-right: .4em;
+}
\ No newline at end of file
diff --git a/public/scss/kalamar.scss b/public/scss/kalamar.scss
new file mode 100644
index 0000000..7526d92
--- /dev/null
+++ b/public/scss/kalamar.scss
@@ -0,0 +1,8 @@
+@charset "utf-8";
+
+@import "colors"; // Color varia
+
+@import "base"; // Base values
+@import "menu"; // Menu list
+@import "matchinfo"; // Match table and tree
+@import "pagination"; // Pagination
diff --git a/public/scss/matchinfo.scss b/public/scss/matchinfo.scss
new file mode 100644
index 0000000..0ddea47
--- /dev/null
+++ b/public/scss/matchinfo.scss
@@ -0,0 +1,221 @@
+@charset "utf-8";
+@import "colors";
+
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
+/**
+ * Table view
+ *
+ * The table view is complicated, as the
+ * first column has to be static.
+ */
+@mixin matchinfo-head {
+ border-width: 0px;
+ border-top: $border-size solid #ff8000;
+ width: $left-width / 2;
+}
+
+div.matchinfo {
+ position: relative;
+ width: 100%;
+ height: auto;
+ font-size: 10pt;
+ > p {
+ position: relative;
+ background-color: $darker-orange;
+ box-sizing: border-box;
+ color: $nearly-white;
+ font-size: inherit;
+ margin: $border-size 0 0 0 !important;
+ font-weight: bold;
+ width: $left-width;
+ text-align: left !important;
+ cursor: pointer;
+ padding-left: $border-size * 2 !important;
+ *.menu {
+ border-top-right-radius: 8px;
+ position: absolute;
+ top: 0;
+ left: $left-distance;
+ margin-top: 0;
+ > li:first-of-type {
+ border-top-right-radius: 5px;
+ }
+ }
+ &:before {
+ content: '+ '; // FontAwesome
+ }
+ }
+}
+
+div.matchtable {
+ z-index: 20;
+ margin-left: $left-distance - ($border-size / 2);
+ padding: 0;
+ overflow-x: auto;
+ overflow-y: visible;
+ width: auto;
+ table {
+ display: table;
+ border-collapse: separate;
+ border-spacing: 0px;
+ }
+ th {
+ color: $nearly-white;
+ }
+ thead {
+ tr th {
+ background-color: $darker-orange;
+ border-top-width: 0px !important;
+ }
+ }
+ tbody {
+ th {
+ text-overflow: ellipsis;
+ }
+ > tr:nth-of-type(1) > th {
+ border-top-color: transparent;
+ }
+ /**
+ * Click on a row and it's highlighted.
+ */
+ > tr:focus {
+ outline: none;
+ /*
+ outline: (2 * $border-size) solid $light-green;
+ -moz-outline-radius: $border-size;
+ outline-radius: $border-size;
+ */
+ background-color: $light-green;
+ border-color: $light-green;
+ td {
+ background-color: inherit;
+ color: $nearly-white;
+ border-color: $light-green;
+ }
+ }
+ }
+ tr {
+ /**
+ * The first two columns.
+ */
+ > th:nth-of-type(1),
+ > th:nth-of-type(2) {
+ position: absolute;
+ z-index: 80;
+ vertical-align: middle;
+ left: 0px;
+ @include matchinfo-head;
+ }
+ > th:nth-of-type(2) {
+ left: ($left-width / 2) + $border-size;
+ }
+ > * {
+ box-sizing: border-box;
+ padding: 1px 6px;
+ margin: 0px;
+ border: ($border-size / 2) solid $dark-orange;
+ }
+ }
+ tr > td {
+ background-color: $nearly-white;
+ white-space: nowrap;
+ vertical-align: top;
+ text-align: center;
+ }
+ tr:nth-child(even) > td {
+ background-color: $light-orange;
+ }
+}
+
+/**
+ * Tree view
+ */
+div.matchtree {
+ position: relative;
+ overflow-x: hidden;
+ overflow-y: visible;
+ padding: 0;
+ margin-top: 1pt;
+
+ /**
+ * Label
+ */
+ h6 {
+ display: inline;
+ font-size: inherit;
+ color: $nearly-white;
+ text-align: center;
+ margin: 0;
+ padding: 0 !important;
+ float: left;
+ > span {
+ @include matchinfo-head;
+ display: inline-block;
+ margin: 0;
+ &:nth-of-type(2) {
+ margin-left: $border-size;
+ }
+ }
+ }
+ > div {
+ overflow-x: auto;
+ margin: $border-size;
+ box-sizing: border-box;
+ margin-left: $left-distance;
+ background-color: $nearly-white; // $light-orange;
+ > em {
+ background-color: $dark-orange;
+ display: block;
+ width: 1.5em;
+ height: 1.5em;
+ line-height: 1.2em;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ border-radius: 5px;
+ border: $border-size solid $darker-orange;
+ cursor: pointer;
+ text-align: center;
+ color: $nearly-white;
+ font-weight: bold;
+ font-style: normal;
+ &:after {
+ // FontAwesome
+ content: 'x';
+ }
+ }
+ }
+}
+
+/**
+ * SVG tree
+ */
+
+path.edge {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: none;
+}
+
+g.middle > rect {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: $light-orange; // $nearly-white;
+}
+
+g.leaf > rect {
+ display: none;
+}
+
+g > text {
+ text-anchor: middle;
+ font-size: 9pt;
+}
+
+g.leaf > text {
+ font-size: 10pt;
+ overflow: visible;
+}
diff --git a/public/scss/menu.scss b/public/scss/menu.scss
new file mode 100644
index 0000000..43fab57
--- /dev/null
+++ b/public/scss/menu.scss
@@ -0,0 +1,97 @@
+@charset "utf-8";
+@import "colors";
+
+
+/**
+ * Menu list - used nearly everywhere
+ */
+ul.menu {
+ position: absolute;
+ margin: 0;
+ text-indent: 0;
+ list-style-type: none;
+ list-style-position: outside;
+ padding-left: 0;
+ padding-bottom: 3px;
+ background-color: $pagination-bg;
+}
+
+ul.menu,
+ul.menu > span.pref:not(:empty) {
+ box-sizing: border-box;
+ text-shadow: none;
+ font-weight: normal;
+ // Pagination border?
+ border: 2px solid $middle-green;
+ box-shadow: $pagination-box-shadow;
+ z-index: 16;
+ border-radius: $standard-border-radius;
+}
+
+ul.menu > li,
+ul.menu > span.pref:not(:empty) {
+ cursor: pointer;
+ padding: 3px 10px;
+ white-space: normal;
+}
+
+ul.menu > li,
+ul.menu > span.pref:not(.active) {
+ background-color: $pagination-bg;
+ color: $light-green
+}
+
+/**
+ * List items
+ */
+ul.menu {
+ > li {
+ &:first-of-type {
+ border-top: 3px solid transparent;
+ &:not(.no-more) {
+ border-top-color: $dark-orange;
+ }
+ }
+ &:last-of-type {
+ border-bottom: 3px solid transparent;
+ &:not(.no-more) {
+ border-bottom-color: $dark-orange;
+ }
+ }
+ mark {
+ text-decoration: underline;
+ background-color: transparent;
+ color: inherit;
+ font-weight: bold;
+ }
+ }
+ > *.active {
+ background-color: $light-green;
+ color: $dark-green;
+ }
+ > li:hover,
+ > span.pref:hover {
+ background-color: $dark-orange;
+ color: $nearly-white;
+ }
+}
+
+
+/**
+ * Default prefix view
+ */
+ul.menu > span.pref:not(:empty) {
+ position: absolute;
+ min-width: 5px;
+/*
+ border-bottom-right-radius: 10px;
+*/
+ font-size: 80%;
+ left: 0;
+ bottom: 0;
+ display: block;
+ margin-bottom: -2.1em;
+ padding: 2px 6px;
+ margin-left: -2px;
+ border-radius: $standard-border-radius;
+}
diff --git a/public/scss/pagination.scss b/public/scss/pagination.scss
new file mode 100644
index 0000000..c0cfdd1
--- /dev/null
+++ b/public/scss/pagination.scss
@@ -0,0 +1,85 @@
+@charset "utf-8";
+@import "colors";
+
+/**
+ * The pagination view
+ */
+/*
+<div id="pagination">
+ <a rel="prev"><span><i class="fa fa-caret-left"></i></span></a>
+ <a rel="self"><span>1</span></a>
+ <a href="/?ql=poliqarp&q=test&action=ok&p=2"><span>2</span></a>
+ <a href="/?ql=poliqarp&q=test&action=ok&p=3"><span>3</span></a>
+ <span><i class="fa fa-ellipsis-h"></i></span>
+ <a href="/?ql=poliqarp&q=test&action=ok&p=67"><span>67</span></a>
+ <a rel="next" href="/?ql=poliqarp&q=test&action=ok&p=2"><span><i class="fa fa-caret-right"></i></span></a>
+</div>
+*/
+#pagination {
+ /**
+ * Always in fixed position.
+ * This may need to be overwritten in case multiple
+ * paginations have to be activated.
+ */
+ position: fixed;
+ right: 20px;
+
+ bottom: 10px;
+ z-index: 400;
+
+ span {
+ display: inline-block;
+ background-color: $pagination-bg;
+ height: 1.5em;
+ line-height: 1.5em;
+ @include standard-text-padding;
+ text-align: center;
+ border: {
+ top-width: 2px;
+ top-style: solid;
+ bottom-width: 2px;
+ bottom-style: solid;
+ color: $pagination-border;
+ }
+ box-shadow: $pagination-box-shadow;
+ }
+ a {
+ text-shadow: $light-shadow;
+ &[rel=self] span {
+ border: {
+ color: $dark-orange;
+ left-style: solid;
+ right-style: solid;
+ left-width: 2px;
+ right-width: 2px;
+ }
+ background-color: $light-orange;
+ color: $darkest-orange;
+ }
+ &[rel=next] span {
+ border: {
+ right-width: 2px;
+ right-style: solid;
+ top-right-radius: 12px;
+ bottom-right-radius: 12px;
+ }
+ }
+ &[rel=prev] span {
+ border: {
+ left-width: 2px;
+ left-style: solid;
+ top-left-radius: 12px;
+ bottom-left-radius: 12px;
+ }
+ }
+ &[href] {
+ color: $light-green;
+ span:hover {
+ background-color: $light-green;
+ border-color: $dark-green;
+ color: $dark-green;
+ text-shadow: none;
+ }
+ }
+ }
+}