Skip to content

Commit 13d9212

Browse files
minjk-blminjk-bl
committed
#43 - apps menu on the left menu box
1 parent e1dd90e commit 13d9212

2 files changed

Lines changed: 84 additions & 74 deletions

File tree

‎css/api_block/index.css‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
.vp-apiblock-left {
2727
/* padding: 1.5rem; */
28-
padding: 5px; /* 수정 */
28+
/* padding: 5px; */
2929
background-color: white;
3030

3131
/* 수정 */
@@ -54,8 +54,10 @@
5454

5555
.vp-apiblock-menu-search-container {
5656
position: relative;
57-
display: inline-block;
58-
width: 160px;
57+
/* display: inline-block;
58+
width: 160px; */
59+
padding: 10px 5px;
60+
border-bottom: 0.25px solid var(--border-gray-color);
5961
}
6062

6163
.vp-menu-search-box {
@@ -66,8 +68,8 @@
6668
.vp-menu-search-icon {
6769
position: absolute;
6870
color: #C4C4C4;
69-
right: 7px;
70-
top: 7px;
71+
right: 12px;
72+
top: 17px;
7173
}
7274

7375
.vp-apiblock-menu-apps {
@@ -106,20 +108,24 @@
106108
}
107109
.vp-apiblock-menu-apps-grid {
108110
display: grid;
109-
grid-template-columns: 65px 65px 65px 65px;
110-
grid-template-rows: 65px 65px 65px 65px;
111+
grid-template-columns: repeat(3, 58px);
112+
grid-template-rows: repeat(3, 58px);
111113
grid-column-gap: 5px;
112114
grid-row-gap: 5px;
115+
116+
margin: 10px 0px;
113117
}
114118
.vp-apiblock-menu-apps-item {
115-
width: 65px;
116-
height: 65px;
119+
width: 58;
120+
height: 58px;
117121
text-align: center;
118122
border: 0.25px solid #C4C4C4;
119123
box-sizing: border-box;
120124
box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
121125
border-radius: 2px;
122126
padding: 12px 0px;
127+
128+
cursor: pointer;
123129
}
124130
.vp-apiblock-menu-apps-item.line1 {
125131
background: #F9B52A;
@@ -139,7 +145,7 @@
139145
}
140146
.vp-apiblock-menu-apps-name {
141147
color: #FFFFFF;
142-
font-size: 12px;
148+
font-size: 11px;
143149
}
144150

145151
.vp-apiblock-menu-box {
@@ -162,6 +168,10 @@
162168
color: white;
163169
}
164170

171+
.vp-apiblock-tab-navigation-body {
172+
padding: 0px 5px;
173+
}
174+
165175
.vp-apiblock-option-tab {
166176
/* overflow: hidden auto; */
167177
/* padding: 1rem 0; */

‎src/api_block/index.html‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -13,69 +13,6 @@
1313
<input id="vp_menuSearchBox" class="vp-menu-search-box" type="text" placeholder="Search"/>
1414
<i class="fa fa-search vp-menu-search-icon"></i>
1515
</div>
16-
<div class="vp-apiblock-menu-apps">
17-
<img id="vp_menuApps" title="Apps" src="/nbextensions/visualpython/resource/apps/apps.svg">
18-
<div id="vp_menuAppsContainer" class="vp-apiblock-menu-apps-container">
19-
<div class="vp-apiblock-menu-apps-title">
20-
Functional Apps
21-
</div>
22-
<div class="vp-apiblock-menu-apps-grid">
23-
<div class="vp-apiblock-menu-apps-item line1" data-menu="import">
24-
<img src="/nbextensions/visualpython/resource/apps/apps_import.svg">
25-
<div class="vp-apiblock-menu-apps-name">Import</div>
26-
</div>
27-
<div class="vp-apiblock-menu-apps-item line1" data-menu="markdown">
28-
<img src="/nbextensions/visualpython/resource/apps/apps_markdown.svg">
29-
<div class="vp-apiblock-menu-apps-name">Markdown</div>
30-
</div>
31-
<div class="vp-apiblock-menu-apps-item line1" data-menu="variable">
32-
<img src="/nbextensions/visualpython/resource/apps/apps_variable.svg">
33-
<div class="vp-apiblock-menu-apps-name">Variable</div>
34-
</div>
35-
<div class="vp-apiblock-menu-apps-item line1" data-menu="snippets">
36-
<img src="/nbextensions/visualpython/resource/apps/apps_snippets.svg">
37-
<div class="vp-apiblock-menu-apps-name">Snippets</div>
38-
</div>
39-
<div class="vp-apiblock-menu-apps-item line2" data-menu="file">
40-
<img src="/nbextensions/visualpython/resource/apps/apps_file.svg">
41-
<div class="vp-apiblock-menu-apps-name">File</div>
42-
</div>
43-
<div class="vp-apiblock-menu-apps-item line2" data-menu="instance">
44-
<img src="/nbextensions/visualpython/resource/apps/apps_instance.svg">
45-
<div class="vp-apiblock-menu-apps-name">Instance</div>
46-
</div>
47-
<div class="vp-apiblock-menu-apps-item line2" data-menu="subset">
48-
<img src="/nbextensions/visualpython/resource/apps/apps_subset.svg">
49-
<div class="vp-apiblock-menu-apps-name">Subset</div>
50-
</div>
51-
<div class="vp-apiblock-menu-apps-item line2" data-menu="frame">
52-
<img src="/nbextensions/visualpython/resource/apps/apps_frame.svg">
53-
<div class="vp-apiblock-menu-apps-name">Frame</div>
54-
</div>
55-
<div class="vp-apiblock-menu-apps-item line3" data-menu="chart">
56-
<img src="/nbextensions/visualpython/resource/apps/apps_chart.svg">
57-
<div class="vp-apiblock-menu-apps-name">Chart</div>
58-
</div>
59-
<div class="vp-apiblock-menu-apps-item preparing" data-menu="merge">
60-
<img src="/nbextensions/visualpython/resource/apps/apps_merge.svg">
61-
<div class="vp-apiblock-menu-apps-name">Merge</div>
62-
</div>
63-
<div class="vp-apiblock-menu-apps-item preparing" data-menu="groupby">
64-
<img src="/nbextensions/visualpython/resource/apps/apps_groupby.svg">
65-
<div class="vp-apiblock-menu-apps-name">Groupby</div>
66-
</div>
67-
<div class="vp-apiblock-menu-apps-item preparing" data-menu="reshape">
68-
<img src="/nbextensions/visualpython/resource/apps/apps_reshape.svg">
69-
<div class="vp-apiblock-menu-apps-name">Reshape</div>
70-
</div>
71-
<div class="vp-apiblock-menu-apps-item preparing" data-menu="timeseries">
72-
<img src="/nbextensions/visualpython/resource/apps/apps_timeseries.svg">
73-
<div class="vp-apiblock-menu-apps-name">TimeSeries</div>
74-
</div>
75-
76-
</div>
77-
</div>
78-
</div>
7916

8017
<div class="vp-apiblock-tab-navigation-body
8118
vp-apiblock-tab-navigation-body-1">
@@ -86,6 +23,69 @@
8623
style='padding-left: 0px;'>
8724

8825
<div class='vp-block-blocktab-name-title
26+
vp-apiblock-category vp-apiblock-blocktab-apps
27+
vp-accordion-caption'
28+
data-category="apps">Apps
29+
</div>
30+
<div class="vp-block-group-box vp-block-group-box-apps">
31+
<div class="vp-apiblock-menu-apps-grid">
32+
<div class="vp-apiblock-menu-apps-item line1" data-menu="import">
33+
<img src="/nbextensions/visualpython/resource/apps/apps_import.svg">
34+
<div class="vp-apiblock-menu-apps-name">Import</div>
35+
</div>
36+
<div class="vp-apiblock-menu-apps-item line1" data-menu="markdown">
37+
<img src="/nbextensions/visualpython/resource/apps/apps_markdown.svg">
38+
<div class="vp-apiblock-menu-apps-name">Markdown</div>
39+
</div>
40+
<div class="vp-apiblock-menu-apps-item line1" data-menu="variable">
41+
<img src="/nbextensions/visualpython/resource/apps/apps_variable.svg">
42+
<div class="vp-apiblock-menu-apps-name">Variable</div>
43+
</div>
44+
<div class="vp-apiblock-menu-apps-item line2" data-menu="snippets">
45+
<img src="/nbextensions/visualpython/resource/apps/apps_snippets.svg">
46+
<div class="vp-apiblock-menu-apps-name">Snippets</div>
47+
</div>
48+
<div class="vp-apiblock-menu-apps-item line2" data-menu="file">
49+
<img src="/nbextensions/visualpython/resource/apps/apps_file.svg">
50+
<div class="vp-apiblock-menu-apps-name">File</div>
51+
</div>
52+
<div class="vp-apiblock-menu-apps-item line2" data-menu="instance">
53+
<img src="/nbextensions/visualpython/resource/apps/apps_instance.svg">
54+
<div class="vp-apiblock-menu-apps-name">Instance</div>
55+
</div>
56+
<div class="vp-apiblock-menu-apps-item line3" data-menu="subset">
57+
<img src="/nbextensions/visualpython/resource/apps/apps_subset.svg">
58+
<div class="vp-apiblock-menu-apps-name">Subset</div>
59+
</div>
60+
<div class="vp-apiblock-menu-apps-item line3" data-menu="frame">
61+
<img src="/nbextensions/visualpython/resource/apps/apps_frame.svg">
62+
<div class="vp-apiblock-menu-apps-name">Frame</div>
63+
</div>
64+
<div class="vp-apiblock-menu-apps-item line3" data-menu="chart">
65+
<img src="/nbextensions/visualpython/resource/apps/apps_chart.svg">
66+
<div class="vp-apiblock-menu-apps-name">Chart</div>
67+
</div>
68+
<div class="vp-apiblock-menu-apps-item preparing" data-menu="merge">
69+
<img src="/nbextensions/visualpython/resource/apps/apps_merge.svg">
70+
<div class="vp-apiblock-menu-apps-name">Merge</div>
71+
</div>
72+
<div class="vp-apiblock-menu-apps-item preparing" data-menu="groupby">
73+
<img src="/nbextensions/visualpython/resource/apps/apps_groupby.svg">
74+
<div class="vp-apiblock-menu-apps-name">Groupby</div>
75+
</div>
76+
<div class="vp-apiblock-menu-apps-item preparing" data-menu="reshape">
77+
<img src="/nbextensions/visualpython/resource/apps/apps_reshape.svg">
78+
<div class="vp-apiblock-menu-apps-name">Reshape</div>
79+
</div>
80+
<div class="vp-apiblock-menu-apps-item preparing" data-menu="timeseries">
81+
<img src="/nbextensions/visualpython/resource/apps/apps_timeseries.svg">
82+
<div class="vp-apiblock-menu-apps-name">TimeSeries</div>
83+
</div>
84+
85+
</div>
86+
</div>
87+
88+
<div class='vp-block-blocktab-name-title
8989
vp-apiblock-category vp-apiblock-blocktab-logic
9090
vp-accordion-caption'
9191
data-category="logic">Logic
@@ -100,7 +100,7 @@
100100
vp-accordion-caption'
101101
data-category="api">Library
102102
</div>
103-
<div class='vp-block-group-box vp-block-group-box-api'>
103+
<div class='vp-block-group-box vp-block-group-box-api' style="display:none;">
104104

105105
</div>
106106

0 commit comments

Comments
 (0)