mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
[web] Make the welcome page cards all have the same widths (implementation 2) (#20570)
* 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
Copybot
parent
e61b157666
commit
d480faf60b
4 changed files with 121 additions and 87 deletions
|
|
@ -126,85 +126,91 @@ function WelcomeMessageCreateNewProjectDropdown({
|
|||
return (
|
||||
<BootstrapVersionSwitcher
|
||||
bs3={
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className="card welcome-message-card"
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<p>{t('create_a_new_project')}</p>
|
||||
<img
|
||||
className="welcome-message-card-img"
|
||||
src="/img/welcome-page/create-a-new-project.svg"
|
||||
aria-hidden="true"
|
||||
alt=""
|
||||
/>
|
||||
{showDropdown && (
|
||||
<div className="card create-new-project-dropdown">
|
||||
<button
|
||||
onClick={e =>
|
||||
handleDropdownItemClick(e, 'blank_project', 'blank-project')
|
||||
}
|
||||
>
|
||||
{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 && (
|
||||
<div className="welcome-message-card-item">
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className="card welcome-message-card"
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<p>{t('create_a_new_project')}</p>
|
||||
<img
|
||||
className="welcome-message-card-img"
|
||||
src="/img/welcome-page/create-a-new-project.svg"
|
||||
aria-hidden="true"
|
||||
alt=""
|
||||
/>
|
||||
{showDropdown && (
|
||||
<div className="card create-new-project-dropdown">
|
||||
<button
|
||||
onClick={e =>
|
||||
handleDropdownItemClick(e, 'blank_project', 'blank-project')
|
||||
}
|
||||
>
|
||||
{t('blank_project')}
|
||||
</button>
|
||||
<button
|
||||
onClick={e =>
|
||||
handleDropdownItemClick(
|
||||
e,
|
||||
'import_from_github',
|
||||
'import-from-github'
|
||||
'example_project',
|
||||
'example-project'
|
||||
)
|
||||
}
|
||||
>
|
||||
{t('import_from_github')}
|
||||
{t('example_project')}
|
||||
</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>
|
||||
)}
|
||||
<button
|
||||
onClick={e =>
|
||||
handleDropdownItemClick(
|
||||
e,
|
||||
'upload_project',
|
||||
'upload-project'
|
||||
)
|
||||
}
|
||||
>
|
||||
{t('upload_project')}
|
||||
</button>
|
||||
{isOverleaf && (
|
||||
<button
|
||||
onClick={e =>
|
||||
handleDropdownItemClick(
|
||||
e,
|
||||
'import_from_github',
|
||||
'import-from-github'
|
||||
)
|
||||
}
|
||||
>
|
||||
{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>
|
||||
}
|
||||
bs5={
|
||||
<Dropdown>
|
||||
<Dropdown className="welcome-message-card-item">
|
||||
<DropdownToggle
|
||||
as={CustomDropdownToggle}
|
||||
id="create-new-project-dropdown-toggle-btn"
|
||||
|
|
|
|||
|
|
@ -14,20 +14,22 @@ export default function WelcomeMessageLink({
|
|||
onClick,
|
||||
}: WelcomeMessageLinkProps) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
className="card welcome-message-card welcome-message-card-link"
|
||||
target={target || undefined}
|
||||
rel="noopener"
|
||||
>
|
||||
<p>{title}</p>
|
||||
<img
|
||||
className="welcome-message-card-img"
|
||||
src={imgSrc}
|
||||
alt={title}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</a>
|
||||
<div className="welcome-message-card-item">
|
||||
<a
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
className="card welcome-message-card welcome-message-card-link"
|
||||
target={target || undefined}
|
||||
rel="noopener"
|
||||
>
|
||||
<p>{title}</p>
|
||||
<img
|
||||
className="welcome-message-card-img"
|
||||
src={imgSrc}
|
||||
alt={title}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
border: 1px solid @neutral-20;
|
||||
border-radius: 16px;
|
||||
|
|
@ -115,6 +125,7 @@
|
|||
@media (min-width: @screen-md-min) {
|
||||
margin: 0 15px;
|
||||
height: 240px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -122,6 +133,8 @@
|
|||
}
|
||||
|
||||
.welcome-message-card-img {
|
||||
max-width: 100%;
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
@ -159,7 +172,7 @@
|
|||
}
|
||||
|
||||
> a {
|
||||
color: @ol-blue-gray-3;
|
||||
color: @gray-dark;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -179,7 +192,7 @@
|
|||
&,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: @ol-blue-gray-3;
|
||||
color: @gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,7 +115,6 @@
|
|||
justify-content: space-between;
|
||||
padding: var(--spacing-08) var(--spacing-06);
|
||||
margin: var(--spacing-05) 0;
|
||||
width: 280px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
|
@ -130,12 +129,26 @@
|
|||
}
|
||||
|
||||
.welcome-message-card-img {
|
||||
max-width: 100%;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
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 {
|
||||
transform: none !important;
|
||||
top: 100% !important;
|
||||
|
|
@ -156,7 +169,7 @@
|
|||
&,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $neutral-60;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue