Change: フィールド入力フォームのデザイン改善

kmycode · Mar 26, 2024 · ceff476 · ceff476
1 parent 31559f6
commit ceff476
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
@@ -118,12 +118,18 @@ code {
     display: flex;
     margin: 0 -5px;
 
-    .input {
+    .input,
+    .fields-label {
       box-sizing: border-box;
       flex: 1 1 auto;
       width: 50%;
       padding: 0 5px;
     }
+
+    .fields-label {
+      font-weight: bold;
+      margin-left: 12px;
+    }
   }
 
   .title {

diff --git a/app/views/settings/profiles/show.html.haml b/app/views/settings/profiles/show.html.haml
@@ -28,10 +28,14 @@
         %label= t('simple_form.labels.defaults.fields')
         %span.hint= t('simple_form.hints.account.fields')
 
+        .row
+          %p.fields-label= t('simple_form.labels.account.fields.name')
+          %p.fields-label= t('simple_form.labels.account.fields.value')
+
         = f.simple_fields_for :fields do |fields_f|
           .row
-            = fields_f.input :name, placeholder: t('simple_form.labels.account.fields.name'), input_html: { maxlength: 255 }
-            = fields_f.input :value, placeholder: t('simple_form.labels.account.fields.value'), input_html: { maxlength: 255 }
+            = fields_f.input :name, placeholder: fields_f.index.zero? ? t("simple_form.labels.account.fields_example.name_#{fields_f.index + 1}") : t('simple_form.labels.account.fields.name'), input_html: { maxlength: 255 }
+            = fields_f.input :value, placeholder: fields_f.index.zero? ? t("simple_form.labels.account.fields_example.value_#{fields_f.index + 1}") : t('simple_form.labels.account.fields.value'), input_html: { maxlength: 255 }
 
   .fields-row
     .fields-row__column.fields-row__column-6

diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
@@ -170,6 +170,9 @@ en:
         fields:
           name: Label
           value: Content
+        fields_example:
+          name_1: ex) GitHub
+          value_1: ex) https://github.com/xxxxxx
         indexable: Include public posts in search results
         indexable_kmyblue: Enable indexable
         searchability_kmyblue: Default searchability

diff --git a/config/locales/simple_form.ja.yml b/config/locales/simple_form.ja.yml
@@ -181,6 +181,9 @@ ja:
         fields:
           name: ラベル
           value: 内容
+        fields_example:
+          name_1: 例) GitHub
+          value_1: 例) https://github.com/xxxxxx
         indexable: 公開投稿を検索できるようにする
         indexable_kmyblue: Indexableを有効にする
         searchability_kmyblue: デフォルトの検索許可