Merge branch 'develop' into feature/20170515_Live

ykxie
2 parents e3c0176c 83e693cd
Showing 5 changed files with 223 additions and 6 deletions
src/css/mobile.css
src/img/down.png
src/js/player.js
src/scss/mobile.scss
src/v1.1/player.html
+.m-title-wrap, .m-label {
+  display: none; }
+
+@media screen and (max-width: 768px) {
+  .player_volume_wrapper, .ladda-label {
+    display: none !important; }
+  .m-label {
+    display: block; }
+  #componentWrapper .player_mediaTime_total {
+    border-right: none; }
+  #componentWrapper .progress_bg {
+    height: 4px; }
+  #componentWrapper .load_progress {
+    height: 4px; }
+  #componentWrapper .play_progress {
+    height: 4px;
+    background: #FFF; }
+  .m-title-wrap {
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    background-color: #FFF;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 24px;
+    border-bottom: 1px solid #eee; }
+  .CodeMirror-gutter {
+    width: 24px !important;
+    min-width: 24px !important; }
+  .record-wrap .m-dir-wrap {
+    display: none;
+    background-color: rgba(45, 48, 56, 0.8);
+    position: absolute;
+    z-index: 9999;
+    width: 100%;
+    height: 100%; }
+  .record-wrap #ideDir {
+    height: auto;
+    float: right; }
+  .record-wrap #ideEditer {
+    width: 100%;
+    height: calc(100% - 286px); }
+  .console-wrap {
+    padding-left: 0;
+    bottom: 40px;
+    padding-bottom: 40px;
+    height: auto; }
+    .console-wrap .CodeMirror-gutter {
+      display: none;
+      margin-left: 0; }
+    .console-wrap #toolbar {
+      padding: 0; }
+  #playFooter {
+    height: 40px;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 0px 24px; }
+  .console-wrap #toolbar .func {
+    height: 56px;
+    padding-top: 0;
+    position: absolute;
+    right: 16px;
+    bottom: 54px;
+    z-index: 9999; }
+  #full-screen {
+    display: none; }
+  .compile-btn {
+    padding: 0;
+    height: 56px;
+    width: 56px;
+    border-radius: 50%;
+    color: #FFF;
+    background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
+    background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%); }
+  .m-menu {
+    color: #1FB6FF; }
+    .m-menu img {
+      width: 16px;
+      vertical-align: middle; } }
@@ -4,6 +4,7 @@ $(function(){
     var _role = getQuery('role');
     var _codeReplayId = getQuery('codeReplayId');
     var player = $.AudioPlayer;
+    var status = true;
     var languageName = Dir.getLangName(_languageid);
     $("title").html(languageName);
@@ -32,4 +33,16 @@ $(function(){
         CodingEditer.editable(0)
     })
+    $('.m-menu').on('click', function(){
+        
+        if (status) {
+            $('.m-dir-wrap').show();
+            status = false;
+        }else{
+            $('.m-dir-wrap').hide();
+            status = true;
+        }
+        
+    })
+
 })
 \ No newline at end of file
+.m-title-wrap, .m-label{
+    display: none;
+}
+@media screen and (max-width: 768px) {
+
+    .player_volume_wrapper, .ladda-label{
+        display: none !important;
+    }
+    .m-label{
+        display: block;
+    }
+    #componentWrapper .player_mediaTime_total{
+        border-right: none;
+    }
+    #componentWrapper .progress_bg{
+        height: 4px;
+    }
+    #componentWrapper .load_progress{
+        height: 4px;
+    }
+    #componentWrapper .play_progress{
+        height: 4px;
+        background: #FFF;
+    }
+    .m-title-wrap{
+        width: 100%;
+        height: 36px;
+        line-height: 36px;
+        background-color: #FFF;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 24px;
+        border-bottom: 1px solid #eee;
+    }
+    .CodeMirror-gutter {
+        width: 24px !important;
+        min-width: 24px !important;
+    }
+    .record-wrap{
+        .m-dir-wrap{
+            display: none;
+            background-color: rgba(45,48,56,0.8);
+            position: absolute;
+            z-index: 9999;
+            width: 100%;
+            height: 100%;
+        }
+        #ideDir{
+            height: auto;
+            float: right;
+        }
+        #ideEditer{
+            width: 100%;
+            height: calc(100% - 286px);
+        }
+    }
+    .console-wrap{
+        padding-left: 0;
+        bottom: 40px;
+        padding-bottom: 40px;
+        height: auto;
+        .CodeMirror-gutter{
+            display: none;
+            margin-left: 0;
+        }
+        #toolbar{
+            padding: 0;
+        }
+    }
+    #playFooter {
+        height: 40px;
+        background-color: rgba(0,0,0,0.5);
+        padding: 0px 24px;
+    }
+
+    .console-wrap #toolbar .func {
+        height: 56px;
+        padding-top: 0;
+        position: absolute;
+        right: 16px;
+        bottom: 54px;
+        z-index: 9999;
+    }
+    #full-screen{
+        display: none;
+    }
+    .compile-btn{
+        padding: 0;
+        height: 56px;
+        width: 56px;
+        border-radius: 50%;
+        color: #FFF;
+        background-image: -webkit-linear-gradient(left, #1FB6FF 0%, #62DCF5 100%);
+        background-image: linear-gradient(to right, #1FB6FF 0%, #62DCF5 100%);
+    }
+
+    .m-menu{
+        color: #1FB6FF;
+        img{
+            width: 16px;
+            vertical-align: middle;
+        }
+    }
+
+    // .ladda-button[data-style=expand-right] .ladda-spinner{
+    //     right: 14px !important;
+    //     top: 14px !important;
+    // }
+
+
+}
+
+
+
+
+
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <title></title>
     <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
     <!-- <link href="../css/codemirror.css" rel="stylesheet"> -->
@@ -18,6 +19,7 @@
     <link rel="stylesheet" href="../gxb-ide/toolBox.css">
     <link rel="stylesheet" href="../css/ide.css">
+    <link rel="stylesheet" href="../css/mobile.css">
     <script>
         var gxb_api = "https://restful.gaoxiaobang.com";
@@ -55,17 +57,21 @@
                 </li>
             </ul>
         </div>
-
+        <div class="m-title-wrap">
+            <div class="m-title">创业公司融资的基本流程？创业...</div>
+            <div class="m-menu">main <img src="../img/down.png" alt=""></div>
+        </div>
         <!-- 录制区 -->
         <div class="record-wrap">
             <!-- 录制区 -->
             <div class="gxb-record">
-                <div id="ideDir">
-                    <div class="tree-header">目录</div>
-                    <ul id="folder" class="ztree"></ul>
-                    <div id="handleLM"></div>
+                <div class="m-dir-wrap">
+                    <div id="ideDir">
+                        <div class="tree-header">目录</div>
+                        <ul id="folder" class="ztree"></ul>
+                        <div id="handleLM"></div>
+                    </div>
                 </div>
-
                 <div  id="ideEditer" class="tab-content">
                   <div id="recordzone" class="tab-pane active"></div>
                   <div id="replayzone" class="tab-pane"></div>
@@ -85,6 +91,10 @@
                         <div class="pull-right func">
                             <button class="btn compile-btn" id="CompileBtn">
                                 <span class="ladda-label">编译运行</span>
+                                <span class="m-label">
+                                    <p>编译</p>
+                                    <p>运行</p>
+                                </span>
                             </button>
                             <!-- <img src="../img/full-screen-icon.svg" alt=""> -->
                             <a id="full-screen" class="fb">