From 848ea5fb25e0a5ab6559a13f587abdacfba3d42b Mon Sep 17 00:00:00 2001
From: Andrew Redden <opensource@andrewredden.com>
Date: Mon, 4 May 2020 15:32:42 -0300
Subject: [PATCH] Tribes V1 RC1 - style updates for tab rails. fixes for the
 profile deatils component

---
 app/assets/v2/js/pages/profile-tribes.js      | 11 +++--
 .../templates/profiles/tribes-vue.html        | 49 ++++++++++++-------
 .../templates/townsquare/shared/feednav.html  |  4 +-
 3 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/app/assets/v2/js/pages/profile-tribes.js b/app/assets/v2/js/pages/profile-tribes.js
index 5748d37f8f0..ec3fd91439e 100644
--- a/app/assets/v2/js/pages/profile-tribes.js
+++ b/app/assets/v2/js/pages/profile-tribes.js
@@ -92,11 +92,14 @@ const loadDynamicScript = (callback, url, id) => {
 
           $.when(sendSave(url, data)).then(function(response) {
             _alert('Tribe has been updated');
-            vm.tribe.tribes_cover_image = vm.headerFilePreview;
-            vm.$bvModal.hide('change-tribe-header');
+            if (vm.headerFile) {
+              vm.tribe.tribes_cover_image = vm.headerFilePreview;
+              vm.$bvModal.hide('change-tribe-header');
+            }
           }).fail(function(error) {
-            _alert('Error saving priorites. Try again later', 'error');
-            console.error('error: unable to save priority', error);
+
+            _alert('Error updating Tribe', 'error');
+            console.error('error: unable to update tribe', error);
           });
         },
         suggestBounty: function() {
diff --git a/app/dashboard/templates/profiles/tribes-vue.html b/app/dashboard/templates/profiles/tribes-vue.html
index bb64cd5d6cf..24dfb054a58 100644
--- a/app/dashboard/templates/profiles/tribes-vue.html
+++ b/app/dashboard/templates/profiles/tribes-vue.html
@@ -41,9 +41,9 @@
     <link rel="stylesheet" href='{% static "v2/css/activity_stream.css" %}'/>
     <link rel="stylesheet" href='{% static "v2/css/explorer.css" %}' />
     <style type="text/css">
-      @media (min-width: 992px) and (max-width: 1200px) {
+      @media (min-width: 992px) {
         .sidebar {
-          min-width: 15vw !important;
+          min-width: 20vw !important;
         }
 
         img.profile-header__avatar {
@@ -53,6 +53,25 @@
 
         }
       }
+      .looking-team {
+        background-color: rgba(62, 0, 255, 0.05);
+        border-radius: 8px;
+        padding: 11px 15px;
+      }
+      .info-card-title {
+        font-weight: bold;
+        font-size: 12px;
+        line-height: 22px;
+        letter-spacing: 1px;
+        color: #3E00FF;
+      }
+      .info-card-desc {
+        font-style: italic;
+        font-weight: normal;
+        font-size: 12px;
+        line-height: 18px;
+        color: #666666;
+      }
       .navigation {
         height: 60px;
         display: flex;
@@ -459,11 +478,11 @@
                 </template>
                 <div class="ml-md-4 mt-4 townsquare_header">
                   <div class="row">
-                    <div class="col-12 col-md-3 d-md-block">
+                    <div class="col-12 col-md-4 col-lg-3">
                       <div @click="showCoreTeam = !showCoreTeam" class="ml-4 mb-4 font-body left-ribbon text-justify btn-block justify-content-between align-items-center p-1">[[ tribe.name ]] {% trans "Team" %} <i class="fa fa-fw" :class="showCoreTeam ? 'fa-chevron-up': 'fa-chevron-down'"></i></div>
                       <suggested-profiles v-show="showCoreTeam" :profiles="tribe.team_or_none_if_timeout" class="ml-4"></suggested-profiles>
                     </div>
-                    <div class="feed_container col-12 col-md-8">
+                    <div class="feed_container col-12 col-md-7 col-lg-8">
                       <div class="feed_container_child container-fluid">
                         {% csrf_token %}
                         {% if user.is_authenticated %}
@@ -860,7 +879,7 @@ <h6 class="font-weight-bold mb-3">Invite [[numUsers]] Users to the Bounty</h6>
                 <bounty-explorer v-bind:tribe="tribe" inline-template>
                   <div class="sidebar-container flex-column flex-lg-row">
                     <transition name="fade">
-                      <nav v-show="showFilters" class="sidebar flex-fill p-4 ml-4 ml-md-auto" role="navigation">
+                      <nav v-show="showFilters" class="sidebar flex-fill p-4" role="navigation">
                         <div class="">
                           <div class="g-multiselect mb-2">
                             <div class="form__select2 align-items-center pr-4">
@@ -993,7 +1012,7 @@ <h6 class="font-weight-bold mb-3">Invite [[numUsers]] Users to the Bounty</h6>
                         <button class="btn blue" @click="clearParams(); searchBounties();">Reset Filters</button>
                       </nav>
                     </transition>
-                    <div class="container pt-4" @scroll.passive="onScroll($event)">
+                    <div class="container-fluid pt-4" @scroll.passive="onScroll($event)">
                       <div class="pb-5">
                         <h1 class="font-bigger-1">
                           <button class="blue btn font-smaller-1 font-weight-bold" @click="showFilters = !showFilters"><i class="fas fa-filter"></i></button>
@@ -1343,17 +1362,17 @@ <h1 class="profile-header__handle mb-1">
 
                               <span class="m-0 p-0 d-none d-md-inline-block">|</span>
 
-                              <a class="btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link" href="{{ profile.data.html_url }}?tab=repositories" target="_blank" rel="noopener noreferrer" data-placement="bottom" data-toggle="tooltip" data-html="true" title="@{{ profile.handle }} on Github">
+                              <a class="btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link"  :href="`${tribe.data.html_url}?tab=repositories`" target="_blank" rel="noopener noreferrer" data-placement="bottom" data-toggle="tooltip" data-html="true" v-bind:title="`@${tribe.handle} on Github`">
                                 <i class="fab fa-github"></i>
                               </a>
-                              <a v-if="tribe.data.blog && online" class="ml-1 btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link" href="{{ profile.data.blog|add_url_schema }}" target="_blank" rel="noopener noreferrer"  data-placement="bottom" data-toggle="tooltip" data-html="true" title="@{{ profile.handle }}'s website" >
+                              <a v-if="tribe.data.blog && online" class="ml-1 btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link" :href="`${tribe.data.blog}`" target="_blank" rel="noopener noreferrer"  data-placement="bottom" data-toggle="tooltip" data-html="true"  v-bind:title="`@${tribe.handle}'s Website on Github`">
                                 <i class="fas fa-home"></i>
                               </a>
-                              <a v-if="tribe.linkedin_url&& online" class="ml-1 btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link" href="https://linkedin.com/in/{{ profile.linkedin_url }}" target="_blank" rel="noopener noreferrer"  data-placement="bottom" data-toggle="tooltip" data-html="true" title="@{{ profile.handle }} on Linkedin" >
+                              <a v-if="tribe.linkedin_url&& online" class="ml-1 btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link" :href="`https://linkedin.com/in/${tribe.linkedin_url}`" target="_blank" rel="noopener noreferrer"  data-placement="bottom" data-toggle="tooltip" data-html="true" v-bind:title="`@${tribe.handle} on Linkedin`" >
                                 <i class="fab fa-linkedin-in"></i>
                               </a>
 
-                              <a v-if="tribe.data.email && online" class="ml-1 btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link" href="mailto:{{profile.data.email | obfuscate}}"  data-placement="bottom" data-toggle="tooltip" data-html="true" title="@{{ profile.handle }}'s Email">
+                              <a v-if="tribe.data.email && online" class="ml-1 btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link" :href="`mailto:${tribe.data.email}`"  data-placement="bottom" data-toggle="tooltip" data-html="true" :title="`@${tribe.handle}'s Email`">
                                 <i class="far fa-envelope"></i>
                               </a>
                             </p>
@@ -1443,16 +1462,8 @@ <h4 class="px-2 pt-3 font-body text-muted">{% trans "Top ideas" %}</h4>
           <form method="post" enctype="multipart/form-data">
             <div class="form__drop" id="js-drop">
               <span>Drag & Drop or Browse</span>
-              <b-form-file
-                id="img-project"
-                v-model="headerFile"
-                :state="Boolean(headerFile)"
-                plain
-                accept="image/*"
-              >
-
+              <b-form-file id="img-project" v-model="headerFile" :state="Boolean(headerFile)" plain accept="image/*"></b-form-file>
               <b-img-lazy v-if="headerFilePreview" id="preview" style="width:100%;" :src="headerFilePreview"></b-img-lazy>
-            </b-form-file>
             </div>
           </form>
           <template v-slot:modal-footer>
diff --git a/app/townsquare/templates/townsquare/shared/feednav.html b/app/townsquare/templates/townsquare/shared/feednav.html
index ca0525d4aad..893da739775 100644
--- a/app/townsquare/templates/townsquare/shared/feednav.html
+++ b/app/townsquare/templates/townsquare/shared/feednav.html
@@ -31,13 +31,13 @@
 
                 <div class="townsquare_nav-list my-1 tribe">
                   <div class="townsquare_block-header" data-target="tribes">
-                    Tribes
+                    Shortcuts
                   </div>
                   <div id="tribes">
                     <ul class="nav d-inline-block font-body">
                       {% for tribe in following_tribes %}
                         <li class="nav-item">
-                          <a data-toggle="tooltip" title="{{tribe.helper_text}}" class="nav-link nav-line {% if tab == tribe.slug %}active{% endif %} " href="#" data-slug="{{tribe.slug}}">
+                          <a data-toggle="tooltip" title="@{{tribe.title}}'s Tribe" class="nav-link nav-line" href="/{{ tribe.title }}">
                             <img src="{{tribe.avatar_url}}" class="rounded avatar">
                             <span class="nav-title">{{tribe.title}}</span>
                             {% if tribe.badge %}