Skip to content

feat: update group and user page design #3428

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 7 commits into from
Dec 18, 2024
Merged

feat: update group and user page design #3428

merged 7 commits into from
Dec 18, 2024

Conversation

andre-code
Copy link
Contributor

@andre-code andre-code commented Dec 5, 2024 •
edited
Loading

PR to apply redesign to group page

/deploy renku=release-0.62.0 renku-data-services=main

@andre-code andre-code changed the base branch from main to andrea/add-new-dashboard-layout December 5, 2024 11:50
@RenkuBot
Copy link
Contributor

RenkuBot commented Dec 5, 2024

You can access the deployment of this PR at https://renku-ci-ui-3428.dev.renku.ch

@andre-code andre-code force-pushed the andrea/add-new-dashboard-layout branch from 8492b99 to a88b823 Compare December 9, 2024 09:35
@andre-code andre-code marked this pull request as ready for review December 9, 2024 11:05
@andre-code andre-code requested a review from a team as a code owner December 9, 2024 11:05
leafty
leafty reviewed Dec 11, 2024
View reviewed changes
client/src/components/EntityWatermark.tsx Outdated
Comment on lines 27 to 32
const watermarkStyles: CSSProperties = {
right: "0",
fontSize: "150px",
lineHeight: "0",
color: "rgba(0, 0, 0, 0.1)",
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use bootstrap classnames and SCSS modules.

  • right: "0" -> end-0 from bootstrap
  • others can go in a SCSS module

client/src/features/dataConnectorsV2/components/DataConnectorsBoxListDisplay.tsx Outdated
const type = `${storage?.configuration?.type?.toString() ?? ""} ${
storage?.configuration?.provider?.toString() ?? ""
}`;
const readOnly = storage?.readonly ? (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will prevent the element from being computed when extendedPreview is false.

Suggested change
const readOnly = storage?.readonly ? (
const readOnly = extendedPreview && (storage?.readonly ? (

client/src/features/dataConnectorsV2/components/DataConnectorsBoxListDisplay.tsx
<span className="fw-bold" data-cy="data-connector-name">
{name}
</span>
<div
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to take too much vertical space:
image

client/src/features/groupsV2/settings/GroupSettingsMetadata.tsx
errors={errors}
name="slug"

<PermissionsGuard
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be "delete" permission, to be checked.

client/src/features/groupsV2/show/GroupPageContainer.tsx
};
return (
<ContainerWrap className="position-relative">
<EntityWatermark type="group" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is broken at smaller viewports:
image

How to fix it:

<ContainerWrap> // remove "relative"
  <EntityWatermark type="group" />

With EntityWatermark being:

<div className="position-relative">
  <div className="position-absolute top-0 end-0">
     ...

@andre-code andre-code requested a review from leafty December 13, 2024 11:02
leafty
leafty previously approved these changes Dec 13, 2024
View reviewed changes
Copy link
Member

@leafty leafty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Base automatically changed from andrea/add-new-dashboard-layout to main December 16, 2024 14:32
@andre-code andre-code dismissed leafty’s stale review December 16, 2024 14:32

The base branch was changed.

@andre-code andre-code requested a review from leafty December 16, 2024 15:23
@andre-code andre-code changed the title feat: group page design feat: update group and user page design Dec 17, 2024
leafty
leafty approved these changes Dec 18, 2024
View reviewed changes
Copy link
Member

@leafty leafty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

This looks very nice @andre-code

@andre-code andre-code merged commit 987ee95 into main Dec 18, 2024
19 checks passed
@andre-code andre-code deleted the andrea/group-page branch December 18, 2024 09:48
@RenkuBot
Copy link
Contributor

Tearing down the temporary RenkuLab deplyoment for this PR.

leafty added a commit that referenced this pull request Apr 22, 2025
@andre-code @leafty
feat: update group and user page design (#3428)
acab5f6 
* minor: improve avatar component for Renku 2.0 (#3437)

fix #3441 
---------

Co-authored-by: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@leafty leafty leafty approved these changes

Assignees

@leafty leafty

Labels
ShapeUp
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@andre-code @RenkuBot @leafty