梁美英 / 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 225 .record-wrap #ideDir {
226 226 width: 170px;
227 227 height: 100%;
  228 + background-color: #FFF;
228 229 padding-top: 24px;
229   - float: left;
230   - background-color: #FFF; }
  230 + float: left; }
  231 + .record-wrap #ideDir .tree-wrap {
  232 + height: 100%; }
231 233 .record-wrap #ideDir .tree-header {
232 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 242 .record-wrap #ideEditer {
234 243 width: calc(100% - 170px);
235 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 254 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
238 255 height: 100%; }
239 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 260 .record-wrap .gxb-record {
243 261 position: relative;
244 262 height: 100%; }
... ... @@ -252,11 +270,9 @@ html, body {
252 270 height: 200px;
253 271 position: absolute;
254 272 bottom: 60px;
255   - padding-left: 204px;
  273 + left: 170px;
256 274 z-index: 999;
257 275 overflow: hidden; }
258   - .console-wrap .CodeMirror-gutter {
259   - margin-left: 170px; }
260 276 .console-wrap #toolbar {
261 277 width: 100%;
262 278 height: 40px;
... ... @@ -460,6 +476,8 @@ html, body {
460 476  
461 477 .play-page .record-wrap {
462 478 padding-top: 0; }
  479 + .play-page .record-wrap .m-dir-wrap {
  480 + height: calc(100% - 46px); }
463 481  
464 482 #playFooter {
465 483 height: 46px;
... ...
dist/css/main.css
  View file @df5d6b3
... ... @@ -97,20 +97,38 @@ html, body {
97 97 .record-wrap #ideDir {
98 98 width: 170px;
99 99 height: 100%;
  100 + background-color: #FFF;
100 101 padding-top: 24px;
101   - float: left;
102   - background-color: #FFF; }
  102 + float: left; }
  103 + .record-wrap #ideDir .tree-wrap {
  104 + height: 100%; }
