梁美英 / programming · Commits

Commit df5d6b354317e07a34219499de102de25f341029

Authored by 商艳涛
1 parent 6963a3f3

修复代码过多代码播放区域无法滑动问题

Inline Side-by-side
Showing 6 changed files with 172 additions and 50 deletions
dist/css/ide.css
  View file @df5d6b3
@@ -225,20 +225,38 @@ html, body { @@ -225,20 +225,38 @@ html, body {
225 .record-wrap #ideDir { 225 .record-wrap #ideDir {
226 width: 170px; 226 width: 170px;
227 height: 100%; 227 height: 100%;
  228 + background-color: #FFF;
228 padding-top: 24px; 229 padding-top: 24px;
229 - float: left;  
230 - background-color: #FFF; } 230 + float: left; }
  231 + .record-wrap #ideDir .tree-wrap {
  232 + height: 100%; }
231 .record-wrap #ideDir .tree-header { 233 .record-wrap #ideDir .tree-header {
232 text-indent: 14px; } 234 text-indent: 14px; }
  235 + .record-wrap .m-dir-wrap {
  236 + width: 170px;
  237 + height: 100%;
  238 + background-color: #FFF;
  239 + float: left; }
  240 + .record-wrap .m-dir-wrap #ideDir {
  241 + width: 100%; }
233 .record-wrap #ideEditer { 242 .record-wrap #ideEditer {
234 width: calc(100% - 170px); 243 width: calc(100% - 170px);
235 float: left; 244 float: left;
236 - height: 100%; } 245 + height: calc(100% - 260px); }
  246 + .record-wrap #ideEditer:before {
  247 + content: "";
  248 + width: 34px !important;
  249 + background-color: #f7f7f7;
  250 + border-right: 1px solid #eee;
  251 + display: block;
  252 + height: 100%;
  253 + position: absolute; }
237 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding { 254 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
238 height: 100%; } 255 height: 100%; }
239 .record-wrap #folder { 256 .record-wrap #folder {
240 - height: 100%;  
241 - min-height: 300px; } 257 + height: calc(100% - 25px);
  258 + min-height: 150px;
  259 + overflow-y: scroll; }
242 .record-wrap .gxb-record { 260 .record-wrap .gxb-record {
243 position: relative; 261 position: relative;
244 height: 100%; } 262 height: 100%; }
@@ -252,11 +270,9 @@ html, body { @@ -252,11 +270,9 @@ html, body {
252 height: 200px; 270 height: 200px;
253 position: absolute; 271 position: absolute;
254 bottom: 60px; 272 bottom: 60px;
255 - padding-left: 204px; 273 + left: 170px;
256 z-index: 999; 274 z-index: 999;
257 overflow: hidden; } 275 overflow: hidden; }
258 - .console-wrap .CodeMirror-gutter {  
259 - margin-left: 170px; }  
260 .console-wrap #toolbar { 276 .console-wrap #toolbar {
261 width: 100%; 277 width: 100%;
262 height: 40px; 278 height: 40px;
@@ -460,6 +476,8 @@ html, body { @@ -460,6 +476,8 @@ html, body {
460 476
461 .play-page .record-wrap { 477 .play-page .record-wrap {
462 padding-top: 0; } 478 padding-top: 0; }
  479 + .play-page .record-wrap .m-dir-wrap {
  480 + height: calc(100% - 46px); }
463 481
464 #playFooter { 482 #playFooter {
465 height: 46px; 483 height: 46px;
dist/css/main.css
  View file @df5d6b3
@@ -97,20 +97,38 @@ html, body { @@ -97,20 +97,38 @@ html, body {
97 .record-wrap #ideDir { 97 .record-wrap #ideDir {
98 width: 170px; 98 width: 170px;
99 height: 100%; 99 height: 100%;
  100 + background-color: #FFF;
100 padding-top: 24px; 101 padding-top: 24px;
101 - float: left;  
102 - background-color: #FFF; } 102 + float: left; }
  103 + .record-wrap #ideDir .tree-wrap {
  104 + height: 100%; }
103 .record-wrap #ideDir .tree-header { 105 .record-wrap #ideDir .tree-header {
104 text-indent: 14px; } 106 text-indent: 14px; }
  107 + .record-wrap .m-dir-wrap {
  108 + width: 170px;
  109 + height: 100%;
  110 + background-color: #FFF;
  111 + float: left; }
  112 + .record-wrap .m-dir-wrap #ideDir {
  113 + width: 100%; }
