Skip to content

Commit 76b6ffc

Browse files
dedywahyudidedywahyudi
committed
fix: 48 - all & open project
1 parent b6dd81d commit 76b6ffc

File tree

5 files changed

+474
-48
lines changed

5 files changed

+474
-48
lines changed

‎web/css/reskin-or/reskin.css

Lines changed: 250 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ body {
125125
}
126126

127127
.webHeader a {
128-
color: #fff !important;
128+
color: #fff !important;
129129
text-decoration: none !important;
130130
}
131131

@@ -153,12 +153,12 @@ body {
153153
}
154154

155155
.mainTabs a {
156-
color: #555555 !important;
156+
color: #555555 !important;
157157
text-decoration: none !important;
158158
}
159159

160160
.mainTabs strong {
161-
color: #2a2a2a !important;
161+
color: #2a2a2a !important;
162162
text-decoration: none !important;
163163
font-weight: 700;
164164
}
@@ -172,17 +172,19 @@ body {
172172
}
173173

174174
.content {
175-
margin: 0 32px;
175+
margin: 0;
176+
padding-bottom: 48px;
176177
}
177178

178179
.content__inner {
179180
display: block;
180181
margin: 0 auto;
181182
max-width: var(--screen-max);
183+
padding: 0 32px;
182184
}
183185

184186
.projectInfo {
185-
margin-bottom: -12px;
187+
margin-bottom: -12px;
186188
}
187189

