Make rooms and spaces list responsive (#8088)
Suguru Hirahara
GitHub
parent
a5589d40e2
commit
d92977df9e
|
|
@ -91,12 +91,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_roomCount {
|
||||
> h3 {
|
||||
display: inline;
|
||||
|
|
@ -154,124 +148,146 @@ limitations under the License.
|
|||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_roomTile {
|
||||
position: relative;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
.mx_SpaceHierarchy_list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 20px auto max-content;
|
||||
grid-column-gap: 8px;
|
||||
grid-row-gap: 6px;
|
||||
align-items: center;
|
||||
li.mx_SpaceHierarchy_roomTileWrapper {
|
||||
list-style: none;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
.mx_SpaceHierarchy_roomTile {
|
||||
position: relative;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mx_SpaceHierarchy_roomTile_name {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 12px;
|
||||
|
||||
.mx_InfoTooltip,
|
||||
.mx_SpaceHierarchy_roomTile_joined {
|
||||
display: inline;
|
||||
margin-left: 12px;
|
||||
color: $tertiary-content;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
.mx_SpaceHierarchy_roomTile_item {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
display: grid;
|
||||
grid-template-columns: 20px auto;
|
||||
gap: 6px 8px;
|
||||
align-items: center;
|
||||
flex: 1; // wrap action buttons
|
||||
|
||||
.mx_InfoTooltip_icon {
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
vertical-align: text-top;
|
||||
.mx_SpaceHierarchy_roomTile_avatar {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.mx_SpaceHierarchy_roomTile_name {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
|
||||
.mx_InfoTooltip,
|
||||
.mx_SpaceHierarchy_roomTile_joined {
|
||||
margin-left: 12px;
|
||||
color: $tertiary-content;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
|
||||
.mx_InfoTooltip_icon {
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
vertical-align: text-top;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InfoTooltip {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_roomTile_joined {
|
||||
display: inline;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: -2px;
|
||||
left: -4px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $accent;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_roomTile_info {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
font-size: $font-14px;
|
||||
font-weight: initial;
|
||||
line-height: $font-18px;
|
||||
color: $secondary-content;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 12px;
|
||||
margin-left: auto;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
line-height: $font-24px;
|
||||
padding: 4px 16px;
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_danger_outline,
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
padding: 3px 16px; // to account for the 1px border
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
display: inline-flex;
|
||||
|
||||
label {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus-within {
|
||||
background-color: $spacePanel-bg-color;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_SpaceHierarchy_joining {
|
||||
.mx_AccessibleButton {
|
||||
visibility: visible;
|
||||
padding: 4px 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_roomTile_joined {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: -2px;
|
||||
left: -4px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $accent;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_roomTile_info {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-18px;
|
||||
color: $secondary-content;
|
||||
grid-row: 2;
|
||||
grid-column: 2/3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_actions {
|
||||
text-align: right;
|
||||
margin-left: 20px;
|
||||
grid-column: 3;
|
||||
grid-row: 1/3;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
line-height: $font-24px;
|
||||
padding: 4px 16px;
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_danger_outline,
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
padding: 3px 16px; // to account for the 1px border
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus-within {
|
||||
background-color: $spacePanel-bg-color;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_SpaceHierarchy_joining .mx_AccessibleButton {
|
||||
visibility: visible;
|
||||
padding: 4px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
li.mx_SpaceHierarchy_roomTileWrapper {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_roomTile,
|
||||
|
|
|
|||
|
|
@ -206,24 +206,27 @@ const Tile: React.FC<ITileProps> = ({
|
|||
}
|
||||
|
||||
const content = <React.Fragment>
|
||||
{ avatar }
|
||||
<div className="mx_SpaceHierarchy_roomTile_name">
|
||||
{ name }
|
||||
{ joinedSection }
|
||||
{ suggestedSection }
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mx_SpaceHierarchy_roomTile_info"
|
||||
ref={e => e && linkifyElement(e)}
|
||||
onClick={ev => {
|
||||
// prevent clicks on links from bubbling up to the room tile
|
||||
if ((ev.target as HTMLElement).tagName === "A") {
|
||||
ev.stopPropagation();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ description }
|
||||
<div className="mx_SpaceHierarchy_roomTile_item">
|
||||
<div className="mx_SpaceHierarchy_roomTile_avatar">
|
||||
{ avatar }
|
||||
</div>
|
||||
<div className="mx_SpaceHierarchy_roomTile_name">
|
||||
{ name }
|
||||
{ joinedSection }
|
||||
{ suggestedSection }
|
||||
</div>
|
||||
<div
|
||||
className="mx_SpaceHierarchy_roomTile_info"
|
||||
ref={e => e && linkifyElement(e)}
|
||||
onClick={ev => {
|
||||
// prevent clicks on links from bubbling up to the room tile
|
||||
if ((ev.target as HTMLElement).tagName === "A") {
|
||||
ev.stopPropagation();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ description }
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx_SpaceHierarchy_actions">
|
||||
{ button }
|
||||
|
|
|
|||
Loading…
Reference in New Issue