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

* Change: フィールド入力フォームのデザイン改善 * 翻訳の置き場所変更
kmycode · Mar 26, 2024 · 116a6b5 · 116a6b5
1 parent 31559f6
commit 116a6b5
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.examples.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.examples.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
@@ -168,6 +168,9 @@ en:
       account:
         discoverable: Feature profile and posts in discovery algorithms
         fields:
+          examples:
+            name_1: 例) GitHub
+            value_1: 例) https://github.com/xxxxxx
           name: Label
           value: Content
         indexable: Include public posts in search results

diff --git a/config/locales/simple_form.ja.yml b/config/locales/simple_form.ja.yml
@@ -179,6 +179,9 @@ ja:
       account:
         discoverable: アカウントを見つけやすくする
         fields:
+          examples:
+            name_1: 例) GitHub
+            value_1: 例) https://github.com/xxxxxx
           name: ラベル
           value: 内容
         indexable: 公開投稿を検索できるようにする