PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Fix the header of Space landing page (#8048)

Browse source
This commit is contained in:
Suguru Hirahara 2022-03-14 09:11:12 +00:00 committed by GitHub
parent ed6a371616
commit 64e9cdd619
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
res/css/structures/_SpaceRoomView.scss
View file

@ -152,6 +152,7 @@ $SpaceRoomViewInnerWidth: 428px;
right: 24px; right: 24px;
top: 32px; top: 32px;
} }
// XXX remove this when spaces leaves Beta // XXX remove this when spaces leaves Beta
.mx_SpaceRoomView_preview_spaceBetaPrompt { .mx_SpaceRoomView_preview_spaceBetaPrompt {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
@ -254,13 +255,27 @@ $SpaceRoomViewInnerWidth: 428px;
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
> .mx_BaseAvatar { .mx_SpaceRoomView_landing_header {
width: 80px; display: flex;
} justify-content: space-between;
> .mx_BaseAvatar_image, .mx_BaseAvatar {
> .mx_BaseAvatar > .mx_BaseAvatar_image { width: 80px;
border-radius: 12px;
.mx_BaseAvatar_image {
border-radius: 12px;
}
}
// XXX: Temporary for the Spaces release only
.mx_SpaceFeedbackPrompt {
padding: 7px; // 8px - 1px border
border: 1px solid rgba($primary-content, .1);
border-radius: 8px;
width: max-content;
height: fit-content;
margin-left: 24px;
}
} }
.mx_SpaceRoomView_landing_name { .mx_SpaceRoomView_landing_name {
@ -360,14 +375,6 @@ $SpaceRoomViewInnerWidth: 428px;
margin: 0 0 20px; margin: 0 0 20px;
flex: 0; flex: 0;
} }
.mx_SpaceFeedbackPrompt {
padding: 7px; // 8px - 1px border
border: 1px solid rgba($primary-content, .1);
border-radius: 8px;
width: max-content;
margin: 0 0 -40px auto; // collapse its own height to not push other components down
}
} }
.mx_SpaceRoomView_privateScope { .mx_SpaceRoomView_privateScope {

4
res/css/views/spaces/_SpaceCreateMenu.scss
View file

@ -43,6 +43,7 @@ $spacePanelWidth: 68px;
color: $secondary-content; color: $secondary-content;
} }
// XXX: Temporary for the Spaces release only
.mx_SpaceFeedbackPrompt { .mx_SpaceFeedbackPrompt {
border-top: 1px solid $input-border-color; border-top: 1px solid $input-border-color;
padding-top: 12px; padding-top: 12px;
@ -112,14 +113,13 @@ $spacePanelWidth: 68px;
position: relative; position: relative;
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
margin-right: auto; margin-right: 8px;
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
color: $accent; color: $accent;
position: relative; position: relative;
padding: 0; padding: 0;
margin-left: 8px;
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
} }

6
src/components/structures/SpaceRoomView.tsx
View file

@ -479,8 +479,10 @@ const SpaceLanding = ({ space }: { space: Room }) => {
}; };
return <div className="mx_SpaceRoomView_landing"> return <div className="mx_SpaceRoomView_landing">
<SpaceFeedbackPrompt /> <div className="mx_SpaceRoomView_landing_header">
<RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} /> <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
<SpaceFeedbackPrompt />
</div>
<div className="mx_SpaceRoomView_landing_name"> <div className="mx_SpaceRoomView_landing_name">
<RoomName room={space}> <RoomName room={space}>
{ (name) => { { (name) => {