diff --git a/app/assets/v2/css/grants/card.css b/app/assets/v2/css/grants/card.css index b1ef5d4d7ba..957db211f57 100644 --- 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; -} \ No newline at end of file +} + +.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 index ac8bc22c7ba..191cc66cfd8 100644 --- 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 index 86278af8f92..9ec2a4e425d 100644 --- 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; } diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js index f2ebb79a39a..074b1d6b212 100644 --- a/app/assets/v2/js/grants/index.js +++ b/app/assets/v2/js/grants/index.js @@ -1,3 +1,18 @@ +Vue.component('grant-card', { + delimiters: [ '[[', ']]' ], + props: [ 'grant', 'cred', 'token', 'view', 'short', 'show_contributions', 'contributions', 'toggle_following' ], + methods: { + get_clr_prediction: function(indexA, indexB) { + if (this.grant.clr_prediction_curve && this.grant.clr_prediction_curve.length) { + return this.grant.clr_prediction_curve[indexA][indexB]; + } + }, + getContributions: function(grantId) { + return this.contributions[grantId] || []; + } + } +}); + $(document).ready(() => { $('#sort_option').select2({ minimumResultsForSearch: Infinity @@ -59,6 +74,215 @@ $(document).ready(() => { }); + if (document.getElementById('grants-showcase')) { + Vue.component('grant-sidebar', { + name: 'grant-sidebar', + props: [ 'filter_grants', 'grant_types', 'type', 'selected_category', 'keyword', 'following', 'set_type', + 'idle_grants', 'show_contributions' + ], + data: function() { + return { + search: this.keyword, + show_filters: true + }; + }, + methods: { + toggleFollowing: function(state, event) { + event.preventDefault; + this.filter_grants({following: state}); + }, + toggleIdle: function(state, event) { + event.preventDefault; + this.filter_grants({idle_grants: state}); + }, + toggleContributionView: function(state, event) { + event.preventDefault; + this.filter_grants({show_contributions: state}); + } + } + }); + + var app = new Vue({ + delimiters: [ '[[', ']]' ], + el: '#grants-showcase', + components: ['grant-sidebar'], + data: { + grants: [], + page: 1, + limit: 6, + sort: 'weighted_shuffle', + network: 'mainnet', + keyword: document.keyword, + current_type: document.current_type, + idle_grants: document.idle_grants, + following: document.following, + state: 'active', + category: document.selected_category, + credentials: false, + grant_types: [], + contributions: {}, + show_contributions: document.show_contributions, + lock: false, + view: localStorage.getItem('grants_view') || 'grid', + shortView: true + }, + methods: { + setView: function(mode, event) { + event.preventDefault(); + localStorage.setItem('grants_view', mode); + this.view = mode; + }, + setCurrentType: function(currentType, q) { + this.current_type = currentType; + + if (this.current_type === 'all') { + window.history.pushState('', '', `/grants/?${q || ''}`); + } else { + window.history.pushState('', '', `/grants/${this.current_type}?${q || ''}`); + } + }, + filter_grants: function(filters) { + if (filters.type !== null && filters.type !== undefined) { + this.current_type = filters.type; + } + if (filters.category !== null && filters.category !== undefined) { + this.category = filters.category; + } + if (filters.keyword !== null && filters.keyword !== undefined) { + this.keyword = filters.keyword; + } + if (filters.following !== null && filters.following !== undefined) { + this.following = filters.following; + } + if (filters.idle_grants !== null && filters.idle_grants !== undefined) { + this.idle_grants = filters.idle_grants; + } + if (filters.sort !== null && filters.sort !== undefined) { + this.sort = filters.sort; + } + if (filters.show_contributions !== null && filters.show_contributions !== undefined) { + this.show_contributions = filters.show_contributions; + } + + this.page = 1; + const query_elements = {}; + + if (this.category && this.current_type !== 'all') { + query_elements['category'] = this.category; + } + + if (this.keyword) { + query_elements['keyword'] = this.keyword; + } + if (this.idle_grants) { + query_elements['idle'] = this.idle_grants; + } + if (this.following) { + query_elements['following'] = this.following; + } + if (this.show_contributions) { + query_elements['only_contributions'] = this.show_contributions; + } + if (this.sort !== 'weighted_shuffle') { + query_elements['sort'] = this.sort; + } + const q = $.param(query_elements); + + this.setCurrentType(this.current_type, q); + this.fetchGrants(this.page); + }, + fetchGrants: async function(page, append_mode) { + if (this.lock) + return; + + this.lock = true; + + const base_params = { + page: page || this.page, + limit: this.limit, + sort_option: this.sort, + network: this.network, + keyword: this.keyword, + state: this.state, + category: this.category, + type: this.current_type + }; + + if (this.following) { + base_params['following'] = this.following; + } + + if (this.idle_grants) { + base_params['idle'] = this.idle_grants; + } + + if (this.show_contributions) { + base_params['only_contributions'] = this.show_contributions; + } + + const params = new URLSearchParams(base_params).toString(); + const response = await fetchData(`/grants/cards_info?${params}`); + + if (append_mode) { + this.grants = this.grants.concat(response.grants); + } else { + this.grants = response.grants; + } + + this.credentials = response.credentials; + this.grant_types = response.grant_types; + this.contributions = response.contributions; + + this.lock = false; + return this.grants; + }, + scroll: async function(event) { + const scrollHeight = $(document).height(); + const scrollPos = $(window).height() + $(window).scrollTop(); + let vm = this; + + if (((scrollHeight - 300) >= scrollPos) / scrollHeight == 0) { + const grants = await vm.fetchGrants(vm.page + 1, true); + + if (grants && grants.length) { + vm.page = vm.page + 1; + } + } + }, + toggleFollowingGrant: async function(grantId, event) { + event.preventDefault(); + + const favorite_url = `/grants/${grantId}/favorite`; + let response = await fetchData(favorite_url, 'POST'); + + console.log(favorite_url); + if (response.action === 'follow') { + this.$set(this.grants[grantId], 'favorite', true); + } else { + this.$set(this.grants[grantId], 'favorite', false); + } + + return true; + } + }, + mounted() { + let vm = this; + + this.fetchGrants(this.page); + this.scroll(); + + $('#sort_option2').select2({ + minimumResultsForSearch: Infinity, + templateSelection: function(data, container) { + // Add custom attributes to the