Style public profile

Author: nlhkabu

warehouse/static/sass/blocks/_author-profile.scss

@@ -25,26 +25,36 @@
         // Meta
       </p>
     </div>
+    <a class="author-profile__edit-button">Edit Profile</a>
   </div>
 */
 
 .author-profile {
-  padding-right: $spacing-unit;
+  padding-bottom: $spacing-unit;
 
-  @media only screen and (max-width: $desktop){
+  @media only screen and (max-width: $desktop) and (min-width: $mobile) {
     padding: 0 0 ($spacing-unit * 1.5) 0;
+    display: flex;
+    align-items: center;
 
-    img  {
+    img {
+      height: 175px;
+      margin-right: $spacing-unit;
+    }
+  }
+
+  @media only screen and (max-width: $mobile) {
+    img {
       display: none;
+      margin-right: 0;
     }
   }
 
   h1.author-profile__name {
-    padding: 10px 0;
-    border-top: 2px solid $border-color;
-    border-bottom: 2px solid $border-color;
-    margin: 20px 0;
-    word-break: break-all;
+    @include h2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: $spacing-unit 0 $spacing-unit / 2;
 
     @media only screen and (max-width: $desktop){
       border-top: 0;
@@ -56,4 +66,10 @@
   &__meta {
     font-style: italic;
   }
+
+  &__edit-button {
+    margin-top: $spacing-unit;
+    width: 100%;
+    text-align: center;
+  }
 }

warehouse/templates/accounts/profile.html

@@ -22,12 +22,18 @@
       <div class="author-profile">
         {% set alt = "Avatar for {} from gravatar.com".format(user.name|default(user.username, true)) %}
         <img src="{{ gravatar(user.email, size=225) }}" alt="{{ alt }}" title="{{ alt }}">
-        <h1 class="author-profile__name">{{ user.name|default(user.username, true) }}</h1>
-        <div class="author-profile__meta">
-          <p><i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp;&nbsp;{{ user.username }}</p>
-          {% if user.date_joined %}
-          <p><i class="fa fa-calendar-o" aria-hidden="true"></i>&nbsp;&nbsp;Joined on {{ user.date_joined|format_date() }}</p>
-          {% endif %}
+        <div>
+          <h1 class="author-profile__name">{{ user.name|default(user.username, true) }}</h1>
+          <div class="author-profile__meta">
+            <p><i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp;&nbsp;{{ user.username }}</p>
+            {% if user.date_joined %}
+            <p><i class="fa fa-calendar-o" aria-hidden="true"></i>&nbsp;&nbsp;Joined on {{ user.date_joined|format_date() }}</p>
+            {% endif %}
+          </div>
+
+          <!-- if this user is logged in -->
+            <a href="{{ request.route_path('manage.profile') }}" class="button button--primary author-profile__edit-button">Edit Profile</a>
+          <!-- endif -->
         </div>
       </div>
     </div>