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 {
|
.mx_SpaceHierarchy_roomCount {
|
||||||
> h3 {
|
> h3 {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
|
@ -154,124 +148,146 @@ limitations under the License.
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_SpaceHierarchy_roomTile {
|
.mx_SpaceHierarchy_list {
|
||||||
position: relative;
|
list-style: none;
|
||||||
padding: 8px 16px;
|
padding: 0;
|
||||||
border-radius: 8px;
|
margin: 0;
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
display: grid;
|
li.mx_SpaceHierarchy_roomTileWrapper {
|
||||||
grid-template-columns: 20px auto max-content;
|
list-style: none;
|
||||||
grid-column-gap: 8px;
|
|
||||||
grid-row-gap: 6px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.mx_BaseAvatar {
|
.mx_SpaceHierarchy_roomTile {
|
||||||
grid-row: 1;
|
position: relative;
|
||||||
grid-column: 1;
|
padding: 8px 16px;
|
||||||
}
|
border-radius: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
.mx_SpaceHierarchy_roomTile_name {
|
display: flex;
|
||||||
font-weight: $font-semi-bold;
|
flex-wrap: wrap;
|
||||||
font-size: $font-15px;
|
gap: 6px 12px;
|
||||||
line-height: $font-18px;
|
|
||||||
grid-row: 1;
|
|
||||||
grid-column: 2;
|
|
||||||
|
|
||||||
.mx_InfoTooltip,
|
.mx_SpaceHierarchy_roomTile_item {
|
||||||
.mx_SpaceHierarchy_roomTile_joined {
|
font-weight: $font-semi-bold;
|
||||||
display: inline;
|
font-size: $font-15px;
|
||||||
margin-left: 12px;
|
line-height: $font-18px;
|
||||||
color: $tertiary-content;
|
display: grid;
|
||||||
font-size: $font-12px;
|
grid-template-columns: 20px auto;
|
||||||
line-height: $font-15px;
|
gap: 6px 8px;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1; // wrap action buttons
|
||||||
|
|
||||||
.mx_InfoTooltip_icon {
|
.mx_SpaceHierarchy_roomTile_avatar {
|
||||||
margin-right: 4px;
|
grid-row: 1;
|
||||||
position: relative;
|
grid-column: 1;
|
||||||
vertical-align: text-top;
|
}
|
||||||
|
|
||||||
&::before {
|
.mx_SpaceHierarchy_roomTile_name {
|
||||||
position: absolute;
|
grid-row: 1;
|
||||||
top: 0;
|
grid-column: 2;
|
||||||
left: 0;
|
|
||||||
|
.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,
|
.mx_SpaceHierarchy_roomTile,
|
||||||
|
|
|
||||||
|
|
@ -206,24 +206,27 @@ const Tile: React.FC<ITileProps> = ({
|
||||||
}
|
}
|
||||||
|
|
||||||
const content = <React.Fragment>
|
const content = <React.Fragment>
|
||||||
{ avatar }
|
<div className="mx_SpaceHierarchy_roomTile_item">
|
||||||
<div className="mx_SpaceHierarchy_roomTile_name">
|
<div className="mx_SpaceHierarchy_roomTile_avatar">
|
||||||
{ name }
|
{ avatar }
|
||||||
{ joinedSection }
|
</div>
|
||||||
{ suggestedSection }
|
<div className="mx_SpaceHierarchy_roomTile_name">
|
||||||
</div>
|
{ name }
|
||||||
|
{ joinedSection }
|
||||||
<div
|
{ suggestedSection }
|
||||||
className="mx_SpaceHierarchy_roomTile_info"
|
</div>
|
||||||
ref={e => e && linkifyElement(e)}
|
<div
|
||||||
onClick={ev => {
|
className="mx_SpaceHierarchy_roomTile_info"
|
||||||
// prevent clicks on links from bubbling up to the room tile
|
ref={e => e && linkifyElement(e)}
|
||||||
if ((ev.target as HTMLElement).tagName === "A") {
|
onClick={ev => {
|
||||||
ev.stopPropagation();
|
// prevent clicks on links from bubbling up to the room tile
|
||||||
}
|
if ((ev.target as HTMLElement).tagName === "A") {
|
||||||
}}
|
ev.stopPropagation();
|
||||||
>
|
}
|
||||||
{ description }
|
}}
|
||||||
|
>
|
||||||
|
{ description }
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_SpaceHierarchy_actions">
|
<div className="mx_SpaceHierarchy_actions">
|
||||||
{ button }
|
{ button }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue