UNPKG

gaf-mobile

Version:

GAF mobile Web site

585 lines (554 loc) 45.8 kB
<!-- PAGE VIEW --> <!-- User projects lists --> <div class="my-projects scroll-container" fl-analytics-section="MyProjects"> <!-- Use to scroll to top when click on the tab of the same name --> <a id="employer"></a> <a id="freelancer"></a> <header class="PageHeader"> <div class="section-inner"> <h1 class="PageHeader-title">My Projects</h1> </div> </header> <nav class="PageNav"> <ul class="PageNav-list"> <li class="PageNav-item"> <a class="PageNav-link" fl-active-tab ng-click="ctrl.changeTab('employer')" tab="employer" fl-analytics="GoToEmployerTab"> Employer </a> </li> <li class="PageNav-item"> <a class="PageNav-link" fl-active-tab ng-click="ctrl.changeTab('freelancer')" tab="freelancer" fl-analytics="GoToFreelancerTab"> Freelancer </a> </li> </ul> </nav> <div class="my-projects-inner"> <section> <div class="my-projects-header section-inner" ng-if="ctrl.loading"> <div class="my-projects-loading"> <div class="loadingicon">Loading...</div> </div> </div> <div class="my-projects-jobs section-inner"> <!-- PAGE VIEW --> <!-- Employer Projects --> <!-- TODO AB Test: ordered employer control --> <section class="project-info" ng-show="tab.name === 'employer'" ng-if="!ctrl.isInOrderEmployerVariation"> <section class="my-projects-empty" ng-if="!ctrl.loading && !ctrl.projects.employer.open.length && !ctrl.projects.employer.work_in_progress.length && !ctrl.projects.employer.complete.length && !ctrl.projects.employer.draft.length"> <div class="icon-roundy-square large-icon watermark-icon"> <span class="icon-file-powerpoint large-icon-inner"></span> </div> <h2>Haven't posted a project?</h2> <p>Once you start posting projects they will be here for you to manage.</p> <a class="my-projects-empty-btn btn btn-tertiary" href="/post-project">Post a project</a> </section> <!-- Open For Bidding --> <section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.open.length" fl-analytics-subsection="OpenProjects"> <header class="Card-header"> <h2 class="Card-title">Open for Bidding</h2> <a class="Card-headerBtn btn btn-tertiary btn-small" href="/post-project" fl-analytics="PostProject">Post project</a> </header> <project-item ng-repeat="project in ctrl.projects.employer.open" project="project"> <!-- Frozen --> <div ng-if="project.get().status === 'frozen'"> <ng-switch on="project.get().sub_status"> <div class="ProjectStatus ProjectStatus--complete" ng-switch-when="frozen_awarded"> <fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Awarded</span> </div> <div class="ProjectStatus ProjectStatus--incomplete" ng-switch-when="frozen_timeout"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Expired</span> </div> <div class="ProjectStatus" ng-switch-default> <span class="ProjectStatus-text">{{ project.get().sub_status }}</span> </div> </ng-switch> </div> <div class="ProjectSnapshot-details"> <span class="ProjectSnapshot-budget" ng-if="project.get().bid_stats.bid_avg > 0"> {{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }} <span ng-show="project.get().type === 'hourly'"> / hour </span> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 1">Tomorrow</span> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() > 1">in {{ project.getDaysLeft() }} days</span> </span> <span class="ProjectSnapshot-budget" ng-if="project.get().bid_stats.bid_avg === 0 || !project.get().bid_stats.bid_avg"> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 0">Bid period has ended</span> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 1">Bid ends tomorrow</span> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() > 1">Bid ends in {{ project.getDaysLeft() }} days</span> </span> <span class="ProjectSnapshot-detail"> <!-- TODO: fl-pluralize --> <span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span> <span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span> <span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span> </span> </div> <button ng-if="ctrl.shouldShowAwardBidButton(project.get())" class="btn btn-small btn-primary ProjectSnapshot-btn" fl-analytics="AwardBid"> Award </button> </project-item> <footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.open" > <fl-button class="ContentToggle" action="ctrl.loadProjects('open', 'employer')" fl-analytics="ShowMoreOpenProjects"> <span class="ContentToggle-inner"> <span class="ContentToggle-text">Show more</span> <span class="ContentToggle-icon"> <fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"> </span> </span> </fl-button> </footer> </section> <!-- In Progress --> <section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.work_in_progress.length" fl-analytics-subsection="WIPProjects"> <header class="Card-header"> <h2 class="Card-title">Work In Progress</h2> </header> <project-item ng-repeat="project in ctrl.projects.employer.work_in_progress" project="project"> <div class="ProjectSnapshot-awarded"> <img ng-repeat="bid in ctrl.selectedBids[project.get().id]" class="ProjectSnapshot-avatar profile-img profile-img--xsmall" src="{{ ctrl.users[bid.bidder_id].avatar_cdn }}" alt="{{ ctrl.users[bid.bidder_id].username }}" /> <!-- Show if more than 2 awarded bidders show this as the third --> <span class="ProjectSnapshot-avatar profile-img profile-img--xsmall profile-img--other" ng-if="ctrl.selectedBids[project.get().id] > 2"> <fl-svg src="/images/icons/flicon-ellipsis.svg" class="profile-img-icon"></fl-svg> </span> <!-- TODO: fl-pluralize --> <span ng-if="ctrl.selectedBids[project.get().id].length === 1">{{ ctrl.selectedBids[project.get().id].length }} freelancer awarded</span> <span ng-if="ctrl.selectedBids[project.get().id].length > 1">{{ ctrl.selectedBids[project.get().id].length }} freelancers awarded</span> </div> <div class="ProjectSnapshot-details"> <span class="ProjectSnapshot-budget"> {{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }} <span ng-show="project.get().type === 'hourly'"> / hour </span> <span ng-if="!project.isHourlyProject()"> <span ng-if="ctrl.getDeadline(project).secondsLeft" class="ProjectSnapshot-deadline"> - {{ ctrl.getDeadline(project).secondsLeft | timeAgoFilter }} ago </span> <span ng-if="ctrl.getDeadline(project).secondsMore" class="ProjectSnapshot-deadline"> in {{ ctrl.getDeadline(project).secondsMore | timeAgoFilter }} </span> </span> </span> </div> <button ng-if="ctrl.shouldShowCreateMilestoneButton[project.get().id]" class="btn btn-small btn-primary ProjectSnapshot-btn" fl-analytics="CreateMilestone"> Create Milestone </button> </project-item> <footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.work_in_progress"> <fl-button class="ContentToggle" action="ctrl.loadProjects('work_in_progress', 'employer')" fl-analytics="ShowMoreWipProjects"> <span class="ContentToggle-inner"> <span class="ContentToggle-text">Show more</span> <span class="ContentToggle-icon"> <fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"> </span> </span> </fl-button> </footer> </section> <!-- Past Projects --> <section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.complete.length" fl-analytics-subsection="CompleteProjects"> <header class="Card-header"> <h2 class="Card-title">Past Projects</h2> </header> <project-item ng-repeat="project in ctrl.projects.employer.complete" project="project"> <div class="ProjectSnapshot-awarded" ng-if="ctrl.selectedBids[project.get().id][0]"> <img ng-repeat="bid in ctrl.selectedBids[project.get().id]" class="ProjectSnapshot-avatar profile-img profile-img--xsmall" src="{{ ctrl.users[bid.bidder_id].avatar_cdn }}" alt="{{ ctrl.users[bid.bidder_id].username }}" /> <!-- Show if more than 2 awarded bidders show this as the third --> <span class="ProjectSnapshot-avatar profile-img profile-img--xsmall profile-img--other" ng-if="ctrl.selectedBids[project.get().id] > 2"> <fl-svg src="/images/icons/flicon-ellipsis.svg" class="profile-img-icon"></fl-svg> </span> <!-- TODO: fl-pluralize --> <span ng-if="ctrl.selectedBids[project.get().id].length === 1">{{ ctrl.selectedBids[project.get().id].length }} freelancer awarded</span> <span ng-if="ctrl.selectedBids[project.get().id].length > 1">{{ ctrl.selectedBids[project.get().id].length }} freelancers awarded</span> </div> <!-- Closed --> <div ng-if="project.get().status === 'closed'"> <div class="ProjectStatus ProjectStatus--complete" ng-if="project.get().frontend_project_status === 'complete' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin' && project.get().sub_status !== 'closed_expired'"> <fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Complete</span> </div> <div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'cancel_buyer' || project.get().sub_status === 'cancel_admin'"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Cancelled</span> </div> <div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'closed_expired'"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Closed</span> </div> <div class="ProjectStatus" ng-if="project.get().sub_status !== 'closed_awarded' && project.get().sub_status !== 'closed_expired' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin'"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">{{ project.get().sub_status }} </span> </div> </div> <div class="ProjectSnapshot-details"> <span class="ProjectSnapshot-budget"> {{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }} <span ng-show="project.get().type === 'hourly'"> / hour </span> </span> <small class="ProjectSnapshot-detail"> <!-- TODO: fl-pluralize --> <span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span> <span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span> <span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span> - {{ project.get().time_submitted |timeAgoFilter }} ago </small> </div> </project-item> <footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.complete" > <fl-button class="ContentToggle" action="ctrl.loadProjects('complete', 'employer')" fl-analytics="ShowMorePastProjects"> <span class="ContentToggle-inner"> <span class="ContentToggle-text">Show more</span> <span class="ContentToggle-icon"> <fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"> </span> </span> </fl-button> </footer> </section> </section> <!-- TODO AB Test: ordered employer variation --> <section class="project-info" ng-show="tab.name === 'employer'" ng-if="ctrl.isInOrderEmployerVariation"> <section class="my-projects-empty" ng-if="!ctrl.loading && !ctrl.projects.employer.open.length && !ctrl.projects.employer.work_in_progress.length && !ctrl.projects.employer.complete.length && !ctrl.projects.employer.draft.length"> <div class="icon-roundy-square large-icon watermark-icon"> <span class="icon-file-powerpoint large-icon-inner"></span> </div> <h2>Haven't posted a project?</h2> <p>Once you start posting projects they will be here for you to manage.</p> <a class="my-projects-empty-btn btn btn-primary" href="/post-project">Post a project</a> </section> <!-- Open For Bidding --> <section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.open.length > 0" fl-analytics-subsection="OpenProjects"> <header class="Card-header"> <h2 class="Card-title">Open for Bidding</h2> </header> <project-item ng-repeat="project in ctrl.projects.employer.open" project="project"> <!-- Frozen --> <div ng-if="project.get().status === 'frozen'"> <ng-switch on="project.get().sub_status"> <div class="ProjectStatus ProjectStatus--complete" ng-switch-when="frozen_awarded"> <fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Awarded</span> </div> <div class="ProjectStatus ProjectStatus--incomplete" ng-switch-when="frozen_timeout"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Expired</span> </div> <div class="ProjectStatus" ng-switch-default> <span class="ProjectStatus-text">{{ project.get().sub_status }}</span> </div> </ng-switch> </div> <div class="ProjectSnapshot-details"> <span class="ProjectSnapshot-budget" ng-if="project.get().bid_stats.bid_avg > 0"> {{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }} <span ng-show="project.get().type === 'hourly'"> / hour </span> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 1">Tomorrow</span> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() > 1">in {{ project.getDaysLeft() }} days</span> </span> <span class="ProjectSnapshot-budget" ng-if="project.get().bid_stats.bid_avg === 0 || !project.get().bid_stats.bid_avg"> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 0">Bid period has ended</span> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 1">Bid ends tomorrow</span> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() > 1">Bid ends in {{ project.getDaysLeft() }} days</span> </span> <span class="ProjectSnapshot-detail"> <!-- TODO: fl-pluralize --> <span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span> <span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span> <span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span> </span> </div> </project-item> <footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.open" > <fl-button class="ContentToggle" action="ctrl.loadProjects('open', 'employer')" fl-analytics="ShowMoreOpenProjects"> <span class="ContentToggle-inner"> <span class="ContentToggle-text">Show more</span> <span class="ContentToggle-icon"> <fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"> </span> </span> </fl-button> </footer> </section> <!-- In Progress --> <section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.work_in_progress.length" fl-analytics-subsection="WIPProjects"> <header class="Card-header"> <h2 class="Card-title">Work In Progress</h2> </header> <project-item ng-repeat="project in ctrl.projects.employer.work_in_progress" project="project"> <div class="ProjectSnapshot-awarded"> <img ng-repeat="bid in ctrl.selectedBids[project.get().id]" class="ProjectSnapshot-avatar profile-img profile-img--xsmall" src="{{ ctrl.users[bid.bidder_id].avatar_cdn }}" alt="{{ ctrl.users[bid.bidder_id].username }}" /> <!-- Show if more than 2 awarded bidders show this as the third --> <span class="ProjectSnapshot-avatar profile-img profile-img--xsmall profile-img--other" ng-if="ctrl.selectedBids[project.get().id] > 2"> <fl-svg src="/images/icons/flicon-ellipsis.svg" class="profile-img-icon"></fl-svg> </span> <!-- TODO: fl-pluralize --> <span ng-if="ctrl.selectedBids[project.get().id].length === 1">{{ ctrl.selectedBids[project.get().id].length }} freelancer awarded</span> <span ng-if="ctrl.selectedBids[project.get().id].length > 1">{{ ctrl.selectedBids[project.get().id].length }} freelancers awarded</span> </div> <div class="ProjectSnapshot-details"> <span class="ProjectSnapshot-budget"> {{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }} <span ng-show="project.get().type === 'hourly'"> / hour </span> <span ng-if="!project.isHourlyProject()"> <span ng-if="ctrl.getDeadline(project).secondsLeft" class="ProjectSnapshot-deadline"> - {{ ctrl.getDeadline(project).secondsLeft | timeAgoFilter }} ago </span> <span ng-if="ctrl.getDeadline(project).secondsMore" class="ProjectSnapshot-deadline"> in {{ ctrl.getDeadline(project).secondsMore | timeAgoFilter }} </span> </span> </span> </div> </project-item> <footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.work_in_progress"> <fl-button class="ContentToggle" action="ctrl.loadProjects('work_in_progress', 'employer')" fl-analytics="ShowMoreWipProjects"> <span class="ContentToggle-inner"> <span class="ContentToggle-text">Show more</span> <span class="ContentToggle-icon"> <fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"> </span> </span> </fl-button> </footer> </section> <!-- Draft Projects --> <section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.draft.length" fl-analytics-subsection="DraftProjects"> <header class="Card-header"> <h2 class="Card-title">Draft Projects</h2> </header> <project-item ng-repeat="project in ctrl.projects.employer.draft" project="project"> <span class="ProjectSnapshot-budget"> {{ project.get().type | uppercase }} PROJECT </span> </project-item> <footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.draft"> <fl-button class="ContentToggle" action="ctrl.loadProjects('draft', 'employer')" fl-analytics="ShowMoreDraftProjects"> <span class="ContentToggle-inner"> <span class="ContentToggle-text">Show more</span> <span class="ContentToggle-icon"> <fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"> </span> </span> </fl-button> </footer> </section> <!-- Past Projects --> <section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.complete.length" fl-analytics-subsection="CompleteProjects"> <header class="Card-header"> <h2 class="Card-title">Past Projects</h2> </header> <project-item ng-repeat="project in ctrl.projects.employer.complete" project="project"> <div class="ProjectSnapshot-awarded" ng-if="ctrl.selectedBids[project.get().id][0]"> <img ng-repeat="bid in ctrl.selectedBids[project.get().id]" class="ProjectSnapshot-avatar profile-img profile-img--xsmall" src="{{ ctrl.users[bid.bidder_id].avatar_cdn }}" alt="{{ ctrl.users[bid.bidder_id].username }}" /> <!-- Show if more than 2 awarded bidders show this as the third --> <span class="ProjectSnapshot-avatar profile-img profile-img--xsmall profile-img--other" ng-if="ctrl.selectedBids[project.get().id] > 2"> <fl-svg src="/images/icons/flicon-ellipsis.svg" class="profile-img-icon"></fl-svg> </span> <!-- TODO: fl-pluralize --> <span ng-if="ctrl.selectedBids[project.get().id].length === 1">{{ ctrl.selectedBids[project.get().id].length }} freelancer awarded</span> <span ng-if="ctrl.selectedBids[project.get().id].length > 1">{{ ctrl.selectedBids[project.get().id].length }} freelancers awarded</span> </div> <!-- Closed --> <div ng-if="project.get().status === 'closed'"> <div class="ProjectStatus ProjectStatus--complete" ng-if="project.get().frontend_project_status === 'complete' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin' && project.get().sub_status !== 'closed_expired'"> <fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Complete</span> </div> <div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'cancel_buyer' || project.get().sub_status === 'cancel_admin'"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Cancelled</span> </div> <div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'closed_expired'"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Closed</span> </div> <div class="ProjectStatus" ng-if="project.get().sub_status !== 'closed_awarded' && project.get().sub_status !== 'closed_expired' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin'"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">{{ project.get().sub_status }} </span> </div> </div> <div class="ProjectSnapshot-details"> <span class="ProjectSnapshot-budget"> {{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }} <span ng-show="project.get().type === 'hourly'"> / hour </span> </span> <small class="ProjectSnapshot-detail"> <!-- TODO: fl-pluralize --> <span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span> <span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span> <span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span> - {{ project.get().time_submitted |timeAgoFilter }} ago </small> </div> </project-item> <footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.complete" > <fl-button class="ContentToggle" action="ctrl.loadProjects('complete', 'employer')" fl-analytics="ShowMorePastProjects"> <span class="ContentToggle-inner"> <span class="ContentToggle-text">Show more</span> <span class="ContentToggle-icon"> <fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"> </span> </span> </fl-button> </footer> </section> </section> <!-- PAGE VIEW --> <!-- freelancer projects --> <section class="project-info" ng-show="tab.name === 'freelancer'"> <section class="my-projects-empty" ng-if="!ctrl.loading && !ctrl.projects.freelancer.active.length && !ctrl.projects.freelancer.in_progress.length && !ctrl.projects.freelancer.complete.length"> <div class="icon-roundy-square large-icon watermark-icon"> <span class="icon-file-powerpoint large-icon-inner"></span> </div> <h2>Haven't bid on a project?</h2> <p>After bidding on a project, it will be shown here.</p> <a class="my-projects-empty-btn btn btn-primary" href="/jobs">Start bidding</a> </section> <section class="Card" ng-if="!ctrl.loading && ctrl.projects.freelancer.active.length" fl-analytics-subsection="OpenProjects"> <header class="Card-header"> <h2 class="Card-title">Active Bids</h2> </header> <project-item ng-repeat="project in ctrl.projects.freelancer.active" project="project"> <!-- Frozen --> <div ng-if="project.get().status === 'frozen'"> <ng-switch on="project.get().sub_status"> <div class="ProjectStatus ProjectStatus--complete" ng-switch-when="frozen_awarded"> <fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Awarded</span> </div> <div class="ProjectStatus ProjectStatus--incomplete" ng-switch-when="frozen_timeout"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Expired</span> </div> <div class="ProjectStatus" ng-switch-default> <span class="ProjectStatus-text">{{ project.get().sub_status }}</span> </div> </ng-switch> </div> <div class="ProjectSnapshot-details"> <span class="ProjectSnapshot-budget"> {{ project.get().currency.sign }}{{ (ctrl.selectedBids[project.get().id][0].amount || 0)|number:0 }} {{ project.get().currency.code }} <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 1">Tomorrow</span> <span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() > 1">in {{ project.getDaysLeft() }} days</span> </span> <small class="ProjectSnapshot-detail"> <!-- TODO: fl-pluralize --> Avg Bid: {{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }} - <span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span> <span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span> <span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span> </small> </div> </project-item> <footer class="Card-footer" ng-if="ctrl.hasMoreProjects.freelancer.active" > <fl-button class="ContentToggle" action="ctrl.loadProjects('active', 'freelancer')" fl-analytics="ShowMoreActiveProjects"> <span class="ContentToggle-inner"> <span class="ContentToggle-text">Show more</span> <span class="ContentToggle-icon"> <fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"> </span> </span> </fl-button> </footer> </section> <section class="Card" ng-if="!ctrl.loading && ctrl.projects.freelancer.in_progress.length" fl-analytics-subsection="WIPProjects"> <header class="Card-header"> <h2 class="Card-title">Current Work</h2> </header> <project-item ng-repeat="project in ctrl.projects.freelancer.in_progress" project="project"> <div class="ProjectSnapshot-awarded"> <img class="ProjectSnapshot-avatar profile-img profile-img--xsmall" src="{{ ctrl.users[project.get().owner_id].avatar_cdn }}" alt="{{ ctrl.users[project.get().owner_id].username }}" /> <span>Awarded by {{ ctrl.users[project.get().owner_id].username }}</span> </div> <div class="ProjectSnapshot-details"> <span class="ProjectSnapshot-budget"> {{ project.get().currency.sign }}{{ (ctrl.selectedBids[project.get().id][0].amount || 0)|number:0 }} {{ project.get().currency.code }} <span ng-show="project.isHourlyProject()"> / hour </span> <span ng-if="!project.isHourlyProject()" class="ProjectSnapshot-deadline"> <span ng-if="ctrl.getDeadline(project).secondsLeft"> - {{ ctrl.getDeadline(project).secondsLeft | timeAgoFilter }} ago </span> <span ng-if="ctrl.getDeadline(project).secondsMore"> in {{ ctrl.getDeadline(project).secondsMore | timeAgoFilter }} </span> </span> </span> </div> </project-item> <footer class="Card-footer" ng-if="ctrl.hasMoreProjects.freelancer.in_progress"> <fl-button class="ContentToggle" action="ctrl.loadProjects('in_progress', 'freelancer')" fl-analytics="ShowMoreCurrentWork"> <span class="ContentToggle-inner"> <span class="ContentToggle-text">Show more</span> <span class="ContentToggle-icon"> <fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"> </span> </span> </fl-button> </footer> </section> <section class="Card" ng-if="!ctrl.loading && ctrl.projects.freelancer.complete.length" fl-analytics-subsection="PastProjects"> <header class="Card-header"> <h2 class="Card-title">Past Completed Work</h2> </header> <project-item ng-repeat="project in ctrl.projects.freelancer.complete" project="project"> <div class="ProjectSnapshot-awarded"> <img class="ProjectSnapshot-avatar profile-img profile-img--xsmall" src="http://extremelifechanger.com/web_images/avatar-sam09-8-251.jpg" alt="{{ ctrl.users[project.get().owner_id].username }}" /> <span>Awarded by {{ ctrl.users[project.get().owner_id].username }}</span> </div> <!-- Closed --> <div ng-if="project.get().status === 'closed'"> <div class="ProjectStatus ProjectStatus--complete" ng-if="project.get().frontend_project_status === 'complete' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin' && project.get().sub_status !== 'closed_expired'"> <fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Complete</span> </div> <div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'cancel_buyer' || project.get().sub_status === 'cancel_admin'"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Cancelled</span> </div> <div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'closed_expired'"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">Closed</span> </div> <div class="ProjectStatus" ng-if="project.get().sub_status !== 'closed_awarded' && project.get().sub_status !== 'closed_expired' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin'"> <fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg> <span class="ProjectStatus-text">{{ project.get().sub_status }} </span> </div> </div> <div class="ProjectSnapshot-details"> <span class="ProjectSnapshot-budget"> {{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }} </span> <small class="ProjectSnapshot-detail"> <!-- TODO: fl-pluralize --> <span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span> <span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span> <span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span> </small> </div> </project-item> <footer class="Card-footer" ng-if="ctrl.hasMoreProjects.freelancer.complete"> <fl-button class="ContentToggle" action="ctrl.loadProjects('complete', 'freelancer')" fl-analytics="ShowMoreCompletedFreelancerProjects"> <span class="ContentToggle-inner"> <span class="ContentToggle-text">Show more</span> <span class="ContentToggle-icon"> <fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"> </span> </span> </fl-button> </footer> </section> </section> </div> </section> </div> </div>