Fix banner upload problems (#4820)

* fix styles and logic * fix stylelint * fix z-index * fix banner text
gitcoinco · Jul 18, 2019 · e852776 · e852776
1 parent 70fd337
commit e852776
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 39 deletions.
diff --git a/app/assets/v2/css/profile.css b/app/assets/v2/css/profile.css
@@ -21,6 +21,10 @@
   border-radius: 50%;
 }
 
+.profile-header {
+  position: relative;
+}
+
 .profile-header__handle {
   padding-top: 0.8rem;
   margin-bottom: 0;
@@ -374,14 +378,30 @@ a:hover .avatar_edit .avatar_edit_text {
 }
 
 .profile-banner {
-  top: 25vh;
+  display: flex;
+  top: 0;
+  bottom: 0;
   color: #ffffff;
   z-index: 1;
   width: 100vw;
-  visibility: hidden;
   cursor: pointer;
 }
 
+.profile-banner:hover {
+  background: linear-gradient(to top,rgba(255,255,255,0.6),rgba(255,255,255,0.0));
+}
+
+.profile-banner .h4 {
+  font-weight: bold;
+  text-shadow: 1px 1px 1px #000;
+  opacity: 0.5;
+  padding: 5px;
+}
+
+.profile-banner:hover .h4 {
+  opacity: 1;
+}
+
 .picky {
   cursor: pointer;
 }
@@ -398,22 +418,4 @@ nav.navbar.navbar-dark{
   background-image: url(/static/v2/images/header-bg.png);
 }
 
-#change_header_lede {
-  padding-top: 2rem;
-  padding-bottom: 10rem;
-  background: linear-gradient(to top,rgba(255,255,255,0.6),rgba(255,255,255,0.0));
-}
-
-#change_header_lede:hover {
-  background: linear-gradient(to top,rgba(255,255,255,0.9),rgba(255,255,255,0.0));
-}
-
-#change_header_lede span {
-  font-weight: bold;
-  visibility: hidden;
-  padding: 5px;
-}
 
-#change_header_lede:hover span {
-  visibility: visible;
-}
diff --git a/app/assets/v2/js/pages/profile-edit.js b/app/assets/v2/js/pages/profile-edit.js
@@ -9,10 +9,6 @@ $(document).ready(function() {
   });
 
   const banner = document.querySelector('.profile-banner');
-  const updateHeader = document.querySelector('#update-header');
-
-  banner.style['visibility'] = 'visible';
-
 
   function setBanner() {
     const data = new FormData();

diff --git a/app/dashboard/templates/profiles/profile.html b/app/dashboard/templates/profiles/profile.html
@@ -17,20 +17,18 @@
   </head>
   <body class="interior {{ active }} g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
-    <div class="position-absolute profile-banner text-center">
-      {% csrf_token %}
-      {% if is_my_profile%}
-      <h4 class="font-title-lg m-auto" id="change_header_lede">
-        <span>
-          Edit Header Photo
-        </span>
-      </h4>
-      {% endif %}
-    </div>
-      <div class="container-fluid header profile-header dash" style="min-height: 450px; {% if profile.profile_wallpaper %} background-image: url( {{ profile.profile_wallpaper }} ) {% endif %}">
-      {% include 'shared/top_nav.html' with class='d-md-flex' %}
-      {% include 'home/nav.html' %}
-      {% if not hidden and is_staff %}
+    {% include 'shared/top_nav.html' with class='d-md-flex' %}
+    {% include 'home/nav.html' %}
+    <div class="container-fluid header profile-header dash" style="min-height: 450px; {% if profile.profile_wallpaper %} background-image: url( {{ profile.profile_wallpaper }} ) {% endif %}">
+        {% csrf_token %}
+        {% if is_my_profile %}
+        <div class="position-absolute profile-banner text-center">
+          <div class="h4 font-title-lg m-auto">
+            Edit Header Photo
+          </div>
+        </div>
+          {% endif %}
+        {% if not hidden and is_staff %}
         <div class="alpha-warning font-caption mb-0">
           <span class="font-weight-bold">Staff only</span>
           <a style="color:white;" href="{{profile.admin_url}}">{% trans "Profile Admin" %}</a>

diff --git a/app/retail/templates/shared/top_nav.html b/app/retail/templates/shared/top_nav.html
@@ -20,7 +20,7 @@
 <!--- Top Row Notification -->
 <div class="row bottom_notification font-caption" style="text-align: center;">
   <span style="text-align: center; margin: auto;">
-    {% blocktrans %}The <strong>Grow Ethereum</strong> Hackathon runs July 22nd to August 15th - <a href="https://hackathons.gitcoin.co/grow-ethereum/">Check out the Details</a>.{% endblocktrans %}
+    {% blocktrans %}The <strong>Grow Ethereum</strong> Hackathon runs July 29nd to August 19th - <a href="https://hackathons.gitcoin.co/grow-ethereum/">Check out the Details</a>.{% endblocktrans %}
   </span>
   <span style="cursor: pointer;" id="top_nav_notification">
       &times;