From eef33a27a8f46eb18381c897cb1617df1c66eecb Mon Sep 17 00:00:00 2001
From: Dries Cruyskens <dries.cruyskens@gmail.com>
Date: Thu, 25 Jun 2020 18:27:59 +0200
Subject: [PATCH] Fixed the profile header not showing when it's not present.

---
 .../UserProfileHeader/UserProfileHeader.vue   | 25 +++++++++++++++++--
 webapp/pages/profile/_id/_slug.vue            |  1 -
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/webapp/components/_new/generic/UserProfileHeader/UserProfileHeader.vue b/webapp/components/_new/generic/UserProfileHeader/UserProfileHeader.vue
index b352da0a2..5f73599fc 100644
--- a/webapp/components/_new/generic/UserProfileHeader/UserProfileHeader.vue
+++ b/webapp/components/_new/generic/UserProfileHeader/UserProfileHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="profile-header">
+  <div class="profile-header" :style="headerStyles">
     <vue-dropzone
       v-if="user && this.editable"
       id="profileHeaderDropzone"
@@ -75,6 +75,25 @@ export default {
       const { profileHeader } = this.user
       return profileHeader && profileHeader.url
     },
+    headerStyles() {
+      /*  Allow the header to shrink when a profileHeaderUrl is present,
+          this prevents a grey bar from showing up on mobile.
+      */
+      if (this.profileHeaderUrl) {
+        return {
+          // Still setting some height in case the user uploads a super super wide picture.
+          // In that case the height would, in theory, be able to go to 0 thus changing a profile
+          // picture won't be possible anymore.
+          '--min-height': 20 + 'px',
+          '--max-height': 250 + 'px',
+        }
+      } else {
+        // If no picture is present, the height is fixed to 250 so user can click the upload zone.
+        return {
+          '--height': 250 + 'px',
+        }
+      }
+    },
   },
   watch: {
     error() {
@@ -122,7 +141,9 @@ export default {
 
 <style lang="scss">
 .profile-header {
-  height: 100%;
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+  height: var(--height);
   background-color: DarkGrey; /* Fallback color */
 }
 
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 9e72bfe03..ee4ceb26b 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -552,6 +552,5 @@ export default {
 
 .profile-header-card {
   padding: 0px; /* Overwrite default card padding to 0. */
-  max-height: 250px;
 }
 </style>