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

Gallery redesign - Top pick cards section on tagged page redesign (#20924)

Browse source 
Top pick card design on tagged gallery page

GitOrigin-RevId: fcc3633c8a99961ce97639c50b89b4221e40089e
This commit is contained in:
Davinder Singh 2024-10-11 11:52:09 +01:00 committed by Copybot
parent d71f82b1fa
commit ba0de4f1e9
3 changed files with 157 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
services/web/frontend/stylesheets/bootstrap-5/components/card.scss
View file

@ -174,3 +174,8 @@
.card-gray {
background-color: var(--neutral-10);
}
.card-gray-dark {
background-color: var(--neutral-20);
border-radius: var(--border-radius-base);
}

1
services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
View file

@ -23,3 +23,4 @@
@import 'editor/tags-input';
@import 'website-redesign';
@import 'group-settings';
@import 'templates-v2';

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

@ -0,0 +1,151 @@
.gallery {
margin-top: var(--spacing-10);
.top-picks-banner.container {
padding: 0;
margin: var(--spacing-16) auto;
}
.top-picks-banner {
// padding: var(--spacing-16) 90px;
// width: 100%;
h3 {
font-size: var(--font-size-08);
}
}
@mixin text-overflow {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gallery-container {
width: 100%;
.gallery-thumbnail {
img {
border-radius: var(--border-radius-base);
}
}
&.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 {
display: inline-block;
margin: 0 0 var(--spacing-09);
.thumbnail {
box-shadow: 0 var(--spacing-01) var(--spacing-02) rgb(0 0 0 / 10%);
margin: 0 0 var(--spacing-08) 0;
padding: 0;
overflow: hidden;
width: 100%;
&.thumbnail-tag {
height: 100px;
}
}
.caption {
// Override Server Pro template styles
background: none;
border: none;
margin-top: var(--spacing-04);
}
.caption-description {
color: var(--neutral-70);
font-size: var(--font-size-03);
font-weight: 400;
line-height: var(--line-height-03);
@include text-overflow;
}
.author-name {
margin-top: var(--spacing-04);
color: var(--neutral-70);
font-size: var(--font-size-03);
font-weight: 600;
line-height: var(--line-height-03);
}
.gallery-list-item-title {
display: flex;
align-items: center;
justify-content: space-between;
.badge-container {
display: flex;
gap: var(--spacing-04);
}
* {
flex-basis: content;
cursor: inherit;
}
}
.caption-title {
color: var(--neutral-90);
font-size: var(--font-size-06);
font-weight: 600;
line-height: var(--line-height-05);
@include text-overflow;
}
a,
a:hover {
text-decoration: none;
}
}
.popular-tags {
.gallery-thumbnail {
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;
}
}
}
}
}