Simplify settings pages with item list (#1389)

* Remove point column on ssh key setting page

* Remove un-used css

* Some cleaning

* Use octicon-key

5 files changed, 57 insertions, 67 deletions

diff --git a/templates/user/settings/account_link.tmpl b/templates/user/settings/account_link.tmpl
index 4b19bea75c..81ddf626e1 100644
--- a/templates/user/settings/account_link.tmpl
+++ b/templates/user/settings/account_link.tmpl
@@ -13,16 +13,16 @@
 				</div>
 				{{if .AccountLinks}}
 				{{range $loginSource, $provider := .AccountLinks}}
-					<div class="item ui grid">
-						<div class="column">
-							<strong>{{$provider}}</strong>
-							{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
-							<div class="ui right">
+					<div class="item">
+					    <div class="right floated content">
 								<button class="ui red tiny button delete-button" data-url="{{$.Link}}" data-id="{{$loginSource.ID}}">
 									{{$.i18n.Tr "settings.delete_key"}}
 								</button>
+					    </div>
+							<div class="content">
+								<strong>{{$provider}}</strong>
+								{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
 							</div>
-						</div>
 					</div>
 				{{end}}
 				{{end}}
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index d8ba6d65a7..d4d19dcedf 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -15,24 +15,19 @@
 					{{.i18n.Tr "settings.tokens_desc"}}
 				</div>
 				{{range .Tokens}}
-					<div class="item ui grid">
-						<div class="one wide column">
-							<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
-						</div>
-						<div class="one wide column">
-							<i class="fa fa-send fa-2x left"></i>
-						</div>
-						<div class="eleven wide column">
-							<strong>{{.Name}}</strong>
-							<div class="activity meta">
-								<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> —  <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
+					<div class="item">
+					    <div class="right floated content">
+								<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+									{{$.i18n.Tr "settings.delete_token"}}
+								</button>
+					    </div>
+							<i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
+							<div class="content">
+								<strong>{{.Name}}</strong>
+								<div class="activity meta">
+									<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> —  <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
+								</div>
 							</div>
-						</div>
-						<div class="two wide column">
-							<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
-								{{$.i18n.Tr "settings.delete_token"}}
-							</button>
-						</div>
 					</div>
 				{{end}}
 			</div>
diff --git a/templates/user/settings/email.tmpl b/templates/user/settings/email.tmpl
index f54a2fc833..88675f0e99 100644
--- a/templates/user/settings/email.tmpl
+++ b/templates/user/settings/email.tmpl
@@ -12,28 +12,28 @@
 					{{.i18n.Tr "settings.email_desc"}}
 				</div>
 				{{range .Emails}}
-					<div class="item ui grid">
-						<div class="column">
-							<strong>{{.Email}}</strong>
-							{{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
+					<div class="item">
 							{{if not .IsPrimary}}
-								<div class="ui right">
+						    <div class="right floated content">
 									<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
 										{{$.i18n.Tr "settings.delete_key"}}
 									</button>
-								</div>
-								{{if .IsActivated}}
-									<div class="ui right">
-										<form action="{{$.Link}}" method="post">
-											{{$.CsrfTokenHtml}}
-											<input name="_method" type="hidden" value="PRIMARY">
-											<input name="id" type="hidden" value="{{.ID}}">
-											<button class="ui green tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
-										</form>
-									</div>
-								{{end}}
+						    </div>
+									{{if .IsActivated}}
+								    <div class="right floated content">
+											<form action="{{$.Link}}" method="post">
+												{{$.CsrfTokenHtml}}
+												<input name="_method" type="hidden" value="PRIMARY">
+												<input name="id" type="hidden" value="{{.ID}}">
+												<button class="ui green tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
+											</form>
+										</div>
+									{{end}}
 							{{end}}
-						</div>
+							<div class="content">
+								<strong>{{.Email}}</strong>
+								{{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
+							</div>
 					</div>
 				{{end}}
 			</div>
diff --git a/templates/user/settings/openid.tmpl b/templates/user/settings/openid.tmpl
index 9da4be4274..1a73bf5545 100644
--- a/templates/user/settings/openid.tmpl
+++ b/templates/user/settings/openid.tmpl
@@ -12,15 +12,13 @@
 					{{.i18n.Tr "settings.openid_desc"}}
 				</div>
 				{{range .OpenIDs}}
-					<div class="item ui grid">
-						<div class="column">
-							<strong>{{.URI}}</strong>
-							<div class="ui right">
+					<div class="item">
+					    <div class="right floated content">
 								<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
 									{{$.i18n.Tr "settings.delete_key"}}
 								</button>
-							</div>
-							<div class="ui right">
+					    </div>
+							<div class="right floated content">
 								<form action="{{$.Link}}/toggle_visibility" method="post">
 								{{$.CsrfTokenHtml}}
 								<input name="id" type="hidden" value="{{.ID}}">
@@ -38,7 +36,9 @@
 								</button>
 								</form>
 							</div>
-						</div>
+							<div class="content">
+								<strong>{{.URI}}</strong>
+							</div>
 					</div>
 				{{end}}
 			</div>
diff --git a/templates/user/settings/sshkeys.tmpl b/templates/user/settings/sshkeys.tmpl
index bb4a6c6a83..7942afde41 100644
--- a/templates/user/settings/sshkeys.tmpl
+++ b/templates/user/settings/sshkeys.tmpl
@@ -15,27 +15,22 @@
 					{{.i18n.Tr "settings.ssh_desc"}}
 				</div>
 				{{range .Keys}}
-					<div class="item ui grid">
-						<div class="one wide column">
-							<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
-						</div>
-						<div class="one wide column">
-							<i class="mega-octicon octicon-key left"></i>
-						</div>
-						<div class="eleven wide column">
-							<strong>{{.Name}}</strong>
-							<div class="print meta">
-								{{.Fingerprint}}
+					<div class="item">
+					    <div class="right floated content">
+								<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+									{{$.i18n.Tr "settings.delete_key"}}
+								</button>
+					    </div>
+							<i class="mega-octicon octicon-key {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
+							<div class="content">
+								<strong>{{.Name}}</strong>
+								<div class="print meta">
+									{{.Fingerprint}}
+								</div>
+								<div class="activity meta">
+									<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> —  <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
+								</div>
 							</div>
-							<div class="activity meta">
-								<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> —  <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
-							</div>
-						</div>
-						<div class="two wide column">
-							<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
-								{{$.i18n.Tr "settings.delete_key"}}
-							</button>
-						</div>
 					</div>
 				{{end}}
 			</div>