Merge pull request #705 from haiwen/user-profile

redesign of user profile

media/css/seahub.css

@@ -47,7 +47,8 @@
 .icon-copy:before                 { content: "\f0c5"; }
 .icon-lightbulb:before            { content: "\f0eb"; }
 .icon-chevron-left:before         { content: "\f053"; }
-
+.icon-building:before             { content: "\f0f7"; }
+.icon-phone:before                { content: "\f095"; }
 .icon-font:before                 { content: "\f031"; }
 .icon-text-height:before          { content: "\f034"; }
 .icon-tint:before                 { content: "\f043"; }
@@ -69,7 +70,9 @@
 .icon-undo:before                 { content: "\f0e2"; }
 .icon-repeat:before               { content: "\f01e"; }
 .icon-question-sign:before        { content: "\f059"; }
-
+.fa-1x {
+    font-size: 1.3em;
+}
 /****** sf-icon-xx ********/
 @font-face {
     font-family: 'seafile-font';
@@ -2280,20 +2283,6 @@ textarea:-moz-placeholder {/* for FF */
 .member .name {
     vertical-align:middle;
 }
-#user-profile {
-    width:318px;
-    position:absolute;
-    left:365px;
-    top:50px;
-    z-index:10;
-    padding:15px;
-    min-height:130px;
-    border:1px solid #ddd;
-    background:#fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-}
 .grp-profile {
     margin-top:2px;
 }
@@ -3605,16 +3594,6 @@ textarea:-moz-placeholder {/* for FF */
     cursor:pointer;
     color:#15c;
 }
-
-/* user profile */
-.profile-avatar-container {
-    padding:25px;
-    border:2px solid #ddd;
-    border-radius:3px;
-    text-align:center;
-    line-height:0;
-    margin-bottom:10px;
-}
 /* shared upload link */
 #upload-link-panel {
     width:600px;
@@ -3646,3 +3625,31 @@ textarea:-moz-placeholder {/* for FF */
 #guide-for-new .txt {
     margin-left:6.4em;
 }
+/* user profile */
+#user-profile {
+    width: 290px;
+    border: 1px solid #eee;
+    border-radius: 5px;
+    overflow: hidden; /* for avatar */
+    margin: 0 auto;
+}
+#user-profile .avatar {
+    border-radius: 0;
+}
+#user-profile p {
+    padding: 8px 15px;
+    margin: 0;
+}
+#user-profile .nickname {
+    font-size: 18px;
+}
+#user-profile .intro {
+    color: #888;
+    padding-top: 0;
+}
+#user-profile .info {
+    border-top: 1px solid #eee;
+}
+#user-profile .info-detail {
+    padding-left: 6px;
+}

seahub/profile/templates/profile/user_profile.html

@@ -1,38 +1,30 @@
 {% extends "profile/profile_base.html" %}
 {% load avatar_tags i18n seahub_tags %}
 
-{% block left_panel %}
+{% block main_panel %}
-<div class="profile-avatar-container">
+<div id="user-profile">
     {% if user %}
-    {% avatar user.username 80 %}
+    {% avatar user.username 290 %}
     {% else %}
-    {% avatar "" 80 %}
+    {% avatar "" 290 %}
+    {% endif %}
+    <p title="{{ nickname }}" class="nickname ellipsis">{{ nickname }}</p>
+    {% if intro %}
+    <p class="intro">{{ intro }}</p>
+    {% endif %}
+    {% if d_profile %}
+        {% if d_profile.department %}
+        <p title="{{ d_profile.department }}" class="info ellipsis">
+            <span class="icon-building fa-1x vam"></span>
+            <span class="info-detail vam">{{ d_profile.department }}</span>
+        </p>
+        {% endif %}
+        {% if d_profile.telephone %}
+        <p title="{{ d_profile.telephone }}" class="info ellipsis">
+            <span class="icon-phone fa-1x vam"></span>
+            <span class="info-detail vam">{{ d_profile.telephone }}</span>
+        </p>
+        {% endif %}
     {% endif %}
 </div>
 {% endblock %}
-
-{% block right_panel %}
-<h3 class="hd">{% trans "Info" %}</h3>
-
-<dl>
-    <dt>{% trans "Name" context "true name" %}</dt>
-    <dd>{{ nickname }}</dd>
-
-    <dt>{% trans "Self-introduction" %}</dt>
-    <dd>{{ intro }}</dd>
-
-    {% if d_profile %}
-    <dt>{% trans "Department" %}</dt>
-    <dd>{{ d_profile.department }}</dd>
-
-    <dt>{% trans "Telephone" %}</dt>
-    <dd>{{ d_profile.telephone }}</dd>
-    {% endif %}
-</dl>
-
-{% endblock %}
-
-{% block extra_script %}
-<script type="text/javascript">
-</script>
-{% endblock %}

seahub/settings.py

@@ -266,7 +266,7 @@ AVATAR_DEFAULT_URL = '/avatars/default.png'
 AVATAR_DEFAULT_NON_REGISTERED_URL = '/avatars/default-non-register.jpg'
 AVATAR_MAX_AVATARS_PER_USER = 1
 AVATAR_CACHE_TIMEOUT = 14 * 24 * 60 * 60
-AUTO_GENERATE_AVATAR_SIZES = (16, 20, 24, 28, 32, 36, 40, 48, 60, 80)
+AUTO_GENERATE_AVATAR_SIZES = (16, 20, 24, 28, 32, 36, 40, 48, 60, 80, 290)
 # Group avatar
 GROUP_AVATAR_STORAGE_DIR = 'avatars/groups'
 GROUP_AVATAR_DEFAULT_URL = 'avatars/groups/default.png'