<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Job Card spacing</title>
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700" rel="stylesheet">
<style>
@supports (--css: variables) {
:root {
--space: 12px;
--space-s: calc(var(--space) / 2);
--space-xs: calc(var(--space-s) / 2);
--space-l: calc(var(--space) * 2);
--space-xl: calc(var(--space-l) * 2);
--space-: -12px;
--space-s-: calc(var(--space-) / 2);
--space-xs-: calc(var(--space-s-) / 2);
--space-l-: calc(var(--space-) * 2);
--space-xl-: calc(var(--space-l-) * 2);
--card-gaps: 0;
--card-shadow-grow: 0;
--card-shadow-opac: 0;
}
.db {
--candi: #0c4b85;
--hirer: #0e7e8b;
--cta: #ff9000;
}
.js {
--candi: #1c3f94;
--hirer: #1b953e;
--cta: #fff200;
}
p {
margin: var(--space) var(--space) var(--space-s);
}
}
*,
::before,
::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
background-color: #f8f8fa;
margin: 0;
}
html,
button,
input,
select,
textarea {
font-family: "Muli", Helvetica, Arial, sans-serif;
}
.cards {
display: flex;
flex-wrap: wrap;
margin-left: var(--space-s-);
margin-right: var(--space-s-);
padding: var(--card-gaps);
align-items: start;
transition: all 0.3s;
}
@supports (display: grid) {
.cards {
display: grid;
}
}
.cards > * {
flex: 1 0 300px;
margin-left: var(--space-s);
margin-right: var(--space-s);
}
@supports (display: grid) {
.cards {
grid-gap: var(--card-gaps);
margin: 0;
}
.cards > * {
margin: 0;
}
}
.cards--column > * {
max-width: 500px;
}
@supports (display: grid) {
.cards--column {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
.cards--packed {
--card-gaps: 0;
}
.cards--packed .card {
--card-shadow-grow: 0;
--card-shadow-opac: 0;
}
.cards--packed .card:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.card {
display: flex;
flex-wrap: wrap;
background-color: #fff;
border-bottom: 0 solid transparent;
filter: drop-shadow(0 0 var(--card-shadow-grow) rgba(0, 0, 0, var(--card-shadow-opac)));
font-size: 12px;
line-height: 20px;
padding: var(--space) calc(var(--space) * 4 / 3);
transition: all 0.3s;
}
@supports (display: grid) {
.card {
display: grid;
}
}
.card:hover,
.card:hover * {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes marching-ants {to {stroke-dashoffset: -15px;}}%3C\/style%3E%3Crect width='100%' height='100%' style='stroke:rgba(0,0,0,.3); stroke-width: 1px; fill: none;stroke-dasharray: 10px 5px; animation: marching-ants 1s infinite'/%3E%3C/svg%3E");
}
.card a:not(:hover) {
text-decoration: none;
}
.card:hover {
background-color: #eef8fc;
}
@supports (display: grid) {
.card {
grid-gap: var(--space-s);
grid-template-areas: "ghead ghead" "gbody gbody" "gfoot glogo" "gmore gmore";
grid-template-columns: 1fr 120px;
}
}
.card--data1 {
grid-template-areas: "ghead ghead" "gbody gbody" "gfoot glogo" "gmore gmore";
}
.card--data2 {
grid-template-areas: "ghead ghead" "gbody gbody" "gfoot glogo" "gmore gmore";
}
.card--data3 {
grid-template-areas: "ghead ghead" "gbody gbody" "gfoot glogo" "gmore gmore";
}
.card--data4 {
grid-template-areas: "ghead ghead" "gbody gbody" "gfoot glogo" "gmore gmore";
}
.card--data5 {
grid-template-areas: "ghead ghead" "gbody gbody" "gfoot glogo" "gmore gmore";
}
.card--data6 {
grid-template-areas: "ghead ghead" "gbody gbody" "gfoot glogo" "gmore gmore";
}
.card__head,
.card__body,
.card__foot {
display: flex;
flex-grow: 1;
flex-basis: 100%;
}
@supports (display: grid) {
.card__head,
.card__body,
.card__foot {
display: grid;
}
}
@supports (display: grid) {
.card__head,
.card__body,
.card__foot {
grid-gap: var(--space-xs);
}
}
.card__head {
display: flex;
position: relative;
font-size: 14px;
font-weight: bold;
line-height: 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
@supports (display: grid) {
.card__head {
display: grid;
}
}
@supports (display: grid) {
.card__head {
grid-template-columns: 1fr 40px;
grid-template-areas: "gtitle gbookmark" "ggroup gbookmark";
grid-area: ghead;
}
}
.card__body {
grid-area: gbody;
flex-wrap: wrap;
}
.card__foot {
grid-area: gfoot;
line-height: 16px;
align-items: end;
}
.card__more {
grid-area: gmore;
}
.card__title {
flex-grow: 9999;
flex-basis: 100%;
grid-area: gtitle;
}
.card__title a {
color: #298eb9;
}
@media (min-width: 768px) {
.card__title a {
font-size: 16px;
}
}
.card__group {
grid-area: ggroup;
}
.card__group a {
color: #333;
}
.card__feat {
color: #999;
padding-left: 1.4em;
margin: 0;
}
.card__feat span {
color: #333;
}
.card__loc,
.card__price {
display: flex;
align-self: start;
}
.card__loc a,
.card__price a,
.card__loc span,
.card__price span {
color: #333;
flex: 1;
}
.card__loc .ico,
.card__price .ico {
color: #ccc;
flex-shrink: 0;
padding-left: 0;
width: 16px;
height: 16px;
}
.card__loc .ico:first-child,
.card__price .ico:first-child {
margin-right: 4px;
}
.bookmarked {
color: #333;
}
.bookmarked:before {
color: #333;
}
.card__bookmark {
flex-basis: 40px;
grid-area: gbookmark;
}
.card__bookmark a {
color: #ccc;
width: 40px;
height: 40px;
position: relative;
display: block;
border: 1px dashed #ccc;
}
.card__bookmark a.bookmarked {
color: #999;
}
@supports (display:grid) {
.card__bookmark {
position: static;
z-index: 0;
top: 0;
right: 0;
}
.card__bookmark a {
transform: translate(12px, -8px);
border-color: transparent;
}
}
.card__bookmark .ico {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
transform: translate(-50%, -50%);
}
.card__logo {
flex-basis: 120px;
align-self: end;
justify-items: end;
grid-area: glogo;
width: 100%;
height: auto;
vertical-align: bottom;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}
.card__loc {
grid-column: 1;
grid-row: 1;
}
.ico {
position: relative;
}
@media (max-width: 339.95px) {
.card:not(:last-child) {
border-bottom: 1px solid #ccc;
}
}
@media (min-width: 340px) {
:root {
--card-shadow-grow: 1rem;
--card-shadow-opac: 0.1;
--card-gaps: 16px;
}
.card {
margin-bottom: 16px;
}
@supports (display: grid) {
.card {
margin-bottom: 0;
}
}
}
/* utility class */
.ants,
.ants-on-hover:hover {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes marching-ants {to {stroke-dashoffset: -15px;}}%3C\/style%3E%3Crect width='100%' height='100%' style='stroke:rgba(0,0,0,.3); stroke-width: 1px; fill: none;stroke-dasharray: 10px 5px; animation: marching-ants 1s infinite'/%3E%3C/svg%3E");
}
.colored .grid {
background-color: #fcc;
}
.colored .grid .grid {
background-color: #fc9;
}
.colored .grid .grid .grid {
background-color: #ff9;
}
.colored .grid .grid .grid .grid {
background-color: #ffc;
}
@supports (display: grid) {
.colored .grid {
background-color: #cff;
}
.colored .grid .grid {
background-color: #cfc;
}
.colored .grid .grid .grid {
background-color: #cf9;
}
.colored .grid .grid .grid .grid {
background-color: #cc9;
}
}
/*!
* https://webdesign.tutsplus.com/tutorials/how-to-create-a-sticky-floating-video-on-page-scroll--cms-28342
* Probably can use it as bookmarked job tray
*/
#featured {
transition: width 0.2s ease-in-out, height 0.2s ease-in-out, transform 0.38s ease-in-out;
}
#featured.is-stikcy {
position: fixed;
top: 15px;
right: auto;
max-width: 280px;
max-height: 158px;
width: 280px;
height: 158px;
}
@media (min-width: 1120px) {
#featured.is-stikcy {
transform: translateX(-80%);
}
}
@media (min-width: 1300px) {
#featured.is-stikcy {
transform: translateX(-115%);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<p>Preemptive new job card spacing. Mouse over each card at <strong>chrome</strong> to see the composition, resize window (In editor view)to see how job card transform their states</p>
<div id="app">
<p align="right" style="opacity: .1;">WIP, not working now =>
<select>
<option value="data1">Job Card Experiment (Data) 1</option>
<option value="benefit1">Job Card Experiment (Benefit) 1</option>
<option value="data2">Job Ad Card Experiment (Data) 2</option>
<option value="benefit1">Job Ad Card Experiment (Benefit) 2</option>
<option value="data3">Job Card Experiment (Data) 3</option>
<option value="data4">Job Card Experiment (Data) 4</option>
</select>
</p>
<div class="cards cards--column">
<div class="card" v-for="(item, index) in jobs">
<div class="card__head">
<div class="card__title" v-if="item.title"><a href="#">{{ item.title }}</a></div>
<div class="card__group" v-if="item.group"><a href="#">{{ item.group }}</a></div>
<div class="card__bookmark"><a href="#" :class="{'bookmarked': item.isBookmarked}" @click="toggleBookmark(item, index)">
<svg class="ico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false">
<path fill="currentColor" d="M21 24l-9-9-9 9V2.2C3 1 4 0 5.2 0h13.6C20 0 21 1 21 2.2V24z"></path>
</svg></a></div>
</div>
<ul class="card__feat card__body">
<li v-for="value in item.features"><span>{{ value }}</span></li>
</ul>
<div class="card__foot">
<div class="card__loc" v-if="item.loc"><i class="ico">
<svg class="ico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false">
<path fill="#ccc" d="M12 0C7.3 0 3.4 3.8 3.4 8.4 3.4 14.7 12 24 12 24s8.6-9.3 8.6-15.6C20.6 3.8 16.7 0 12 0zm0 11.4c-1.7 0-3-1.3-3-3 0-1.6 1.3-3 3-3s3 1.4 3 3c0 1.7-1.3 3-3 3z"></path>
</svg></i><a href="#">{{ item.loc }}</a></div>
<div class="card__price" v-if="item.price">
<svg class="ico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false">
<path fill="#ccc" d="M11.6 17.7v1.8H13v-1.8c.3 0 .6-.1.9-.2.5-.1 1-.3 1.4-.6.4-.3.8-.7 1-1.1.3-.5.4-1 .4-1.6 0-.3 0-.6-.1-.9-.1-.3-.2-.6-.4-.8-.2-.3-.4-.5-.7-.7-.3-.2-.6-.4-1-.5-.2-.1-.5-.1-.7-.2-.8-.2-1.7-.4-2.5-.7-.4-.1-.7-.3-1-.5-.3-.2-.4-.5-.4-.9 0-.3.1-.5.2-.7.1-.2.3-.3.5-.5.2-.1.4-.2.7-.2.2 0 .5-.1.7-.1.7 0 1.3.1 1.7.5.4.3.7 1.5.7 1.5h2c0-.6-.1-1.1-.3-1.6-.2-.4-.5-.8-.9-1.1-.4-.3-.9-.5-1.4-.7-.3-.1-.6-.1-.8-.2V4.5h-1.4v1.4c-.3 0-.7.1-1 .2-.5.1-.9.3-1.3.6s-.7.6-.9 1c-.4.4-.5.9-.5 1.5 0 .3 0 .6.1.9.1.3.2.6.4.8.2.3.4.5.8.7.3.2.7.4 1.2.5.8.2 1.4.4 2 .5.5.1 1 .3 1.4.4.2.1.4.2.6.4.2.2.3.5.3 1 0 .2 0 .4-.1.6-.1.2-.2.4-.4.5-.2.2-.5.3-.7.4-.3.1-.7.1-1.1.1-.4 0-.8 0-1.1-.1-.3-.1-.6-.2-.9-.4-.3-.2-.5-.5-.6-.8-.2-.3-.2-.7-.2-1.1h-2c0 .7.1 1.3.4 1.8.3.5.6.9 1 1.3.4.3.9.6 1.5.7.3.2.7.3 1.1.3zM12 24C5.4 24 0 18.6 0 12S5.4 0 12 0s12 5.4 12 12-5.4 12-12 12z"></path>
</svg><span>{{ item.price }}</span>
</div>
</div><img class="card__logo" v-if="item.logo" :src="item.logo" alt="" />
<div class="card__more" v-if="item.timestamp" :title="item.timestamp">{{ item.timestamp | moment }}</div>
</div>
</div>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script id="rendered-js">
var app = new Vue({
el: "#app",
data: function () {
return {
gap_space: 12,
jobs: [
{
isBookmarked: false,
title: "Head of Strategy - SEEK Asia",
group: "jobsDB Hong Kong",
features: [
"Join the leading job portal in the region",
"Improving others' lives through your work",
"Immerse yourself in our award-winning culture"],
loc: "Wan Chai Area",
price: "Base salary + high commission",
logo: "https://content.jobsdbcdn.com/Content/d1019/images/Shared/v8Revamp2/jobsdb_logo_general_2015.svg",
timestamp: "2018-11-16 09:48:12",
benefit: [
"Dental insurance",
"Education allowance",
"Five-day work week",
"Flexible working hours",
"Life insurance",
"Medical insurance",
"Performance bonus"] },
{
isBookmarked: false,
title: "Sales - Team Manager",
group: "jobsDB Hong Kong",
features: [
"Aggressive and passion in solution selling",
"As team leader to drive sales performance",
"Reward based on achieving results"],
loc: "Wan Chai Area",
price: "Base salary + high commission",
logo: "https://content.jobsdbcdn.com/Content/d1019/images/Shared/v8Revamp2/jobsdb_logo_general_2015.svg",
timestamp: "2018-10-22",
benefit: [
"Dental insurance",
"Education allowance",
"Five-day work week",
"Life insurance",
"Medical insurance"] },
{
isBookmarked: false,
title: "Sales Account Manager",
group: "jobsDB Hong Kong",
features: [
"Aggressive and passion in solution selling",
"As team leader to drive sales performance",
"Reward based on achieving results"],
loc: "Wan Chai Area",
price: "Base salary + high commission",
timestamp: "2018-10-22" },
{
isBookmarked: false,
title: "Business Development Executive",
group: "jobsDB Hong Kong",
features: [
"Support company business development role",
"Creative, self motivated and drive for success",
"Young, energetic, face pacing environment"],
loc: "Wan Chai Area",
logo: "https://content.jobsdbcdn.com/Content/d1019/images/Shared/v8Revamp2/jobsdb_logo_general_2015.svg",
timestamp: "2018-10-22" },
{
isBookmarked: false,
title: "System Administrator (Intern - 6 Months contract)",
group: "jobsDB Hong Kong",
features: [
"Successful digital company across South East Asia",
"Independent role with team spirit",
"Fun and energetic environment"],
loc: "Wan Chai Area",
logo: "https://content.jobsdbcdn.com/Content/d1019/images/Shared/v8Revamp2/jobsdb_logo_general_2015.svg",
timestamp: "2018-10-20" }] };
},
methods: {
moment: function () {
return moment();
},
toggleBookmark: function (item, index) {
console.log(top + "," + left);
if (item.active) {
Vue.set(item, 'active', false);
} else {
Vue.set(item, 'active', true);
}
this.isActive = !this.isActive;
} },
filters: {
moment: function (date) {
return moment(date).fromNow();
} } });
/*
$('body').on('mousemove', '.card', (e) => {
let x = e.pageX - e.target.offsetLeft;
let y = e.pageY - e.target.offsetTop;
$(e.target).css({'--x': x+'px', '--y': y+'px'})
});
*/
//# sourceURL=pen.js
</script>
</body>
</html>