105 .record-wrap #ideEditer { 114 .record-wrap #ideEditer {
106 width: calc(100% - 170px); 115 width: calc(100% - 170px);
107 float: left; 116 float: left;
108 - height: 100%; } 117 + height: calc(100% - 260px); }
  118 + .record-wrap #ideEditer:before {
  119 + content: "";
  120 + width: 34px !important;
  121 + background-color: #f7f7f7;
  122 + border-right: 1px solid #eee;
  123 + display: block;
  124 + height: 100%;
  125 + position: absolute; }
109 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding { 126 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
110 height: 100%; } 127 height: 100%; }
111 .record-wrap #folder { 128 .record-wrap #folder {
112 - height: 100%;  
113 - min-height: 300px; } 129 + height: calc(100% - 25px);
  130 + min-height: 150px;
  131 + overflow-y: scroll; }
114 .record-wrap .gxb-record { 132 .record-wrap .gxb-record {
115 position: relative; 133 position: relative;
116 height: 100%; } 134 height: 100%; }
@@ -124,11 +142,9 @@ html, body { @@ -124,11 +142,9 @@ html, body {
124 height: 200px; 142 height: 200px;
125 position: absolute; 143 position: absolute;
126 bottom: 60px; 144 bottom: 60px;
127 - padding-left: 204px; 145 + left: 170px;
128 z-index: 999; 146 z-index: 999;
129 overflow: hidden; } 147 overflow: hidden; }
130 - .console-wrap .CodeMirror-gutter {  
131 - margin-left: 170px; }  
132 .console-wrap #toolbar { 148 .console-wrap #toolbar {
133 width: 100%; 149 width: 100%;
134 height: 40px; 150 height: 40px;
@@ -332,6 +348,8 @@ html, body { @@ -332,6 +348,8 @@ html, body {
332 348
333 .play-page .record-wrap { 349 .play-page .record-wrap {
334 padding-top: 0; } 350 padding-top: 0; }
  351 + .play-page .record-wrap .m-dir-wrap {
  352 + height: calc(100% - 46px); }
335 353
336 #playFooter { 354 #playFooter {
337 height: 46px; 355 height: 46px;
dist/scss/main.scss
  View file @df5d6b3
@@ -121,24 +121,44 @@ html, body{ @@ -121,24 +121,44 @@ html, body{
121 position: absolute; 121 position: absolute;
122 box-sizing: border-box; 122 box-sizing: border-box;
123 padding-top: 48px; 123 padding-top: 48px;
124 -  
125 #ideDir{ 124 #ideDir{
126 width: 170px; 125 width: 170px;
127 height: 100%; 126 height: 100%;
  127 + background-color: #FFF;
128 padding-top: 24px; 128 padding-top: 24px;
129 float: left; 129 float: left;
130 - background-color: #FFF;  
131 - 130 + .tree-wrap{
  131 + height: 100%;
  132 + }
132 .tree-header{ 133 .tree-header{
133 text-indent: 14px; 134 text-indent: 14px;
134 } 135 }
135 } 136 }
  137 + .m-dir-wrap{
  138 + width: 170px;
  139 + height: 100%;
  140 + background-color: #FFF;
  141 + float: left;
  142 +
  143 + #ideDir{
  144 + width: 100%;
  145 + }
  146 + }
  147 +
136 148
137 #ideEditer{ 149 #ideEditer{
138 width: calc(100% - 170px); 150 width: calc(100% - 170px);
139 float: left; 151 float: left;
140 - height: 100%;  
141 - 152 + height: calc(100% - 260px);
  153 + &:before {
  154 + content: "";
  155 + width: 34px !important;
  156 + background-color: #f7f7f7;
  157 + border-right: 1px solid #eee;
  158 + display: block;
  159 + height: 100%;
  160 + position: absolute;
  161 + }
142 #recordzone, #replayzone, .coding{ 162 #recordzone, #replayzone, .coding{
143 height: 100%; 163 height: 100%;
144 } 164 }
@@ -146,8 +166,9 @@ html, body{ @@ -146,8 +166,9 @@ html, body{
146 } 166 }
147 167
148 #folder{ 168 #folder{
149 - height: 100%;  
150 - min-height: 300px; 169 + height: calc(100% - 25px);
  170 + min-height: 150px;
  171 + overflow-y: scroll;
