support multiple Web UI styles thanks to github.com/akane-blue/mastodon

Thanks to:

- akane-blue@619998a
- akane-blue@250ad2d
- akane-blue@0ff156c
- akane-blue@f7d3270
- akane-blue@0ec841b

app/helpers/application_helper.rb

@@ -154,12 +154,19 @@ def opengraph(property, content)
     tag.meta(content: content, property: property)
   end
 
+  WEBUI_STYLES = {
+    'default' => '',
+    'compact' => 'compact-padding',
+    'legacy' => 'legacy-style',
+  }.freeze
+
   def body_classes
     output = body_class_string.split
     output << content_for(:body_classes)
     output << "theme-#{current_theme.parameterize}"
     output << 'system-font' if current_account&.user&.setting_system_font_ui
     output << (current_account&.user&.setting_reduce_motion ? 'reduce-motion' : 'no-reduce-motion')
+    output << WEBUI_STYLES[current_account&.user&.setting_webui_styles]
     output << 'rtl' if locale_direction == 'rtl'
     output.compact_blank.join(' ')
   end

app/javascript/styles/application.scss

@@ -22,3 +22,5 @@
 @import 'mastodon/rtl';
 @import 'mastodon/accessibility';
 @import 'mastodon/rich_text';
+@import 'mods/compact-padding';
+@import 'mods/legacy-style';

app/javascript/styles/mods/compact-padding.scss

@@ -0,0 +1,40 @@
+.compact-padding {
+  .status__prepend {
+    padding-top: 6px;
+    padding-bottom: 0;
+  }
+
+  .status {
+    padding: 12px;
+    padding-bottom: 6px;
+  }
+
+  .status-reply, .muted {
+    padding-top: 6px;
+  }
+
+  .status__info {
+    padding-bottom: 6px;
+  }
+
+  .status__content {
+    padding-top: 0;
+  }
+
+  .status__action-bar {
+    margin-top: 6px;
+    justify-content: flex-start;
+  }
+
+  .status .media-gallery {
+    margin-top: 6px;
+  }
+
+  .status .attachment-list {
+    margin-top: 2px;
+  }
+
+  .notification__message {
+    padding: 12px 12px 0;
+  }
+}

app/javascript/styles/mods/legacy-style.scss

@@ -0,0 +1,123 @@
+.legacy-style {
+    .status__prepend {
+        padding-top: 0.25em;
+        padding-left: 2.15em;
+        padding-bottom: 0;
+    }
+    .status__line {
+        display: none;
+    }
+    .status:not(.status--in-thread) {
+        padding: 0.5em 0.5em 0.5em 4.75em;
+        position: relative;
+    }
+    .status .status__info, .status__content {
+        padding-bottom: 0.25em;
+    }
+    .status--in-thread{
+        padding-top: 0.5em;
+    }
+    .status--in-thread .status__info {
+        padding-left: 3.25em;
+        padding-bottom: 0;
+    }
+    .status--in-thread .status__content {
+        padding-top: 0.25em;
+        padding-left: 3.25em;
+        margin-right: 4em;
+    }
+    .status--in-thread .status__content {
+      -webkit-margin-start: 0px;
+      margin-inline-start: 0px;
+      width: calc(100% - 3.5em);
+    }
+    .status__wrapper-direct .status--in-thread .status__avatar {
+        padding-top: 2em;
+    }
+    .status--in-thread .status__action-bar {
+        margin-left: 3.5em;
+    }
+    .status-reply {
+        padding-top: 0.25em;
+    }
+    .status .status__info {
+        margin-bottom: 0;
+    }
+    .status .status__relative-time {
+        height: auto;
+        line-height: normal;
+    }
+    .status .status__avatar {
+        width: 3em;
+        height: 3em;
+        position: absolute;
+        left: 0.5em;
+        top: 0.5em;
+    }
+    .status .display-name:not(.detailed-status__display-name) bdi {
+        padding-right: 0.25em;
+    }
+    .status .display-name:not(.detailed-status__display-name) {
+        display: flex;
+    }
+    .detailed-status {
+        padding-top: 0.25em;
+        padding-left: 0.75em;
+        padding-bottom: 0.5em;
+    }
+    .detailed-status .status__prepend {
+        margin-left: 1.75em;
+        margin-bottom: 0.5em;
+    }
+    .detailed-status__display-name {
+        margin-bottom: 0.5em;
+    }
+    .detailed-status .status-card {
+        padding: 0.25em;
+    }
+    .account {
+        padding: 0.5em;
+    }
+    .account__wrapper .display-name, .detailed-status .display-name {
+        padding-left: 0;
+    }
+    .status__action-bar {
+        margin-top: 0.25em;
+        justify-content: flex-start;
+    }
+    .status .media-gallery, .detailed-status .status-card, .detailed-status__meta {
+        margin-top: 0.5em;
+    }
+    .status .attachment-list {
+        margin-top: 0.25em;
+    }
+    .notification__message {
+        padding: 0.5em 0.5em 0 2.35em;
+    }
+    .muted {
+        padding-top: 0.5em;
+    }
+    .mods__announcements__item {
+        margin: 10px;
+    }
+    .drawer__inner .navigation-bar, .drawer__inner .compose-form {
+        padding: 10px;
+    }
+    .account__header__bar {
+        padding: 0 12px;
+    }
+    .account__header__tabs__name {
+        margin-top: 12px;
+        margin-bottom: 12px;
+    }
+    .account__header__bio .account__header__fields {
+        margin: 12px 0 0;
+    }
+    .account__header__bio .account__header__fields dl {
+        padding: 8px 12px;
+    }
+    .account__header__extra__links {
+        margin: 0 -8px;
+        padding-top: 12px;
+    }
+}

