From 8e0d5afe4dd1d55238b71e69a5c6b53663c82047 Mon Sep 17 00:00:00 2001
From: Stephan Tittel <stephan.tittel@tu-darmstadt.de>
Date: Mon, 6 Nov 2023 07:56:22 +0100
Subject: [PATCH] small css fixes and doc update

---
 README.md                | 4 ++++
 demo/index.html          | 4 ++--
 package.json             | 2 +-
 src/styles.css           | 3 ++-
 src/themes/bootstrap.css | 1 +
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index a338662..5bede44 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,10 @@ Class hierarchies can be built using `rdfs:subClassOf` or `skos:broader`.
 
 ## Features
 
+### Validation
+
+In edit mode, `<shacl-form>` validates the constructed data graph using the library [rdf-validate-shacl](https://github.com/zazuko/rdf-validate-shacl) and displays validation results as icons next to the respective form fields.
+
 ### Data graph binding
 
 `<shacl-form>` requires only a shapes graph as input via the attribute `data-shapes` (or `data-shapes-url`) to generate an empty form and create new RDF data from the form input fields. Using the attributes `data-values` (or `data-values-url`) and `data-value-subject`, you can also bind an existing data graph to the form. The given data graph is then used to fill the form input fields.
diff --git a/demo/index.html b/demo/index.html
index 5508c24..6edbdff 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -32,7 +32,7 @@ <h1>&lt;shacl-form&gt; demo</h1>
     <a id="example" href="#example">Example</a>
     <a id="viewer-mode" href="#viewer-mode">Viewer mode</a>
     <a id="theming" href="#theming">Theming</a>
-    <a id="try-your-own" href="#try-your-own">Try your own</a>
+    <a id="try-your-own" href="#try-your-own"><b>Try your own</b></a>
   </div>
   <div class="main">
     <div class="content" id="content">Loading...</div>
@@ -270,7 +270,7 @@ <h1>&lt;shacl-form&gt; demo</h1>
   <template id="template-try-your-own">
     <div class="wrapper">
       <fieldset><legend>Enter your SHACL shapes here</legend><textarea id="shacl-shape-input" class="w-100 h-100"></textarea></fieldset>
-      <fieldset><legend>Generated form</legend><shacl-form id="shacl-form"></shacl-form></fieldset>
+      <fieldset><legend>Generated form</legend><shacl-form id="shacl-form" data-submit-button></shacl-form></fieldset>
       <fieldset id="shacl-output"><legend>Output generated by the form</legend><pre></pre></fieldset>
     </div>
     <script>
diff --git a/package.json b/package.json
index b778096..d1e5d94 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",
diff --git a/src/styles.css b/src/styles.css
index bcb206b..6fbb780 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,4 +1,5 @@
-form { padding-left: 1em; box-sizing: border-box; display:block; --label-width: 8em; }
+form { box-sizing: border-box; display:block; --label-width: 8em; }
+form.mode-edit { padding-left: 1em;  }
 form *, form ::after, form ::before { box-sizing: inherit; }
 shacl-node, .shacl-group { display: flex; flex-direction: column; width: 100%; position: relative; }
 shacl-node .control-button { cursor: pointer; }
diff --git a/src/themes/bootstrap.css b/src/themes/bootstrap.css
index e3d7383..f4e296a 100644
--- a/src/themes/bootstrap.css
+++ b/src/themes/bootstrap.css
@@ -1,5 +1,6 @@
 form.mode-edit { --label-width: 0em; }
 .lang-chooser { right: 32px; font-size: 0.8em; }
 .property-instance[data-description]::after { content: attr(data-description); position: absolute; bottom: -12px; left: 13px; font-size: 12px; opacity: 0.7;}
+.property-instance { margin-bottom:14px; }
 .form-floating[data-description] { margin-bottom: 18px; }
 .remove-button { padding: 6px; }
\ No newline at end of file