gaf-mobile
Version:
GAF mobile Web site
118 lines (104 loc) • 9.17 kB
HTML
<div class="FindPage scroll-container" fl-analytics-section="FindPage" ng-if="ctrl.state === 'start'">
<!-- Hero -->
<section class="FindPage-hero">
<fl-svg class="FindPage-hero-image" src="/images/find/hire-heading-image.svg"></fl-svg>
<h1 class="FindPage-hero-title">Find {{ ctrl.job.seo_info.plural_phrase_worker }}</h1>
<a class="FindPage-hero-subtitle" ng-click="ctrl.workInstead()">Want to work instead?</a>
</section>
<!-- Form -->
<section fl-pagination="ctrl.progress.current" fl-pagination-container=".scroll-container">
<form novalidate="" name="postProjectForm" class="FindPage-form paginated-form" fl-analytics-subsection="PostProjectForm">
<div class="FindPage-form-loading-icon">
<div class="loadingicon" ng-if="ctrl.questions.length === 0 || ctrl.loading"></div>
</div>
<div class="FindPage-form-item" ng-if="!ctrl.loading" ng-repeat="question in ctrl.questions" fl-pagination-page="$index">
<!-- Radio buttons -->
<fieldset class="paginated-form-fieldset paginated-form-field-group" ng-if="question.project_template_question_text.style === 'radio'">
<legend class="FindPage-form-legend paginated-form-legend" ng-if="$index > 0">{{ question.project_template_question_text.question_text }}</legend>
<div class="paginated-form-field-group paginated-form-radio">
<label class="paginated-form-radio-input" ng-class="{ 'is-selected': ctrl.answers[$parent.$index] === choice }" ng-repeat="choice in question.answers">
<input type="radio" name="question{{$parent.$index}}" ng-value="choice" ng-click="ctrl.electAnswer(question, choice)" ng-model="ctrl.answers[$parent.$index]" required fl-pagination-goto="$parent.$index + 1" fl-analytics="AnswerRadio" fl-analytics-label="Question{{ question.id }}" fl-analytics-value="choice.id">{{ choice.answer }}
</label>
</div>
</fieldset>
<!-- Text area -->
<fieldset class="paginated-form-fieldset paginated-form-field-group" ng-if="question.project_template_question_text.style === 'freeform'">
<legend class="FindPage-form-legend paginated-form-legend">{{ question.project_template_question_text.question_text }}</legend>
<div class="paginated-form-textarea">
<textarea class="FindPage-form-textarea" fl-autoresize placeholder="This helps freelancers bid more accurately." ng-model="ctrl.freeformAnswers[$parent.$index]" fl-analytics="AnswerFreeform" fl-analytics-label="Question{{ question.id }}"></textarea>
</div>
<button class="btn btn-primary" ng-click="ctrl.electFreeformAnswer(question, ctrl.freeformAnswers[$parent.$index], $parent.$index)" fl-pagination-goto="$parent.$index + 1" fl-analytics="GoToNextQuestion" fl-analytics-label="FromFreeform">Next question</button>
<button class="btn paginated-form-cancel-btn" ng-click="ctrl.electFreeformAnswer(question, ctrl.freeformAnswers[$parent.$index], $parent.$index)" fl-pagination-goto="$parent.$index + 1" fl-analytics="GoToNextQuestion" fl-analytics-label="FromFreeform">Skip</button>
</fieldset>
</div>
<!-- Budget -->
<fieldset class="paginated-form-fieldset paginated-form-field-group" id="budget" ng-if="ctrl.questions.length > 0" fl-pagination-page="ctrl.questions.length">
<label class="FindPage-form-legend paginated-form-legend" for="currency">What budget do you have in mind?</label>
<div class="paginated-form-field-group">
<select required id="currency" ng-model="ctrl.project.currency" ng-options="c.code for c in ctrl.currencies | orderBy:'code' track by c.id" ng-if="ctrl.currencies.length > 0" ng-change="ctrl.setBudgetsForCurrency(ctrl.project.currency.id)" fl-analytics="ChangeBudget" fl-analytics-label="Currency" fl-analytics-value="ctrl.project.currency.id"></select>
<div class="paginated-form-radio">
<label class="FindPage-form-answer paginated-form-radio-input" ng-repeat="budget in ctrl.budgetsForCurrency" ng-class="{ 'is-default': $index === ctrl.highlightedBudgetIndex, 'is-selected': ctrl.project.budget === budget }">
<input type="radio" name="budget" ng-value="budget" ng-model="ctrl.project.budget" required fl-pagination-goto="ctrl.questions.length + 1" fl-analytics="ChangeBudget" fl-analytics-label="BudgetRange" fl-analytics-value="budget.name">{{ budget.name }} ({{ ctrl.formatBudget(budget, ctrl.project.currency) }})
</label>
</div>
</div>
</fieldset>
<!-- Project Summary -->
<fieldset class="paginated-form-fieldset" fl-pagination-page="ctrl.questions.length + 1">
<div class="FindPage-form-legend paginated-form-legend">Project Summary</div>
<div class="summary-block summary-block-full-width">
<span class="summary-block-title">Title</span>
<span class="FindPage-form-summary-content summary-block-content editable-text has-icon needsfocus" name="title" contenteditable="true" fl-contenteditable required ng-minlength="4" ng-maxlength="150" ng-model="ctrl.project.title" fl-analytics="ChangeTitle"></span>
<div class="FindPage-form-error paginated-form-validation validation validation-error" ng-messages="postProjectForm.title.$error">
<span ng-message="required">
<span class="icon-notification"> </span>
Please enter a title for your project
</span>
<span ng-message="minlength">
<span class="icon-notification"> </span>
Your project title must be at least 4 characters
</span>
<span ng-message="maxlength">
<span class="icon-notification"> </span>
Your project title must be at most 150 characters
</span>
</div>
</div>
<div class="summary-block summary-block-full-width">
<span class="summary-block-title">Description</span>
<span class="summary-block-content editable-text has-icon needsfocus" contenteditable="true" name="description" fl-contenteditable required ng-minlength="10" ng-maxlength="150" ng-model="ctrl.project.description" fl-analytics="ChangeDescription"></span>
<div class="FindPage-form-error paginated-form-validation validation validation-error" ng-messages="postProjectForm.description.$error">
<span ng-message="required">
<span class="icon-notification"> </span>
Please enter a description for your project
</span>
<span ng-message="minlength">
<span class="icon-notification"> </span>
Your project description must be at least 10 characters
</span>
<span ng-message="maxlength">
<span class="icon-notification"> </span>
Your project description must be at most 150 characters
</span>
</div>
</div>
<div class="summary-block summary-block-full-width" fl-smooth-scroll="#budget" fl-analytics="GoToChangeBudget">
<span class="summary-block-title">Budget</span>
<span class="summary-block-content editable-text has-icon needsfocus">
{{ ctrl.formatBudget(ctrl.project.budget, ctrl.project.currency) }}
<span class="summary-block-detail">{{ ctrl.project.currency.code }}</span>
</span>
</div>
<div></div>
<button type="submit" class="btn btn-wide btn-primary" ng-click="ctrl.postProject(ctrl.project)" ng-class="{ 'btn-processing': ctrl.loading }" ng-disabled="postProjectForm.$invalid" fl-analytics="PostProject">Post Project</button>
<!-- Error messages -->
<div class="FindPage-form-error validation validation-error" ng-if="ctrl.error.negativeBalance">
You have a negative balance. Please <a href="/deposit" fl-analytics="GoToMakeDeposit">add funds to your account</a> before posting a project.
</div>
<div class="FindPage-form-error validation validation-error" ng-if="ctrl.error.internalError">
Something went wrong. Please try again.
</div>
</fieldset>
</form>
</section>
</div>