ui design for sign-in and sign-up page

add /login and /sign-up link for user signing
fix typo error
release/v1.15
FuXiaoHei 2014-03-02 15:31:06 +08:00
parent 9c3a8ff299
commit ffcfd428b8
8 changed files with 176 additions and 40 deletions

View File

@ -5,31 +5,109 @@
*/ */
body { 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; /* gogits nav item link */
padding: 5px 10px 0px 10px; .gogs-nav-item {
border-left: 1px solid #e5e5e5; position: relative;
border-right: 1px solid #e5e5e5; 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; /* gogits nav item active status */
padding-top: 13px; .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; /* gogits logo */
margin-top: 7px; #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;
} }

View File

@ -13,7 +13,7 @@ import (
"github.com/gogits/gogs/models" "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" { if req.Method == "GET" {
r.HTML(200, "user/publickey_add", map[string]interface{}{ r.HTML(200, "user/publickey_add", map[string]interface{}{
"Title": "Add Public Key", "Title": "Add Public Key",

View File

@ -16,8 +16,15 @@ import (
"github.com/gogits/gogs/utils/log" "github.com/gogits/gogs/utils/log"
) )
func SignIn(r render.Render) { func SignIn(req *http.Request, r render.Render) {
r.Redirect("/user/signup", 302) 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) { func SignUp(req *http.Request, r render.Render) {

View File

@ -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="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gogs-navbar-collapse"> <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> <a href="/user/signin" class="navbar-right btn btn-success navbar-btn">Sign In</a>
</div> </div>
</div> </div>
</nav> </nav>-->

View File

@ -1,6 +1,6 @@
{{template "base/head" .}} {{template "base/head" .}}
{{template "base/navbar" .}} {{template "base/navbar" .}}
<div class="container"> <div id="gogs-body" class="container">
Website is still in the progress of building...please come back later! Website is still in the progress of building...please come back later!
</div> </div>
{{template "base/footer" .}} {{template "base/footer" .}}

View File

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

View File

@ -1,43 +1,44 @@
{{template "base/head" .}} {{template "base/head" .}}
{{template "base/navbar" .}} {{template "base/navbar" .}}
<div class="container"> <div class="container" id="gogs-body">
<form action="/user/signup" method="post" class="form-horizontal"> <form action="/user/signup" method="post" class="form-horizontal" id="gogs-login-card">
<h3>Sign Up</h3>
<div class="form-group"> <div class="form-group">
<label class="col-md-4 control-label">Username: </label> <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"> <input name="username" class="form-control" placeholder="Type your username">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-md-4 control-label">Email: </label> <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"> <input name="email" class="form-control" placeholder="Type your e-mail address">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-md-4 control-label">Password: </label> <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"> <input name="passwd" type="password" class="form-control" placeholder="Type your password">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-md-4 control-label">Re-type: </label> <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"> <input type="password" class="form-control" placeholder="Re-type your password">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-md-offset-4 col-md-3"> <div class="col-md-offset-4 col-md-6">
<button type="submit" class="btn btn-info">Sign Up</button> <button type="submit" class="btn btn-lg btn-primary">Create an account</button>
</div> </div>
</div> </div>
<div class="col-md-offset-4 col-md-3"> <div class="form-group">
<a href="/user/signin">Already have an account? Sign in now!</a> <div class="col-md-offset-4 col-md-6">
<a href="/sign-up">Already have an account? Sign in now!</a>
</div>
</div> </div>
</form> </form>
</div> </div>

8
web.go
View File

@ -48,10 +48,14 @@ func runWeb(*cli.Context) {
// Routers. // Routers.
m.Get("/", routers.Dashboard) 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/signup", user.SignUp)
m.Any("/user/delete", user.Delete) 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/create", repo.Create)
m.Any("/repo/delete", repo.Delete) m.Any("/repo/delete", repo.Delete)