file list style

2 files changed, 119 insertions, 74 deletions

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 2adbde23e2..6d888745bf 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -463,56 +463,6 @@ html, body {
     padding: 0;
 }
 
-/* #gogs-source */
-
-#gogs-source-toolbar:after {
-    clear: both;
-}
-
-#gogs-source-toolbar .branch-switch {
-    display: inline-block;
-}
-
-#gogs-source-toolbar .breadcrumb {
-    margin: 0 .5em;
-    font-size: 16px;
-    vertical-align: middle;
-    display: inline-block;
-    background-color: transparent;
-}
-
-#gogs-source-table {
-    margin-top: 1.5em;
-    font-size: 14px;
-}
-
-#gogs-source-table .fa{
-    font-size: 15px;
-    width: 16px;
-    text-align: center;
-    color: #666;
-}
-
-#gogs-source-table .name{
-    width: 160px;
-}
-
-#gogs-source-table .size{
-    width: 80px;
-}
-
-#gogs-source-table .date{
-    width: 120px;
-}
-
-#gogs-source-table .is-dir .name {
-    font-weight: bold;
-}
-
-#gogs-source-table.table-hover > tbody > tr:hover > td {
-    background-color: #FEFEFE;
-}
-
 .activity-list {
     font-size: 14px;
 }
@@ -574,6 +524,70 @@ html, body {
     color: #999;
 }
 
+/* #gogs-source */
+#gogs-source .source-toolbar:after {
+    clear: both;
+}
+
+#gogs-source .source-toolbar .branch-switch {
+    display: inline-block;
+}
+
+#gogs-source .source-toolbar .breadcrumb {
+    margin: 0 .5em;
+    padding: 6px 15px;
+    font-size: 16px;
+    vertical-align: middle;
+    display: inline-block;
+    background-color: transparent;
+}
+
+#gogs-source .source-toolbar,
+#gogs-source .info-box,
+#gogs-source .file-content {
+    margin: 0 0 10px;
+}
+
+.info-box .info-head,
+.info-box .info-content {
+    padding: 9px 20px;
+}
+
+.file-list {
+    background-color: #fafafa;
+}
+
+.file-list .icon {
+    font-size: 17px;
+    padding: 5px 0 4px 10px;
+    width: 40px;
+}
+
+.file-list .wrap {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    white-space: nowrap;
+}
+
+.file-list .name .wrap {
+    max-width: 180px;
+}
+
+.file-list .text .wrap {
+    max-width: 450px;
+}
+
+.file-list .date .wrap {
+    max-width: 100px;
+    padding: 0 20px 0 0; 
+}
+
+.file-list .date {
+    text-align: right;
+}
+
 #wrapper {
     min-height: 100%;
     height: auto !important;
diff --git a/templates/repo/single.tmpl b/templates/repo/single.tmpl
index 8ea7e2bbf9..c83723446a 100644
--- a/templates/repo/single.tmpl
+++ b/templates/repo/single.tmpl
@@ -4,7 +4,7 @@
 {{template "repo/toolbar" .}}
 <div id="gogs-body" class="container">
     <div id="gogs-source">
-        <div id="gogs-source-toolbar">
+        <div class="source-toolbar">
             <button class="btn btn-default pull-right"><i class="fa fa-plus-square"></i>Add File</button>
             <div class="dropdown branch-switch">
                 <a href="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><i class="fa fa-chain"></i>master&nbsp;&nbsp;
@@ -32,29 +32,60 @@
                 {{end}}
             </ol>
         </div>
-        <table id="gogs-source-table" class="table table-hover">
-            <thead class="hidden">
-	            <tr>
-	                <th class="name">Filename</th>
-	                <th class="date">Date modified</th>
-	                <th class="text">Message</th>
-	            </tr>
-            </thead>
-            <tbody>
-    			{{range .Files}}
-				<tr {{if .IsDir}}class="is-dir"{{end}}>
-	                <td class="name"><i class="fa {{if .IsDir}}fa-folder{{else}}fa-file{{end}}"></i>
-                    {{if .IsDir}}
-                    <a href="/{{$username}}/{{$reponame}}/tree/{{$branchname}}/{{.Path}}">{{.Name}}</a>
-                    {{else}}
-                    <a href="/{{$username}}/{{$reponame}}/blob/{{$branchname}}/{{.Name}}">{{.Name}} - {{FileSize .Size}}</a>
-                    {{end}}</td>
-	                <td class="date"><time datetime="{{.Created}}" data-title="true" title="{{.Created}}">{{TimeSince .Created}}</time></td>
-	                <td class="text">{{.Message}}</td>
-				</tr>
-    			{{end}}
-            </tbody>
-        </table>
+        <div class="panel panel-default info-box">
+            <div class="panel-heading info-head">
+                Merge branch 'release/1.1.1'
+            </div>
+            <div class="panel-body info-content">
+                slene authored 4 days ago
+            </div>
+            <table class="panel-footer table file-list">
+                <thead class="hidden">
+    	            <tr>
+                        <th class="icon"></th>
+    	                <th class="name">Filename</th>
+                        <th class="text">Message</th>
+    	                <th class="date">Date modified</th>
+    	            </tr>
+                </thead>
+                <tbody>
+        			{{range .Files}}
+    				<tr {{if .IsDir}}class="is-dir"{{end}}>
+                        <td class="icon">
+                            <i class="fa {{if .IsDir}}fa-folder{{else}}fa-file-text-o{{end}}"></i>
+                        </td>
+    	                <td class="name">
+                            <span class="wrap">
+                                {{if .IsDir}}
+                                <a href="/{{$username}}/{{$reponame}}/tree/{{$branchname}}/{{.Path}}">{{.Name}}</a>
+                                {{else}}
+                                <a href="/{{$username}}/{{$reponame}}/blob/{{$branchname}}/{{.Name}}">{{.Name}}</a>
+                                {{end}}
+                            </span>
+                        </td>
+    	                <td class="text">
+                            <span class="wrap">
+                                {{.Message}}
+                            </span>
+                        </td>
+                        <td class="date">
+                            <span class="wrap">
+                                {{TimeSince .Created}}
+                            </span>
+                        </td>
+    				</tr>
+        			{{end}}
+                </tbody>
+            </table>
+        </div>
+        <div class="panel panel-default file-content">
+            <div class="panel-heading">
+                README.md
+            </div>
+            <div class="panel-body markdown">
+                 httplib
+            </div>
+        </div>
     </div>
 </div>
 {{template "base/footer" .}}
\ No newline at end of file