app/models/concerns/user/has_settings.rb

@@ -134,4 +134,8 @@ def show_all_media?
   def hide_all_media?
     settings['web.display_media'] == 'hide_all'
   end
+
+  def setting_webui_styles
+    settings['web.mod_webui_styles']
+  end
 end

app/models/user_settings.rb

@@ -32,6 +32,7 @@ class KeyError < Error; end
     setting :expand_content_warnings, default: false
     setting :display_media, default: 'default', in: %w(default show_all hide_all)
     setting :auto_play, default: false
+    setting :mod_webui_styles, default: 'default', in: %w(default compact legacy)
   end
 
   namespace :notification_emails do

app/serializers/initial_state_serializer.rb

@@ -29,6 +29,7 @@ def meta
       store[:use_blurhash]      = object_account_user.setting_use_blurhash
       store[:use_pending_items] = object_account_user.setting_use_pending_items
       store[:show_trends]       = Setting.trends && object_account_user.setting_trends
+      store[:webui_styles]      = object.current_account.user.setting_webui_styles
     else
       store[:auto_play_gif] = Setting.auto_play_gif
       store[:display_media] = Setting.display_media

app/views/settings/preferences/appearance/show.html.haml

@@ -35,6 +35,9 @@
       #{t 'appearance.localization.body'} #{content_tag(:a, t('appearance.localization.guide_link_text'), href: t('appearance.localization.guide_link'), target: '_blank', rel: 'noopener')}
 
   = f.simple_fields_for :settings, current_user.settings do |ff|
+    .fields-group
+      = ff.input :'web.mod_webui_styles', label: I18n.t('simple_form.labels.defaults.setting_webui_styles'), collection: ['default', 'compact', 'legacy'], label_method: lambda { |item| I18n.t("simple_form.hints.defaults.setting_webui_styles_#{item}") }, wrapper: :with_label, include_blank: false, hint: I18n.t('simple_form.hints.defaults.setting_webui_styles_hint')
+
     %h4= t 'appearance.advanced_web_interface'
 
     %p.hint= t 'appearance.advanced_web_interface_hint'

config/locales/simple_form.en.yml

@@ -62,6 +62,10 @@ en:
         setting_display_media_show_all: Always show media
         setting_use_blurhash: Gradients are based on the colors of the hidden visuals but obfuscate any details
         setting_use_pending_items: Hide timeline updates behind a click instead of automatically scrolling the feed
+        setting_webui_styles_hint: You can make padding/margin tighter like previous version
+        setting_webui_styles_default: Default
+        setting_webui_styles_compact: Compact
+        setting_webui_styles_legacy: Legacy style
         username: You can use letters, numbers, and underscores
         whole_word: When the keyword or phrase is alphanumeric only, it will only be applied if it matches the whole word
       domain_allow:
@@ -228,6 +232,7 @@ en:
         setting_unfollow_modal: Show confirmation dialog before unfollowing someone
         setting_use_blurhash: Show colorful gradients for hidden media
         setting_use_pending_items: Slow mode
+        setting_webui_styles: WebUI styles
         severity: Severity
         sign_in_token_attempt: Security code
         title: Title

config/locales/simple_form.ja.yml

@@ -61,6 +61,10 @@ ja:
         setting_display_media_show_all: メディアを常に表示する
         setting_use_blurhash: ぼかしはメディアの色を元に生成されますが、細部は見えにくくなっています
         setting_use_pending_items: 新着があってもタイムラインを自動的にスクロールしないようにします
+        setting_webui_styles_hint: 従来のバージョンのものに近い、余白が狭めの表示に切り替えることができます
+        setting_webui_styles_default: デフォルト
+        setting_webui_styles_compact: コンパクト
+        setting_webui_styles_legacy: 旧バージョン風
         username: アルファベット大文字と小文字、数字、アンダーバー「_」が使えます
         whole_word: キーワードまたはフレーズが英数字のみの場合、単語全体と一致する場合のみ適用されるようになります
       domain_allow:
@@ -225,6 +229,7 @@ ja:
         setting_unfollow_modal: フォローを解除する前に確認ダイアログを表示する
         setting_use_blurhash: 非表示のメディアを色付きのぼかしで表示する
         setting_use_pending_items: 手動更新モード
+        setting_webui_styles: 表示スタイル
         severity: 重大性
         sign_in_token_attempt: セキュリティコード
         title: タイトル