w2v-server: introduce header with pagetitle, search bar and options
diff --git a/templates/index.html.ep b/templates/index.html.ep
index 59f2e91..bfb8f02 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -179,6 +179,9 @@
text-transform: uppercase;
text-shadow: none;
word-wrap: break-word;
+ showoptions, #SEARCH {
+ margin-left: 10px;
+ margin-right: 10px;
}
.tabs-left-vertical .ui-tabs-nav {
@@ -255,12 +258,19 @@
overflow: hidden; /* will contain if #first is longer than #second */
}
- #options {
- float: right;
- margin: 20px;
- max-width: 280px;
- overflow: hidden; /* if you don't want #second to wrap below #first */
- }
+ #header {
+ width: 100%;
+ // border: 1px solid red;
+ overflow: hidden; /* will contain if #first is longer than #second */
+ }
+
+ #pagetitle {
+ max-width: 460px;
+ margin-right: 20px;
+ float: left;
+ overflow: hidden; /* if you don't want #second to wrap below #first */
+ // border: 1px solid green;
+ }
#first {
margin-right: 20px;
@@ -273,6 +283,17 @@
overflow: hidden; /* if you don't want #second to wrap below #first */
}
+ #options {
+ float: left;
+ width: 800px;
+ margin: 10px;
+ overflow: hidden; /* if you don't want #second to wrap below #first */
+ }
+
+ #word {
+ width: 50%;
+ }
+
.tabs-min {
background: transparent;
@@ -554,11 +575,14 @@
</script>
</head>
<body onload="onload()">
- <div id="topwrapper">
+ <div id="header">
+ <div id="pagetitle">
+ <h1>DeReKo-Vectors</h1>
+ </div>
<div id="options" class="widget">
<form id="queryform">
- <input id="word" type="text" name="word" size="20" placeholder="Word(s) to be searched" value="<%= $word %>"
- title="When looking for multiple words use spaces as separators to search around the average vector and | as separator to get the neighbours for each word."/>
+ <input id="word" type="text" name="word" placeholder="Word(s) to be searched" value="<%= $word %>"
+ title="When looking for multiple words use spaces as separators to search around the average vector and | as separator to get the neighbours for each word."/>
<input id="SEARCH" type="button" value="SEARCH">
<input type="button" id="showoptions" name="showoptions" value="Options" />
</form>
@@ -592,6 +616,8 @@
</form>
</div>
</div>
+ </div>
+ <div id="topwrapper">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Semantics (TSNE-map)</a></li>