188190
.projectInfo__projectName {
@@ -243,7 +245,7 @@ body {
243245
text-transform: uppercase;
244246

245247
color: var(--turq-160);
246-
248+
247249
display: flex;
248250
column-gap: 24px;
249251
align-items: center;
@@ -443,7 +445,8 @@ body {
443445
.webFooter {
444446
border-top: 1px solid #e9e9e9;
445447
height: var(--footer-height);
446-
position: sticky;
448+
width: 100%;
449+
position: fixed;
447450
bottom: 0;
448451
z-index: 999;
449452
background-color: #fff;
@@ -480,7 +483,7 @@ body {
480483
}
481484

482485
.webFooter a {
483-
color: #2a2a2a !important;
486+
color: #2a2a2a !important;
484487
text-decoration: none !important;
485488
}
486489

@@ -531,7 +534,8 @@ body {
531534
.timelineTable__header th,
532535
.phasesTable__header th,
533536
.prizesTable__header th,
534-
.resourcesTable__header th {
537+
.resourcesTable__header th,
538+
.projectListTable__header th {
535539
height: 30px;
536540
background: var(--black-5);
537541
font-family: 'Barlow';
@@ -545,27 +549,34 @@ body {
545549
padding: 0 16px;
546550
}
547551

552+
.projectListTable__header th {
553+
color: var(--black-80);
554+
}
555+
548556
.myInfoTable__header th:first-child,
549557
.timelineTable__header--left th:first-child,
550558
.phasesTable__header th:first-child,
551559
.prizesTable__header th:first-child,
552-
.resourcesTable__header th:first-child {
553-
border-top-left-radius: 8px;
560+
.resourcesTable__header th:first-child,
561+
.projectListTable__header th:first-child {
562+
border-top-left-radius: 8px;
554563
}
555564

556565
.myInfoTable__header th:last-child,
557566
.timelineTable__header--right th:last-child,
558567
.phasesTable__header th:last-child,
559568
.prizesTable__header th:last-child,
560-
.resourcesTable__header th:last-child {
569+
.resourcesTable__header th:last-child,
570+
.projectListTable__header th:last-child {
561571
border-top-right-radius: 8px;
562572
}
563573

564574
.myInfoTable__body td,
565575
.timelineTable__body td,
566576
.phasesTable__body td,
567577
.resourcesTable__body td,
568-
.prizesTable__body td {
578+
.prizesTable__body td,
579+
.projectListTable__body td {
569580
height: 56px;
570581
font-family: 'Roboto';
571582
font-style: normal;
@@ -577,6 +588,79 @@ body {
577588
border-top: 2px solid var(--black-10);
578589
}
579590

591+
.projectList__inner {
592+
margin-bottom: 32px;
593+
}
594+
595+
.projectListTable__body {
596+
vertical-align: top;
597+
}
598+
599+
.projectListTable__body td {
600+
padding: 16px;
601+
margin-bottom: 16px;
602+
}
603+
604+
.projectListTable__body td.challengeName {
605+
min-width: calc(0.395 * var(--screen-max));
606+
max-width: calc(0.395 * var(--screen-max));
607+
padding-top: 26px;
608+
}
609+
610+
.projectListTable__body td.challengeName.my {
611+
min-width: calc(0.28 * var(--screen-max));
612+
max-width: calc(0.28 * var(--screen-max));
613+
}
614+
615+
.projectListTable__body td.challengeName div {
616+
display: flex;
617+
flex-direction: column;
618+
width: 100%;
619+
white-space: normal !important;
620+
}
621+
622+
.projectListTable__body td.challengeName span {
623+
font-family: 'Roboto', sans-serif;
624+
font-style: normal;
625+
font-weight: 700;
626+
font-size: 12px;
627+
line-height: 22px;
628+
text-transform: uppercase;
629+
color: var(--black-60);
630+
text-align: left;
631+
letter-spacing: 1px;
632+
}
633+
634+
.projectListTable__body td.noChallenges {
635+
height: 550px;
636+
font-size: 24px;
637+
font-weight: 400;
638+
color: #000000;
639+
vertical-align: middle;
640+
text-align: center;
641+
}
642+
643+
.projectListTable__body tr:last-child td {
644+
border-bottom: 2px solid var(--black-10);
645+
}
646+
647+
.projectListPagination {
648+
display: flex;
649+
justify-content: space-between;
650+
margin-top: 24px;
651+
margin-bottom: 0px
652+
}
653+
654+
.projectListPagination div {
655+
font-family: 'Roboto';
656+
font-style: normal;
657+
font-weight: 500;
658+
font-size: 14px;
659+
line-height: 22px;
660+
color: var(--black-100);
661+
padding: 0;
662+
}
663+
580664
.myInfoTable th {
581665
width: 50%;
582666
}
@@ -607,7 +691,9 @@ body {
607691
.timelineTable a:hover,
608692
.phasesTable a,
609693
.projectDetailsGrid a,
610-
.resourcesTable a {
694+
.resourcesTable a,
695+
.projectListTable a,
696+
.projectListTable a:hover {
611697
color: var(--link-blue-dark);
612698
text-decoration: none !important;
613699
}
@@ -723,3 +809,153 @@ body {
723809
.projectDetailsGrid {
724810
border-top: 2px solid var(--black-10);
725811
}
812+
813+
.custom-select-container {
814+
font-family:'Roboto';
815+
max-width: 326px;
816+
max-height: 62px;
817+
margin-bottom: 24px;
818+
}
819+
820+
.custom-select-container *:after,
821+
.custom-select-container *:before {
822+
box-sizing: border-box;
823+
}
824+
825+
.custom-select-wrapper {
826+
position: relative;
827+
user-select: none;
828+
width: 100%;
829+
}
830+
831+
.custom-select {
832+
display: flex;
833+
flex-direction: column;
834+
border: solid 1px var(--black-40);
835+
border-radius: 4px;
836+
padding-top: 8px;
837+
}
838+
839+
.custom-select:hover {
840+
border-color: var(--turq-160);
841+
cursor: pointer;
842+
}
843+
844+
.custom-select.open {
845+
border-color: var(--turq-160);
846+
}
847+
848+
.custom-select__label {
849+
font-weight: 500;
850+
font-size: 11px;
851+
line-height: 10px;
852+
color: var(--turq-160);
853+
margin-left: 10px;
854+
}
855+
856+
.custom-select__trigger {
857+
position: relative;
858+
display: flex;
859+
align-items: center;
860+
justify-content: space-between;
861+
margin-top: 1px;
862+
padding: 0 10px;
863+
font-size: 14px;
864+
font-weight: 300;
865+
color: var(--black-100);
866+
height: 27px;
867+
line-height: 22px;
868+
background: none;
869+
cursor: pointer;
870+
width: 100%;
871+
border: none;
872+
}
873+
874+
.custom-options {
875+
position: absolute;
876+
display: block;
877+
top: 104%;
878+
left: 0;
879+
right: 0;
880+
border: 1px solid var(--black-40);
881+
background: var(--tc-white);
882+
opacity: 0;
883+
visibility: hidden;
884+
pointer-events: none;
885+
z-index: 2;
886+
border-radius: 4px;
887+
max-height: 250px;
888+
overflow: auto;
889+
}
890+
891+
.custom-select.open .custom-options {
892+
opacity: 1;
893+
visibility: visible;
894+
pointer-events: all;
895+
z-index:9999;
896+
}
897+
898+
.custom-option {
899+
position: relative;
900+
display: block;
901+
padding: 8px 16px;
902+
font-size: 16px;
903+
font-weight: 400;
904+
color: var(--black-100);
905+
line-height: 24px;
906+
cursor: pointer;
907+
transition: all 0.5s;
908+
}
909+
910+
.custom-option:not(.group):hover {
911+
cursor: pointer;
912+
color: var(--tc-white);
913+
background-color: var(--turq-160);
914+
}
915+
916+
.custom-option.group {
917+
cursor: default;
918+
font-weight: 500;
919+
}
920+
921+
.custom-option.group:hover {
922+
background: none;
923+
}
924+
925+
.custom-option.selected {
926+
font-weight: 700;
927+
font-size: 16px;
928+
line-height: 24px;
929+
color: var(--black-100);
930+
}
931+
932+
.custom-option.selected:not(.group):hover {
933+
color: var(--tc-white);
934+
}
935+
936+
.arrow {
937+
position: relative;
938+
height: 7px;
939+
width: 7px;
940+
}
941+
942+
.arrow::before,
943+
.arrow::after {
944+
content: "";
945+
position: absolute;
946+
bottom: 0px;
947+
width: 0.09rem;
948+
height: 100%;
949+
}
950+
951+
.arrow::before {
952+
left: -2px;
953+
transform: rotate(-45deg);
954+
background-color: var(--turq-160);
955+
}
956+
957+
.arrow::after {
958+
left: 2px;
959+
transform: rotate(45deg);
960+
background-color: var(--turq-160);
961+
}

0 commit comments

Comments
 (0)