Skip to content

Commit

Permalink
Merge pull request #108 from kohki-shikata/fix-style-width
Browse files Browse the repository at this point in the history
Fix style width
  • Loading branch information
kohki-shikata authored Mar 19, 2023
2 parents 9a6f16d + 1981c07 commit efbaaef
Show file tree
Hide file tree
Showing 6 changed files with 172 additions and 4 deletions.
2 changes: 1 addition & 1 deletion assets/components/elements/hidden.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="formElement formInline" id="hidden-detail-view" x-show="$store.app.formData.formElements.length > 0 && $store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'hidden'">
<div class="formElement formInline" id="hidden-detail-view" x-show="$store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'hidden'">
<style>
@import "assets/css/app.css";
</style>
Expand Down
2 changes: 1 addition & 1 deletion assets/components/elements/inline.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="inline-detail-view" x-show="($store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'text' || $store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'email' || $store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'password' || $store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'url' || $store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'number') ? true : false">
<div id="inline-detail-view" x-show="($store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'text' || $store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'email' || $store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'password' || $store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'url' || $store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'number')">
<style>
@import "assets/css/app.css";
</style>
Expand Down
2 changes: 1 addition & 1 deletion assets/components/elements/textarea.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="formElement formTextarea" id="textarea-detail-view" x-show="$store.app.formData.formElements.length > 0 && $store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'textarea'">
<div class="formElement formTextarea" id="textarea-detail-view" x-show="$store.app.formData.formElements[$store.app.formData.formElementSelect - 1].type === 'textarea'">
<div class="form-type">
<dl>
<dt>type:</dt>
Expand Down
10 changes: 10 additions & 0 deletions assets/css/partials/form.css
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,16 @@ textarea {
width: 100%;
}

input[type="text"][size],
input[type="email"][size],
input[type="password"][size],
input[type="tel"][size],
input[type="number"][size],
input[type="url"][size],
textarea[cols] {
width: fit-content;
}