151 } 172 }
152 173
153 .gxb-record{ 174 .gxb-record{
@@ -165,11 +186,11 @@ html, body{ @@ -165,11 +186,11 @@ html, body{
165 height: 200px; 186 height: 200px;
166 position: absolute; 187 position: absolute;
167 bottom: 60px; 188 bottom: 60px;
168 - padding-left: 204px; 189 + left: 170px;
169 z-index: 999; 190 z-index: 999;
170 overflow: hidden; 191 overflow: hidden;
171 .CodeMirror-gutter{ 192 .CodeMirror-gutter{
172 - margin-left: 170px; 193 + // margin-left: 170px;
173 } 194 }
174 195
175 #toolbar{ 196 #toolbar{
@@ -395,6 +416,10 @@ html, body{ @@ -395,6 +416,10 @@ html, body{
395 .play-page{ 416 .play-page{
396 .record-wrap{ 417 .record-wrap{
397 padding-top: 0; 418 padding-top: 0;
  419 +
  420 + .m-dir-wrap{
  421 + height: calc(100% - 46px);
  422 + }
398 } 423 }
399 } 424 }
400 #playFooter{ 425 #playFooter{
src/css/ide.css
  View file @df5d6b3
@@ -225,20 +225,38 @@ html, body { @@ -225,20 +225,38 @@ html, body {
225 .record-wrap #ideDir { 225 .record-wrap #ideDir {
226 width: 170px; 226 width: 170px;
227 height: 100%; 227 height: 100%;
  228 + background-color: #FFF;
228 padding-top: 24px; 229 padding-top: 24px;
229 - float: left;  
230 - background-color: #FFF; } 230 + float: left; }
  231 + .record-wrap #ideDir .tree-wrap {
  232 + height: 100%; }
231 .record-wrap #ideDir .tree-header { 233 .record-wrap #ideDir .tree-header {
232 text-indent: 14px; } 234 text-indent: 14px; }
  235 + .record-wrap .m-dir-wrap {
  236 + width: 170px;
  237 + height: 100%;
  238 + background-color: #FFF;
  239 + float: left; }
  240 + .record-wrap .m-dir-wrap #ideDir {
  241 + width: 100%; }
233 .record-wrap #ideEditer { 242 .record-wrap #ideEditer {
234 width: calc(100% - 170px); 243 width: calc(100% - 170px);
235 float: left; 244 float: left;
236 - height: 100%; } 245 + height: calc(100% - 260px); }
  246 + .record-wrap #ideEditer:before {
  247 + content: "";
  248 + width: 34px !important;
  249 + background-color: #f7f7f7;
  250 + border-right: 1px solid #eee;
  251 + display: block;
  252 + height: 100%;
  253 + position: absolute; }
237 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding { 254 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
238 height: 100%; } 255 height: 100%; }
239 .record-wrap #folder { 256 .record-wrap #folder {
240 - height: 100%;  
241 - min-height: 300px; } 257 + height: calc(100% - 25px);
  258 + min-height: 150px;
  259 + overflow-y: scroll; }
