Skip to content

Commit 88d2feb

Browse files
noeliaSDnoeliaSD
committed
fix(CommunitiesPortal): improve responsive layout on small viewports
- Slightly reduce card size on compact screens to prevent cuts. - Reorder header in compact mode to prioritize title & primary actions; move secondary info. - No API changes; larger screens unaffected. Fixes #18838
1 parent 3640463 commit 88d2feb

File tree

2 files changed

+109
-69
lines changed

2 files changed

+109
-69
lines changed

‎ui/app/AppLayouts/Communities/CommunitiesPortalLayout.qml‎

Lines changed: 92 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import QtQuick
2+
import QtQuick.Controls
23
import QtQuick.Layouts
4+
import QtQml
35

46
import StatusQ
57
import StatusQ.Core
@@ -51,6 +53,9 @@ StatusSectionLayout {
5153
readonly property int preventShadowClipMargin: Theme.padding
5254

5355
readonly property bool searchMode: searcher.text.length > 0
56+
57+
// Read-only flag that turns true when the component enters a “compact” layout automatically on resize.
58+
readonly property bool compactMode: root.width < 600
5459
}
5560

5661
SortFilterProxyModel {
@@ -87,31 +92,32 @@ StatusSectionLayout {
8792
]
8893
}
8994

90-
centerPanel: Item {
95+
centerPanel: ColumnLayout {
96+
id: column
97+
9198
anchors.fill: parent
9299

93100
anchors.topMargin: d.layoutTopMargin
94101
anchors.leftMargin: Theme.xlPadding*2
95102
anchors.rightMargin: Theme.xlPadding
96103

97-
ColumnLayout {
98-
id: column
99-
100-
anchors.fill: parent
101-
spacing: 18
104+
spacing: 18
105+
106+
StatusBaseText {
107+
Layout.fillWidth: true
108+
text: qsTr("Discover Communities")
109+
font.weight: Font.Bold
110+
font.pixelSize: d.titlePixelSize
111+
color: Theme.palette.directColor1
112+
elide: Text.ElideRight
113+
wrapMode: Text.Wrap
114+
maximumLineCount: 2
115+
}
102116

103-
StatusBaseText {
104-
text: qsTr("Discover Communities")
105-
font.weight: Font.Bold
106-
font.pixelSize: d.titlePixelSize
107-
color: Theme.palette.directColor1
108-
}
117+
ColumnLayout {
118+
spacing: Theme.padding
109119

110120
RowLayout {
111-
Layout.fillWidth: true
112-
Layout.preferredHeight: 38
113-
spacing: Theme.bigPadding
114-
115121
SearchBox {
116122
id: searcher
117123
Layout.fillWidth: true
@@ -122,71 +128,92 @@ StatusSectionLayout {
122128
bottomPadding: 0
123129
}
124130

125-
// Just a row filler to fit design
126-
Item { Layout.fillWidth: true }
127-
128-
StatusButton {
131+
// filler
132+
Item {
129133
Layout.fillWidth: true
130-
Layout.preferredHeight: 38
131-
Layout.maximumWidth: implicitWidth
132-
text: qsTr("Join Community")
133-
verticalPadding: 0
134-
onClicked: Global.importCommunityPopupRequested()
135134
}
136135

137-
StatusButton {
138-
objectName: "createCommunityButton"
139-
visible: root.createCommunityEnabled
140-
Layout.preferredHeight: 38
141-
verticalPadding: 0
142-
text: qsTr("Create New Community")
143-
type: StatusBaseButton.Type.Primary
144-
onClicked: {
145-
// Global.openPopup(chooseCommunityCreationTypePopupComponent) // hidden as part of https://github.com/status-im/status-desktop/issues/17726
146-
root.communitiesStore.setCreateCommunityPopupSeen()
147-
Global.createCommunityPopupRequested(false /*isDiscordImport*/)
148-
}
136+
LayoutItemProxy {
137+
visible: !d.compactMode
149138

150-
StatusNewBadge {
151-
visible: root.createCommunityBadgeVisible
152-
}
139+
Layout.fillWidth: true
140+
Layout.alignment: Qt.AlignHCenter
141+
142+
target: buttonsRow
153143
}
154144
}
155145

156-
TagsRow {
157-
id: communityTags
146+
LayoutItemProxy {
147+
visible: d.compactMode
148+
158149
Layout.fillWidth: true
159150

160-
tags: root.communitiesStore.communityTags
151+
target: buttonsRow
161152
}
153+
}
162154

163-
Item {
164-
Layout.fillWidth: true
165-
Layout.fillHeight: true
166-
Layout.leftMargin: -d.preventShadowClipMargin
167-
Layout.rightMargin: -d.preventShadowClipMargin
155+
TagsRow {
156+
id: communityTags
157+
Layout.fillWidth: true
158+
159+
tags: root.communitiesStore.communityTags
160+
}
168161

169-
clip: true
170162

171-
CommunitiesGridView {
172-
id: communitiesGrid
163+
CommunitiesGridView {
164+
id: communitiesGrid
173165

174-
anchors.fill: parent
175-
anchors.rightMargin: d.preventShadowClipMargin
176-
anchors.leftMargin: d.preventShadowClipMargin
177-
contentWidth: availableWidth
166+
Layout.fillWidth: true
167+
Layout.fillHeight: true
168+
Layout.leftMargin: d.preventShadowClipMargin
169+
Layout.rightMargin: d.preventShadowClipMargin
178170

179-
padding: 0
180-
bottomPadding: d.layoutBottomMargin
171+
contentWidth: availableWidth
172+
padding: 0
173+
bottomPadding: d.layoutBottomMargin
181174

182-
model: filteredCommunitiesModel
183-
searchLayout: d.searchMode
175+
model: filteredCommunitiesModel
176+
searchLayout: d.searchMode
184177

185-
assetsModel: root.assetsModel
186-
collectiblesModel: root.collectiblesModel
178+
assetsModel: root.assetsModel
179+
collectiblesModel: root.collectiblesModel
187180

188-
onCardClicked: (communityId) => root.communitiesStore.navigateToCommunity(communityId)
189-
}
181+
onCardClicked: (communityId) => root.communitiesStore.navigateToCommunity(communityId)
182+
}
183+
}
184+
185+
RowLayout {
186+
id: buttonsRow
187+
Layout.fillWidth: true
188+
Layout.preferredHeight: 38
189+
spacing: Theme.bigPadding
190+
191+
StatusButton {
192+
Layout.fillWidth: true
193+
Layout.preferredHeight: 38
194+
Layout.maximumWidth: implicitWidth
195+
text: qsTr("Join Community")
196+
verticalPadding: 0
197+
onClicked: Global.importCommunityPopupRequested()
198+
}
199+
200+
StatusButton {
201+
objectName: "createCommunityButton"
202+
Layout.fillWidth: true
203+
Layout.preferredHeight: 38
204+
Layout.maximumWidth: implicitWidth
205+
visible: root.createCommunityEnabled
206+
verticalPadding: 0
207+
text: qsTr("Create New Community")
208+
type: StatusBaseButton.Type.Primary
209+
onClicked: {
210+
// Global.openPopup(chooseCommunityCreationTypePopupComponent) // hidden as part of https://github.com/status-im/status-desktop/issues/17726
211+
root.communitiesStore.setCreateCommunityPopupSeen()
212+
Global.createCommunityPopupRequested(false /*isDiscordImport*/)
213+
}
214+
215+
StatusNewBadge {
216+
visible: root.createCommunityBadgeVisible
190217
}
191218
}
192219
}
@@ -216,8 +243,8 @@ StatusSectionLayout {
216243
BannerPanel {
217244
readonly property bool importInProgress: root.communitiesStore.discordImportInProgress && !root.communitiesStore.discordImportCancelled
218245
text: importInProgress ?
219-
qsTr("'%1' import in progress...").arg(root.communitiesStore.discordImportCommunityName || root.communitiesStore.discordImportChannelName) :
220-
qsTr("Import existing Discord community into Status")
246+
qsTr("'%1' import in progress...").arg(root.communitiesStore.discordImportCommunityName || root.communitiesStore.discordImportChannelName) :
247+
qsTr("Import existing Discord community into Status")
221248
buttonText: qsTr("Import existing")
222249
icon.name: "download"
223250
buttonTooltipText: qsTr("Your current import must be finished or cancelled before a new import can be started.")

‎ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,27 @@ StatusScrollView {
3030
signal cardClicked(string communityId)
3131

3232
clip: false
33+
contentWidth: availableWidth
34+
contentItem.scale: d.scale
35+
contentItem.width: availableWidth / contentItem.scale
36+
contentItem.height: availableHeight / contentItem.scale
37+
contentItem.transformOrigin: Item.TopLeft
3338

3439
QtObject {
3540
id: d
3641

37-
// values from the design
42+
// Values from the design
3843
readonly property int scrollViewTopMargin: 20
3944
readonly property int subtitlePixelSize: 17
4045
readonly property int promotionalCardPosition: Math.max(gridLayout.delegateCountPerRow - 1, 1)
41-
42-
readonly property int delegateWidth: 335
46+
property int delegateWidth: 335
47+
48+
readonly property real minWidth: d.delegateWidth + root.rightPadding + root.leftPadding + 2 * Theme.padding
49+
readonly property real scale: Math.min(1, root.availableWidth / minWidth)
50+
51+
Behavior on delegateWidth {
52+
PropertyAnimation { duration: Theme.AnimationDuration.Fast }
53+
}
4354

4455
// URLs:
4556
readonly property string learnAboutCommunitiesVoteLink: Constants.statusHelpLinkPrefix + "communities/vote-to-feature-a-status-community#step-2-initiate-a-round-of-vote"
@@ -146,7 +157,7 @@ StatusScrollView {
146157

147158
ColumnLayout {
148159
id: contentColumn
149-
anchors.fill: parent
160+
width: root.availableWidth / d.scale
150161
anchors.leftMargin: root.anchors.leftMargin
151162
anchors.rightMargin: root.anchors.rightMargin
152163

@@ -214,6 +225,8 @@ StatusScrollView {
214225
}
215226

216227
PromotionalCommunityCard {
228+
width: d.delegateWidth
229+
217230
onLearnMore: Global.openLinkWithConfirmation(d.learnAboutCommunitiesVoteLink,
218231
StringUtils.extractDomainFromLink(d.learnAboutCommunitiesVoteLink))
219232
onInitiateVote: Global.openLinkWithConfirmation(d.voteCommunityLink,

0 commit comments

Comments
 (0)