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 - Making the changes on tagged page to match figma design (#21256)

Browse source 
* Adding max width for gallery-summary

* changin card background color

* removing row from within the card

* matching the padding of gray card with figma design

* removing row and spaced row to avoid extra padding and adding doc-rows-container

* adding grid for templates and removing some old styling

* adding .recent-templates-container to add the padding and margins

* deleting a comment and adding img border radius for the thumbnail

* adding margin-bottom on recent-templates-container

* adding .gallery-tagged-title-container to match the figma padding and then a fix was needed for the width of the filters

* renaming gallery-tagged-title-container to gallery-tagged-container-spacing and re-using it for Related tags container

* making recent heading as heading-xl to match figma

* adding badge styling and its container styling via .gallery-tagged-template-tags-container

* making two classes out of this class .gallery-tagged-container-spacing to add the styling for the h2 heading

* adding margin-bottom to match figma style

* making class generic and using it at multiple places

* removing some extra code

* removing grid styling because after rebase the layout was fixed with col classes

* adding rows back

* adding h2 instead of h3 and making them heading-xl

* adapting some changes after merge conflicts

* removing duplicate classname after rebase

GitOrigin-RevId: d02a0b1e2784fd96d2af2326700829879dacc464
This commit is contained in:
Davinder Singh 2024-10-23 11:34:37 +01:00 committed by Copybot
parent 11cb7dc24c
commit 92a23b7e9d
2 changed files with 50 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -176,6 +176,10 @@
}
.card-gray-dark {
background-color: var(--neutral-20);
background-color: var(--neutral-10);
border-radius: var(--border-radius-base);
.card-body {
padding: var(--spacing-10) var(--spacing-09);
}
}

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

@ -12,6 +12,19 @@
.gallery {
margin-top: var(--spacing-10);
.gallery-tagged-container-spacing {
padding: 0 var(--spacing-09);
}
.gallery-tagged-tags-container-spacing {
padding: 0 var(--spacing-09);
margin-bottom: var(--spacing-16);
h2 {
margin-bottom: var(--spacing-09);
}
}
.filters {
float: right;
margin-bottom: var(--spacing-11);
@ -72,8 +85,23 @@
padding: 0;
margin: var(--spacing-16) auto;
h3 {
font-size: var(--font-size-08);
h2 {
@include heading-xl;
}
.doc-rows-container {
margin-top: var(--spacing-09);
}
}
.recent-templates-container {
padding: 0 var(--spacing-09);
margin-bottom: var(--spacing-16);
h2 {
margin-bottom: var(--spacing-09);
@include heading-xl;
}
}
@ -170,6 +198,21 @@
}
}
.related-tags-top-spacing {
margin-top: var(--spacing-16);
}
.gallery-tagged-template-tags-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-05);
.badge-content {
padding-left: var(--spacing-02);
padding-right: var(--spacing-02);
}
}
.pagination {
margin-top: var(--spacing-13);
}