242 .record-wrap .gxb-record { 260 .record-wrap .gxb-record {
243 position: relative; 261 position: relative;
244 height: 100%; } 262 height: 100%; }
@@ -252,11 +270,9 @@ html, body { @@ -252,11 +270,9 @@ html, body {
252 height: 200px; 270 height: 200px;
253 position: absolute; 271 position: absolute;
254 bottom: 60px; 272 bottom: 60px;
255 - padding-left: 204px; 273 + left: 170px;
256 z-index: 999; 274 z-index: 999;
257 overflow: hidden; } 275 overflow: hidden; }
258 - .console-wrap .CodeMirror-gutter {  
259 - margin-left: 170px; }  
260 .console-wrap #toolbar { 276 .console-wrap #toolbar {
261 width: 100%; 277 width: 100%;
262 height: 40px; 278 height: 40px;
@@ -460,6 +476,8 @@ html, body { @@ -460,6 +476,8 @@ html, body {
460 476
461 .play-page .record-wrap { 477 .play-page .record-wrap {
462 padding-top: 0; } 478 padding-top: 0; }
  479 + .play-page .record-wrap .m-dir-wrap {
  480 + height: calc(100% - 46px); }
463 481
464 #playFooter { 482 #playFooter {
465 height: 46px; 483 height: 46px;
src/css/main.css
  View file @df5d6b3
@@ -97,20 +97,38 @@ html, body { @@ -97,20 +97,38 @@ html, body {
97 .record-wrap #ideDir { 97 .record-wrap #ideDir {
98 width: 170px; 98 width: 170px;
99 height: 100%; 99 height: 100%;
  100 + background-color: #FFF;
100 padding-top: 24px; 101 padding-top: 24px;
101 - float: left;  
102 - background-color: #FFF; } 102 + float: left; }
  103 + .record-wrap #ideDir .tree-wrap {
  104 + height: 100%; }
103 .record-wrap #ideDir .tree-header { 105 .record-wrap #ideDir .tree-header {
104 text-indent: 14px; } 106 text-indent: 14px; }
  107 + .record-wrap .m-dir-wrap {
  108 + width: 170px;
  109 + height: 100%;
  110 + background-color: #FFF;
  111 + float: left; }
  112 + .record-wrap .m-dir-wrap #ideDir {
  113 + width: 100%; }
105 .record-wrap #ideEditer { 114 .record-wrap #ideEditer {
106 width: calc(100% - 170px); 115 width: calc(100% - 170px);
107 float: left; 116 float: left;
108 - height: 100%; } 117 + height: calc(100% - 260px); }
  118 + .record-wrap #ideEditer:before {
  119 + content: "";
  120 + width: 34px !important;
  121 + background-color: #f7f7f7;
  122 + border-right: 1px solid #eee;
  123 + display: block;
  124 + height: 100%;
  125 + position: absolute; }
109 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding { 126 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
110 height: 100%; } 127 height: 100%; }
111 .record-wrap #folder { 128 .record-wrap #folder {
112 - height: 100%;  
113 - min-height: 300px; } 129 + height: calc(100% - 25px);
  130 + min-height: 150px;
  131 + overflow-y: scroll; }
