github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

[web] Make the welcome page cards all have the same widths (implementation 2) (#20570)

Browse source 
* welcome page adjusted columns in BS5

* [web] Fix card color

* [web] Fixup card width in BS3

* [web] Fix lint

* [web] Fix cards text color in BS3

* [web] Fix cards positioning in BS3

* [web] Prevent cards from becoming too large on big screens

---------

Co-authored-by: Ilkin Ismailov <ilkin.ismailov@overleaf.com>
GitOrigin-RevId: 9b91c073a62dae7cad4402908a34f9880ecdb0ac
This commit is contained in:
Antoine Clausse 2024-09-25 12:09:42 +02:00 committed by Copybot
parent e61b157666
commit d480faf60b
4 changed files with 121 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx
View file

@ -126,85 +126,91 @@ function WelcomeMessageCreateNewProjectDropdown({
return ( return (
<BootstrapVersionSwitcher <BootstrapVersionSwitcher
bs3={ bs3={
<div <div className="welcome-message-card-item">
role="button" <div
tabIndex={0} role="button"
className="card welcome-message-card" tabIndex={0}
onClick={handleClick} className="card welcome-message-card"
onKeyDown={handleKeyDown} onClick={handleClick}
> onKeyDown={handleKeyDown}
<p>{t('create_a_new_project')}</p> >
<img <p>{t('create_a_new_project')}</p>
className="welcome-message-card-img" <img
src="/img/welcome-page/create-a-new-project.svg" className="welcome-message-card-img"
aria-hidden="true" src="/img/welcome-page/create-a-new-project.svg"
alt="" aria-hidden="true"
/> alt=""
{showDropdown && ( />
<div className="card create-new-project-dropdown"> {showDropdown && (
<button <div className="card create-new-project-dropdown">
onClick={e => <button
handleDropdownItemClick(e, 'blank_project', 'blank-project') onClick={e =>
} handleDropdownItemClick(e, 'blank_project', 'blank-project')
> }
{t('blank_project')} >
</button> {t('blank_project')}
<button </button>
onClick={e =>
handleDropdownItemClick(
e,
'example_project',
'example-project'
)
}
>
{t('example_project')}
</button>
<button
onClick={e =>
handleDropdownItemClick(e, 'upload_project', 'upload-project')
}
>
{t('upload_project')}
</button>
{isOverleaf && (
<button <button
onClick={e => onClick={e =>
handleDropdownItemClick( handleDropdownItemClick(
e, e,
'import_from_github', 'example_project',
'import-from-github' 'example-project'
) )
} }
> >
{t('import_from_github')} {t('example_project')}
</button> </button>
)} <button
{portalTemplates.length > 0 ? ( onClick={e =>
<> handleDropdownItemClick(
<hr /> e,
<div className="dropdown-header"> 'upload_project',
{t('institution_templates')} 'upload-project'
</div> )
{portalTemplates?.map((portalTemplate, index) => ( }
<a >
key={`portal-template-${index}`} {t('upload_project')}
href={`${portalTemplate.url}#templates`} </button>
onClick={e => {isOverleaf && (
handlePortalTemplateClick(e, portalTemplate.name) <button
} onClick={e =>
> handleDropdownItemClick(
{portalTemplate.name} e,
</a> 'import_from_github',
))} 'import-from-github'
</> )
) : null} }
</div> >
)} {t('import_from_github')}
</button>
)}
{portalTemplates.length > 0 ? (
<>
<hr />
<div className="dropdown-header">
{t('institution_templates')}
</div>
{portalTemplates?.map((portalTemplate, index) => (
<a
key={`portal-template-${index}`}
href={`${portalTemplate.url}#templates`}
onClick={e =>
handlePortalTemplateClick(e, portalTemplate.name)
}
>
{portalTemplate.name}
</a>
))}
</>
) : null}
</div>
)}
</div>
</div> </div>
} }
bs5={ bs5={
<Dropdown> <Dropdown className="welcome-message-card-item">
<DropdownToggle <DropdownToggle
as={CustomDropdownToggle} as={CustomDropdownToggle}
id="create-new-project-dropdown-toggle-btn" id="create-new-project-dropdown-toggle-btn"

32
services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-link.tsx
View file

@ -14,20 +14,22 @@ export default function WelcomeMessageLink({
onClick, onClick,
}: WelcomeMessageLinkProps) { }: WelcomeMessageLinkProps) {
return ( return (
<a <div className="welcome-message-card-item">
href={href} <a
onClick={onClick} href={href}
className="card welcome-message-card welcome-message-card-link" onClick={onClick}
target={target || undefined} className="card welcome-message-card welcome-message-card-link"
rel="noopener" target={target || undefined}
> rel="noopener"
<p>{title}</p> >
<img <p>{title}</p>
className="welcome-message-card-img" <img
src={imgSrc} className="welcome-message-card-img"
alt={title} src={imgSrc}
aria-hidden="true" alt={title}
/> aria-hidden="true"
</a> />
</a>
</div>
) )
} }

17
services/web/frontend/stylesheets/app/project-list-react.less
View file

@ -98,6 +98,16 @@
} }
} }
.welcome-message-card-item {
display: flex;
flex: 1;
flex-direction: column;
@media (min-width: @screen-md-min) {
flex: 0 1 310px;
}
}
.welcome-message-card { .welcome-message-card {
border: 1px solid @neutral-20; border: 1px solid @neutral-20;
border-radius: 16px; border-radius: 16px;
@ -115,6 +125,7 @@
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
margin: 0 15px; margin: 0 15px;
height: 240px; height: 240px;
width: auto;
} }
&:hover { &:hover {
@ -122,6 +133,8 @@
} }
.welcome-message-card-img { .welcome-message-card-img {
max-width: 100%;
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -159,7 +172,7 @@
} }
> a { > a {
color: @ol-blue-gray-3; color: @gray-dark;
display: block; display: block;
&:hover { &:hover {
@ -179,7 +192,7 @@
&, &,
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: @ol-blue-gray-3; color: @gray-dark;
} }
} }
} }

17
services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
View file

@ -115,7 +115,6 @@
justify-content: space-between; justify-content: space-between;
padding: var(--spacing-08) var(--spacing-06); padding: var(--spacing-08) var(--spacing-06);
margin: var(--spacing-05) 0; margin: var(--spacing-05) 0;
width: 280px;
height: 200px; height: 200px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -130,12 +129,26 @@
} }
.welcome-message-card-img { .welcome-message-card-img {
max-width: 100%;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
margin-bottom: var(--spacing-07); margin-bottom: var(--spacing-07);
} }
} }
} }
.welcome-message-card-item {
display: flex;
flex: 1;
flex-direction: column;
width: 280px;
@include media-breakpoint-up(lg) {
flex: 0 1 312px;
width: auto;
}
}
.create-new-project-dropdown { .create-new-project-dropdown {
transform: none !important; transform: none !important;
top: 100% !important; top: 100% !important;
@ -156,7 +169,7 @@
&, &,
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: $neutral-60; color: var(--bs-body-color);
} }
} }
} }