github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-10-24 21:12:38 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #21102 from overleaf/as-gallery-row-styling

Browse source 
Update Gallery Item styling

GitOrigin-RevId: abe5cc73a3d2ea14bf2e02eefb89ccc4d99c020e
This commit is contained in:
Jessica Lawshe 2024-10-21 10:42:52 -05:00 committed by Copybot
parent 4fd0c41665
commit ab6ee04022
1 changed files with 18 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
View file

@ -91,50 +91,34 @@
@include body-lg; @include body-lg;
} }
@mixin text-overflow { @mixin line-clamp {
text-overflow: ellipsis; display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden; overflow: hidden;
white-space: nowrap;
} }
.gallery-container { .gallery-container {
width: 100%; --bs-gutter-y: var(--spacing-09);
.gallery-thumbnail { .thumbnail {
img { background-color: var(--bg-light-secondary);
border-radius: var(--border-radius-base); aspect-ratio: 1 / 1.414; // A4 Paper
} object-fit: contain;
}
&.use-column {
column-count: 3;
column-gap: var(--spacing-11);
}
&.use-percent {
margin: 0 -var(--spacing-08);
.gallery-thumbnail {
width: 33.3333%;
padding: 0 var(--spacing-08);
}
} }
} }
.gallery-thumbnail { .gallery-thumbnail {
display: inline-block; a {
margin: 0 0 var(--spacing-09); display: inline-block;
}
.thumbnail { .thumbnail {
border-radius: var(--border-radius-base);
box-shadow: 0 var(--spacing-01) var(--spacing-02) rgb(0 0 0 / 10%); box-shadow: 0 var(--spacing-01) var(--spacing-02) rgb(0 0 0 / 10%);
margin: 0 0 var(--spacing-08) 0; margin: 0 0 var(--spacing-08) 0;
padding: 0;
overflow: hidden;
width: 100%; width: 100%;
&.thumbnail-tag {
height: 100px;
}
} }
.caption { .caption {
@ -146,25 +130,21 @@
.caption-description { .caption-description {
color: var(--neutral-70); color: var(--neutral-70);
font-size: var(--font-size-03);
font-weight: 400;
line-height: var(--line-height-03);
@include text-overflow; @include line-clamp;
} }
.author-name { .author-name {
margin-top: var(--spacing-04); margin-top: var(--spacing-04);
color: var(--neutral-70); color: var(--neutral-70);
font-size: var(--font-size-03);
font-weight: 600; font-weight: 600;
line-height: var(--line-height-03);
} }
.gallery-list-item-title { .gallery-list-item-title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--spacing-04);
.badge-container { .badge-container {
display: flex; display: flex;
@ -179,11 +159,10 @@
.caption-title { .caption-title {
color: var(--neutral-90); color: var(--neutral-90);
font-size: var(--font-size-06);
font-weight: 600; font-weight: 600;
line-height: var(--line-height-05);
@include text-overflow; @include heading-md;
@include line-clamp;
} }
a, a,
@ -201,31 +180,4 @@
margin: 0 0 var(--spacing-06); margin: 0 0 var(--spacing-06);
} }
} }
@include media-breakpoint-down(lg) {
.gallery-container {
display: grid;
grid-template-columns: 50% 50%;
&.use-percent {
.gallery-thumbnail {
align-content: end;
width: 100%;
}
}
}
}
@include media-breakpoint-down(md) {
.gallery-container {
grid-template-columns: 100%;
&.use-percent {
.gallery-thumbnail {
padding-left: unset;
padding-right: unset;
}
}
}
}
} }