Skip to content

Commit 566cecb

Browse files
minjk-blminjk-bl
committed
layout renewal & add/run button for operation
1 parent 57cf275 commit 566cecb

7 files changed

Lines changed: 355 additions & 261 deletions

File tree

‎css/api_block/index.css‎

Lines changed: 108 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,54 @@
2020
.vp-apiblock-board-body {
2121
position: relative;
2222
overflow: hidden auto;
23-
height: 100%;
23+
height: calc(100% - 100px);
2424
}
2525

26+
.vp-apiblock-tab-container {
27+
28+
}
29+
30+
.vp-apiblock-tab-header {
31+
height: 40px;
32+
line-height: 40px;
33+
background: white;
34+
/* padding: 0px 20px; */
35+
36+
display: grid;
37+
grid-template-columns: repeat(2, 50%);
38+
}
39+
40+
.vp-apiblock-tab-button {
41+
display: inline-block;
42+
height: 40px;
43+
background: var(--light-gray-color);
44+
border: 0.25px solid #E4E4E4;
45+
text-align: center;
46+
font-weight: bold;
47+
}
48+
.vp-apiblock-tab-button.selected {
49+
color: var(--hightlight-color);
50+
background: white;
51+
border-bottom: 2px solid var(--hightlight-color);
52+
}
53+
.vp-apiblock-tab-button:hover {
54+
background: var(--light-gray-color);
55+
}
56+
57+
58+
.vp-apiblock-tab-box {
59+
height: calc(100% - 90px);
60+
}
61+
62+
2663
.vp-apiblock-left {
2764
/* padding: 1.5rem; */
2865
/* padding: 5px; */
2966
background-color: white;
3067

3168
/* 수정 */
32-
width: 200px;
69+
/* width: 200px; */
70+
width: 100%;
3371
height: 100%;
3472
overflow: hidden auto;
3573

@@ -38,12 +76,14 @@
3876

3977
.vp-apiblock-right {
4078
position: relative;
41-
margin-left: 5px;
42-
margin-right: 5px;
79+
/* margin-left: 5px;
80+
margin-right: 5px; */
4381

4482
/* min-width: 282px; */
4583
min-width: 265px;
4684

85+
height: 100%;
86+
4787
color: #000;
4888
background-size: 5px 5px;
4989
/* background-image: repeating-linear-gradient( to right, #F5F5F5 0, #F5F5F5 0.25px, transparent 1px, transparent 50px ), repeating-linear-gradient( to bottom, #F5F5F5 0, #F5F5F5 0.25px, transparent 1px, transparent 50px ); */
@@ -63,6 +103,11 @@
63103
.vp-menu-search-box {
64104
width: 100%;
65105
height: 30px;
106+
107+
border: 0.25px solid #E4E4E4;
108+
box-sizing: border-box;
109+
box-shadow: 2px 2px 1px rgb(0 0 0 / 10%);
110+
border-radius: 2px;
66111
}
67112

68113
.vp-menu-search-icon {
@@ -108,8 +153,8 @@
108153
}
109154
.vp-apiblock-menu-apps-grid {
110155
display: grid;
111-
grid-template-columns: repeat(3, 58px);
112-
grid-template-rows: repeat(3, 58px);
156+
grid-template-columns: repeat(auto-fill, 58px);
157+
grid-template-rows: repeat(auto-fill, 58px);
113158
grid-column-gap: 5px;
114159
grid-row-gap: 5px;
115160

@@ -176,7 +221,7 @@
176221
/* overflow: hidden auto; */
177222
/* padding: 1rem 0; */
178223
background-color: white;
179-
position: absolute;
224+
/* position: absolute; */
180225
right: 0px;
181226

182227
height: 100%;
@@ -185,6 +230,8 @@
185230
left: unset !important;
186231
z-index: 12;
187232

233+
margin-left: 5px;
234+
188235
border: 0.25px solid var(--border-gray-color);
189236
}
190237

@@ -259,7 +306,7 @@
259306
.vp-apiblock-option-buttons-container {
260307
position: sticky;
261308
bottom: 0;
262-
height: 52px;
309+
height: 50px;
263310
width: 100%;
264311
background: #FFFFFF;
265312
border-top: 0.25px solid #E4E4E4;
@@ -282,9 +329,46 @@
282329
right: 105px;
283330
}
284331

285-
.vp-apiblock-option-apply-button {
332+
/* .vp-apiblock-option-apply-button {
333+
top: 11px;
334+
right: 15px;
335+
} */
336+
.vp-apiblock-option-addrun-button {
286337
top: 11px;
287338
right: 15px;
339+
width: fit-content;
340+
height: 30px;
341+
background: #F38504;
342+
border-radius: 2px;
343+
}
344+
.vp-apiblock-option-run-button {
345+
display: inline-block;
346+
width: 60px;
347+
border-radius: 2px 0px 0px 2px;
348+
border-right: 0.25px solid white !important;
349+
}
350+
.vp-apiblock-option-detail-button {
351+
display: inline-block;
352+
width: 20px;
353+
border-radius: 0px 2px 2px 0px;
354+
}
355+
.vp-apiblock-option-detail-box {
356+
background: white;
357+
border: 0.25px solid var(--border-gray-color);
358+
position: absolute;
359+
bottom: 35px;
360+
right: 1px;
361+
width: 84px;
362+
height: 30px;
363+
text-align: center;
364+
line-height: 30px;
365+
}
366+
.vp-apiblock-option-detail-item {
367+
color: var(--font-primary);
368+
}
369+
.vp-apiblock-option-detail-item:hover {
370+
color: var(--font-hightlight);
371+
background: var(--light-gray-color);
288372
}
289373

290374
.vp-block-container {
@@ -351,23 +435,23 @@
351435
}
352436

353437
.vp-block-class-def {
354-
background-color: rgba(47, 133, 90, 0.2);
438+
/* background-color: rgba(47, 133, 90, 0.2); */
355439
}
356440

357441
.vp-block-control {
358-
background-color: rgba(246, 173, 85, 0.2);
442+
/* background-color: rgba(246, 173, 85, 0.2); */
359443
}
360444

361445
.vp-block-text div {
362446
white-space: normal;
363447
}
364448

365449
.vp-block-api {
366-
background-color: rgba(255, 165, 112, 0.2);
450+
/* background-color: rgba(255, 165, 112, 0.2); */
367451
}
368452
.vp-apiblock-tab-navigation-node-block-body-btn.api.vp-block-api {
369-
width: 100% !important;
370-
max-width: 130px !important;
453+
/* width: 100% !important;
454+
max-width: 130px !important; */
371455
overflow: hidden;
372456
text-overflow: ellipsis;
373457
}
@@ -417,7 +501,7 @@
417501
background-color:rgb(253, 239, 221);
418502
}
419503
.vp-block-blockcodelinetype-code {
420-
background-color: rgb(229, 229, 229);
504+
/* background-color: rgb(229, 229, 229); */
421505
}
422506

423507
.vp-block-name {
@@ -441,6 +525,7 @@
441525
.vp-apiblock-category {
442526
cursor: pointer;
443527
background: var(--light-gray-color);
528+
border-radius: 2px;
444529
/* padding: 7px 0px 7px 0px !important; */
445530
padding: 7px 7px !important; /* 수정 */
446531
margin-top: 5px;
@@ -489,7 +574,7 @@
489574
padding-left: 15px;
490575

491576
overflow: auto;
492-
height: calc(100% - 102px);
577+
height: calc(100% - 100px);
493578
}
494579

495580
.vp-apiblock-tab-navigation-node-block-title {
@@ -506,9 +591,11 @@
506591
.vp-apiblock-tab-navigation-node-block-body-btn {
507592

508593
position: relative;
509-
text-align: center;
594+
/* text-align: center; */
595+
596+
/* width: 130px; */
597+
width: 95%;
510598

511-
width: 130px;
512599

513600
padding: 0.25rem 0.5rem;
514601
z-index: 1000;
@@ -521,7 +608,7 @@
521608

522609
display: flex;
523610
flex-direction: row;
524-
justify-content: space-around;
611+
/* justify-content: space-around; */
525612

526613
color: #777;
527614
}
@@ -1295,8 +1382,8 @@
12951382

12961383
.vp-apiblock-board-button-container {
12971384
width: 100%;
1298-
height: 52px;
1299-
position: absolute;
1385+
height: 50px;
1386+
/* position: absolute; */
13001387
bottom: 0;
13011388
background: #FFFFFF;
13021389
border-top: 0.25px solid #E4E4E4;

‎css/component/common.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828

2929
.vp-button.cancel {
3030
background: #E5E5E5;
31+
border: 0px;
3132
}
3233
.vp-button.cancel:hover {
3334
background: #DEDEDE;
@@ -42,6 +43,7 @@
4243

4344
.vp-button.activated {
4445
background: #F38504;
46+
border: 0px;
4547
color: #FFFFFF;
4648
}
4749
.vp-button.activated:hover {
@@ -51,6 +53,7 @@
5153
.vp-button.disabled,
5254
.vp-button.disabled:hover {
5355
background: #E5E5E5;
56+
border: 0px;
5457
border: 0.25px solid #E4E4E4;
5558
color: #696969;
5659
cursor: not-allowed;

‎css/main.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -297,14 +297,14 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
297297
/* 헤더라인 */
298298
#vp_headerContainer {
299299
width: 100%;
300-
height: 45px;
300+
height: 50px;
301301
padding: 10px;
302302
text-align: right;
303303

304304
background-color: #FFFFFF;
305305
/* border-bottom: 0.25px solid #C4C4C4; */
306306

307-
border-left: 5px solid var(--border-gray-color);
307+
/* border-left: 5px solid var(--border-gray-color); */
308308
}
309309

310310
.vp-header {
@@ -361,7 +361,7 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
361361
background-image: url(../resource/more-2-line.png);
362362
width: 16px;
363363
height: 16px;
364-
margin: 4px 4px 0px 0px;
364+
margin: 7px 4px 0px 0px;
365365
background-repeat: no-repeat;
366366
background-size: contain;
367367
background-position: center;
@@ -421,7 +421,8 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
421421
/* 컨텐츠 영역 */
422422
.vp-main-container {
423423
width: 100%;
424-
height: calc(100% - 45px);
424+
/* height: calc(100% - 45px); */
425+
height: 100%;
425426
/* padding: 15px 15px 5px 15px; */
426427
overflow: auto;
427428
display: flex;
@@ -492,7 +493,7 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
492493
background-color: var(--border-gray-color);
493494
height: 100%;
494495

495-
padding-top: 5px;
496+
/* padding-top: 5px; */
496497
padding-left: 5px;
497498
}
498499

0 commit comments

Comments
 (0)