Style orgs list in user profile (#6911)

Author: xf-

public/css/index.css

@@ -890,6 +890,8 @@ tbody.commit-list{vertical-align:baseline}
 .user.notification .octicon.blue{color:#2185d0}
 .user.link-account:not(.icon){padding-top:15px;padding-bottom:5px}
 .user.settings .iconFloat{float:left}
+.user-orgs{display:flex;flex-flow:row wrap;padding:0;margin:-3px!important}
+.user-orgs li{display:flex;border-bottom:0!important;padding:3px!important;width:20%;max-width:60px}
 .dashboard{padding-top:15px}
 .dashboard.feeds .context.user.menu,.dashboard.issues .context.user.menu{z-index:101;min-width:200px}
 .dashboard.feeds .context.user.menu .ui.header,.dashboard.issues .context.user.menu .ui.header{font-size:1rem;text-transform:none}

public/less/_user.less

@@ -133,3 +133,18 @@
         }
     }
 }
+
+.user-orgs {
+    display: flex;
+    flex-flow: row wrap;
+    padding: 0;
+    margin: -3px !important;
+
+    li {
+        display: flex;
+        border-bottom: 0 !important;
+        padding: 3px !important;
+        width: 20%;
+        max-width: 60px;
+    }
+}

templates/user/profile.tmpl

@@ -69,11 +69,15 @@
 							*/}}
 							{{if and .Orgs .HasOrgsVisible}}
 							<li>
+								<ul class="user-orgs">
 								{{range .Orgs}}
 									{{if (or .Visibility.IsPublic (and ($.SignedUser) (or .Visibility.IsLimited (and (.IsUserPartOfOrg $.SignedUserID) .Visibility.IsPrivate) ($.IsAdmin))))}}
-										<a href="{{.HomeLink}}"><img class="ui mini image poping up" src="{{.RelAvatarLink}}" data-content="{{.Name}}" data-position="top center" data-variation="tiny inverted"></a>
+									<li>
+										<a href="{{.HomeLink}}"><img class="ui image poping up" src="{{.RelAvatarLink}}" data-content="{{.Name}}" data-position="top center" data-variation="tiny inverted"></a>
+									</li>
 									{{end}}
 								{{end}}
+								</ul>
 							</li>
 							{{end}}
 							{{if and .IsSigned (ne .SignedUserName .Owner.Name)}}