Add responsive for projects org

gitcoinco · May 1, 2020 · cbfb0ae · cbfb0ae
1 parent 48c42b2
commit cbfb0ae
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/app/assets/v2/js/vue-components.js b/app/assets/v2/js/vue-components.js
@@ -128,6 +128,7 @@ Vue.component('qrcode', {
 
 Vue.component('project-directory', {
   delimiters: [ '[[', ']]' ],
+  props: ['tribe'],
   methods: {
     fetchProjects: function(newPage) {
       let vm = this;

diff --git a/app/dashboard/templates/profiles/tribes-vue.html b/app/dashboard/templates/profiles/tribes-vue.html
@@ -369,7 +369,7 @@
                   {% trans "Projects" %}
                 </div>
               </template>
-              <project-directory inline-template>
+              <project-directory inline-template v-bind:tribe="tribe">
                 <div class="ml-4">
                 <div class="sidebar-container flex-column flex-lg-row">
                   <transition name="fade">
@@ -386,7 +386,7 @@
                           </form>
                         </div>
                       </div>
-                      <div class="pb-4 border-bottom form-group">
+                      <div class="pb-4 border-bottom form-group d-none d-md-inline-block">
                         <label for="project_sponsors" class="font-weight-bold">Sponsor</label>
                         <div id="project_sponsors" class="form__select2">
                           <select2 v-model.trim="params.sponsor" data-minimum-results-for-search="Infinity" class="form-control">
@@ -397,22 +397,22 @@
                           </select2>
                         </div>
                       </div>
-                      <div class="g-multiselect pb-4 border-bottom form-group">
+                      <div class="g-multiselect pb-4 border-bottom form-group d-none d-md-inline-block">
                         <label for="skills" class="font-weight-bold">Member Skills</label>
                         <div class="form__select2">
                           <select2 :options="skills" v-model="params.skills" data-placeholder="e.g. HTML, CSS" data-tags="true" multiple class="form-control">
                             <option disabled value="0">Select one</option>
                           </select2>
                         </div>
                       </div>
-                      <button class="btn blue font-caption px-0 btn-block font-weight-semibold" @click="params = {}; searchTerm = ''; searchProjects();">Reset Filters</button>
+                      <button class=" d-none d-md-inline-block btn blue font-caption px-0 btn-block font-weight-semibold" @click="params = {}; searchTerm = ''; searchProjects();">Reset Filters</button>
                       <p class="font-body mx-2 mb-2 mt-4 mx-lg-0 mt-lg-2">
-                        <span class="font-weight-bold">[[ numProjects ]]</span> projects found
+                        <span class="font-weight-bold">[[ numProjects ]] projects</span> found
                       </p>
                     </nav>
                   </transition>
                   <div class="container pt-4" @scroll.passive="onScroll($event)">
-                    <button v-if="!hideFilterButton" class="blue btn font-smaller-1 font-weight-bold" @click="showFilters = !showFilters">[[ showFilters ? 'Hide' : 'Show' ]] filters <i class="fas fa-filter"></i></button>
+                    <button v-if="!hideFilterButton" class="d-none d-md-block blue btn font-smaller-1 font-weight-bold" @click="showFilters = !showFilters">[[ showFilters ? 'Hide' : 'Show' ]] filters <i class="fas fa-filter"></i></button>
                     <div class="mt-4">
                     <div v-if="noResults" class="text-center">
                       <img src="{% static 'v2/images/shrug_bot.png' %}" alt="nothing found" width="316" height="221">
@@ -793,7 +793,7 @@ <h6 class="font-weight-bold mb-3">Invite [[numUsers]] Users to the Bounty</h6>
         <div class="col-12 col-md-3">
           <div id="sponsor_sidebar" class="font-body">
             <div class="sponsor-top"></div>
-            <div class="p-xl-0 p-4">
+            <div class="p-xl-0 p-4 d-none d-sm-inline-block">
               <b-media>
                 <template v-slot:aside>
                   <div class=" d-inline-block d-inline-block mb-1 {% if is_editable %}is_editable{% endif %}">