ui for user/profile page, only skeleton

11 years ago · ffe0ba562c
8 changed files with 125 additions and 3 deletions
--- 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;
@ -111,3 +127,47 @@ body {
    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;
+}
--- a/public/js/app.js
+++ 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);
--- 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{}{
--- 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>
--- 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">
--- a/templates/user/profile.tmpl
+++ 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" .}}
--- 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>
--- 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)