Skip to content

D
dev.biuro
Commit 2b1f12fd authored by Simon's avatar Simon
Browse files
Options

CV input file UI update

parent 71888aae
Expand all Show whitespace changes
Inline Side-by-side
Showing with 53 additions and 43 deletions
wp-content/plugins/biuro-contacts/public/partials/biuro-contacts-public--employees--step-2.php
View file @ 2b1f12fd
......@@ -49,9 +49,14 @@ if ( ! defined( 'WPINC' ) ) die;
</div><!-- .c-form--row -->
<div class="c-form--row">
<label class="c-form--label" for="form-cv"><?php _e('CV', 'biuro-contacts'); ?></label>
<div class="c-form--input-wrap">
<input type="file" class="c-form--input" id="form-cv" name="cv" value="" accept="application/pdf, application/doc, application/docx, application/rtf, application/txt, application/odf, application/msword, image/jpg, image/jpeg, image/png">
<div class="c-form--input-file-wrap">
<input type="file" class="js-form--input-file c-form--input-file" id="form-cv" name="cv" value="" accept="application/pdf, application/doc, application/docx, application/rtf, application/txt, application/odf, application/msword, image/jpg, image/jpeg, image/png">
<button class="c-form--input-file-btn">
<svg width="16px" height="21px" class="c-ico--attachment">
<use xlink:href="#ico--attachment"></use>
</svg>
<span class="js-form--input-file-text c-form--input-file-text"><?php _e('CV', 'biuro-contacts'); ?></span>
</button>
</div>
</div><!-- .c-form--row -->
......
wp-content/plugins/biuro-contacts/public/partials/biuro-contacts-public--employers--step-2.php
View file @ 2b1f12fd
......@@ -33,15 +33,6 @@ if ( ! defined( 'WPINC' ) ) die;
</div>
</div><!-- .c-form--row -->
<?php /*
<div class="c-form--row">
<label class="c-form--label" for="form-cv"><?php _e('CV', 'biuro-contacts'); ?></label>
<div class="c-form--input-wrap">
<input type="file" class="c-form--input" id="form-cv" name="cv" value="">
</div>
</div><!-- .c-form--row -->
*/ ?>
<div class="c-form--row">
<div class="c-form--submit-wrap">
<button type="submit" class="o-btn c-btn--main c-btn--fill" name="s" value="2"><?php _e('Submit', 'biuro-contacts'); ?></button>
......
wp-content/plugins/biuro-contacts/public/partials/biuro-contacts-public--position--step-2.php
View file @ 2b1f12fd
......@@ -121,11 +121,6 @@ if ( ! defined( 'WPINC' ) ) die;
</div>
</div><!-- .c-form--row -->
<div class="c-form--row">
</div><!-- .c-form--row -->
<div id="agree"></div>
<div class="c-form--row">
......@@ -136,9 +131,14 @@ if ( ! defined( 'WPINC' ) ) die;
</div><!-- .c-form--row -->
<div class="c-form--row">
<label class="c-form--label" for="form-cv"><?php _e('CV', 'biuro-contacts'); ?></label>
<div class="c-form--input-wrap">
<input type="file" class="c-form--input" id="form-cv" name="cv" value="" accept="application/pdf, application/doc, application/docx, application/rtf, application/txt, application/odf, application/msword, image/jpg, image/jpeg, image/png">
<div class="c-form--input-file-wrap">
<input type="file" class="js-form--input-file c-form--input-file" id="form-cv" name="cv" value="" accept="application/pdf, application/doc, application/docx, application/rtf, application/txt, application/odf, application/msword, image/jpg, image/jpeg, image/png">
<button class="c-form--input-file-btn">
<svg width="16px" height="21px" class="c-ico--attachment">
<use xlink:href="#ico--attachment"></use>
</svg>
<span class="js-form--input-file-text c-form--input-file-text"><?php _e('CV', 'biuro-contacts'); ?></span>
</button>
</div>
<?php if ($cvMessage): ?>
<div class="c-form--validation c-form--validation-<?php echo $cvStatus; ?>">
......@@ -147,22 +147,6 @@ if ( ! defined( 'WPINC' ) ) die;
<?php endif; ?>
</div><!-- .c-form--row -->
<?php
/*
<div class="c-form--row">
<div class="c-form--checkbox-wrap">
<input id="form-agree" type="checkbox" class="c-form--checkbox <?php if ($agreeStatus) { echo "c-form--checkbox--$agreeStatus"; } ?>" name="agree" value="1" <?php if ($agreeValue): ?> checked="checked"<?php endif; ?> <?php if ($nameStatus != 'error' && $phoneStatus != 'error' && $agreeStatus == 'error'): ?> autofocus="autofocus" <?php endif; ?> >
<label class="c-form--label-checkbox" for="form-agree"><?php _e('I agree, that my personal data will be used for offering me a job. For more detailed information view our <a href="https://biuro.eu/privacy-en.html" target="_blank" rel="noopener">Personal Data Protection Policy.</a>', 'biuro-contacts'); ?></label>
</div>
<?php if ($agreeMessage): ?>
<div class="c-form--validation c-form--validation-<?php echo $agreeStatus; ?>">
<?php echo $agreeMessage; ?>
</div>
<?php endif; ?>
</div><!-- .c-form--row -->
*/
?>
<div class="c-form--row">
<div class="c-form--label-infobox">
<?php _e('We process your personal data to offer you jobs. More information at <a href="https://biuro.eu/privacy-en.html" target="_blank" rel="noopener">Personal Data Protection Policy.</a>', 'biuro-contacts'); ?>
......
wp-content/themes/biuro/css/07-components/_component--form.css
View file @ 2b1f12fd
......@@ -36,14 +36,27 @@
.c-form--label { display: block; color: #2A3644; font-size: 15px; line-height: 18px; margin-bottom: 4px; font-weight: 500; }
.c-form--input-wrap { }
.c-form--input-file-wrap { position: relative; overflow: hidden; }
.c-form--input { width: 100%; padding: 10px; border: 0; background: none; border: 1px solid #d4d4d4; border-radius: 3px; font-size: 15px; font-family: inherit;
.c-form--input { width: 100%; padding: 10px; background: none; border: 1px solid #d4d4d4; border-radius: 3px; font-size: 15px; font-family: inherit;
&:focus { border-color: #d4d4d4 !important; }
}
.c-form--textarea { width: 100%; padding: 10px; border: 0; background: none; border: 1px solid #d4d4d4; border-radius: 3px; font-size: 15px; font-family: inherit;
.c-form--textarea { width: 100%; padding: 10px; background: none; border: 1px solid #d4d4d4; border-radius: 3px; font-size: 15px; font-family: inherit;
&:focus { border-color: #d4d4d4 !important; }
}
.c-form--input-file { position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; z-index: 10; opacity: 0;
&:hover {
+ button { background: var(--color--green); color: #fff; }
}
}
.c-form--input-file-btn { width: 100%; padding: 10px 10px 6px; background-color: #F0F0F0; border: 1px solid #F0F0F0; border-radius: 3px; font-size: 15px; font-family: inherit; text-align: center; }
.c-form--input-file-text { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-form--submit-wrap { padding: 10px 0; }
.c-form--checkbox-wrap { display: flex; position: relative; }
......
wp-content/themes/biuro/css/07-components/_component--ico.css
View file @ 2b1f12fd
......@@ -21,6 +21,8 @@
.c-ico--offer { float: left; margin: 1px 23px 0 0; }
.c-ico--easy { float: left; margin: 0 21px 0 0; }
.c-ico--attachment { margin: -2px 4px -1px 0; opacity: 0.5; }
/* critical:end */
wp-content/themes/biuro/css/core.min.css
View file @ 2b1f12fd
This source diff could not be displayed because it is too large. You can view the blob instead.
wp-content/themes/biuro/css/main.min.css.map
View file @ 2b1f12fd
This source diff could not be displayed because it is too large. You can view the blob instead.
wp-content/themes/biuro/js/main.js
View file @ 2b1f12fd
......@@ -426,6 +426,18 @@ function initDivisionsMap (node, data) {
setMarkers(map, divisions.filter((d) => { return d.lat && d.lng; }));
}
document.querySelectorAll('.js-form--input-file').forEach((node) => {
node.addEventListener('change', () => {
const parent = node.parentNode;
const name = node.value.split(/\\|\//).pop();
const text = parent.querySelector('.js-form--input-file-text');
if (text && name) {
text.innerHTML = name;
}
});
});
document.querySelectorAll('.js-toggle--services').forEach((node) => {
node.addEventListener('click', () => {
node.parentNode.classList.toggle('c-services--is-open');
......
wp-content/themes/biuro/js/main.min.js
View file @ 2b1f12fd
This diff is collapsed.
wp-content/themes/biuro/template-parts/svg/icons.php
View file @ 2b1f12fd
......@@ -67,4 +67,7 @@
<symbol id="ico--close" viewBox="0 0 13 13">
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" d="M6.5,6.5L0.843,0.843L6.5,6.5 l-5.657,5.657L6.5,6.5z M6.5,6.5l5.657,5.657L6.5,6.5l5.657-5.657L6.5,6.5z"/>
</symbol>
<symbol id="ico--attachment" viewBox="0 0 16 21">
<path class="u-fill--inherit" d="M1.873,18.799c-1.883-2.266-1.884-5.934,0-8.201L9.18,1.808c1.45-1.744,3.808-1.744,5.258,0 c1.453,1.748,1.453,4.578,0,6.326l-6.152,7.402c-1.02,1.227-2.679,1.227-3.699,0c-1.022-1.23-1.023-3.221,0-4.451l5.21-6.269 c0.152-0.183,0.399-0.183,0.551,0l0.551,0.663c0.152,0.183,0.152,0.48,0,0.663l-5.21,6.269c-0.413,0.497-0.413,1.302,0,1.799 c0.412,0.496,1.083,0.496,1.495,0l6.152-7.402c0.844-1.015,0.844-2.659,0-3.674c-0.842-1.013-2.212-1.013-3.054,0l-7.306,8.791 c-1.274,1.533-1.275,4.015,0,5.549c1.276,1.535,3.341,1.535,4.616-0.001c1.755-2.114,4.605-5.544,6.361-7.656 c0.152-0.183,0.399-0.183,0.551,0l0.551,0.663c0.152,0.183,0.152,0.48,0,0.663c-1.756,2.113-4.605,5.543-6.36,7.656 C6.809,21.067,3.758,21.067,1.873,18.799z"/>
</symbol>
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment