gaf-mobile
Version:
GAF mobile Web site
179 lines (168 loc) • 10.6 kB
HTML
<div class="profiles StickyCTA-container" ng-class="{'StickyCTA--padded': ctrl.showHireMe}" fl-analytics-section="Profiles" ng-if="!ctrl.user.closed">
<div class="scroll-container">
<header class="profiles-header" fl-mobile-background="{{ ctrl.user.cover_image.current_image.url }}">
<div class="section-inner">
<section class="profiles-user user-profile">
<div class="user-profile-avatar">
<img class="profiles-user-avatar" ng-src="{{ ctrl.userAvatar }}" title="{{ ctrl.user.username }}" />
</div>
<div class="profiles-user-details user-profile-details">
<div class="user-profile-username">
<strong>{{ ctrl.user.username }}</strong>
<!--<span class="user-profile-onlinestatus onlinestatus is-online"></span>-->
</div>
<div class="user-profile-rating user-rating" data-rating="{{ ctrl.user.reputation.entire_history.overall | number:1 }}">
<span class="user-rating-progress"></span>
<label class="user-rating-label">
<!-- TODO: fl-pluralize -->
<span ng-show="ctrl.user.reputation.entire_history.reviews === 0">(no reviews)</span>
<span ng-show="ctrl.user.reputation.entire_history.reviews === 1">(1 review)</span>
<span ng-show="ctrl.user.reputation.entire_history.reviews > 1">({{ ctrl.user.reputation.entire_history.reviews }} reviews)</span>
</label>
</div>
<div class="user-profile-footer">
<!-- TO DO: Clean up once OnlineOffline AB Test is done -->
<span fl-online-offline-icon class="user-profile-onlineStatus online-status--withLabel" user-id="ctrl.user.id" ng-if="ctrl.showOnlineOfflineStatus"></span>
<div class="user-profile-location-container">
<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="ctrl.user.location.city">{{ ctrl.user.location.city + ',' }} </span>
{{ ctrl.user.location.country.name }}
</small>
</div>
</div>
</div>
</div>
</section>
<section class="profiles-user-statistics">
<div class="profiles-user-statistics-item">
<span class="profiles-user-statistics-title">Completed</span>
{{ ctrl.user.reputation.entire_history.completion_rate | percentage }}%
</div>
<div class="profiles-user-statistics-item">
<span class="profiles-user-statistics-title">On Budget</span>
{{ ctrl.user.reputation.entire_history.on_budget | percentage }}%
</div>
<div class="profiles-user-statistics-item">
<span class="profiles-user-statistics-title">On Time</span>
{{ ctrl.user.reputation.entire_history.on_time | percentage }}%
</div>
</section>
</div>
</header>
<nav class="PageNav">
<ul class="PageNav-list">
<li class="PageNav-item">
<a class="PageNav-link is-active" fl-active-tab
ng-click="ctrl.changeTab('userDetails')" tab="userDetails"
fl-analytics="GoToDetailsTab">
Details
</a>
</li>
<li class="PageNav-item">
<a class="PageNav-link" fl-active-tab
ng-click="ctrl.changeTab('userReviews')" tab="userReviews"
fl-analytics="GoToReviewsTab">
Reviews
</a>
</li>
</ul>
</nav>
<!-- User Details -->
<section class="profiles-content" ng-if="tab.name === 'userDetails'">
<div class="section-inner">
<section class="Card">
<header class="Card-header">
<h2 class="Card-title">Summary</h2>
</header>
<div class="Card-bodySection">
<p class="Card-desc" ng-if="ctrl.user.profile_description">{{ ctrl.user.profile_description }}</p>
<p class="Card-desc" ng-if="!ctrl.user.profile_description">No profile description</p>
</div>
</section>
<section class="Card">
<header class="Card-header">
<h2 class="Card-title">Skills</h2>
</header>
<div class="Card-bodySection">
<span ng-repeat="job in ctrl.skills" class="SkillTag"> {{ job.name }}</span>
<span ng-if="ctrl.skills.length == 0">No skills yet</span>
</div>
<footer class="Card-footer" ng-show="ctrl.hasMoreSkills">
<a class="ContentToggle" title="Load more skills for this Freelancer" ng-click="ctrl.showUserSkills()" fl-analytics="ShowMoreSkills">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show More Skills</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"></fl-svg>
</span>
</span>
</a>
</footer>
</section>
</div>
</section>
<!-- User Reviews -->
<section class="profiles-content" ng-if="tab.name === 'userReviews'">
<div class="section-inner">
<section class="Card">
<header class="Card-header">
<h2 class="Card-title">Reviews</h2>
</header>
<div class="Card-bodySection">
<ul class="profiles-reviews-list user-reviews">
<li class="user-review" ng-repeat="review in ctrl.reviews">
<div class="user-review-rating user-rating is-large" data-rating="{{ review.get().rating | number:1 }}">
<span class="user-rating-progress"></span>
<label class="user-rating-label">by {{ review.getReviewerDetails().get().username }} - {{review.get().submitdate | timeAgoFilter}} ago.</label>
</div>
<p class="user-review-description">{{ review.get().description }}</p>
</li>
</ul>
<span class="profiles-user-no-text" ng-if="ctrl.reviews.length == 0">No reviews yet</span>
</div>
<footer class="Card-footer" ng-if="ctrl.hasMoreReviews" >
<a class="ContentToggle" title="Load more reviews for this Freelancer" ng-click="ctrl.loadUserReviews()" fl-analytics="ShowMoreReviews">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show More Reviews</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled"></fl-svg>
</span>
</span>
</a>
</footer>
</section>
</div>
</section>
</div>
<div class="StickyCTA-bottomFixed section-inner">
<a ng-show="ctrl.bid && ctrl.bid.canBeAwarded()" href="/projects/{{ctrl.projectSeoUrl}}?awardBid={{ctrl.bid.get().id}}/#bids" class="btn btn-primary" fl-analytics="Award" fl-analytics-label="AwardProject">Award</a>
<a ng-show="ctrl.bid && ctrl.bid.canCreateMilestone()" href="/projects/{{ctrl.projectSeoUrl}}/?createMilestoneFor={{ctrl.user.id}}#management" class="btn btn-primary" fl-analytics="CreateMilestone" fl-analytics-label="CreateMilestone">Create Milestone</a>
<!-- TO DO: Clean up once AB test is done -->
<button ng-show="ctrl.showHireMeLoggedIn" ng-click="ctrl.showHiremeModal(ctrl.userCurrency, true)" class="btn btn-secondary profiles-hiremeBtn" fl-analytics="OpenHiremeModal" fl-analytics-label="HireMe">{{ctrl.isInChangeHireMeCopy ? 'Offer Project' : 'Hire me'}}</button>
<button ng-if="!ctrl.isUserAuthenticated()" ng-click="ctrl.showHiremeModal()" class="btn btn-secondary profiles-hiremeBtn" fl-analytics="ShowLogIn" fl-analytics-label="HireMe">{{ctrl.isInChangeHireMeCopy ? 'Offer Project' : 'Hire me'}}</button>
</div>
<!-- Hireme modal -->
<hireme-modal ng-if="ctrl.shouldShowHiremeModal"
user="ctrl.user"
currency="ctrl.userCurrency"
close="ctrl.closeHiremeModalCallback()">
</hireme-modal>
<!-- Create milestone modal -->
<create-milestone-modal ng-if="ctrl.shouldShowCreateMilestoneModal"
project="ctrl.project.get()"
user="ctrl.user"
currency="ctrl.userCurrency"
close="ctrl.closeCreateMilestoneModalCallback()">
</create-milestone-modal>
</div>
<div class="profiles " fl-analytics-section="ClosedUserprofile" ng-if="ctrl.user.closed">
<header class="PageHeader">
<div class="section-inner">
<h1 class="PageHeader-title">Account Closed</h1>
<p>Account of <strong>{{ctrl.user.username }}</strong> has been closed. </p>
</div>
</header>
</div>