diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index b7a420d3..65705e2f 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -22,7 +22,7 @@
v-if="row.type === 'text' || row.type === 'number'"
v-model="formData[index].value"
:description="row.description"
- :label="row.name"
+ :label="row.title || row.name"
:type="row.type"
layout="horizontal"
/>
@@ -31,7 +31,7 @@
v-else-if="row.type === 'boolean'"
v-model="formData[index].value"
:description="row.description"
- :label="row.name"
+ :label="row.title || row.name"
:options="['true', 'false']"
:initialOption="boolToStr(formData[index].value)"
/>
@@ -42,7 +42,7 @@
:options="formData[index].enum"
:description="row.description"
:initialOption="formData[index].value"
- :label="row.name"
+ :label="row.title || row.name"
class="edit-item-select"
/>
@@ -60,7 +60,7 @@
:key="row.name"
@click="() => appendNewField(row.name)"
class="add-field-tag">
- {{ row.name }}
+ {{ row.title || row.name }}
@@ -126,15 +126,20 @@ export default {
value: this.item[property],
type: this.getInputType(this.schema[property]),
enum: this.schema[property].enum,
+ title: this.schema[property].title,
};
},
/* Make formatted data structure to be rendered as form elements */
makeInitialFormData() {
const formData = [];
const requiredFields = ['title', 'description', 'url', 'icon', 'target'];
+ const unneededFields = ['id'];
+ const isPrimaryField = (property) => (
+ this.item[property] || requiredFields.includes(property)
+ ) && !unneededFields.includes(property);
Object.keys(this.schema).forEach((property) => {
const singleRow = this.makeRowData(property);
- if (this.item[property] || requiredFields.includes(property)) {
+ if (isPrimaryField(property)) {
formData.push(singleRow);
} else {
this.additionalFormData.push(singleRow);
@@ -263,8 +268,8 @@ export default {
.input-container, .select-container {
width: 100%;
input.input-field {
- font-size: 1rem;
- padding: 0.35rem 0.5rem;
+ font-size: 1rem;
+ padding: 0.35rem 0.5rem;
}
}
}
diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index 7f36dd61..2d1b4c95 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -194,7 +194,7 @@ export default {
@import '@/styles/media-queries.scss';
div.edit-mode-bottom-banner {
- position: absolute;
+ position: fixed;
display: grid;
z-index: 5;
bottom: 0;