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

Merge pull request #2124 from penpot/3799-dashboard-rework

Browse source 
3799 dashboard rework
This commit is contained in:
Andrey Antukh 2022-08-03 11:06:52 +02:00 • committed by GitHub
commit f455580cf7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 180 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/resources/styles/common/dependencies/mixin.scss
View file

@ -8,21 +8,23 @@
/// This mixin allows you to add styles to a specific Media query inside the style selector specifying which Breaking Point you want to choose.
/// @group Mixins
/// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile).
@mixin bp($point) {
$bp-mobile: "(min-width: 720px)";
$bp-tablet: "(min-width: 1020px)";
$bp-desktop: "(min-width: 1366px)";
$bp-min-720: "(min-width: 720px)";
$bp-min-1020: "(min-width: 1020px)";
$bp-min-1366: "(min-width: 1366px)";
$bp-max-1366: "(max-width: 1366px)";
$bp-min-2556: "(min-width: 2556px)";
@mixin bp($point) {
@if $point == mobile {
@media #{$bp-desktop} {
@media #{$bp-min-720} {
@content;
}
} @else if $point == tablet {
@media #{$bp-tablet} {
@media #{$bp-min-1020} {
@content;
}
} @else if $point == desktop {
@media #{$bp-mobile} {
@media #{$bp-min-1366} {
@content;
}
}

4
frontend/resources/styles/main/layouts/main-layout.scss
View file

@ -14,17 +14,19 @@
background-color: $color-white;
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 40px 220px 1fr;
grid-template-columns: 40px 256px 1fr;
height: 100vh;
.dashboard-sidebar {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
padding: 1rem;
// overflow: hidden;
}
.dashboard-content {
grid-row: 1 / span 2;
padding: 1rem 1rem 0 0;
}
}

42
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -7,39 +7,37 @@
.dashboard-grid {
font-size: $fs14;
height: 100%;
overflow: hidden;
.grid-row {
display: flex;
flex-wrap: wrap;
display: grid;
width: 100%;
align-content: flex-start;
&.no-wrap {
flex-wrap: nowrap;
}
}
.grid-item {
align-items: center;
border: 2px solid lighten($color-gray-20, 13%);
border-radius: $br-small;
cursor: pointer;
display: flex;
flex-direction: column;
flex-shrink: 0;
height: 200px;
margin: $size-4;
max-width: 260px;
min-width: 260px;
flex: 1 0 260px;
height: 230px;
margin: $size-3 $size-4 $size-4 $size-2;
position: relative;
text-align: center;
width: 18%;
@media #{$bp-max-1366} {
height: 200px;
flex: 1 0 230px;
}
&:hover {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
.grid-item-th {
border: 2px solid $color-primary;
}
}
.grid-item-th {
border-radius: $br-small;
border: 2px solid lighten($color-gray-20, 15%);
text-align: initial;
}
@ -94,6 +92,7 @@
}
.item-info {
color: $color-gray-30;
display: flex;
flex-direction: column;
padding: $size-2;
@ -103,7 +102,7 @@
h3 {
border: 1px solid transparent;
color: $color-gray-60;
font-size: $fs14;
font-size: $fs16;
font-weight: 400;
overflow: hidden;
padding: 0;
@ -116,8 +115,8 @@
}
span.date {
color: $color-gray-20;
font-size: $fs12;
color: $color-gray-30;
font-size: $fs14;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
@ -181,7 +180,9 @@
}
&.selected {
border: 2px solid $color-primary;
.grid-item-th {
border: 2px solid $color-primary;
}
}
.project-th-actions {
@ -295,6 +296,7 @@
border-top-left-radius: $br-small;
border-top-right-radius: $br-small;
height: 70%;
max-height: 160px;
overflow: hidden;
position: relative;
width: 100%;

2
frontend/resources/styles/main/partials/dashboard-header.scss
View file

@ -80,7 +80,7 @@
color: $color-black;
display: flex;
flex-shrink: 0;
font-size: $fs18;
font-size: $fs22;
font-weight: 600;
z-index: 10;
}

3
frontend/resources/styles/main/partials/dashboard-sidebar.scss
View file

@ -403,9 +403,8 @@
@include animation(0, 0.2s, fadeInUp);
li {
height: 32px;
font-size: $fs14;
padding: 5px 10px;
padding: $size-2 $size-4;
svg {
fill: $color-gray-20;

68
frontend/resources/styles/main/partials/dashboard.scss
View file

@ -13,13 +13,17 @@
overflow-y: auto;
user-select: none;
&.no-bg {
background-color: transparent;
}
&.search {
margin-top: 10px;
}
}
.dashboard-project-row {
margin-bottom: $size-4;
margin-bottom: $size-5;
.project {
align-items: center;
@ -27,11 +31,41 @@
border-radius: $br-small;
display: flex;
flex-direction: row;
margin-left: $size-4;
justify-content: space-between;
align-items: center;
margin-top: $size-4;
padding: $size-1 $size-1 $size-1 $size-2;
width: fit-content;
width: 100%;
height: 40px;
.project-name-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 32px;
}
.show-more {
align-items: center;
color: $color-gray-30;
display: flex;
font-size: $fs14;
justify-content: space-between;
cursor: pointer;
.placeholder-icon {
transform: rotate(-90deg);
margin-left: 10px;
svg {
height: 14px;
width: 14px;
fill: $color-gray-30;
}
}
&:hover {
color: $color-primary-dark;
svg {
fill: $color-primary-dark;
}
}
}
.btn-secondary {
border: none;
@ -40,9 +74,9 @@
h2 {
cursor: pointer;
font-size: $fs14;
font-size: $fs18;
line-height: 1rem;
font-weight: 500;
font-weight: 600;
color: $color-black;
margin-right: $size-4;
}
@ -52,18 +86,27 @@
}
.info {
font-size: $fs14;
font-size: $fs16;
line-height: 1rem;
font-weight: unset;
color: $color-gray-30;
}
.project-actions {
display: none;
margin-left: $size-6;
.btn-small {
padding: $size-2;
margin: 0 $size-2;
}
}
.pin-icon {
cursor: pointer;
display: flex;
align-items: center;
margin-left: 40px;
margin-right: 10px;
margin-right: 14px;
svg {
width: 15px;
height: 15px;
@ -77,10 +120,17 @@
}
}
}
&:hover {
.project-actions {
display: flex;
}
}
}
.recent-files-row-title-info {
font-size: $fs14;
color: $color-gray-30;
line-height: 1rem;
font-size: $fs16;
}
.dashboard-table {