Improve styling
Change-Id: If7057ef37754f0daa462d20213e001106690fdbf
diff --git a/cmd/koralmapper/main.go b/cmd/koralmapper/main.go
index 3a2b318..732cc2b 100644
--- a/cmd/koralmapper/main.go
+++ b/cmd/koralmapper/main.go
@@ -380,26 +380,24 @@
data.MappingSections = []MappingSectionData{
{
- Title: "Request",
- Mode: "request",
- CheckboxClass: "request-cb",
- CheckboxName: "request",
- FieldsClass: "request-fields",
- ArrowClass: "request-dir-arrow",
- ArrowDirection: "atob",
- ArrowLabel: "\u2192",
- AnnotationLabel: "(query)",
+ Title: "Request",
+ Mode: "request",
+ CheckboxClass: "request-cb",
+ CheckboxName: "request",
+ FieldsClass: "request-fields",
+ ArrowClass: "request-dir-arrow",
+ ArrowDirection: "atob",
+ ArrowLabel: "\u2192",
},
{
- Title: "Response",
- Mode: "response",
- CheckboxClass: "response-cb",
- CheckboxName: "response",
- FieldsClass: "response-fields",
- ArrowClass: "response-dir-arrow",
- ArrowDirection: "btoa",
- ArrowLabel: "\u2190",
- AnnotationLabel: "(query)",
+ Title: "Response",
+ Mode: "response",
+ CheckboxClass: "response-cb",
+ CheckboxName: "response",
+ FieldsClass: "response-fields",
+ ArrowClass: "response-dir-arrow",
+ ArrowDirection: "btoa",
+ ArrowLabel: "\u2190",
},
}
diff --git a/cmd/koralmapper/main_test.go b/cmd/koralmapper/main_test.go
index c9b1be4..b4dfc02 100644
--- a/cmd/koralmapper/main_test.go
+++ b/cmd/koralmapper/main_test.go
@@ -1944,7 +1944,7 @@
assert.Contains(t, htmlContent, "<legend>Response</legend>")
// Annotation mapping entries
- assert.Contains(t, htmlContent, "(query)")
+ assert.Contains(t, htmlContent, "query")
assert.Contains(t, htmlContent, "anno-mapper")
assert.Contains(t, htmlContent, `data-id="anno-mapper"`)
assert.Contains(t, htmlContent, `data-type="annotation"`)
@@ -1953,7 +1953,7 @@
assert.Contains(t, htmlContent, "Annotation mapping")
// Corpus mapping entries
- assert.Contains(t, htmlContent, "(corpus)")
+ assert.Contains(t, htmlContent, "corpus")
assert.Contains(t, htmlContent, "<strong>corpus-mapper</strong>")
assert.Contains(t, htmlContent, `data-id="corpus-mapper"`)
assert.Contains(t, htmlContent, `data-type="corpus"`)
diff --git a/cmd/koralmapper/static/config.html b/cmd/koralmapper/static/config.html
index c258267..ef682f5 100644
--- a/cmd/koralmapper/static/config.html
+++ b/cmd/koralmapper/static/config.html
@@ -23,7 +23,7 @@
data-default-foundry-b="{{.FoundryB}}" data-default-layer-b="{{.LayerB}}">
<div class="mapping-row">
<input type="checkbox" id="check-{{.ID}}-{{$section.Mode}}" class="checkbox {{$section.CheckboxClass}}" name="{{$section.CheckboxName}}">
- <label for="check-{{.ID}}-{{$section.Mode}}"><span></span>{{$section.AnnotationLabel}} <strong>{{.ID}}</strong></label>
+ <label for="check-{{.ID}}-{{$section.Mode}}"><span></span><span class="data-mode">query</span> <strong>{{.ID}}</strong></label>
<div class="mapping-fields {{$section.FieldsClass}}">
<input type="text" class="{{$section.Mode}}-foundryA" value="{{.FoundryA}}" placeholder="{{.FoundryA}}" size="8">/<input type="text" class="{{$section.Mode}}-layerA" value="{{.LayerA}}" placeholder="{{.LayerA}}" size="4">
<button type="button" class="{{$section.ArrowClass}}" data-dir="{{$section.ArrowDirection}}">{{$section.ArrowLabel}}</button>
@@ -37,7 +37,7 @@
data-default-field-a="{{.FieldA}}" data-default-field-b="{{.FieldB}}">
<div class="mapping-row">
<input type="checkbox" id="check-{{.ID}}-{{$section.Mode}}" class="checkbox {{$section.CheckboxClass}}" name="{{$section.CheckboxName}}">
- <label for="check-{{.ID}}-{{$section.Mode}}"><span></span>(corpus) <strong>{{.ID}}</strong></label>
+ <label for="check-{{.ID}}-{{$section.Mode}}"><span></span><span class="data-mode">corpus</span> <strong>{{.ID}}</strong></label>
<div class="mapping-fields {{$section.FieldsClass}}">
<input type="text" class="{{$section.Mode}}-fieldA" value="{{.FieldA}}" placeholder="{{.FieldA}}" size="10">
<button type="button" class="{{$section.ArrowClass}}" data-dir="{{$section.ArrowDirection}}">{{$section.ArrowLabel}}</button>
@@ -51,20 +51,19 @@
{{end}}
<section>
- <h2>Available Mappings</h2>
<dl>
{{range .AnnotationMappings}}
- <dt>{{.ID}}</dt>
+ <dt>{{.ID}}:</dt>
{{if .Description}}<dd>{{.Description}}</dd>{{end}}
{{end}}
{{range .CorpusMappings}}
- <dt>{{.ID}}</dt>
+ <dt>{{.ID}}:</dt>
{{if .Description}}<dd>{{.Description}}</dd>{{end}}
{{end}}
</dl>
</section>
- <section class="mapping-section">
+ <section class="mapping-section" id="pipe-info">
<fieldset style="font-size: 0.8em;">
<label class="cfg-line-label" for="request-cfg-preview">Request:</label>
<input type="text" id="request-cfg-preview" class="cfg-preview request-cfg-preview" readonly value="">
diff --git a/cmd/koralmapper/static/config.js b/cmd/koralmapper/static/config.js
index 9dff479..a98aa61 100644
--- a/cmd/koralmapper/static/config.js
+++ b/cmd/koralmapper/static/config.js
@@ -212,11 +212,8 @@
var id = div.dataset.id;
var dir = "atob";
-
- if (div.dataset.type !== "corpus") {
- var arrow = div.querySelector(classes.dirArrow);
- dir = arrow ? arrow.dataset.dir : "atob";
- }
+ var arrow = div.querySelector(classes.dirArrow);
+ dir = arrow ? arrow.dataset.dir : "atob";
if (div.dataset.type !== "corpus") {
var fA = cfgFieldValue(div, classes.foundryA, "defaultFoundryA");
diff --git a/cmd/koralmapper/static/style.css b/cmd/koralmapper/static/style.css
index 6680a1c..4fd7230 100644
--- a/cmd/koralmapper/static/style.css
+++ b/cmd/koralmapper/static/style.css
@@ -1,11 +1,41 @@
-.mapping-row {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- margin: 0.35rem 0;
- background-color: var(--color-bg-secondary);
+dt {
+ margin-top:.7rem
}
-.mapping-fields { display: inline-flex; align-items: center; gap: 0.35rem; }
+
+.mapping-row {
+ display: grid;
+ grid-template-columns: 13em auto;
+ gap: 0.75rem;
+ background-color: var(--color-bg-secondary);
+
+}
+
+.mapping-row .mapping-fields {
+ display: flex;
+ max-width:22em;
+ justify-content: center;
+ margin:.2em 0;
+}
+
+.data-mode {
+ display: inline-block;
+ font-size:70%;
+ width: 6em;
+ text-align: center;
+ border: 1px solid grey;
+ background-color: #ffcc55;
+ border-radius: 5px;
+}
+
+.mapping-fields > * {
+ margin: 0 .2em;
+ vertical-align:middle;
+}
+
+#pipe-info {
+ display: none;
+}
+
.mapping-fields input[type="text"] { font-family: monospace; }
.request-fields, .response-fields { flex-wrap: wrap; }
.request-dir-arrow, .response-dir-arrow { cursor: pointer; border: 1px solid #bbb; background: #f8f8f8; border-radius: 0.25rem; min-width: 2rem; }