Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit d92977d

Browse files
luixxiulluixxiul
authored
Make rooms and spaces list responsive (#8088)
1 parent a5589d4 commit d92977d

File tree

2 files changed

+147
-128
lines changed

2 files changed

+147
-128
lines changed

‎res/css/structures/_SpaceHierarchy.scss‎

Lines changed: 126 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,6 @@ limitations under the License.
9191
}
9292
}
9393

94-
.mx_SpaceHierarchy_list {
95-
list-style: none;
96-
padding: 0;
97-
margin: 0;
98-
}
99-
10094
.mx_SpaceHierarchy_roomCount {
10195
> h3 {
10296
display: inline;
@@ -154,124 +148,146 @@ limitations under the License.
154148
padding-left: 12px;
155149
}
156150

157-
.mx_SpaceHierarchy_roomTile {
158-
position: relative;
159-
padding: 8px 16px;
160-
border-radius: 8px;
161-
box-sizing: border-box;
162-
163-
display: grid;
164-
grid-template-columns: 20px auto max-content;
165-
grid-column-gap: 8px;
166-
grid-row-gap: 6px;
167-
align-items: center;
151+
.mx_SpaceHierarchy_list {
152+
list-style: none;
153+
padding: 0;
154+
margin: 0;
168155

169-
.mx_BaseAvatar {
170-
grid-row: 1;
171-
grid-column: 1;
172-
}
156+
li.mx_SpaceHierarchy_roomTileWrapper {
157+
list-style: none;
173158

174-
.mx_SpaceHierarchy_roomTile_name {
175-
font-weight: $font-semi-bold;
176-
font-size: $font-15px;
177-
line-height: $font-18px;
178-
grid-row: 1;
179-
grid-column: 2;
180-
181-
.mx_InfoTooltip,
182-
.mx_SpaceHierarchy_roomTile_joined {
183-
display: inline;
184-
margin-left: 12px;
185-
color: $tertiary-content;
186-
font-size: $font-12px;
187-
line-height: $font-15px;
188-
189-
.mx_InfoTooltip_icon {
190-
margin-right: 4px;
191-
position: relative;
192-
vertical-align: text-top;
193-
194-
&::before {
195-
position: absolute;
196-
top: 0;
197-
left: 0;
159+
.mx_SpaceHierarchy_roomTile {
160+
position: relative;
161+
padding: 8px 16px;
162+
border-radius: 8px;
163+
box-sizing: border-box;
164+
165+
display: flex;
166+
flex-wrap: wrap;
167+
gap: 6px 12px;
168+
169+
.mx_SpaceHierarchy_roomTile_item {
170+
font-weight: $font-semi-bold;
171+
font-size: $font-15px;
172+
line-height: $font-18px;
173+
display: grid;
174+
grid-template-columns: 20px auto;
175+
gap: 6px 8px;
176+
align-items: center;
177+
flex: 1; // wrap action buttons
178+
179+
.mx_SpaceHierarchy_roomTile_avatar {
180+
grid-row: 1;
181+
grid-column: 1;
198182
}
199-
}
200-
}
201183

202-
.mx_SpaceHierarchy_roomTile_joined {
203-
position: relative;
204-
padding-left: 16px;
205-
206-
&::before {
207-
content: '';
208-
width: 20px;
209-
height: 20px;
210-
top: -2px;
211-
left: -4px;
212-
position: absolute;
213-
mask-position: center;
214-
mask-size: contain;
215-
mask-repeat: no-repeat;
216-
background-color: $accent;
217-
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
184+
.mx_SpaceHierarchy_roomTile_name {
185+
grid-row: 1;
186+
grid-column: 2;
187+
188+
.mx_InfoTooltip,
189+
.mx_SpaceHierarchy_roomTile_joined {
190+
margin-left: 12px;
191+
color: $tertiary-content;
192+
font-size: $font-12px;
193+
line-height: $font-15px;
194+
195+
.mx_InfoTooltip_icon {
196+
margin-right: 4px;
197+
position: relative;
198+
vertical-align: text-top;
199+
200+
&::before {
201+
position: absolute;
202+
top: 0;
203+
left: 0;
204+
}
205+
}
206+
}
207+
208+
.mx_InfoTooltip {
209+
display: inline-block;
210+
}
211+
212+
.mx_SpaceHierarchy_roomTile_joined {
213+
display: inline;
214+
position: relative;
215+
padding-left: 16px;
216+
217+
&::before {
218+
content: '';
219+
width: 20px;
220+
height: 20px;
221+
top: -2px;
222+
left: -4px;
223+
position: absolute;
224+
mask-position: center;
225+
mask-size: contain;
226+
mask-repeat: no-repeat;
227+
background-color: $accent;
228+
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
229+
}
230+
}
231+
}
232+
233+
.mx_SpaceHierarchy_roomTile_info {
234+
grid-row: 2;
235+
grid-column: 2;
236+
font-size: $font-14px;
237+
font-weight: initial;
238+
line-height: $font-18px;
239+
color: $secondary-content;
240+
display: -webkit-box;
241+
-webkit-box-orient: vertical;
242+
-webkit-line-clamp: 2;
243+
overflow: hidden;
244+
}
218245
}
219-
}
220-
}
221246

222-
.mx_SpaceHierarchy_roomTile_info {
223-
font-size: $font-14px;
224-
line-height: $font-18px;
225-
color: $secondary-content;
226-
grid-row: 2;
227-
grid-column: 2/3;
228-
display: -webkit-box;
229-
-webkit-box-orient: vertical;
230-
-webkit-line-clamp: 2;
231-
overflow: hidden;
232-
}
247+
.mx_SpaceHierarchy_actions {
248+
display: flex;
249+
align-items: center;
250+
column-gap: 12px;
251+
margin-left: auto;
252+
253+
.mx_AccessibleButton {
254+
line-height: $font-24px;
255+
padding: 4px 16px;
256+
display: inline-block;
257+
visibility: hidden;
258+
}
233259

234-
.mx_SpaceHierarchy_actions {
235-
text-align: right;
236-
margin-left: 20px;
237-
grid-column: 3;
238-
grid-row: 1/3;
260+
.mx_AccessibleButton_kind_danger_outline,
261+
.mx_AccessibleButton_kind_primary_outline {
262+
padding: 3px 16px; // to account for the 1px border
263+
}
239264

240-
.mx_AccessibleButton {
241-
line-height: $font-24px;
242-
padding: 4px 16px;
243-
display: inline-block;
244-
visibility: hidden;
245-
}
265+
.mx_Checkbox {
266+
display: inline-flex;
246267

247-
.mx_AccessibleButton_kind_danger_outline,
248-
.mx_AccessibleButton_kind_primary_outline {
249-
padding: 3px 16px; // to account for the 1px border
250-
}
268+
label {
269+
width: 16px;
270+
height: 16px;
271+
}
272+
}
273+
}
251274

252-
.mx_Checkbox {
253-
display: inline-flex;
254-
vertical-align: middle;
255-
margin-left: 12px;
256-
}
257-
}
275+
&:hover, &:focus-within {
276+
background-color: $spacePanel-bg-color;
258277

259-
&:hover, &:focus-within {
260-
background-color: $spacePanel-bg-color;
278+
.mx_AccessibleButton {
279+
visibility: visible;
280+
}
281+
}
261282

262-
.mx_AccessibleButton {
263-
visibility: visible;
283+
&.mx_SpaceHierarchy_joining {
284+
.mx_AccessibleButton {
285+
visibility: visible;
286+
padding: 4px 18px;
287+
}
288+
}
264289
}
265290
}
266-
267-
&.mx_SpaceHierarchy_joining .mx_AccessibleButton {
268-
visibility: visible;
269-
padding: 4px 18px;
270-
}
271-
}
272-
273-
li.mx_SpaceHierarchy_roomTileWrapper {
274-
list-style: none;
275291
}
276292

277293
.mx_SpaceHierarchy_roomTile,

‎src/components/structures/SpaceHierarchy.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -206,24 +206,27 @@ const Tile: React.FC<ITileProps> = ({
206206
}
207207

208208
const content = <React.Fragment>
209-
{ avatar }
210-
<div className="mx_SpaceHierarchy_roomTile_name">
211-
{ name }
212-
{ joinedSection }
213-
{ suggestedSection }
214-
</div>
215-
216-
<div
217-
className="mx_SpaceHierarchy_roomTile_info"
218-
ref={e => e && linkifyElement(e)}
219-
onClick={ev => {
220-
// prevent clicks on links from bubbling up to the room tile
221-
if ((ev.target as HTMLElement).tagName === "A") {
222-
ev.stopPropagation();
223-
}
224-
}}
225-
>
226-
{ description }
209+
<div className="mx_SpaceHierarchy_roomTile_item">
210+
<div className="mx_SpaceHierarchy_roomTile_avatar">
211+
{ avatar }
212+
</div>
213+
<div className="mx_SpaceHierarchy_roomTile_name">
214+
{ name }
215+
{ joinedSection }
216+
{ suggestedSection }
217+
</div>
218+
<div
219+
className="mx_SpaceHierarchy_roomTile_info"
220+
ref={e => e && linkifyElement(e)}
221+
onClick={ev => {
222+
// prevent clicks on links from bubbling up to the room tile
223+
if ((ev.target as HTMLElement).tagName === "A") {
224+
ev.stopPropagation();
225+
}
226+
}}
227+
>
228+
{ description }
229+
</div>
227230
</div>
228231
<div className="mx_SpaceHierarchy_actions">
229232
{ button }

0 commit comments

Comments
 (0)