:lang(ja) input + label,
:lang(ja) select + label,
:lang(ja) textarea + label {
Expand Down
4 changes: 4 additions & 0 deletions assets/js/helpers/add_element.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ const addElement = (type, currentIndex, formData) => {
id: '',
placeholder: '',
value: '',
size: '',
inputmode: '',
minlength: '',
maxlength: '',
pattern: '',
Expand Down Expand Up @@ -45,6 +47,7 @@ const addElement = (type, currentIndex, formData) => {
label: '',
id: '',
placeholder: '',
inputmode: '',
value: '',
min: '',
max: '',
Expand All @@ -59,6 +62,7 @@ const addElement = (type, currentIndex, formData) => {
formData.formElements.push({
type,
inputmode: '',
placeholder: '',
value: '',
minlength: '',
maxlength: '',
Expand Down
156 changes: 155 additions & 1 deletion form_data.json
Original file line number Diff line number Diff line change
@@ -1 +1,155 @@
{ "initialSetting": { "smtpAuth": true, "smtpEncryption": false, "autoreply": false, "stepNavigation": true, "formElementSelect": 0, "recipientMailSubject": "\u304a\u554f\u3044\u5408\u308f\u305b\u304c\u3042\u308a\u307e\u3057\u305f" }, "dragManage": { "dragging": null, "dropping": null, "timer": null }, "formElements": [{ "type": "text", "name": "name", "label": "\u304a\u540d\u524d", "id": "name", "placeholder": "\u4f8b\uff09\u5c71\u7530\u592a\u90ce", "value": "", "minlength": "", "maxlength": "30", "pattern": "", "required": true, "readonly": false, "disabled": false, "isInline": true, "size": "50", "autocomplete": "name", "inputmode": "text" }, { "type": "email", "name": "email", "label": "\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9", "id": "email", "placeholder": "\u4f8b\[email protected]", "value": "", "minlength": "", "maxlength": "50", "pattern": "", "required": true, "readonly": false, "disabled": false, "isInline": true, "size": "50", "autocomplete": "email", "inputmode": "email" }, { "type": "text", "name": "company-name", "label": "\u4f01\u696d\u540d", "id": "company-name", "placeholder": "\u4f8b\uff09\u682a\u5f0f\u4f1a\u793e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30dd\u30ec\u30fc\u30b7\u30e7\u30f3", "value": "", "minlength": "", "maxlength": "50", "pattern": "", "required": false, "readonly": false, "disabled": false, "isInline": true, "size": "50", "autocomplete": "organization-title" }, { "type": "radio", "name": "contact-type", "label": "\u304a\u554f\u3044\u5408\u308f\u305b\u5185\u5bb9", "id": "contact-type", "placeholder": "", "value": "", "minlength": "", "maxlength": "", "pattern": "", "required": true, "readonly": false, "disabled": false, "isInline": true, "choices": [{ "text": "\u88fd\u54c1\u306b\u3064\u3044\u3066", "value": "product", "selected": false }, { "text": "\u63a1\u7528\u306b\u3064\u3044\u3066", "value": "recruit", "selected": false }, { "text": "\u53d6\u6750\u306e\u304a\u554f\u3044\u5408\u308f\u305b", "value": "press", "selected": false }, { "text": "\u305d\u306e\u4ed6", "value": "other", "selected": false }] }, { "type": "checkbox", "name": "reply-time", "id": "reply-time", "label": "\u3054\u9023\u7d61\u898f\u6a21\u6642\u9593\u5e2f", "choices": [{ "text": "\u5e73\u65e5\u5348\u524d", "value": "businessday-am", "selected": false }, { "text": "\u5e73\u65e5\u5348\u5f8c", "value": "businessday-pm", "selected": false }, { "text": "\u5e73\u65e5\u591c\u9593", "value": "businessday-night", "selected": false }, { "text": "\u571f\u65e5\u795d\u65e5", "value": "holiday", "selected": false }], "required": false, "isMultiSelect": true }, { "type": "textarea", "inputmode": "text", "value": "", "minlength": "", "maxlength": "1000", "spellcheck": "", "wrap": "", "required": true, "readonly": false, "disabled": false, "isTextarea": true, "name": "message", "label": "\u304a\u554f\u3044\u5408\u308f\u305b\u672c\u6587", "id": "message", "rows": "15", "cols": "50" }], "formElementSelect": "6" }
{
"initialSetting": {
"smtpAuth": true,
"smtpEncryption": false,
"autoreply": false,
"stepNavigation": true,
"formElementSelect": 0,
"recipientMailSubject": "お問い合わせがありました"
},
"dragManage": {
"dragging": null,
"dropping": null,
"timer": null
},
"formElements": [{
"type": "text",
"name": "name",
"label": "お名前",
"id": "name",
"placeholder": "例)山田太郎",
"value": "",
"minlength": "",
"maxlength": "30",
"pattern": "",
"required": true,
"readonly": false,
"disabled": false,
"isInline": true,
"size": "50",
"autocomplete": "name",
"inputmode": "text"
},
{
"type": "email",
"name": "email",
"label": "メールアドレス",
"id": "email",
"placeholder": "例)[email protected]",
"value": "",
"minlength": "",
"maxlength": "50",
"pattern": "",
"required": true,
"readonly": false,
"disabled": false,
"isInline": true,
"size": "50",
"autocomplete": "email",
"inputmode": "email"
},
{
"type": "text",
"name": "company-name",
"label": "企業名",
"id": "company-name",
"placeholder": "例)株式会社サンプルコーポレーション",
"value": "",
"minlength": "",
"maxlength": "50",
"pattern": "",
"required": false,
"readonly": false,
"disabled": false,
"isInline": true,
"size": "50",
"inputmode": "",
"autocomplete": "organization-title"
},
{
"type": "radio",
"name": "contact-type",
"label": "お問い合わせ内容",
"id": "contact-type",
"placeholder": "",
"value": "",
"minlength": "",
"maxlength": "",
"pattern": "",
"required": true,
"readonly": false,
"disabled": false,
"isInline": true,
"choices": [{
"text": "製品について",
"value": "product",
"selected": false
},
{
"text": "採用について",
"value": "recruit",
"selected": false
},
{
"text": "取材のお問い合わせ",
"value": "press",
"selected": false
},
{
"text": "その他",
"value": "other",
"selected": false
}
]
},
{
"type": "checkbox",
"name": "reply-time",
"id": "reply-time",
"label": "ご連絡規模時間帯",
"choices": [{
"text": "平日午前",
"value": "businessday-am",
"selected": false
},
{
"text": "平日午後",
"value": "businessday-pm",
"selected": false
},
{
"text": "平日夜間",
"value": "businessday-night",
"selected": false
},
{
"text": "土日祝日",
"value": "holiday",
"selected": false
}
],
"required": false,
"isMultiSelect": true
},
{
"type": "textarea",
"inputmode": "text",
"value": "",
"placeholder": "",
"minlength": "",
"maxlength": "1000",
"spellcheck": "",
"wrap": "",
"required": true,
"readonly": false,
"disabled": false,
"isTextarea": true,
"name": "message",
"label": "お問い合わせ本文",
"id": "message",
"rows": "15",
"cols": "50"
}
],
"formElementSelect": "6"
}

0 comments on commit efbaaef

Please sign in to comment.