add list view for grants and migrate to vue (gitcoinco#7336)

* add list view for grants and migrate to vue * hide idle grants by default * Add contributions on grants * add my grants * Minor fix * Implement follow in vuejs * remove duplicated ids Co-authored-by: Aditya Anand M C <[email protected]>
zoek1 · Sep 14, 2020 · d883bf2 · d883bf2
1 parent 136c065
commit d883bf2
Show file tree

Hide file tree

Showing 24 changed files with 1,099 additions and 423 deletions.
diff --git a/app/assets/v2/css/grants/card.css b/app/assets/v2/css/grants/card.css
@@ -9,10 +9,22 @@
   margin-top: 1.0625rem;
 }
 
+.grant-item--list {
+  padding-bottom: 10px;
+}
+
+.grant-item--list:hover {
+  background-color: #EFEAFD;
+}
+
 .flip-card__flipper {
   border: 1px solid #D3D3D3;
 }
 
+.grant-item--list .grant-item__content {
+  margin-top: 0.938rem;
+}
+
 .grant-item__title {
   line-height: 24px;
   overflow-y: hidden;
@@ -25,6 +37,11 @@
   color: #454545;
 }
 
+.grant-item--list .grant-item__title {
+  font-size: 1rem;
+  margin-bottom: 2px;
+}
+
 .grant-item__pitch {
   color: #666666;
   height: 3.8rem;
@@ -65,6 +82,12 @@
   margin: 13px;
 }
 
+.grant-item--list .grant-item__img {
+  height: 3.1rem;
+  overflow: hidden;
+  margin: 10px 12px;
+}
+
 .grant-item__owner-image,
 .flip-card__flipper .grant__stakeholders-item {
   height: 35px;
@@ -97,6 +120,11 @@
   color: #0D0764;
 }
 
+.grant-item--list .grant-item__owner-image {
+  height: 20px;
+  width: 20px;
+}
+
 .grant-item__funding-label {
   color: #BBBDBF;
 }
@@ -208,6 +236,34 @@
   color: #040404;
 }
 
+.match__round--inline {
+  color: #069953;
+}
 .clr-prediction .amount {
   margin-top: 7px;
-}
+}
+
+.star-action:hover {
+  color: var(--gc-blue-hover) !important;
+}
+
+@media (max-width: 500px) {
+  .grant-item--list .grant-item__owner {
+    align-items: baseline;
+    display: flex;
+    flex-direction: column;
+  }
+  .grant-item--list .match, .grant-item--list .star-action {
+    margin-top: 5px !important;
+    margin-left: 0 !important;
+  }
+
+  .grant-item--list .match {
+    flex-direction: column;
+  }
+
+  .grant-item--list .grant-action {
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+  }
+}
diff --git a/app/assets/v2/css/grants/grant.css b/app/assets/v2/css/grants/grant.css
@@ -392,7 +392,7 @@
 }
 
 .grants-hero .title-round{
-  font-size: 24px; 
+  font-size: 24px;
 }
 
 .grants-hero .font-header,
@@ -450,7 +450,7 @@
   background: transparent !important;
 }
 
-#search_form .select2-container {
+#top-filters .select2-container, #search_form .select2-container {
   width: auto !important;
   font-weight: normal;
   text-align: left;
@@ -462,22 +462,22 @@
 
 }
 
-#search_form .select2-network-container {
+#top-filters .select2-network-container, #search_form .select2-network-container {
   width: 5rem !important;
 }
 
-#search_form .network-container .select2-container {
+#top-filters .select2-container, #search_form .network-container .select2-container {
   min-width: 5rem;
 }
 
-#search_form .select2-selection {
+#top-filters .select2-selection, #search_form .select2-selection {
   background: none;
   outline: none;
   border: none !important;
   color: var(--gc-blue);
 }
 
-#search_form .select2-selection span {
+#top-filters .select2-selection span, #search_form .select2-selection span {
   color: #3E00FF;
   font-weight: bold;
 }
@@ -630,14 +630,16 @@ background: linear-gradient(85.75deg, #03008D -17.8%, #000000 139.56%); /* W3C,
 }
 
 @media (max-width: 991.98px) {
-  #sidebar_container form#filters {
+  .hide_filters {
     height: 0;
     display: none;
   }
+
   #sidebar_container form#search_form {
     display: inline-block;
     width: 95%;
   }
+}
 
 /* sidebar_search.css */
 

diff --git a/app/assets/v2/css/sidebar_search.css b/app/assets/v2/css/sidebar_search.css
@@ -92,11 +92,6 @@
 }
 
 @media (max-width: 991.98px) {
-  #sidebar_container form {
-    height: 0;
-    display: none;
-  }
-
   #expand {
     display: inherit;
   }