Skip to content

Commit b18f152

Browse files
shweta2101shweta2101
authored
Edit Project: Introduce SCSS variables for project edit styles (#92)
### Changes Implemented 1. Reduced excessive spacing and sizing on the project edit page to create a more compact layout. 2. Decreased the sidebar width and spacing between navigation options. 3. Tightened header, breadcrumb, content, card, button, avatar, and typography sizing. 4. Introduced descriptive SCSS variables for spacing, sizing, typography, border radii, and responsive values. 5. Replaced hard-coded values with the new SCSS variables for improved consistency and maintainability. 6. Reused Bootstrap variables such as $spacer and $font-size-base where applicable. 7. Updated mobile-specific header, title, and navigation sizing to use the new variables. 8. Kept all changes scoped to the project edit page. 9. No behavioral or data-flow changes were introduced. ### Areas for Testing 1. Verify the project edit page appears more compact on desktop screens. 2. Confirm the sidebar width and spacing between navigation options match the expected UX. 3. Test every section: - Project details - Instructions - Imagery - Team Members - Configuration - Actions ### Screenshot <img width="1470" height="956" alt="Screenshot 2026-07-20 at 1 53 33 PM" src="https://github.com/user-attachments/assets/2601ecde-598e-4c15-8918-42f474758b7b" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary - Added SCSS design variables to the project edit page and replaced hard-coded spacing, sizing, typography, and layout values. - Refined header, breadcrumbs, sidebar, content panels, cards, buttons, avatars, and footer dimensions. - Updated responsive mobile header, title, and navigation sizing. - Reused Bootstrap variables where applicable; no behavior or data-flow changes. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2 parents d1e69c0 + ea78f7b commit b18f152

1 file changed

Lines changed: 79 additions & 44 deletions

File tree

  • pages/workspace/[id]/projects/[projectId]

‎pages/workspace/[id]/projects/[projectId]/edit.vue‎

Lines changed: 79 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -849,6 +849,39 @@ function getInitial(value: string) {
849849
<style lang="scss" scoped>
850850
@import "~/assets/scss/theme.scss";
851851
852+
$project-edit-header-padding: 1.25rem 1.75rem 1.2rem;
853+
$project-edit-header-padding-mobile: 1.25rem 1rem;
854+
$project-edit-breadcrumb-gap: 0.45rem;
855+
$project-edit-breadcrumb-spacing: 0.75rem;
856+
$project-edit-nav-gap: 0.3rem;
857+
$project-edit-nav-padding: 1.25rem 1rem 1rem;
858+
$project-edit-nav-item-padding: 0.65rem 1rem;
859+
$project-edit-footer-padding: 1rem 1.25rem;
860+
$project-edit-content-padding: 1.5rem 2rem 2.25rem;
861+
$project-edit-card-padding: 1rem 1.1rem;
862+
$project-edit-row-padding: 0.9rem 1rem;
863+
$project-edit-sidebar-min-width: 14rem;
864+
$project-edit-sidebar-max-width: 19rem;
865+
$project-edit-content-max-width: 60rem;
866+
$project-edit-nav-item-min-height: 3rem;
867+
$project-edit-control-min-height: 2.75rem;
868+
$project-edit-save-min-width: 5rem;
869+
$project-edit-avatar-size: 2.5rem;
870+
$project-edit-avatar-font-size: 1.25rem;
871+
$project-edit-title-font-size: clamp(1.45rem, 1.8vw, 1.85rem);
872+
$project-edit-title-font-size-mobile: 1.5rem;
873+
$project-edit-heading-font-size: 1.05rem;
874+
$project-edit-body-font-size: 0.92rem;
875+
$project-edit-control-font-size: 0.95rem;
876+
$project-edit-small-font-size: 0.9rem;
877+
$project-edit-nav-radius: 0.7rem;
878+
$project-edit-card-radius: 0.75rem;
879+
$project-edit-panel-gap: 1.25rem;
880+
$project-edit-field-gap: 0.55rem;
881+
$project-edit-row-gap: 0.75rem;
882+
$project-edit-action-gap: 0.9rem;
883+
$project-edit-action-spacing: 1.5rem;
884+
852885
.project-edit-page {
853886
height: calc(100vh - #{$navbar-height});
854887
padding-top: 1rem !important;
@@ -867,17 +900,17 @@ function getInitial(value: string) {
867900
}
868901
869902
.project-edit-header {
870-
padding: 2rem 2.25rem 1.9rem;
903+
padding: $project-edit-header-padding;
871904
border-bottom: 1px solid rgba($text-navy, 0.08);
872905
}
873906
874907
.project-edit-breadcrumbs {
875908
display: flex;
876909
flex-wrap: wrap;
877-
gap: 0.55rem;
878-
margin-bottom: 1.2rem;
910+
gap: $project-edit-breadcrumb-gap;
911+
margin-bottom: $project-edit-breadcrumb-spacing;
879912
color: #757d98;
880-
font-size: 1rem;
913+
font-size: $project-edit-small-font-size;
881914
}
882915
883916
.project-edit-breadcrumbs a {
@@ -889,7 +922,7 @@ function getInitial(value: string) {
889922
margin: 0;
890923
color: #1a1e3d;
891924
font-family: var(--secondary-font-family);
892-
font-size: clamp(1.8rem, 2.4vw, 2.35rem);
925+
font-size: $project-edit-title-font-size;
893926
font-weight: 600;
894927
line-height: 1.15;
895928
letter-spacing: -0.03em;
@@ -899,7 +932,9 @@ function getInitial(value: string) {
899932
min-height: 0;
900933
flex: 1;
901934
display: grid;
902-
grid-template-columns: minmax(15rem, 25%) minmax(0, 1fr);
935+
grid-template-columns:
936+
minmax($project-edit-sidebar-min-width, $project-edit-sidebar-max-width)
937+
minmax(0, 1fr);
903938
}
904939
905940
.project-edit-sidebar {
@@ -913,23 +948,23 @@ function getInitial(value: string) {
913948
.project-edit-nav {
914949
min-height: 0;
915950
flex: 1;
916-
padding: 2rem 1.35rem 1.25rem;
951+
padding: $project-edit-nav-padding;
917952
display: grid;
918953
align-content: start;
919-
gap: 0.8rem;
954+
gap: $project-edit-nav-gap;
920955
overflow-y: auto;
921956
}
922957
923958
.project-edit-nav-item {
924-
min-height: 4.5rem;
925-
padding: 0.85rem 1.55rem;
959+
min-height: $project-edit-nav-item-min-height;
960+
padding: $project-edit-nav-item-padding;
926961
color: #29314f;
927-
font-size: 1.05rem;
962+
font-size: $project-edit-control-font-size;
928963
font-weight: 500;
929964
text-align: left;
930965
background: transparent;
931966
border: 0;
932-
border-radius: 1rem;
967+
border-radius: $project-edit-nav-radius;
933968
}
934969
935970
.project-edit-nav-item-active {
@@ -943,23 +978,23 @@ function getInitial(value: string) {
943978
align-items: center;
944979
justify-content: space-between;
945980
gap: 1rem;
946-
padding: 1.5rem 2rem 1.6rem;
981+
padding: $project-edit-footer-padding;
947982
border-top: 1px solid rgba($text-navy, 0.08);
948983
}
949984
950985
.project-edit-cancel {
951986
padding: 0;
952987
color: #505977;
953-
font-size: 1rem;
988+
font-size: $project-edit-control-font-size;
954989
font-weight: 600;
955990
text-decoration: none;
956991
}
957992
958993
.project-edit-save {
959-
min-width: 5.75rem;
960-
min-height: 3.2rem;
994+
min-width: $project-edit-save-min-width;
995+
min-height: $project-edit-control-min-height;
961996
color: #ffffff;
962-
font-size: 1.05rem;
997+
font-size: $project-edit-control-font-size;
963998
font-weight: 700;
964999
background: #4d158d;
9651000
border: 1px solid #4d158d;
@@ -984,13 +1019,13 @@ function getInitial(value: string) {
9841019
}
9851020
9861021
.project-edit-content-inner {
987-
max-width: 55rem;
988-
padding: 2.2rem 3rem 3rem;
1022+
max-width: $project-edit-content-max-width;
1023+
padding: $project-edit-content-padding;
9891024
}
9901025
9911026
.project-edit-panel {
9921027
display: grid;
993-
gap: 1.75rem;
1028+
gap: $project-edit-panel-gap;
9941029
}
9951030
9961031
.project-edit-panel-header {
@@ -1003,7 +1038,7 @@ function getInitial(value: string) {
10031038
.project-edit-action-copy h2 {
10041039
margin: 0;
10051040
color: #273156;
1006-
font-size: 1.2rem;
1041+
font-size: $project-edit-heading-font-size;
10071042
font-weight: 700;
10081043
}
10091044
@@ -1012,18 +1047,18 @@ function getInitial(value: string) {
10121047
.project-edit-action-copy p {
10131048
margin: 0;
10141049
color: #6d7494;
1015-
font-size: 0.98rem;
1050+
font-size: $project-edit-body-font-size;
10161051
line-height: 1.55;
10171052
}
10181053
10191054
.project-edit-field {
10201055
display: grid;
1021-
gap: 0.75rem;
1056+
gap: $project-edit-field-gap;
10221057
}
10231058
10241059
.project-edit-label {
10251060
color: #273156;
1026-
font-size: 1.1rem;
1061+
font-size: $font-size-base;
10271062
font-weight: 700;
10281063
}
10291064
@@ -1141,8 +1176,8 @@ function getInitial(value: string) {
11411176
width: 100%;
11421177
display: grid;
11431178
align-items: center;
1144-
gap: 0.9rem;
1145-
padding: 1.15rem 1.35rem;
1179+
gap: $project-edit-row-gap;
1180+
padding: $project-edit-row-padding;
11461181
background: #ffffff;
11471182
}
11481183
@@ -1222,13 +1257,13 @@ function getInitial(value: string) {
12221257
}
12231258
12241259
.project-edit-avatar {
1225-
width: 3rem;
1226-
height: 3rem;
1260+
width: $project-edit-avatar-size;
1261+
height: $project-edit-avatar-size;
12271262
display: inline-flex;
12281263
align-items: center;
12291264
justify-content: center;
12301265
color: #5a5574;
1231-
font-size: 1.5rem;
1266+
font-size: $project-edit-avatar-font-size;
12321267
background: linear-gradient(180deg, #f3dbfe, #e3d9ff);
12331268
border: 1px solid #dbc8f1;
12341269
border-radius: 999px;
@@ -1357,10 +1392,10 @@ function getInitial(value: string) {
13571392
.project-edit-message-card {
13581393
display: grid;
13591394
grid-template-columns: auto minmax(0, 1fr);
1360-
gap: 0.9rem;
1361-
padding: 1.35rem 1.45rem;
1395+
gap: $project-edit-row-gap;
1396+
padding: $project-edit-card-padding;
13621397
border: 1px solid rgba($text-navy, 0.08);
1363-
border-radius: 1rem;
1398+
border-radius: $project-edit-card-radius;
13641399
}
13651400
13661401
.project-edit-message-card-muted {
@@ -1372,8 +1407,8 @@ function getInitial(value: string) {
13721407
}
13731408
13741409
.project-edit-message-icon {
1375-
width: 3rem;
1376-
height: 3rem;
1410+
width: $project-edit-avatar-size;
1411+
height: $project-edit-avatar-size;
13771412
display: inline-flex;
13781413
align-items: center;
13791414
justify-content: center;
@@ -1394,14 +1429,14 @@ function getInitial(value: string) {
13941429
13951430
.project-edit-message-copy strong {
13961431
color: #273156;
1397-
font-size: 1rem;
1432+
font-size: $project-edit-control-font-size;
13981433
font-weight: 700;
13991434
}
14001435
14011436
.project-edit-message-copy p {
14021437
margin: 0;
14031438
color: #657091;
1404-
font-size: 0.98rem;
1439+
font-size: $project-edit-small-font-size;
14051440
line-height: 1.5;
14061441
}
14071442
@@ -1411,8 +1446,8 @@ function getInitial(value: string) {
14111446
14121447
.project-edit-action-block {
14131448
display: grid;
1414-
gap: 1.2rem;
1415-
padding-bottom: 2rem;
1449+
gap: $project-edit-action-gap;
1450+
padding-bottom: $project-edit-action-spacing;
14161451
border-bottom: 1px dashed rgba($text-navy, 0.18);
14171452
}
14181453
@@ -1423,13 +1458,13 @@ function getInitial(value: string) {
14231458
14241459
.project-edit-action-button {
14251460
width: fit-content;
1426-
min-height: 3.3rem;
1461+
min-height: $project-edit-control-min-height;
14271462
display: inline-flex;
14281463
align-items: center;
14291464
justify-content: center;
14301465
gap: 0.45rem;
1431-
padding-inline: 1.3rem;
1432-
font-size: 1rem;
1466+
padding-inline: $spacer;
1467+
font-size: $project-edit-control-font-size;
14331468
font-weight: 700;
14341469
opacity: 1;
14351470
}
@@ -1496,7 +1531,7 @@ function getInitial(value: string) {
14961531
}
14971532
14981533
.project-edit-nav-item {
1499-
min-height: 3.65rem;
1534+
min-height: $project-edit-nav-item-min-height;
15001535
}
15011536
15021537
.project-edit-sidebar-footer {
@@ -1551,11 +1586,11 @@ function getInitial(value: string) {
15511586
15521587
@include media-breakpoint-down(sm) {
15531588
.project-edit-header {
1554-
padding: 1.5rem 1rem;
1589+
padding: $project-edit-header-padding-mobile;
15551590
}
15561591
15571592
.project-edit-title {
1558-
font-size: 1.8rem;
1593+
font-size: $project-edit-title-font-size-mobile;
15591594
}
15601595
15611596
.project-edit-nav,

0 commit comments

Comments
 (0)