From 47b8e98cf721b011e50c452f6ee1ce8d0e82b22c Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 29 Feb 2024 13:55:13 -0500
Subject: [PATCH] UX: enable badge title on mobile, style cleanup (#25968)
---
.../discourse/app/components/badge-title.hbs | 60 ++++++++++---------
.../discourse/app/templates/badges/show.hbs | 8 +--
.../stylesheets/common/base/user-badges.scss | 41 +++++++++----
app/assets/stylesheets/mobile/_index.scss | 1 -
.../stylesheets/mobile/user-badges.scss | 7 ---
5 files changed, 64 insertions(+), 53 deletions(-)
delete mode 100644 app/assets/stylesheets/mobile/user-badges.scss
diff --git a/app/assets/javascripts/discourse/app/components/badge-title.hbs b/app/assets/javascripts/discourse/app/components/badge-title.hbs
index e125e591d3a..0a94afcb09a 100644
--- a/app/assets/javascripts/discourse/app/components/badge-title.hbs
+++ b/app/assets/javascripts/discourse/app/components/badge-title.hbs
@@ -1,36 +1,38 @@
<div class="badge-title">
- <section class="user-content" id="user-content">
- <form class="form-horizontal">
- <div class="control-group">
- <div class="controls">
- <h3>{{i18n "badges.select_badge_for_title"}}</h3>
- </div>
- </div>
+ <form class="form-horizontal">
- <div class="control-group">
- <div class="controls">
- <ComboBox
- @value={{this._selectedUserBadgeId}}
- @nameProperty="badge.name"
- @content={{this.selectableUserBadges}}
- @onChange={{action (mut this._selectedUserBadgeId)}}
- />
- </div>
- </div>
+ <h3>{{i18n "badges.select_badge_for_title"}}</h3>
- <div class="control-group">
- <div class="controls">
+ <div class="control-group">
+ <div class="controls">
+ <ComboBox
+ @value={{this._selectedUserBadgeId}}
+ @nameProperty="badge.name"
+ @content={{this.selectableUserBadges}}
+ @onChange={{action (mut this._selectedUserBadgeId)}}
+ />
+ </div>
+ </div>
+
+ <div class="control-group">
+ <div class="controls">
+ <DButton
+ @action={{this.saveBadgeTitle}}
+ @disabled={{this._isSaving}}
+ @label={{if this._isSaving "saving" "save"}}
+ class="btn-primary"
+ />
+ {{#if this.closeAction}}
<DButton
- @action={{this.saveBadgeTitle}}
- @disabled={{this._isSaving}}
- @label={{if this._isSaving "saving" "save"}}
- class="btn-primary"
+ @action={{this.closeAction}}
+ @label="close"
+ class="btn-default close-btn"
/>
- {{#if this._isSaved}}
- <span>{{i18n "saved"}}</span>
- {{/if}}
- </div>
+ {{/if}}
+ {{#if this._isSaved}}
+ <span role="status" class="badge-title__saved">{{i18n "saved"}}</span>
+ {{/if}}
</div>
- </form>
- </section>
+ </div>
+ </form>
</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/templates/badges/show.hbs b/app/assets/javascripts/discourse/app/templates/badges/show.hbs
index d84e3eb9444..ff782afe480 100644
--- a/app/assets/javascripts/discourse/app/templates/badges/show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/badges/show.hbs
@@ -37,11 +37,9 @@
{{#if this.canSelectTitle}}
<div class="badge-set-title {{if this.hiddenSetTitle 'hidden' ''}}">
- <BadgeTitle @selectableUserBadges={{this.selectableUserBadges}} />
- <DButton
- @action={{this.toggleSetUserTitle}}
- @label="close"
- class="btn-default close-btn"
+ <BadgeTitle
+ @selectableUserBadges={{this.selectableUserBadges}}
+ @closeAction={{this.toggleSetUserTitle}}
/>
</div>
{{/if}}
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 22e7de70a59..b62422dc3aa 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -216,7 +216,6 @@
@media screen and (min-width: 767px) {
max-width: calc(var(--d-max-width) / 2);
- margin-right: 1.5em;
}
.badge-contents {
@@ -269,6 +268,7 @@
flex-direction: row;
margin-bottom: 2em;
margin-top: 1em;
+ gap: 1em;
.badge-grant-info {
&.hidden {
@@ -285,23 +285,42 @@
}
.badge-set-title {
+ flex: 0 1 auto;
padding: 1.5em;
border: 1px solid var(--primary-low);
- .user-content {
- padding: 0;
- .control-group {
- margin-bottom: 1em;
+ .badge-title {
+ height: 100%;
+ &__saved {
+ color: var(--success);
}
}
- }
- .badge-title .form-horizontal .controls {
- margin-left: 0;
- }
+ .control-group:last-child {
+ margin: auto 0 0;
+ }
- .form-horizontal {
- margin-bottom: 0;
+ .form-horizontal {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ margin: 0;
+ }
+
+ .controls {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ gap: 0.5em;
+ margin: 0;
+ button:last-of-type {
+ margin-right: auto;
+ }
+ }
+
+ .combobox {
+ width: 100%;
+ }
}
}
diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss
index a1ef8b22272..4bcc0ad0c35 100644
--- a/app/assets/stylesheets/mobile/_index.scss
+++ b/app/assets/stylesheets/mobile/_index.scss
@@ -33,5 +33,4 @@
@import "topic-post";
@import "topic";
@import "upload";
-@import "user-badges";
@import "user";
diff --git a/app/assets/stylesheets/mobile/user-badges.scss b/app/assets/stylesheets/mobile/user-badges.scss
deleted file mode 100644
index dc43af5b038..00000000000
--- a/app/assets/stylesheets/mobile/user-badges.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.show-badge-details {
- margin-bottom: 1em;
-
- .badge-grant-info {
- display: none;
- }
-}