Cleaner UI for explore page (#1253) (#1255)

* Take navbar out of column
* Add styles to navbar
* Changed navbar classes
* Remove unneeded !important from index.css
* Remove unneeded !important from _explore.less

4 files changed, 62 insertions, 77 deletions

diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl
index 2e20da0fa5..5977e950d0 100644
--- a/templates/explore/navbar.tmpl
+++ b/templates/explore/navbar.tmpl
@@ -1,14 +1,11 @@
-<div class="four wide column">
-	<div class="ui vertical menu navbar">
-		<div class="header item">{{.i18n.Tr "explore"}}</div>
-		<a class="{{if .PageIsExploreRepositories}}active{{end}} item" href="{{AppSubUrl}}/explore/repos">
-			<span class="octicon octicon-repo"></span> {{.i18n.Tr "explore.repos"}}
-		</a>
-		<a class="{{if .PageIsExploreUsers}}active{{end}} item" href="{{AppSubUrl}}/explore/users">
-			<span class="octicon octicon-person"></span> {{.i18n.Tr "explore.users"}}
-		</a>
-		<a class="{{if .PageIsExploreOrganizations}}active{{end}} item" href="{{AppSubUrl}}/explore/organizations">
-			<span class="octicon octicon-organization"></span> {{.i18n.Tr "explore.organizations"}}
-		</a>
-	</div>
+<div class="ui secondary pointing tabular top attached borderless menu navbar">
+	<a class="{{if .PageIsExploreRepositories}}active{{end}} item" href="{{AppSubUrl}}/explore/repos">
+		<span class="octicon octicon-repo"></span> {{.i18n.Tr "explore.repos"}}
+	</a>
+	<a class="{{if .PageIsExploreUsers}}active{{end}} item" href="{{AppSubUrl}}/explore/users">
+		<span class="octicon octicon-person"></span> {{.i18n.Tr "explore.users"}}
+	</a>
+	<a class="{{if .PageIsExploreOrganizations}}active{{end}} item" href="{{AppSubUrl}}/explore/organizations">
+		<span class="octicon octicon-organization"></span> {{.i18n.Tr "explore.organizations"}}
+	</a>
 </div>
diff --git a/templates/explore/organizations.tmpl b/templates/explore/organizations.tmpl
index 7044894a06..4b1ab18349 100644
--- a/templates/explore/organizations.tmpl
+++ b/templates/explore/organizations.tmpl
@@ -1,37 +1,33 @@
 {{template "base/head" .}}
 <div class="explore users">
+	{{template "explore/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "explore/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "explore/search" .}}
+		{{template "explore/search" .}}
 
-				<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}}</span>
-						    <div class="description">
-									{{if .Location}}
-										<i class="octicon octicon-location"></i> {{.Location}}
-									{{end}}
-									{{if and .Website}}
-										<i class="octicon octicon-link"></i>
-										<a href="{{.Website}}" rel="nofollow">{{.Website}}</a>
-									{{end}}
-									<i class="octicon octicon-clock"></i> {{$.i18n.Tr "user.join_on"}} {{DateFmtShort .Created}}
-						    </div>
-						  </div>
-						</div>
-					{{else}}
-						<div>{{$.i18n.Tr "explore.org_no_results"}}</div>
-					{{end}}
+		<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}}</span>
+					<div class="description">
+							{{if .Location}}
+								<i class="octicon octicon-location"></i> {{.Location}}
+							{{end}}
+							{{if and .Website}}
+								<i class="octicon octicon-link"></i>
+								<a href="{{.Website}}" rel="nofollow">{{.Website}}</a>
+							{{end}}
+							<i class="octicon octicon-clock"></i> {{$.i18n.Tr "user.join_on"}} {{DateFmtShort .Created}}
+					</div>
+				  </div>
 				</div>
-
-				{{template "base/paginate" .}}
-			</div>
+			{{else}}
+				<div>{{$.i18n.Tr "explore.org_no_results"}}</div>
+			{{end}}
 		</div>
+
+		{{template "base/paginate" .}}
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/explore/repos.tmpl b/templates/explore/repos.tmpl
index eac3f1d26c..9ca9879103 100644
--- a/templates/explore/repos.tmpl
+++ b/templates/explore/repos.tmpl
@@ -1,14 +1,10 @@
 {{template "base/head" .}}
 <div class="explore repositories">
+	{{template "explore/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "explore/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "explore/search" .}}
-				{{template "explore/repo_list" .}}
-				{{template "base/paginate" .}}
-			</div>
-		</div>
+		{{template "explore/search" .}}
+		{{template "explore/repo_list" .}}
+		{{template "base/paginate" .}}
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/explore/users.tmpl b/templates/explore/users.tmpl
index 1fbe8653b3..0bbbec2ed6 100644
--- a/templates/explore/users.tmpl
+++ b/templates/explore/users.tmpl
@@ -1,37 +1,33 @@
 {{template "base/head" .}}
 <div class="explore users">
+	{{template "explore/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "explore/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "explore/search" .}}
+		{{template "explore/search" .}}
 
-				<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}}</span>
-						    <div class="description">
-									{{if .Location}}
-										<i class="octicon octicon-location"></i> {{.Location}}
-									{{end}}
-									{{if and $.ShowUserEmail .Email $.IsSigned (not .KeepEmailPrivate)}}
-										<i class="octicon octicon-mail"></i>
-										<a href="mailto:{{.Email}}" rel="nofollow">{{.Email}}</a>
-									{{end}}
-									<i class="octicon octicon-clock"></i> {{$.i18n.Tr "user.join_on"}} {{DateFmtShort .Created}}
-						    </div>
-						  </div>
-						</div>
-					{{else}}
-						<div>{{$.i18n.Tr "explore.user_no_results"}}</div>
-					{{end}}
+		<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}}</span>
+					<div class="description">
+							{{if .Location}}
+								<i class="octicon octicon-location"></i> {{.Location}}
+							{{end}}
+							{{if and $.ShowUserEmail .Email $.IsSigned (not .KeepEmailPrivate)}}
+								<i class="octicon octicon-mail"></i>
+								<a href="mailto:{{.Email}}" rel="nofollow">{{.Email}}</a>
+							{{end}}
+							<i class="octicon octicon-clock"></i> {{$.i18n.Tr "user.join_on"}} {{DateFmtShort .Created}}
+					</div>
+				  </div>
 				</div>
-
-				{{template "base/paginate" .}}
-			</div>
+			{{else}}
+				<div>{{$.i18n.Tr "explore.user_no_results"}}</div>
+			{{end}}
 		</div>
+
+		{{template "base/paginate" .}}
 	</div>
 </div>
 {{template "base/footer" .}}