fix issue

options/locale/locale_en-US.ini

@@ -218,6 +218,7 @@ show_only_private = Showing only private
 show_only_public = Showing only public
 
 issues.in_your_repos = In your repositories
+contributors = Contributors
 
 [explore]
 repos = Repositories

options/locale/locale_zh-CN.ini

@@ -220,6 +220,8 @@ show_only_public=只显示公开的
 
 issues.in_your_repos=属于该用户项目的
 
+contributors=贡献者
+
 [explore]
 repos=项目
 users=用户

templates/repo/contributors.tmpl

@@ -1,6 +1,101 @@
 {{template "base/head" .}}
+<style>
+.git-user-content{
+	margin-bottom: 16px;
+    word-break: break-all;
+}
+.row.git-user-content .ui.avatar.s16.image {
+    width: 50px !important;
+    height: 50px !important;
+    vertical-align: middle;
+	border-radius: 500rem;}
+.user-list-item {
+	padding: 0.3em 0px !important;
+	margin: 15px 0 !important;
+    width: 220px !important;
+}
+.row.git-user-content .content {
+    margin-left: 6px;
+    display: inline-block;
+    vertical-align: top !important;
+	overflow: hidden;
+}
+.row.git-user-content .content .header {
+    font-weight: bold;
+}
+.item.user-list-item .header {
+    line-height: 23px !important;
+    font-size: 16px !important;
+    text-overflow: ellipsis;
+    overflow: hidden;
+	width: 145px;
+	
+   white-space:nowrap;
+   
+}
+.item.user-list-item .header a {
+    color: #587284 !important;
+}
+.row.git-user-content .content .commit-btn {
+    margin-top: 6px;
+    float: left;
+	font-size: 11px;
+	color: #40485b !important;
+}
+
+#contributorEmail{
+	width: 2.0em;
+	height: 2.0em;
+	padding: 0;
+	overflow: hidden;
+	letter-spacing:1.0em;
+	text-indent: 0.6em;
+	line-height: 2.0em;
+	text-transform:capitalize;
+	color: #FFF;
+}
+
+</style>
 <div class="repository watchers">
 	{{template "repo/header" .}}
-	{{template "repo/user_cards" .}}
+	<div class="ui container">
+		
+		<div class="row git-user-content">
+			<h3 class="ui header">
+				{{.i18n.Tr "home.contributors"}} ({{len .ContributorInfo}})
+			</h3>
+			<div class="ui horizontal relaxed list">
+				{{range .ContributorInfo}}
+					<div class="item user-list-item" data-username="" >
+						{{if .UserInfo}}
+						<a href="{{AppSubUrl}}/{{.UserInfo.Name}}"><img class="ui avatar s16 image js-popover-card" src="{{.UserInfo.RelAvatarLink}}"></a>
+						{{else if .Email}}
+						<a href="mailto:{{.Email}}"><img class="ui avatar s16 image js-popover-card" avatar="{{.Email}}"></a>
+						{{end}}
+
+						<div class="content">
+							<div class="header" >
+								{{if .UserInfo}}
+								<a href="{{AppSubUrl}}/{{.UserInfo.Name}}">{{.UserInfo.Name}}</a>
+								{{else if .Email}}
+								<a href="mailto:{{.Email}}">{{.Email}}</a>
+								{{end}}
+							</div>
+							<span class="commit-btn">Commits: {{.CommitCnt}}</span>
+						</div>
+
+					</div>
+
+				{{end}}
+
+			</div>
+
+			{{template "base/paginate" .}}
+
+		</div>
+		
+
+
+	</div>
 </div>
 {{template "base/footer" .}}

templates/repo/home.tmpl

@@ -331,7 +331,7 @@
 						<h4 class="ui header">
 							<strong>贡献者 ({{len .ContributorInfo}})</strong>
 							<div class="ui right">
-								<a class="membersmore text grey" href="javascript:;">全部 {{svg "octicon-chevron-right" 16}}</a>
+								<a class="membersmore text grey" href="{{.RepoLink}}/contributors">全部 {{svg "octicon-chevron-right" 16}}</a>
 							</div>
 						</h4>
 						<div class="ui members" id="contributorInfo">
@@ -353,10 +353,10 @@
 </div>
 
 <script type="text/javascript">
-$(document).ready(function(){
-    $(".membersmore").click(function(){
-       $("#contributorInfo > a:nth-child(n+25)").show();
-    });
-});
+// $(document).ready(function(){
+//     $(".membersmore").click(function(){
+//        $("#contributorInfo > a:nth-child(n+25)").show();
+//     });
+// });
 </script>
 {{template "base/footer" .}}

web_src/js/features/letteravatar.js

@@ -0,0 +1,74 @@
+/**
+ * LetterAvatar
+ * 
+ * Artur Heinze
+ * Create Letter avatar based on Initials
+ * based on https://gist.github.com/leecrossley/6027780
+ */
+(function(w, d){
+    function LetterAvatar (name, size, color) {
+        name  = name || '';
+        size  = size || 60;
+        var colours = [
+                "#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", 
+                "#f1c40f", "#e67e22", "#e74c3c", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
+            ],
+            nameSplit = String(name).split(' '),
+            initials, charIndex, colourIndex, canvas, context, dataURI;
+        if (nameSplit.length == 1) {
+            initials = nameSplit[0] ? nameSplit[0].charAt(0):'?';
+        } else {
+            initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0);
+        }
+        if (w.devicePixelRatio) {
+            size = (size * w.devicePixelRatio);
+        }
+            
+        charIndex     = (initials == '?' ? 72 : initials.charCodeAt(0)) - 64;
+        colourIndex   = charIndex % 20;
+        canvas        = d.createElement('canvas');
+        canvas.width  = size;
+        canvas.height = size;
+        context       = canvas.getContext("2d");
+         
+        context.fillStyle = color ? color : colours[colourIndex - 1];
+        context.fillRect (0, 0, canvas.width, canvas.height);
+        context.font = Math.round(canvas.width/2)+"px 'Microsoft Yahei'";
+        context.textAlign = "center";
+        context.fillStyle = "#FFF";
+        context.fillText(initials, size / 2, size / 1.5);
+        dataURI = canvas.toDataURL();
+        canvas  = null;
+        return dataURI;
+    }
+    LetterAvatar.transform = function() {
+        Array.prototype.forEach.call(d.querySelectorAll('img[avatar]'), function(img, name, color) {
+            name = img.getAttribute('avatar');
+            color = img.getAttribute('color');
+            img.src = LetterAvatar(name, img.getAttribute('width'), color);
+            img.removeAttribute('avatar');
+            img.setAttribute('alt', name);
+        });
+    };
+    // AMD support
+    if (typeof define === 'function' && define.amd) {
+        
+        define(function () { return LetterAvatar; });
+    
+    // CommonJS and Node.js module support.
+    } else if (typeof exports !== 'undefined') {
+        
+        // Support Node.js specific `module.exports` (which can be a function)
+        if (typeof module != 'undefined' && module.exports) {
+            exports = module.exports = LetterAvatar;
+        }
+        // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function)
+        exports.LetterAvatar = LetterAvatar;
+    } else {
+        
+        window.LetterAvatar = LetterAvatar;
+        d.addEventListener('DOMContentLoaded', function(event) {
+            LetterAvatar.transform();
+        });
+    }
+})(window, document);

web_src/js/index.js

@@ -4,7 +4,7 @@
 
 import './publicpath.js';
 import './polyfills.js';
-
+import './features/letteravatar.js'
 import Vue from 'vue';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';