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

public/css/index.css

@@ -2944,6 +2944,14 @@ footer .ui.language .menu {
   padding-top: 15px;
   padding-bottom: 80px;
 }
+.explore .navbar {
+  justify-content: center;
+  padding-top: 15px !important;
+  margin-top: -15px !important;
+  margin-bottom: 15px !important;
+  background-color: #FAFAFA !important;
+  border-width: 1px !important;
+}
 .explore .navbar .octicon {
   width: 16px;
   text-align: center;

public/less/_explore.less

@@ -3,6 +3,13 @@
 	padding-bottom: @footer-margin * 2;
 
 	.navbar {
+        justify-content: center;
+        padding-top: 15px !important;
+        margin-top: -15px !important;
+        margin-bottom: 15px !important;
+        background-color: #FAFAFA !important;
+        border-width: 1px !important;
+        
 		.octicon {
 			width: 16px;
 			text-align: center;
@@ -72,4 +79,4 @@
 			}
 		}
 	}
-}
+}

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>

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" .}}

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" .}}

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" .}}