From ffcfd428b8372b3b5fafc70acf2ecc189bd7712e Mon Sep 17 00:00:00 2001
From: FuXiaoHei <fuxiaohei@hexiaz.com>
Date: Sun, 2 Mar 2014 15:31:06 +0800
Subject: [PATCH 1/2] ui design for sign-in and sign-up page add /login and
/sign-up link for user signing fix typo error
---
public/css/gogs.css | 118 ++++++++++++++++++++++++++++++-------
routers/user/ssh.go | 2 +-
routers/user/user.go | 11 +++-
templates/base/navbar.tmpl | 16 ++++-
templates/dashboard.tmpl | 2 +-
templates/user/signin.tmpl | 34 +++++++++++
templates/user/signup.tmpl | 25 ++++----
web.go | 8 ++-
8 files changed, 176 insertions(+), 40 deletions(-)
create mode 100644 templates/user/signin.tmpl
diff --git a/public/css/gogs.css b/public/css/gogs.css
index ff3d7a9954..68c2b8a41b 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -5,31 +5,109 @@
*/
body {
- padding-top: 70px;
+ background: #F6F6F6;
}
-.navbar {
- min-height: 45px;
+
+/* gogits nav header */
+.gogs-masthead {
+ background-color: #428bca;
+ box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
+ min-height: 45px;
+ padding: 2px 16px;
}
-.navbar-brand {
- height: 45px;
- padding: 5px 10px 0px 10px;
- border-left: 1px solid #e5e5e5;
- border-right: 1px solid #e5e5e5;
+
+/* gogits nav item link */
+.gogs-nav-item {
+ position: relative;
+ display: inline-block;
+ padding: 10px;
+ font-weight: bold;
+ color: #EEE;
+ font-size: 100%;
}
-.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover {
- background-color: #f0f0f0;
+
+.gogs-nav-item:hover,
+.gogs-nav-item:focus {
+ color: #fff;
+ text-decoration: none;
}
-.navbar-brand img {
- width: 32px;
+
+.gogs-nav-item.navbar-btn {
+ cursor: pointer;
+ margin-top: 8px;
+ padding: 5px 15px;
}
-.navbar-nav > li > a {
- font-size: 16px;
- padding-top: 13px;
+
+/* gogits nav item active status */
+.gogs-nav .active {
+ color: #fff;
}
-.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
- color: rgb(153, 153, 153);
+
+.gogs-nav .active:after {
+ position: absolute;
+ bottom: -2px;
+ left: 50%;
+ width: 0;
+ height: 0;
+ margin-left: -5px;
+ vertical-align: middle;
+ content: " ";
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid;
+ border-left: 5px solid transparent;
}
-.navbar-btn, .navbar .btn {
- padding: 5px 15px;
- margin-top: 7px;
+
+/* gogits logo */
+#gogs-logo {
+ width: 28px;
+}
+
+/* gogits body */
+#gogs-body {
+ padding-top: 30px;
+ padding-bottom: 60px;
+}
+
+/* gogits login card */
+#gogs-login-card {
+ width: 600px;
+ margin: auto;
+ padding: 30px;
+ background: #fff;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ box-sizing: border-box;
+}
+
+#gogs-login-card h3 {
+ margin-top: 0;
+ margin-bottom: 30px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid #ccc;
+}
+
+#gogs-login-card .form-control {
+ padding: 6px 12px;
+ box-sizing: content-box;
+}
+
+#gogs-login-card .control-label {
+ height: 44px;
+ line-height: 30px;
+}
+
+#gogs-login-card .btn{
+ cursor: pointer;
+ margin-right: 1.2em;
+}
+
+#gogs-social-login{
+ margin-top: 30px;
+ padding-top: 20px;
+ border-top: 1px solid #ccc;
+}
+
+#gogs-social-login .btn{
+ float: none;
+ margin: auto;
}
\ No newline at end of file
diff --git a/routers/user/ssh.go b/routers/user/ssh.go
index c7fae4b4b8..7b5a1d325b 100644
--- a/routers/user/ssh.go
+++ b/routers/user/ssh.go
@@ -13,7 +13,7 @@ import (
"github.com/gogits/gogs/models"
)
-func AddPublickKey(req *http.Request, r render.Render) {
+func AddPublicKey(req *http.Request, r render.Render) {
if req.Method == "GET" {
r.HTML(200, "user/publickey_add", map[string]interface{}{
"Title": "Add Public Key",
diff --git a/routers/user/user.go b/routers/user/user.go
index 6fafcc47d8..241a9f3589 100644
--- a/routers/user/user.go
+++ b/routers/user/user.go
@@ -16,8 +16,15 @@ import (
"github.com/gogits/gogs/utils/log"
)
-func SignIn(r render.Render) {
- r.Redirect("/user/signup", 302)
+func SignIn(req *http.Request, r render.Render) {
+ if req.Method == "GET" {
+ r.HTML(200, "user/signin", map[string]interface{}{
+ "Title": "Log In",
+ })
+ return
+ }
+
+ // todo sign in
}
func SignUp(req *http.Request, r render.Render) {
diff --git a/templates/base/navbar.tmpl b/templates/base/navbar.tmpl
index 16d76688de..ae908738a8 100644
--- a/templates/base/navbar.tmpl
+++ b/templates/base/navbar.tmpl
@@ -1,4 +1,16 @@
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<div class="gogs-masthead" id="masthead">
+ <div class="container">
+ <nav class="gogs-nav">
+ <a class="gogs-nav-item active" href="/"><img src="/img/favicon.png" alt="Gogs Logo" id="gogs-logo"></a>
+ <a class="gogs-nav-item" href="#">Dashboard</a>
+ <a class="gogs-nav-item" href="#">Explore</a>
+ <a class="gogs-nav-item" href="#">Help</a>
+ <a class="gogs-nav-item navbar-right navbar-btn btn btn-danger" href="/login/">Sign in</a>
+ <!--<a class="gogs-nav-item navbar-right" href="#">Profile</a>-->
+ </nav>
+ </div>
+</div>
+<!--<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gogs-navbar-collapse">
@@ -15,4 +27,4 @@
<a href="/user/signin" class="navbar-right btn btn-success navbar-btn">Sign In</a>
</div>
</div>
-</nav>
+</nav>-->
diff --git a/templates/dashboard.tmpl b/templates/dashboard.tmpl
index 25a63827b7..8cbb29ebb4 100644
--- a/templates/dashboard.tmpl
+++ b/templates/dashboard.tmpl
@@ -1,6 +1,6 @@
{{template "base/head" .}}
{{template "base/navbar" .}}
-<div class="container">
+<div id="gogs-body" class="container">
Website is still in the progress of building...please come back later!
</div>
{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/signin.tmpl b/templates/user/signin.tmpl
new file mode 100644
index 0000000000..dcdeaa77c5
--- /dev/null
+++ b/templates/user/signin.tmpl
@@ -0,0 +1,34 @@
+{{template "base/head" .}}
+{{template "base/navbar" .}}
+<div class="container" id="gogs-body">
+ <form action="/user/signup" method="post" class="form-horizontal" id="gogs-login-card">
+ <h3>Log in</h3>
+ <div class="form-group">
+ <label class="col-md-4 control-label">Username or Email: </label>
+ <div class="col-md-6">
+ <input name="account" class="form-control" placeholder="Type your username or e-mail address">
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-md-4 control-label">Password: </label>
+ <div class="col-md-6">
+ <input name="passwd" type="password" class="form-control" placeholder="Type your password">
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="col-md-offset-4 col-md-6">
+ <button type="submit" class="btn btn-lg btn-primary">Log In</button>
+ <a href="/forget-password/">Forgot your password?</a>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="col-md-offset-4 col-md-6">
+ <a href="/sign-up/">Need an account? Sign up free.</a>
+ </div>
+ </div>
+ <div class="form-group text-center" id="gogs-social-login">
+ <a class="btn btn-default btn-lg">Social Login</a>
+ </div>
+ </form>
+</div>
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/signup.tmpl b/templates/user/signup.tmpl
index 8e1f1493c0..2e127a62ef 100644
--- a/templates/user/signup.tmpl
+++ b/templates/user/signup.tmpl
@@ -1,43 +1,44 @@
{{template "base/head" .}}
{{template "base/navbar" .}}
-<div class="container">
- <form action="/user/signup" method="post" class="form-horizontal">
+<div class="container" id="gogs-body">
+ <form action="/user/signup" method="post" class="form-horizontal" id="gogs-login-card">
+ <h3>Sign Up</h3>
<div class="form-group">
<label class="col-md-4 control-label">Username: </label>
- <div class="col-md-3">
+ <div class="col-md-6">
<input name="username" class="form-control" placeholder="Type your username">
</div>
</div>
-
<div class="form-group">
<label class="col-md-4 control-label">Email: </label>
- <div class="col-md-3">
+ <div class="col-md-6">
<input name="email" class="form-control" placeholder="Type your e-mail address">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password: </label>
- <div class="col-md-3">
+ <div class="col-md-6">
<input name="passwd" type="password" class="form-control" placeholder="Type your password">
</div>
</div>
-
<div class="form-group">
<label class="col-md-4 control-label">Re-type: </label>
- <div class="col-md-3">
+ <div class="col-md-6">
<input type="password" class="form-control" placeholder="Re-type your password">
</div>
</div>
<div class="form-group">
- <div class="col-md-offset-4 col-md-3">
- <button type="submit" class="btn btn-info">Sign Up</button>
+ <div class="col-md-offset-4 col-md-6">
+ <button type="submit" class="btn btn-lg btn-primary">Create an account</button>
</div>
</div>
- <div class="col-md-offset-4 col-md-3">
- <a href="/user/signin">Already have an account? Sign in now!</a>
+ <div class="form-group">
+ <div class="col-md-offset-4 col-md-6">
+ <a href="/sign-up">Already have an account? Sign in now!</a>
+ </div>
</div>
</form>
</div>
diff --git a/web.go b/web.go
index 024a80f910..71529a8e8d 100644
--- a/web.go
+++ b/web.go
@@ -48,10 +48,14 @@ func runWeb(*cli.Context) {
// Routers.
m.Get("/", routers.Dashboard)
- m.Get("/user/signin", user.SignIn)
+ m.Any("/login", user.SignIn)
+ m.Any("/user/signin", user.SignIn)
+
+ m.Any("/sign-up", user.SignUp)
m.Any("/user/signup", user.SignUp)
+
m.Any("/user/delete", user.Delete)
- m.Any("/user/publickey/add", user.AddPublickKey)
+ m.Any("/user/publickey/add", user.AddPublicKey)
m.Any("/repo/create", repo.Create)
m.Any("/repo/delete", repo.Delete)
From ffe0ba562c2d749ea904e7171b424ae251c1f62e Mon Sep 17 00:00:00 2001
From: FuXiaoHei <fuxiaohei@hexiaz.com>
Date: Sun, 2 Mar 2014 21:47:55 +0800
Subject: [PATCH 2/2] ui for user/profile page, only skeleton
---
public/css/gogs.css | 60 +++++++++++++++++++++++++++++++++++++
public/js/app.js | 17 +++++++++++
routers/user/user.go | 7 +++++
templates/base/head.tmpl | 2 +-
templates/user/delete.tmpl | 2 +-
templates/user/profile.tmpl | 37 +++++++++++++++++++++++
templates/user/signup.tmpl | 2 +-
web.go | 1 +
8 files changed, 125 insertions(+), 3 deletions(-)
create mode 100644 public/js/app.js
create mode 100644 templates/user/profile.tmpl
diff --git a/public/css/gogs.css b/public/css/gogs.css
index 68c2b8a41b..39796f6e39 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -8,6 +8,22 @@ body {
background: #F6F6F6;
}
+/* override bs3 */
+
+.tooltip-inner{
+ border-radius: 3px;
+ background: #333;
+ border: none;
+}
+
+.tooltip-arrow{
+ border-bottom-color: #333 !important;
+}
+
+.fa{
+ margin: 0 .5em;
+}
+
/* gogits nav header */
.gogs-masthead {
background-color: #428bca;
@@ -110,4 +126,48 @@ body {
#gogs-social-login .btn{
float: none;
margin: auto;
+}
+
+/* gogs-user-profile */
+
+#gogs-user-avatar{
+ width: 200px;
+ height: 200px;
+ border-radius: 6px;
+}
+
+#gogs-user-name{
+ margin-top: 20px;
+ font-size: 1.6em;
+ font-weight: bold;
+ margin-bottom: 20px;
+}
+
+#gogs-user-profile .profile-info .list-group-item{
+ background-color: transparent;
+ padding-top: 18px;
+ color: #666;
+}
+
+#gogs-user-profile .profile-info .list-group-item a{
+ margin: 0;
+ padding: 0;
+ display: inline;
+ color: #0093c4;
+}
+
+#gogs-user-profile .profile-info .list-group{
+ border-top: 1px solid #ccc;
+ padding-bottom: 18px;
+ border-bottom: 1px solid #ccc;
+ padding-left: 18px;
+ padding-right: 18px;
+}
+
+#gogs-user-activity .tab-pane{
+ padding: 20px;
+}
+
+#gogs-user-act-tabs li.active a{
+ border-bottom-color: #ddd;
}
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
new file mode 100644
index 0000000000..a8220f46e1
--- /dev/null
+++ b/public/js/app.js
@@ -0,0 +1,17 @@
+var Gogits = {};
+
+(function($){
+ Gogits.showTooltips = function(){
+ $("body").tooltip({
+ selector: "[data-toggle=tooltip]"
+ //container: "body"
+ });
+ };
+ Gogits.showTab = function (selector, index) {
+ if (!index) {
+ index = 0;
+ }
+ $(selector).tab("show");
+ $(selector).find("li:eq(" + index + ") a").tab("show");
+ }
+})(jQuery);
\ No newline at end of file
diff --git a/routers/user/user.go b/routers/user/user.go
index 241a9f3589..7cd8bca550 100644
--- a/routers/user/user.go
+++ b/routers/user/user.go
@@ -16,6 +16,13 @@ import (
"github.com/gogits/gogs/utils/log"
)
+func Profile(r render.Render) {
+ r.HTML(200, "user/profile", map[string]interface{}{
+ "Title": "Username",
+ })
+ return
+}
+
func SignIn(req *http.Request, r render.Render) {
if req.Method == "GET" {
r.HTML(200, "user/signin", map[string]interface{}{
diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index ac0b9594e6..4358bf02bf 100644
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -15,7 +15,7 @@
<script src="/js/jquery-1.10.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
-
+ <script src="/js/app.js"></script>
<title>{{.Title}} | {{AppName}}</title>
</head>
<body>
diff --git a/templates/user/delete.tmpl b/templates/user/delete.tmpl
index 55993633db..939048b421 100644
--- a/templates/user/delete.tmpl
+++ b/templates/user/delete.tmpl
@@ -1,6 +1,6 @@
{{template "base/head" .}}
{{template "base/navbar" .}}
-<div class="container">
+<div class="container" id="gogs-body">
<form action="/user/delete" method="post" class="form-horizontal">
<div class="form-group">
<div class="col-md-offset-4 col-md-3">
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
new file mode 100644
index 0000000000..f32601001d
--- /dev/null
+++ b/templates/user/profile.tmpl
@@ -0,0 +1,37 @@
+{{template "base/head" .}}
+{{template "base/navbar" .}}
+<div id="gogs-body" class="container">
+ <div id="gogs-user-profile" class="col-md-3">
+ <div class="profile-avatar text-center">
+ <a href="#" class="center-block" data-toggle="tooltip" data-placement="bottom" title="Change Avatar">
+ <img id="gogs-user-avatar" src="http://1.gravatar.com/avatar/x?s=200" alt="user-avatar" title="username"/>
+ </a>
+ <span id="gogs-user-name" class="center-block" href="#">Username</span>
+ </div>
+ <div class="profile-info">
+ <ul class="list-group">
+ <li class="list-group-item"><i class="fa fa-thumb-tack"></i>City, County, State, Nation</li>
+ <li class="list-group-item"><i class="fa fa-envelope"></i><a href="#">Email@EmailAddress.com</a></li>
+ <li class="list-group-item"><i class="fa fa-link"></i><a href="#">http://yousite/</a></li>
+ <li class="list-group-item"><i class="fa fa-clock-o"></i>Joined At 03.02, 2014</li>
+ </ul>
+ </div>
+ </div>
+ <div id="gogs-user-activity" class="col-md-9">
+ <ul class="nav nav-tabs" id="gogs-user-act-tabs">
+ <li class="active"><a href="#repo" data-toggle="tab"><i class="fa fa-gittip"></i>Repositories</a></li>
+ <li><a href="#activity" data-toggle="tab"><i class="fa fa-rss"></i>Activity</a></li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="repo">repo</div>
+ <div class="tab-pane" id="activity">activity</div>
+ </div>
+ </div>
+</div>
+<script>
+ $(function () {
+ Gogits.showTooltips();
+ Gogits.showTab("#gogs-user-act-tabs");
+ });
+</script>
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/signup.tmpl b/templates/user/signup.tmpl
index 2e127a62ef..0bac3244a8 100644
--- a/templates/user/signup.tmpl
+++ b/templates/user/signup.tmpl
@@ -37,7 +37,7 @@
<div class="form-group">
<div class="col-md-offset-4 col-md-6">
- <a href="/sign-up">Already have an account? Sign in now!</a>
+ <a href="/login/">Already have an account? Sign in now!</a>
</div>
</div>
</form>
diff --git a/web.go b/web.go
index 71529a8e8d..77226f5788 100644
--- a/web.go
+++ b/web.go
@@ -54,6 +54,7 @@ func runWeb(*cli.Context) {
m.Any("/sign-up", user.SignUp)
m.Any("/user/signup", user.SignUp)
+ m.Get("/user/profile", user.Profile) // should be /username
m.Any("/user/delete", user.Delete)
m.Any("/user/publickey/add", user.AddPublicKey)
m.Any("/repo/create", repo.Create)