make things more accessible

yopa-web/resources/src/components/EditObjectForm.vue

@@ -140,7 +140,7 @@ export default {
         <h1>Edit {{ model.name }}</h1>
       </div>
       <div class="col col-3 text-right">
-        <button @click="trySave" class="btn btn-primary">
+        <button type="button" @click="trySave" class="btn btn-primary">
           <i class="icon icon-check"></i>Save
         </button>
       </div>

yopa-web/resources/src/components/EditPropertyField.vue

@@ -43,9 +43,9 @@ export default {
       <label class="form-label">{{ model.name }}</label>
     </div>
     <div class="col-9 pr-2">
-      <a class="btn" @click="addValue">
+      <button type="button" class="btn" @click="addValue">
         <i class="icon icon-plus"></i>Add
-      </a>
+      </button>
     </div>
   </div>
 
@@ -58,18 +58,18 @@ export default {
       <integer-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Integer'"></integer-value>
       <decimal-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Decimal'"></decimal-value>
       <boolean-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Boolean'"></boolean-value>
-      <a class="btn btn-delete ml-1" @click="removeValue(vi)" v-if="values.length > 1 || model.optional">
+      <button type="button" class="btn btn-delete ml-1" @click="removeValue(vi)" v-if="values.length > 1 || model.optional">
         <i class="icon icon-cross"></i>Remove
-      </a>
+      </button>
     </div>
   </div>
 
   <div v-if="values.length>0 && model.multiple" class="form-group cols">
     <div class="col-3 pl-2"></div>
     <div class="col-9 pr-2">
-      <a class="btn" @click="addValue">
+      <button type="button" class="btn" @click="addValue">
         <i class="icon icon-plus"></i>Add
-      </a>
+      </button>
     </div>
   </div>
 </template>

yopa-web/resources/src/components/EditRelationForm.vue

@@ -107,8 +107,8 @@ export default {
         </select>
       </div>
       <div class="col-2 text-right pr-2">
-        <a class="btn btn-delete" v-if="model.multiple || model.optional && instances.length > 0"
+        <button type="button" class="btn btn-delete" v-if="model.multiple || model.optional && instances.length > 0"
-           @click="removeInstance(ri)"><i class="icon-delete icon"></i>Delete</a>
+           @click="removeInstance(ri)"><i class="icon-delete icon"></i>Delete</button>
       </div>
     </div>
 
@@ -118,9 +118,9 @@ export default {
   </div>
 
   <div class="mt-2 mb-2">
-    <a class="btn" v-if="model.multiple || model.optional && instances.length==0"
+    <button type="button" class="btn" v-if="model.multiple || model.optional && instances.length==0"
        @click="addInstance">
       <i class="icon icon-plus"></i>Add {{ model.name }}
-    </a>
+    </button>
   </div>
 </template>

yopa-web/resources/src/components/NewRelationForm.vue

@@ -126,8 +126,8 @@ export default {
         </select>
       </div>
       <div class="col-2 text-right pr-2">
-        <a class="btn btn-delete" v-if="model.multiple || model.optional && instances.length > 0"
+        <button type="button" class="btn btn-delete" v-if="model.multiple || model.optional && instances.length > 0"
-           @click="removeInstance(ri)"><i class="icon-delete icon"></i>Delete</a>
+           @click="removeInstance(ri)"><i class="icon-delete icon"></i>Delete</button>
       </div>
     </div>
 
@@ -137,9 +137,9 @@ export default {
   </div>
 
   <div class="mt-2 mb-2">
-    <a class="btn" v-if="model.multiple || model.optional && instances.length===0"
+    <button type="button" class="btn" v-if="model.multiple || model.optional && instances.length===0"
        @click="addInstance">
       <i class="icon icon-plus"></i>Add {{ model.name }}
-    </a>
+    </button>
   </div>
 </template>

yopa-web/resources/src/components/PropertyField.vue

@@ -40,9 +40,9 @@ export default {
       <label class="form-label">{{ model.name }}</label>
     </div>
     <div class="col-9 pr-2">
-      <a class="btn" @click="addValue">
+      <button type="button" class="btn" @click="addValue">
         <i class="icon icon-plus"></i>Add
-      </a>
+      </button>
     </div>
   </div>
 
@@ -55,18 +55,18 @@ export default {
       <integer-value :ref="setFieldRef" :value="value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Integer'"></integer-value>
       <decimal-value :ref="setFieldRef" :value="value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Decimal'"></decimal-value>
       <boolean-value :ref="setFieldRef" :value="value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Boolean'"></boolean-value>
-      <a class="btn btn-delete ml-1" @click="removeValue(vi)" v-if="values.length > 1 || model.optional">
+      <button type="button" class="btn btn-delete ml-1" @click="removeValue(vi)" v-if="values.length > 1 || model.optional">
         <i class="icon icon-cross"></i>Remove
-      </a>
+      </button>
     </div>
   </div>
 
   <div v-if="values.length>0 && model.multiple" class="form-group cols">
     <div class="col-3 pl-2"></div>
     <div class="col-9 pr-2">
-      <a class="btn" @click="addValue">
+      <button type="button" class="btn" @click="addValue">
         <i class="icon icon-plus"></i>Add
-      </a>
+      </button>
     </div>
   </div>
 </template>

yopa-web/resources/src/style/app.scss

@@ -9,7 +9,10 @@ body {
   margin: 0 auto;
 }
 
+@import "spectre/src/variables";
 table.object-display {
+  margin-bottom: $unit-3;
+
   tbody th {
    width: 225px;
   }

yopa-web/resources/static/style.css

@@ -4125,5 +4125,7 @@ body {
   max-width: 976px;
   margin: 0 auto; }
 
-table.object-display tbody th {
+table.object-display {
-  width: 225px; }
+  margin-bottom: 0.6rem; }
+  table.object-display tbody th {
+    width: 225px; }

yopa-web/resources/templates/models/index.html.tera

@@ -13,7 +13,9 @@
 
 <h1>Models</h1>
 
-<a href="/model/object/create">New model</a>
+<a class="btn" href="/model/object/create">
+	<i class="icon icon-plus"></i>New model
+</a>
 
 <h2>Defined models:</h2>
 

yopa-web/resources/templates/objects/index.html.tera

@@ -6,7 +6,7 @@ Objects
 
 {% block nav -%}
 <a href="/models" class="btn btn-link"><i class="icon icon-edit"></i>Edit models</a>
-<a href="/takeout" class="btn btn-link"><i class="icon icon-code"></i>JSON</a>
+<a href="/takeout" class="btn btn-link">JSON</a>
 {%- endblock %}
 
 {% block content -%}

yopa-web/resources/templates/objects/object_create.html.tera

@@ -5,8 +5,7 @@ Create {{model.name}}
 {%- endblock %}
 
 {% block nav -%}
-<a href="/" class="btn btn-link">
+<a href="/" class="btn btn-link"><i class="icon icon-home"></i>Home</a>
-	<i class="icon icon-home"></i>Home</a>
 {%- endblock %}
 
 {% block content -%}

yopa-web/resources/templates/objects/object_detail.html.tera

@@ -11,7 +11,8 @@
 <a href="/object/update/{{object.id}}" class="btn btn-link">
 	<i class="icon icon-edit"></i>Edit</a>
 
-<a href="/object/delete/{{object.id}}" class="btn btn-link" onclick="return confirm('Delete object?')">
+<a href="/object/delete/{{object.id}}" class="btn btn-link"
+   onclick="return confirm('Delete object?')">
 	<i class="icon icon-delete"></i>Delete</a>
 {%- endblock %}