aiforge/templates/explore/organizations.tmpl

<link rel="stylesheet" href="/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="/css/git.openi.css">
<script src="/swiper/swiper-bundle.min.js"></script>
<script src="/self/js/jquery.min.js" type="text/javascript"></script>


{{template "base/head" .}}
<div class="explore users">
	{{template "explore/search" .}}

	<div class="ui container">
		<div class="ui grid">
			<div class="ui container homeorg">
				<div class="ui stackable grid">
					<!-- <div class="sixteen wide tablet four wide computer column homeorg-tit">
						<h2>推荐组织</h2>
						<p><span class="ui text grey">{{$.page_recommend_org_desc}}&nbsp;</span><a href="{{.RecommendURL}}">{{$.page_recommend_org_commit}}</a></p>
						<a href="{{AppSubUrl}}/explore/organizations" class="circular ui primary basic button">{{$.page_recommend_org_more}} <i class="arrow circle right icon"></i></a>
					</div> -->
					<div class="sixteen wide tablet twelve wide computer column">
						<div class="homeorg-list" >
							<div class="swiper-wrapper" id="recommendorg">
								{{range .RecommendOrgs}}
									<div class="swiper-slide">
										<a href="{{.HomeLink}}" class= "ui fluid card">
											<div class="content">
												<div class= "ui small header">
													<img class="ui image" src="{{.Avatar}}" >
													<div class="content nowrap">
														<span class="ui blue"> {{.Name}} </span>  {{.FullName}}
														<div class="sub header"> 
															<span>
																{{.NumRepos}}
																{{if le .NumRepos 1}}
																	{{$.i18n.Tr "org.org_repository"}}
																{{else}}
																	{{$.i18n.Tr "org.org_repositories"}}
																{{end}}
															</span>
															. <span>
																{{.NumMembers}}
																{{if le .NumRepos 1}}
																	{{$.i18n.Tr "org.org_member"}}
																{{else}}
																	{{$.i18n.Tr "org.org_members"}}
																{{end}}
															</span>
															.<span>
																{{.NumTeams}}
																{{if le .NumRepos 1}}
																	{{$.i18n.Tr "org.org_team"}}
																{{else}}
																	{{$.i18n.Tr "org.org_teams"}}
																{{end}} 
															</span>
														</div>
													</div>
												</div>
											</div>
										</a>
									</div>
								{{end}}
							</div>
							<div class="swiper-pagination"></div>
							
						</div>
					</div>
				</div>
				
				<div class="leftline01"></div>
			</div>

			{{template "explore/navbar" .}}
			<div class="sixteen wide mobile ten wide tablet ten wide computer column">
				<h2 class="ui left floated medium header">
					{{.i18n.Tr "explore.organizations"}}
				</h2>
				<div class="ui right floated secondary filter menu">
				<!-- Sort -->
					<div class="ui right dropdown type jump item">
						<span class="text">
							{{.i18n.Tr "repo.issues.filter_sort"}}
							<i class="dropdown icon"></i>
						</span>
						<div class="menu">
							<a class="{{if eq .SortType "newest"}}active{{end}} item" href="{{$.Link}}?sort=newest&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>
							<a class="{{if eq .SortType "oldest"}}active{{end}} item" href="{{$.Link}}?sort=oldest&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.oldest"}}</a>
							<a class="{{if eq .SortType "alphabetically"}}active{{end}} item" href="{{$.Link}}?sort=alphabetically&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
							<a class="{{if eq .SortType "reversealphabetically"}}active{{end}} item" href="{{$.Link}}?sort=reversealphabetically&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
							<a class="{{if eq .SortType "recentupdate"}}active{{end}} item" href="{{$.Link}}?sort=recentupdate&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.recentupdate"}}</a>
							<a class="{{if eq .SortType "leastupdate"}}active{{end}} item" href="{{$.Link}}?sort=leastupdate&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.leastupdate"}}</a>
						</div>
					</div>
				</div>

				<div class="ui clearing divider"></div>

				<div class="ui user list">
					{{range .Users}}
						<div class="item">
						  <img class="ui avatar image" src="{{.RelAvatarLink}}">
						  <div class="content">
							<span class="header">
								<a href="{{.HomeLink}}">{{.Name}}</a> {{.FullName}}
								{{if .Visibility.IsPrivate}}
									<span class="text gold">{{svg "octicon-lock" 16}}</span>
								{{end}}
							</span>
							<div class="description">
								{{if .Location}}
									{{svg "octicon-location" 16}} {{.Location}}
								{{end}}
								{{if and .Website}}
									{{svg "octicon-link" 16}}
									<a href="{{.Website}}" rel="nofollow">{{.Website}}</a>
								{{end}}
								{{svg "octicon-clock" 16}} {{$.i18n.Tr "user.join_on"}} {{.CreatedUnix.FormatShort}}
							</div>
						  </div>
						</div>
					{{else}}
						<div>{{$.i18n.Tr "explore.org_no_results"}}</div>
					{{end}}
				</div>

			{{template "base/paginate" .}}
			</div>
			<div class="sixteen wide mobile six wide tablet three wide computer column">
				{{template "explore/repo_right" .}}
			</div>
		</div>
	</div>
</div>

{{template "base/footer" .}}

<script>

window.onload = function() {
	var swiperOrg = new Swiper(".homeorg-list", {
		slidesPerView: 1,
		slidesPerColumn: 4,
		slidesPerColumnFill:'row',
		spaceBetween: 15,
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
		autoplay: {
			delay: 4500,
			disableOnInteraction: false,
		},
		breakpoints: {
			768: {
				slidesPerView: 2,
			},
			1024: {
				slidesPerView: 3,
			},
    	},

	});

}


</script>