about

static/css/about.css

@@ -19,10 +19,14 @@
 }
 
 #dialogAbout {
-    margin: 35px 100px 0 100px;
+    margin: 35px 20px;
     line-height: 28px;
 }
 
+#dialogAbout .item {
+    margin: 0 10px;
+}
+
 #dialogAbout a {
     color: #4183c4;
     text-decoration: none;
@@ -49,12 +53,6 @@
 
 }
 
-#dialogAbout .thx {
-    border-left: 1px solid #919191;
-    padding-left: 24px;
-}
-
-#dialogAbout .thx,
 #dialogAbout .thx ul {
     margin-left: 50px;
 }
@@ -69,5 +67,6 @@
     font-size: 12px;
     line-height: normal;
     height: 85px;
-    overflow: auto;
+    overflow-x: hidden;
+    word-wrap: break-word;
 }

static/js/dialog.js

@@ -161,7 +161,8 @@
             });
 
             $(window).resize(function () {
-                $(".dialog-background").height($("body").height());
+                var height = $("body").height() > $(window).height() ? $("body").height() : $(window).height();
+                $(".dialog-background").height(height);
             });
 
             if (typeof settings.afterInit === "function") {

static/js/menu.js

@@ -58,8 +58,6 @@ var menu = {
         $("#dialogAbout").load(config.context + '/about', function () {
             $("#dialogAbout").dialog({
                 "modal": true,
-                "height": 460,
-                "width": 800,
                 "title": config.label.about,
                 "hideFooter": true,
                 "afterOpen": function () {

views/about.html

@@ -1,18 +1,19 @@
-<div class="fn-clear">
+<div class="item">
+    <div class="fn-clear">
         <img class="logo" src="{{.conf.StaticServer}}/static/images/wide-logo.png" alt="wide logi"/>
         <div class="fn-left">
             <h2>Hello, 世界</h2>
             <h3>Coding with Go on the Wide way.</h3>
         </div>
-</div>
+    </div>
-<div>
     <label>{{.i18n.current_ver}}{{.i18n.colon}}</label> 
     <span class="version">{{.ver}}</span>,
     <span class="upgrade">{{.i18n.check_version}}....</span>
-    <div class="space"></div>
+</div>
 
-    <div class="fn-clear">
+<div class="space"></div>
-        <div class="fn-left">            
+
+<div class="item">            
     <label>{{.i18n.project_address}}{{.i18n.colon}}</label>
     <a href="https://github.com/b3log/wide" target="_blank">github.com/b3log/wide</a><br/>
 
@@ -24,27 +25,25 @@
 
     <label>{{.i18n.donate}}{{.i18n.colon}}</label>
     <a href="http://b3log.org/donate.html" target="_blank">b3log.org/donate.html</a>
-        </div>
+</div>
-        <div class="fn-left thx">
+
+<div class="thx item">
     <label>{{.i18n.credits}}{{.i18n.colon}}</label>
     <ul>
         <li>
             <a href="http://golang.org" target="_blank">golang</a>
             <a href="https://github.com/marijnh/CodeMirror" target="_blank">CodeMirror</a>
-                </li>
-                <li>
             <a href="https://github.com/zTree/zTree_v3" target="_blank">zTree</a>
             <a href="https://github.com/visualfc/liteide" target="_blank">LiteIDE</a>
-                </li>
-                <li>
             <a href="https://github.com/nsf/gocode" target="_blank">gocode</a>
             <a href="https://github.com/gorilla" target="_blank">Gorilla</a>
         </li>
     </ul>
-        </div>
+</div>
-    </div>
+
-    <div class="space"></div>
+<div class="space"></div>
-    <div>
+
+<div class="item">
     <label>{{.i18n.license}}{{.i18n.colon}}</label>
     <pre class="license">
                                  Apache License
@@ -249,5 +248,4 @@
    See the License for the specific language governing permissions and
    limitations under the License.
     </pre>
-    </div>
 </div>