Finish new hooks list page

5 files changed, 58 insertions, 54 deletions

diff --git a/templates/.VERSION b/templates/.VERSION
index 0621825f4b..760339a997 100644
--- a/templates/.VERSION
+++ b/templates/.VERSION
@@ -1 +1 @@
-0.4.7.0807 Alpha
\ No newline at end of file
+0.4.7.0809 Alpha
\ No newline at end of file
diff --git a/templates/repo/hooks.tmpl b/templates/repo/hooks.tmpl
deleted file mode 100644
index 85132e4b81..0000000000
--- a/templates/repo/hooks.tmpl
+++ /dev/null
@@ -1,33 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-{{template "repo/nav" .}}
-{{template "repo/toolbar" .}}
-<div id="body" class="container">
-    {{template "repo/setting_nav" .}}
-    <div id="repo-setting-container" class="col-md-10">
-        {{template "base/alert" .}}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                Webhooks
-            </div>
-            <div class="panel-body">
-                <p>Webhooks allow external services to be notified when certain events happen on GitHub. When the specified events happen, we'll send a POST request to each of the URLs you provide. Learn more in our Webhooks Guide.<br/>&nbsp;</p>
-                <ul id="repo-hooks-list" class="list-unstyled">
-                    {{range .Webhooks}}
-                    <li>
-                        {{if .IsActive}}<span class="pull-left status text-success"><i class="fa fa-check"></i></span>{{else}}<span class="pull-left status"><i class="fa fa-times"></i></span>{{end}}
-                        <a class="link" href="{{$.RepoLink}}/settings/hooks/{{.Id}}">{{.Url}}</a>
-                        <a href="{{$.RepoLink}}/settings/hooks?remove={{.Id}}" class="remove-hook pull-right"><i class="fa fa-times"></i></a>
-                        <a href="{{$.RepoLink}}/settings/hooks/{{.Id}}" class="edit-hook pull-right"><i class="fa fa-pencil"></i></a>
-                    </li>
-                    {{end}}
-                </ul>
-            </div>
-            <div class="panel-footer">
-                <a href="{{.RepoLink}}/settings/hooks/add"><button class="btn btn-primary">Add Webhook</button></a>
-            </div>
-        </div>
-
-    </div>
-</div>
-{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/settings/hooks.tmpl b/templates/repo/settings/hooks.tmpl
new file mode 100644
index 0000000000..7081e78f91
--- /dev/null
+++ b/templates/repo/settings/hooks.tmpl
@@ -0,0 +1,35 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    {{template "repo/header" .}}
+	<div id="setting-wrapper" class="main-wrapper">
+	    <div id="repo-setting" class="container clear">
+	        {{template "repo/settings/nav" .}}
+	        <div class="grid-4-5 left">
+	            <div class="setting-content">
+	                {{template "ng/base/alert" .}}
+	                <div id="setting-content">
+	                    <div id="repo-hooks-panel" class="panel panel-radius">
+	                        <div class="panel-header">
+                            	<a class="btn btn-small btn-black btn-header btn-radius right" href="{{.RepoLink}}/settings/hooks/new">{{.i18n.Tr "repo.settings.add_webhook"}}</a>
+	                        	<strong>{{.i18n.Tr "repo.settings.hooks"}}</strong>
+	                        </div>
+	                        <ul class="panel-body setting-list">
+                            	<li>{{.i18n.Tr "repo.settings.hooks_desc" | Str2html}}</li>
+                            	{{range .Webhooks}}
+								<li>
+									{{if .IsActive}}<span class="left text-success"><i class="fa fa-check"></i></span>{{else}}<span class="pull-left status"><i class="fa fa-times"></i></span>{{end}}
+									<a class="link" href="{{$.RepoLink}}/settings/hooks/{{.Id}}">{{.Url}}</a>
+									<a href="{{$.RepoLink}}/settings/hooks?remove={{.Id}}" class="text-red right"><i class="fa fa-times"></i></a>
+                        			<a href="{{$.RepoLink}}/settings/hooks/{{.Id}}" class="text-blue right"><i class="fa fa-pencil"></i></a>
+								</li>
+                            	{{end}}
+	                       	</ul>
+	                    </div>
+	                </div>
+	            </div>
+	        </div>
+	    </div>
+	</div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
index 2d09975f4d..33e6a944d7 100644
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -8,38 +8,40 @@
                 {{template "ng/base/alert" .}}
                 <div id="setting-content">
                     <div id="user-profile-setting-content" class="panel panel-radius">
-                        <p class="panel-header"><strong>{{.i18n.Tr "settings.public_profile"}}</strong></p>
+                        <div class="panel-header">
+                            <strong>{{.i18n.Tr "settings.public_profile"}}</strong>
+                        </div>
                         <form class="form form-align panel-body" id="user-profile-form" action="/user/settings" method="post">
                             {{.CsrfTokenHtml}}
-                        	<p class="text-center panel-desc">{{.i18n.Tr "settings.profile_desc"}}</p>
-                            <p class="field">
+                        	<div class="text-center panel-desc">{{.i18n.Tr "settings.profile_desc"}}</div>
+                            <div class="field">
                                 <label class="req" for="username">{{.i18n.Tr "username"}}</label>
                                 <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="username" name="uname" type="text" value="{{.SignedUser.Name}}" data-uname="{{.SignedUser.Name}}" required />
-                            </p>
-                            <p class="field">
+                            </div>
+                            <div class="field">
                                 <label for="full-name">{{.i18n.Tr "settings.full_name"}}</label>
                                 <input class="ipt ipt-large ipt-radius {{if .Err_FullName}}ipt-error{{end}}" id="full-name" name="fullname" type="text" value="{{.SignedUser.FullName}}" />
-                            </p>
-                            <p class="field">
+                            </div>
+                            <div class="field">
                                 <label class="req" for="email">{{.i18n.Tr "email"}}</label>
                                 <input class="ipt ipt-large ipt-radius {{if .Err_Email}}ipt-error{{end}}" id="email" name="email" type="email" value="{{.SignedUser.Email}}" required />
-                            </p>
-                            <p class="field">
+                            </div>
+                            <div class="field">
                                 <label for="website">{{.i18n.Tr "settings.website"}}</label>
                                 <input class="ipt ipt-large ipt-radius {{if .Err_Website}}ipt-error{{end}}" id="website" name="website" type="url" value="{{.SignedUser.Website}}" />
-                            </p>
-                            <p class="field">
+                            </div>
+                            <div class="field">
                                 <label for="location">{{.i18n.Tr "settings.location"}}</label>
                                 <input class="ipt ipt-large ipt-radius {{if .Err_Location}}ipt-error{{end}}" id="location" name="location" type="text" value="{{.SignedUser.Location}}" />
-                            </p>
-                            <p class="field">
+                            </div>
+                            <div class="field">
                                 <label for="gravatar-email">Gravatar {{.i18n.Tr "email"}}</label>
                                 <input class="ipt ipt-large ipt-radius {{if .Err_Avatar}}ipt-error{{end}}" id="gravatar-email" name="avatar" type="text" value="{{.SignedUser.AvatarEmail}}" />
-                            </p>
-                            <p class="field">
+                            </div>
+                            <div class="field">
                                 <span class="form-label"></span>
                                 <button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "settings.update_profile"}}</button>
