gaf-mobile
Version:
GAF mobile Web site
233 lines (225 loc) • 15.5 kB
HTML
<div class="work-directory scroll-container" fl-analytics-section="FreelancersDirectory" ng-class="{'work-directory-recommended': tab.name === 'recommended' && ctrl.reskinDirectory}">
<header class="PageHeader">
<div class="section-inner">
<h1 class="PageHeader-title">Freelancer Directory</h1>
<div class="input-group">
<input type="text"
placeholder="Search for a freelancer"
ng-model="ctrl.queryString">
<a class="input-group-addon ng-binding" ng-click="ctrl.searchWithQuery(ctrl.queryString)" ng-if="ctrl.savedSearch.query !== ctrl.queryString" fl-analytics="SearchFreelancers"><span class="icon-search"></span></a>
<a class="input-group-addon ng-binding" ng-click="ctrl.clearSearchField()" ng-if="ctrl.savedSearch.query === ctrl.queryString"><span class="icon-remove"></span></a>
</div>
</div>
</header>
<nav class="PageNav" ng-if="ctrl.showDirectoryTabs">
<ul class="PageNav-list">
<li class="PageNav-item">
<a class="PageNav-link" fl-active-tab
ng-click="ctrl.changeTab('categories')"
tab="categories" fl-analytics="GoToCategoriesTab">
Categories
</a>
</li>
<li class="PageNav-item">
<a class="PageNav-link" fl-active-tab
ng-click="ctrl.changeTab('recommended')"
tab="recommended" fl-analytics="GoToRecommendedTab">
Recommended
</a>
</li>
</ul>
</nav>
<div class="section-inner">
<div class="work-directory-loader" ng-if="ctrl.isSearching && ctrl.freelancers.length === 0">
<div class="loadingicon">Loading...</div>
</div>
<p ng-if="ctrl.freelancers.length === 0 && !ctrl.isSearching">Sorry, we could not find any matching Freelancers.</p>
<section class="work-directory-categories" ng-if="tab.name === 'categories' && !ctrl.isSearching">
<div class="work-directory-list">
<ul class="work-directory-categories-list">
<li class="work-directory-category">
<a ng-click="ctrl.searchWithJobs(1)" class="Category" fl-analytics="GoToJobCategory" fl-analytics-value="websites">
<fl-svg class="Category-icon" src="images/category/website.svg"></fl-svg>
<div class="Category-detail">
<h3 class="Category-title">Websites, IT & Software</h3>
</div>
</a>
</li>
<li class="work-directory-category">
<a ng-click="ctrl.searchWithJobs(2)" class="Category" fl-analytics="GoToJobCategory" fl-analytics-value="writing">
<fl-svg class="Category-icon" src="/images/category/writing.svg"></fl-svg>
<div class="Category-detail">
<h3 class="Category-title">Writing & Content</h3>
</div>
</a>
</li>
<li class="work-directory-category">
<a ng-click="ctrl.searchWithJobs(3)" class="Category" fl-analytics="GoToJobCategory" fl-analytics-value="design">
<fl-svg class="Category-icon" src="/images/category/graphic-design.svg"></fl-svg>
<div class="Category-detail">
<h3 class="Category-title">Design & Architecture </h3>
</div>
</a>
</li>
<li class="work-directory-category">
<a ng-click="ctrl.searchWithJobs(4)" class="Category" fl-analytics="GoToJobCategory" fl-analytics-value="dataentry">
<fl-svg class="Category-icon" src="/images/category/data.svg"></fl-svg>
<div class="Category-detail">
<h3 class="Category-title">Data Entry & Admin</h3>
</div>
</a>
</li>
<li class="work-directory-category">
<a ng-click="ctrl.searchWithJobs(5)" class="Category" fl-analytics="GoToJobCategory" fl-analytics-value="engineering">
<div class="Category-iconContainer">
<fl-svg class="Category-icon" src="/images/category/engineering.svg"></fl-svg>
</div>
<div class="Category-detail">
<h3 class="Category-title">Engineering & Science</h3>
</div>
</a>
</li>
<li class="work-directory-category">
<a ng-click="ctrl.searchWithJobs(6)" class="Category" fl-analytics="GoToJobCategory" fl-analytics-value="sales">
<fl-svg class="Category-icon" src="/images/category/marketing.svg"></fl-svg>
<div class="Category-detail">
<h3 class="Category-title">Sales & Marketing</h3>
</div>
</a>
</li>
<li class="work-directory-category">
<a ng-click="ctrl.searchWithJobs(7)" class="Category" fl-analytics="GoToJobCategory" fl-analytics-value="business">
<fl-svg class="Category-icon" src="/images/category/business.svg"></fl-svg>
<div class="Category-detail">
<h3 class="Category-title">Business, Legal & Accounting</h3>
</div>
</a>
</li>
<li class="work-directory-category">
<a ng-click="ctrl.searchWithJobs(8)" class="Category" fl-analytics="GoToJobCategory" fl-analytics-value="mobile">
<fl-svg class="Category-icon" src="/images/category/mobile.svg"></fl-svg>
<div class="Category-detail">
<h3 class="Category-title">Product Manufacturing</h3>
</div>
</a>
</li>
<li class="work-directory-category">
<a ng-click="ctrl.searchWithJobs(10)" class="Category" fl-analytics="GoToJobCategory" fl-analytics-value="translation">
<fl-svg class="Category-icon" src="/images/category/translation.svg"></fl-svg>
<div class="Category-detail">
<h3 class="Category-title">Translation & Languages</h3>
</div>
</a>
</li>
<li class="work-directory-category">
<a ng-click="ctrl.searchWithJobs(12)" class="Category" fl-analytics="GoToJobCategory" fl-analytics-value="localjobs">
<fl-svg class="Category-icon" src="/images/category/localjobs.svg"></fl-svg>
<div class="Category-detail">
<h3 class="Category-title">Local Jobs & Services</h3>
</div>
</a>
</li>
</ul>
</div>
</section>
<section class="work-directory-jobs" ng-if="ctrl.freelancers.length > 0 && tab.name === 'recommended'">
<div class="work-directory-list">
<ul class="work-directory-jobs-list">
<li class="work-directory-jobs-list-item" ng-repeat="fl in ctrl.freelancers" ng-if="ctrl.reskinDirectory">
<div class="FreelancerCard Card">
<div class="FreelancerCard-inner Card-bodySection">
<div class="FreelancerCard-body">
<!-- Clean up once AB Test is done -->
<span class="online-status--attached" ng-if="ctrl.showOnlineOfflineStatus"
fl-online-offline-icon user-id="fl.id"></span>
<!-- End Clean up -->
<a class="FreelancerCard-avatar" href="/u/{{fl.username}}" >
<img class="FreelancerCard-avatar-img" ng-src="{{fl.avatar_cdn}}" title="{{ fl.username }}" alt="{{ fl.username }}" />
</a>
<div class="FreelancerCard-details">
<div class="FreelancerCard-reviews user-profile-rating user-rating user-rating--simple user-rating--labeled" data-rating="{{ fl.reputation.entire_history.overall | number:1 }}">
<span class="user-rating-progress"></span>
<label class="user-rating-label">
<!-- TODO: fl-pluralize -->
<span ng-show="fl.reputation.entire_history.reviews === 0">(no reviews)</span>
<span ng-show="fl.reputation.entire_history.reviews === 1">(1 review)</span>
<span ng-show="fl.reputation.entire_history.reviews > 1">({{ fl.reputation.entire_history.reviews }} reviews)</span>
</label>
</div>
<div class="FreelancerCard-skills">
<ul class="FreelancerCard-skills-list">
<li class="FreelancerCard-skills-list-item FreelancerCard-skills-label">Top Skills:</li>
<li class="FreelancerCard-skills-list-item" ng-repeat="job in fl.jobs | limitTo: 5">{{ job.name }}<span ng-if="!$last">,</span> </li>
</ul>
</div>
</div>
</div>
<div class="FreelancerCard-footer">
<div class="FreelancerCard-footer-item">
<button ng-click="ctrl.showHiremeModal(fl, ctrl.userCurrency, true)" class="btn btn-secondary btn-wide" fl-analytics="OpenHiremeModal" fl-analytics-label="HireMe">Hire me</button>
</div>
<div class="FreelancerCard-footer-item">
<a class="btn btn-secondary btn-wide" href="/u/{{fl.username}}" fl-analytics="ViewFreelancerProfile" fl-analytics-label="Profile">View Profile</a>
</div>
</div>
</div>
</div>
</li>
<li class="work-directory-job" ng-repeat="fl in ctrl.freelancers" ng-if="!ctrl.reskinDirectory">
<div class="profiles-user user-profile" fl-analytics="GoToUser" fl-analytics-value="{{ fl.id }}">
<a class="work-directory-avatar user-profile-avatar" href="/u/{{fl.username}}" >
<!-- Clean up once AB Test is done -->
<span class="work-directory-online online-status--attached" ng-if="ctrl.showOnlineOfflineStatus"
fl-online-offline-icon user-id="fl.id"></span>
<!-- End Clean up -->
<img class="profiles-user-avatar" ng-src="{{fl.avatar_cdn}}" title="{{ fl.username }}" alt="{{ fl.username }}" />
</a>
<div class="profiles-user-details user-profile-details">
<div class="user-profile-username">
<strong><a href="/u/{{fl.username}}">{{ fl.username }}</a></strong>
</div>
<div class="user-profile-rating user-rating" data-rating="{{ fl.reputation.entire_history.overall | number:1 }}">
<span class="user-rating-progress"></span>
<label class="user-rating-label">
<!-- TODO: fl-pluralize -->
<span ng-show="fl.reputation.entire_history.reviews === 0">(no reviews)</span>
<span ng-show="fl.reputation.entire_history.reviews === 1">(1 review)</span>
<span ng-show="fl.reputation.entire_history.reviews > 1">({{ fl.reputation.entire_history.reviews }} reviews)</span>
</label>
</div>
<div class="user-profile-rate">
<span class="user-profile-rate-value">${{ fl.hourly_rate }}</span> USD / hour
</div>
<button ng-click="ctrl.showHiremeModal(fl, ctrl.userCurrency, true)" class="btn btn-secondary btn-small work-directory-cta" fl-analytics="OpenHiremeModal" fl-analytics-label="HireMe">Hire me</button>
<a class="btn btn-secondary btn-small work-directory-cta" href="/u/{{fl.username}}" fl-analytics="ViewFreelancerProfile" fl-analytics-label="Profile">View Profile</a>
<div class="user-profile-location">
<span class="user-profile-location-icon">
<fl-svg class="location-pin" src="/images/icons/location-pin.svg"></fl-svg>
</span>
<small class="user-profile-location-content">
<span ng-if="fl.location.city">{{ fl.location.city + ',' }} </span>
{{ fl.location.country.name }}
</small>
</div>
</div>
</div>
</li>
</ul>
<fl-button class="btn btn-primary" action="ctrl.loadMoreFreelancers()" ng-if="ctrl.hasMoreFreelancers()" fl-analytics="LoadMore" fl-analytics-label="Freelancers">Load more</fl-button>
</div>
</section>
</div>
</div>
<!-- Create milestone modal -->
<create-milestone-modal ng-if="ctrl.shouldShowCreateMilestoneModal"
project="ctrl.project.get()"
user="ctrl.focusUser"
currency="ctrl.userCurrency"
close="ctrl.closeCreateMilestoneModalCallback()">
</create-milestone-modal>
<!-- Hireme modal -->
<hireme-modal ng-if="ctrl.shouldShowHiremeModal"
user="ctrl.focusUser"
currency="ctrl.userCurrency"
close="ctrl.closeHiremeModalCallback()">
</hireme-modal>