small css fixes and doc update

ULB-Darmstadt · Nov 6, 2023 · 8e0d5af · 8e0d5af
1 parent 5c0958f
commit 8e0d5af
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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; }