Follow yongfeng's comments

4855822b · Yu Yang · dbe9d8c5 · 4855822b · 4855822b · 4855822b
隐藏空白更改
内联并排

Showing with 147 addition and 46 deletion

.tmpl/github-markdown.css .tmpl/github-markdown.css +1 -1

index.en.html index.en.html +49 -18

index.html index.html +52 -17

index.html.tmpl index.html.tmpl +45 -10

未找到文件。
--- a/.tmpl/github-markdown.css
+++ b/.tmpl/github-markdown.css
@@ -188,7 +188,7 @@
 }

 .markdown-body a {
-  color: #4078c0;
+  color: #597cf1;
  text-decoration: none;
 }


--- a/index.en.html
+++ b/index.en.html
@@ -8,33 +8,58 @@
    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.slim.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <style>
+* {
+    font-family:"Roboto","Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+}
 .left-panel {
-    background: #ecedee;
+    background: #E5E6EA;
 }

+.left-panel .card-block a.click_active {
+    background-color: #597cf1;
+    color: #fff;
+}
+ 
 .left-panel .card-header {
    background: #ecedee;
 }

-.left-panel .card-header a {
-    font-size: 13px;
-    font-weight: bolder;
+
+
+.left-panel .card-block a:not(.click_active) {
+    background: #e4e6e9;
 }

 .left-panel .card-block a {
    border-radius: 0px;
    font-size: 13px;
+    color: #2F323A;
    padding-left: 40px;
-    background: #e4e6e9;
    border: 1px solid rgba(0,0,0,.125);
 }

 .left-panel .card-block a.active_color {
-    font-color:  rgb(70, 74, 76);
+    color:  rgb(70, 74, 76);
    font-weight: bolder;
 }

-    </style>
+.left-panel .list-group-item {
+    -moz-box-align: center;
+    align-items: center;
+    display: flex;
+    flex-flow: row wrap;
+    margin-bottom: -1px;
+    padding: 0.75rem 1.25rem;
+    position: relative;
+    color: #2f323a;
+}
+
+.navbar img {
+    height: 90%;
+    width: 90%;
+}
+
+   </style>
 </head>
 <body>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
@@ -78,35 +103,35 @@
                      <div class="card-block pl-0 pr-0 pt-0 pb-0">
                        <div class="list-group ">
                          
-                            <a href="./fit_a_line/index.en.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./fit_a_line/index.en.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                Linear Regression
                            </a>
                          
-                            <a href="./recognize_digits/index.en.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./recognize_digits/index.en.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                Recognize Digits
                            </a>
                          
-                            <a href="./image_classification/index.en.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./image_classification/index.en.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                Image Classification
                            </a>
                          
-                            <a href="./word2vec/index.en.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./word2vec/index.en.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                Word2Vec
                            </a>
                          
-                            <a href="./understand_sentiment/index.en.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./understand_sentiment/index.en.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                Sentiment Analysis
                            </a>
                          
-                            <a href="./label_semantic_roles/index.en.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./label_semantic_roles/index.en.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                Semantic Role Labeling
                            </a>
                          
-                            <a href="./machine_translation/index.en.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./machine_translation/index.en.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                Machine Translation
                            </a>
                          
-                            <a href="./recommender_system/index.en.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./recommender_system/index.en.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                Personalized Recommendation
                            </a>
                          
@@ -117,8 +142,7 @@
                </div>
            </div>
            <div class="col">
-                <iframe src="./fit_a_line/index.en.html" style="border: none;" width="100%" height="100%" name="content_iframe" id="content_iframe">
-
+                <iframe src="./fit_a_line/index.en.html" style="border: none; overflow-y : hidden" width="100%" height="100%" name="content_iframe" id="content_iframe">
                </iframe>
            </div>
        </div>
@@ -126,12 +150,19 @@
    <script>
    $('#content_iframe').on('load', function(){
        $("#content_iframe").height(200)  // trick code to shrink iframe size
-        $("#content_iframe").height($('#content_iframe').contents().find("body").height()+20)
+        var body = $('#content_iframe').contents().find("body")
+        body.css("overflow-y", "hidden")
+        $("#content_iframe").height(body.height()+20)
        var alllinks = $('#content_iframe').contents().find("a")
        for (var i =0; i<alllinks.length; ++i) {
            alllinks[i].setAttribute("target", "_blank")
        }
    });
+    $(".list-group a").click(function(){ 
+       $(".list-group a.click_active").removeClass("click_active"); 
+       $(this).addClass("click_active"); 
+    })
+    $($(".list-group a")[0]).addClass("click_active") 
    </script>
 </body>
 </html>
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -8,33 +8,62 @@
    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.slim.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <style>
+* {
+    font-family:"Roboto","Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+}
 .left-panel {
-    background: #ecedee;
+    background: #E5E6EA;
 }

+.left-panel .card-block a.click_active {
+    background-color: #597cf1;
+    color: #fff;
+}
+ 
 .left-panel .card-header {
    background: #ecedee;
 }

+
 .left-panel .card-header a {
-    font-size: 13px;
-    font-weight: bolder;
+    font-size: 14px;
+}
+
+
+.left-panel .card-block a:not(.click_active) {
+    background: #e4e6e9;
 }

 .left-panel .card-block a {
    border-radius: 0px;
    font-size: 13px;
+    color: #2F323A;
    padding-left: 40px;
-    background: #e4e6e9;
    border: 1px solid rgba(0,0,0,.125);
 }

 .left-panel .card-block a.active_color {
-    font-color:  rgb(70, 74, 76);
+    color:  rgb(70, 74, 76);
    font-weight: bolder;
 }

-    </style>
+.left-panel .list-group-item {
+    -moz-box-align: center;
+    align-items: center;
+    display: flex;
+    flex-flow: row wrap;
+    margin-bottom: -1px;
+    padding: 0.75rem 1.25rem;
+    position: relative;
+    color: #2f323a;
+}
+
+.navbar img {
+    height: 90%;
+    width: 90%;
+}
+
+   </style>
 </head>
 <body>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
@@ -78,35 +107,35 @@
                      <div class="card-block pl-0 pr-0 pt-0 pb-0">
                        <div class="list-group ">
                          
-                            <a href="./fit_a_line/index.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./fit_a_line/index.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                新手入门
                            </a>
                          
-                            <a href="./recognize_digits/index.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./recognize_digits/index.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                识别数字
                            </a>
                          
-                            <a href="./image_classification/index.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./image_classification/index.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                图像分类
                            </a>
                          
-                            <a href="./word2vec/index.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./word2vec/index.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                词向量
                            </a>
                          
-                            <a href="./understand_sentiment/index.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./understand_sentiment/index.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                情感分析
                            </a>
                          
-                            <a href="./label_semantic_roles/index.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./label_semantic_roles/index.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                语义角色标注
                            </a>
                          
-                            <a href="./machine_translation/index.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./machine_translation/index.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                机器翻译
                            </a>
                          
-                            <a href="./recommender_system/index.html" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="./recommender_system/index.html" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                个性化推荐
                            </a>
                          
@@ -117,8 +146,7 @@
                </div>
            </div>
            <div class="col">
-                <iframe src="./fit_a_line/index.html" style="border: none;" width="100%" height="100%" name="content_iframe" id="content_iframe">
-
+                <iframe src="./fit_a_line/index.html" style="border: none; overflow-y : hidden" width="100%" height="100%" name="content_iframe" id="content_iframe">
                </iframe>
            </div>
        </div>
@@ -126,12 +154,19 @@
    <script>
    $('#content_iframe').on('load', function(){
        $("#content_iframe").height(200)  // trick code to shrink iframe size
-        $("#content_iframe").height($('#content_iframe').contents().find("body").height()+20)
+        var body = $('#content_iframe').contents().find("body")
+        body.css("overflow-y", "hidden")
+        $("#content_iframe").height(body.height()+20)
        var alllinks = $('#content_iframe').contents().find("a")
        for (var i =0; i<alllinks.length; ++i) {
            alllinks[i].setAttribute("target", "_blank")
        }
    });
+    $(".list-group a").click(function(){ 
+       $(".list-group a.click_active").removeClass("click_active"); 
+       $(this).addClass("click_active"); 
+    })
+    $($(".list-group a")[0]).addClass("click_active") 
    </script>
 </body>
 </html>
\ No newline at end of file
--- a/index.html.tmpl
+++ b/index.html.tmpl
@@ -8,33 +8,62 @@
    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.slim.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <style>
+* {
+    font-family:"Roboto","Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+}
 .left-panel {
-    background: #ecedee;
+    background: #E5E6EA;
 }

+.left-panel .card-block a.click_active {
+    background-color: #597cf1;
+    color: #fff;
+}
+ 
 .left-panel .card-header {
    background: #ecedee;
 }

+{% if not is_en %}
 .left-panel .card-header a {
-    font-size: 13px;
-    font-weight: bolder;
+    font-size: 14px;
+}
+{% endif %}
+
+.left-panel .card-block a:not(.click_active) {
+    background: #e4e6e9;
 }

 .left-panel .card-block a {
    border-radius: 0px;
    font-size: 13px;
+    color: #2F323A;
    padding-left: 40px;
-    background: #e4e6e9;
    border: 1px solid rgba(0,0,0,.125);
 }

 .left-panel .card-block a.active_color {
-    font-color:  rgb(70, 74, 76);
+    color:  rgb(70, 74, 76);
    font-weight: bolder;
 }

-    </style>
+.left-panel .list-group-item {
+    -moz-box-align: center;
+    align-items: center;
+    display: flex;
+    flex-flow: row wrap;
+    margin-bottom: -1px;
+    padding: 0.75rem 1.25rem;
+    position: relative;
+    color: #2f323a;
+}
+
+.navbar img {
+    height: 90%;
+    width: 90%;
+}
+
+   </style>
 </head>
 <body>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
@@ -78,7 +107,7 @@
                      <div class="card-block pl-0 pr-0 pt-0 pb-0">
                        <div class="list-group ">
                          {% for chapter in chapters %}
-                            <a href="{{ chapter.link }}" target="content_iframe" class="list-group-item list-group-item-action">
+                            <a href="{{ chapter.link }}" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                {{ chapter.name }}
                            </a>
                          {% endfor %}
@@ -89,8 +118,7 @@
                </div>
            </div>
            <div class="col">
-                <iframe src="./fit_a_line/index{% if is_en %}.en{% endif %}.html" style="border: none;" width="100%" height="100%" name="content_iframe" id="content_iframe">
-
+                <iframe src="./fit_a_line/index{% if is_en %}.en{% endif %}.html" style="border: none; overflow-y : hidden" width="100%" height="100%" name="content_iframe" id="content_iframe">
                </iframe>
            </div>
        </div>
@@ -98,12 +126,19 @@
    <script>
    $('#content_iframe').on('load', function(){
        $("#content_iframe").height(200)  // trick code to shrink iframe size
-        $("#content_iframe").height($('#content_iframe').contents().find("body").height()+20)
+        var body = $('#content_iframe').contents().find("body")
+        body.css("overflow-y", "hidden")
+        $("#content_iframe").height(body.height()+20)
        var alllinks = $('#content_iframe').contents().find("a")
        for (var i =0; i<alllinks.length; ++i) {
            alllinks[i].setAttribute("target", "_blank")
        }
    });
+    $(".list-group a").click(function(){ 
+       $(".list-group a.click_active").removeClass("click_active"); 
+       $(this).addClass("click_active"); 
+    })
+    $($(".list-group a")[0]).addClass("click_active") 
    </script>
 </body>
 </html>