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

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

@ -126,6 +126,7 @@ function WelcomeMessageCreateNewProjectDropdown({
return (
<BootstrapVersionSwitcher
bs3={
<div className="welcome-message-card-item">
<div
role="button"
tabIndex={0}
@ -162,7 +163,11 @@ function WelcomeMessageCreateNewProjectDropdown({
</button>
<button
onClick={e =>
handleDropdownItemClick(e, 'upload_project', 'upload-project')
handleDropdownItemClick(
e,
'upload_project',
'upload-project'
)
}
>
{t('upload_project')}
@ -202,9 +207,10 @@ function WelcomeMessageCreateNewProjectDropdown({
</div>
)}
</div>
</div>
}
bs5={
<Dropdown>
<Dropdown className="welcome-message-card-item">
<DropdownToggle
as={CustomDropdownToggle}
id="create-new-project-dropdown-toggle-btn"

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

@ -14,6 +14,7 @@ export default function WelcomeMessageLink({
onClick,
}: WelcomeMessageLinkProps) {
return (
<div className="welcome-message-card-item">
<a
href={href}
onClick={onClick}
@ -29,5 +30,6 @@ export default function WelcomeMessageLink({
aria-hidden="true"
/>
</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 {
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;
}
}
}

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

@ -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);
}
}
}