3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Dashboard respect ratio for thumbnails

Browse source
This commit is contained in:
alonso.torres 2023-12-01 11:59:06 +01:00
parent a4f32de9a1
commit 76a2f9bc8c
9 changed files with 57 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/app/main/ui/dashboard/grid.scss
View file

@ -6,17 +6,20 @@
@import "refactor/common-refactor.scss";
$thumbnail-default-width: $s-252; // Default width
$thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
.dashboard-grid {
font-size: $fs-14;
height: 100%;
overflow-y: auto;
overflow: hidden;
overflow-x: hidden;
}
.grid-row {
display: grid;
display: flex;
width: 100%;
padding: 0 $s-12;
gap: 24px;
}
.grid-item {
@ -24,9 +27,7 @@
cursor: pointer;
display: flex;
flex-direction: column;
flex: 1 0 $s-260;
height: $s-232;
margin: $s-12 $s-16 $s-16 $s-8;
margin: $s-12 0;
position: relative;
text-align: center;
@ -38,17 +39,16 @@
button {
background-color: transparent;
border: none;
}
@media #{$bp-max-1366} {
height: $s-200;
flex: 1 0 $s-232;
padding: 0 $s-6;
}
.grid-item-th {
border-radius: $br-4;
text-align: initial;
width: var(--th-width, #{$thumbnail-default-width});
height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
img {
object-fit: contain;
}
@ -58,7 +58,8 @@
border-radius: $br-4;
border: $br-2 solid $da-primary;
text-align: initial;
max-height: $s-160;
width: calc(var(--th-width) + $s-12);
height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
}
&.overlay {
@ -81,6 +82,7 @@
display: grid;
grid-template-columns: 1fr auto;
cursor: pointer;
max-width: var(--th-width, $thumbnail-default-width);
}
.item-info {
@ -261,8 +263,7 @@
background-size: auto 80%;
background-repeat: no-repeat;
height: $s-232;
max-height: $s-160;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
@ -294,7 +295,6 @@
.grid-item.project-th.library {
height: $s-612;
width: $s-300;
}
.grid-item-th.library {