114 .record-wrap .gxb-record { 132 .record-wrap .gxb-record {
115 position: relative; 133 position: relative;
116 height: 100%; } 134 height: 100%; }
@@ -124,11 +142,9 @@ html, body { @@ -124,11 +142,9 @@ html, body {
124 height: 200px; 142 height: 200px;
125 position: absolute; 143 position: absolute;
126 bottom: 60px; 144 bottom: 60px;
127 - padding-left: 204px; 145 + left: 170px;
128 z-index: 999; 146 z-index: 999;
129 overflow: hidden; } 147 overflow: hidden; }
130 - .console-wrap .CodeMirror-gutter {  
131 - margin-left: 170px; }  
132 .console-wrap #toolbar { 148 .console-wrap #toolbar {
133 width: 100%; 149 width: 100%;
134 height: 40px; 150 height: 40px;
@@ -332,6 +348,8 @@ html, body { @@ -332,6 +348,8 @@ html, body {
332 348
333 .play-page .record-wrap { 349 .play-page .record-wrap {
334 padding-top: 0; } 350 padding-top: 0; }
  351 + .play-page .record-wrap .m-dir-wrap {
  352 + height: calc(100% - 46px); }
335 353
336 #playFooter { 354 #playFooter {
337 height: 46px; 355 height: 46px;
src/scss/main.scss
  View file @df5d6b3
@@ -121,24 +121,44 @@ html, body{ @@ -121,24 +121,44 @@ html, body{
121 position: absolute; 121 position: absolute;
122 box-sizing: border-box; 122 box-sizing: border-box;
123 padding-top: 48px; 123 padding-top: 48px;
124 -  
125 #ideDir{ 124 #ideDir{
126 width: 170px; 125 width: 170px;
127 height: 100%; 126 height: 100%;
  127 + background-color: #FFF;
128 padding-top: 24px; 128 padding-top: 24px;
129 float: left; 129 float: left;
130 - background-color: #FFF;  
131 - 130 + .tree-wrap{
  131 + height: 100%;
  132 + }
132 .tree-header{ 133 .tree-header{
133 text-indent: 14px; 134 text-indent: 14px;
134 } 135 }
135 } 136 }
  137 + .m-dir-wrap{
  138 + width: 170px;
  139 + height: 100%;
  140 + background-color: #FFF;
  141 + float: left;
  142 +
  143 + #ideDir{
  144 + width: 100%;
  145 + }
  146 + }
  147 +
136 148
137 #ideEditer{ 149 #ideEditer{
138 width: calc(100% - 170px); 150 width: calc(100% - 170px);
139 float: left; 151 float: left;
140 - height: 100%;  
141 - 152 + height: calc(100% - 260px);
  153 + &:before {
  154 + content: "";
  155 + width: 34px !important;
  156 + background-color: #f7f7f7;
  157 + border-right: 1px solid #eee;
  158 + display: block;
  159 + height: 100%;
  160 + position: absolute;
  161 + }
142 #recordzone, #replayzone, .coding{ 162 #recordzone, #replayzone, .coding{
143 height: 100%; 163 height: 100%;
144 } 164 }
@@ -146,8 +166,9 @@ html, body{ @@ -146,8 +166,9 @@ html, body{
146 } 166 }
147 167
148 #folder{ 168 #folder{
149 - height: 100%;  
150 - min-height: 300px; 169 + height: calc(100% - 25px);
  170 + min-height: 150px;
  171 + overflow-y: scroll;
151 } 172 }
152 173
153 .gxb-record{ 174 .gxb-record{
@@ -165,11 +186,11 @@ html, body{ @@ -165,11 +186,11 @@ html, body{
165 height: 200px; 186 height: 200px;
166 position: absolute; 187 position: absolute;
167 bottom: 60px; 188 bottom: 60px;
168 - padding-left: 204px; 189 + left: 170px;
169 z-index: 999; 190 z-index: 999;
170 overflow: hidden; 191 overflow: hidden;
171 .CodeMirror-gutter{ 192 .CodeMirror-gutter{
172 - margin-left: 170px; 193 + // margin-left: 170px;
173 } 194 }
174 195
175 #toolbar{ 196 #toolbar{
@@ -395,6 +416,10 @@ html, body{ @@ -395,6 +416,10 @@ html, body{
395 .play-page{ 416 .play-page{
396 .record-wrap{ 417 .record-wrap{
397 padding-top: 0; 418 padding-top: 0;
  419 +
  420 + .m-dir-wrap{
  421 + height: calc(100% - 46px);
  422 + }
398 } 423 }
399 } 424 }
400 #playFooter{ 425 #playFooter{