-                            </p>
+                            </div>
                         </form>
                     </div>
                 </div>
diff --git a/templates/user/settings/sshkeys.tmpl b/templates/user/settings/sshkeys.tmpl
index 43dfb66e26..ed54cbf5b6 100644
--- a/templates/user/settings/sshkeys.tmpl
+++ b/templates/user/settings/sshkeys.tmpl
@@ -8,11 +8,11 @@
                 {{template "ng/base/alert" .}}
                 <div id="user-ssh-setting-content">
                     <div id="user-ssh-panel" class="panel panel-radius">
-                        <p class="panel-header">
-                            <button class="btn btn-small btn-black btn-radius right" id="ssh-add">{{.i18n.Tr "settings.add_key"}}</button>
+                        <div class="panel-header">
+                            <a class="btn btn-small btn-black btn-header btn-radius right" id="ssh-add">{{.i18n.Tr "settings.add_key"}}</a>
                             <strong>{{.i18n.Tr "settings.manage_ssh_keys"}}</strong>
-                        </p>
-                        <ul class="panel-body menu menu-vertical switching-list">
+                        </div>
+                        <ul class="panel-body setting-list">
                             <li>{{.i18n.Tr "settings.ssh_desc"}}</li>
                             {{range .Keys}}
                             <li class="ssh clear">