103 105 .record-wrap #ideDir .tree-header {
104 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 114 .record-wrap #ideEditer {
106 115 width: calc(100% - 170px);
107 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 126 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
110 127 height: 100%; }
111 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 132 .record-wrap .gxb-record {
115 133 position: relative;
116 134 height: 100%; }
... ... @@ -124,11 +142,9 @@ html, body {
124 142 height: 200px;
125 143 position: absolute;
126 144 bottom: 60px;
127   - padding-left: 204px;
  145 + left: 170px;
128 146 z-index: 999;
129 147 overflow: hidden; }
130   - .console-wrap .CodeMirror-gutter {
131   - margin-left: 170px; }
132 148 .console-wrap #toolbar {
133 149 width: 100%;
134 150 height: 40px;
... ... @@ -332,6 +348,8 @@ html, body {
332 348  
333 349 .play-page .record-wrap {
334 350 padding-top: 0; }
  351 + .play-page .record-wrap .m-dir-wrap {
  352 + height: calc(100% - 46px); }
335 353  
336 354 #playFooter {
337 355 height: 46px;
... ...
dist/scss/main.scss
  View file @df5d6b3
... ... @@ -121,24 +121,44 @@ html, body{
121 121 position: absolute;
122 122 box-sizing: border-box;
123 123 padding-top: 48px;
124   -
125 124 #ideDir{
126 125 width: 170px;
127 126 height: 100%;
  127 + background-color: #FFF;
128 128 padding-top: 24px;
129 129 float: left;
130   - background-color: #FFF;
131   -
  130 + .tree-wrap{
  131 + height: 100%;
  132 + }
132 133 .tree-header{
133 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 149 #ideEditer{
138 150 width: calc(100% - 170px);
139 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 162 #recordzone, #replayzone, .coding{
143 163 height: 100%;
144 164 }
... ... @@ -146,8 +166,9 @@ html, body{
146 166 }
147 167  
148 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 174 .gxb-record{
... ... @@ -165,11 +186,11 @@ html, body{
165 186 height: 200px;
166 187 position: absolute;
167 188 bottom: 60px;
168   - padding-left: 204px;
  189 + left: 170px;
169 190 z-index: 999;
170 191 overflow: hidden;
171 192 .CodeMirror-gutter{
172   - margin-left: 170px;
  193 + // margin-left: 170px;
173 194 }
174 195  
175 196 #toolbar{
... ... @@ -395,6 +416,10 @@ html, body{
395 416 .play-page{
396 417 .record-wrap{
397 418 padding-top: 0;
  419 +
  420 + .m-dir-wrap{
  421 + height: calc(100% - 46px);
  422 + }
398 423 }
399 424 }
400 425 #playFooter{
... ...
src/css/ide.css
  View file @df5d6b3
... ... @@ -225,20 +225,38 @@ html, body {
225 225 .record-wrap #ideDir {
226 226 width: 170px;
227 227 height: 100%;
  228 + background-color: #FFF;
228 229 padding-top: 24px;
229   - float: left;
230   - background-color: #FFF; }
  230 + float: left; }
  231 + .record-wrap #ideDir .tree-wrap {
  232 + height: 100%; }
231 233 .record-wrap #ideDir .tree-header {
232 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 242 .record-wrap #ideEditer {
234 243 width: calc(100% - 170px);
235 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 254 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
238 255 height: 100%; }
239 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 260 .record-wrap .gxb-record {
243 261 position: relative;
244 262 height: 100%; }
... ... @@ -252,11 +270,9 @@ html, body {
252 270 height: 200px;
253 271 position: absolute;
254 272 bottom: 60px;
255   - padding-left: 204px;
  273 + left: 170px;
256 274 z-index: 999;
257 275 overflow: hidden; }
258   - .console-wrap .CodeMirror-gutter {
259   - margin-left: 170px; }
260 276 .console-wrap #toolbar {
261 277 width: 100%;
262 278 height: 40px;
... ... @@ -460,6 +476,8 @@ html, body {
460 476  
461 477 .play-page .record-wrap {
462 478 padding-top: 0; }
  479 + .play-page .record-wrap .m-dir-wrap {
  480 + height: calc(100% - 46px); }
463 481  
464 482 #playFooter {
465 483 height: 46px;
... ...
src/css/main.css
  View file @df5d6b3
... ... @@ -97,20 +97,38 @@ html, body {
97 97 .record-wrap #ideDir {
98 98 width: 170px;
99 99 height: 100%;
  100 + background-color: #FFF;
100 101 padding-top: 24px;
101   - float: left;
102   - background-color: #FFF; }
  102 + float: left; }
  103 + .record-wrap #ideDir .tree-wrap {
  104 + height: 100%; }
103 105 .record-wrap #ideDir .tree-header {
104 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 114 .record-wrap #ideEditer {
106 115 width: calc(100% - 170px);
107 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 126 .record-wrap #ideEditer #recordzone, .record-wrap #ideEditer #replayzone, .record-wrap #ideEditer .coding {
110 127 height: 100%; }
111 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 132 .record-wrap .gxb-record {
115 133 position: relative;
116 134 height: 100%; }
... ... @@ -124,11 +142,9 @@ html, body {
124 142 height: 200px;
125 143 position: absolute;
126 144 bottom: 60px;
127   - padding-left: 204px;
  145 + left: 170px;
128 146 z-index: 999;
129 147 overflow: hidden; }
130   - .console-wrap .CodeMirror-gutter {
131   - margin-left: 170px; }
132 148 .console-wrap #toolbar {
133 149 width: 100%;
134 150 height: 40px;
... ... @@ -332,6 +348,8 @@ html, body {
332 348  
333 349 .play-page .record-wrap {
334 350 padding-top: 0; }
  351 + .play-page .record-wrap .m-dir-wrap {
  352 + height: calc(100% - 46px); }
335 353  
336 354 #playFooter {
337 355 height: 46px;
... ...
src/scss/main.scss
  View file @df5d6b3
... ... @@ -121,24 +121,44 @@ html, body{
121 121 position: absolute;
122 122 box-sizing: border-box;
123 123 padding-top: 48px;
124   -
125 124 #ideDir{
126 125 width: 170px;
127 126 height: 100%;
  127 + background-color: #FFF;
128 128 padding-top: 24px;
129 129 float: left;
130   - background-color: #FFF;
131   -
  130 + .tree-wrap{
  131 + height: 100%;
  132 + }
132 133 .tree-header{
133 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 149 #ideEditer{
138 150 width: calc(100% - 170px);
139 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 162 #recordzone, #replayzone, .coding{
143 163 height: 100%;
144 164 }
... ... @@ -146,8 +166,9 @@ html, body{
146 166 }
147 167  
148 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 174 .gxb-record{
... ... @@ -165,11 +186,11 @@ html, body{
165 186 height: 200px;
166 187 position: absolute;
167 188 bottom: 60px;
168   - padding-left: 204px;
  189 + left: 170px;
169 190 z-index: 999;
170 191 overflow: hidden;
171 192 .CodeMirror-gutter{
172   - margin-left: 170px;
  193 + // margin-left: 170px;
173 194 }
174 195  
175 196 #toolbar{
... ... @@ -395,6 +416,10 @@ html, body{
395 416 .play-page{
396 417 .record-wrap{
397 418 padding-top: 0;
  419 +
  420 + .m-dir-wrap{
  421 + height: calc(100% - 46px);
  422 + }
398 423 }
399 424 }
400 425 #playFooter{
... ...