Vacancies layout

Puer vacancies layout

by kontrach

HTML

<div ng-app="vacApp" ng-controller="VacCtrl">
    <div class="vacancies-wrapper">
        <h1>Hello {{word}}</h1>
        <div ng-repeat="jobCode in jobCodes" class="vacancie-container">         
            <div ng-if="jobCode.imgSrc" class="job-code-img-container">
                <img ng-src="{{jobCode.imgSrc}}"/>
            </div>
            <div ng-if="jobCode.previewText" class="job-code-txt-container">
                <h3>{{jobCode.previewText}}</h3>
            </div>
            <div class="buttons-container">
                <div class="btn">Open<span class="badge">{{jobCode.openNum}}</span></div>
                <div class="btn">Pool<span class="badge">{{jobCode.inPoolNum}}</span></div>
                <div class="btn">Live<span class="badge">{{jobCode.liveNum}}</span></div>
            </div>
        </div>
    </div>
</div>

CSS

.vacancie-container{
    border: 1px solid gray;
    margin: 5px;
    border-radius: 10px;
    overflow: hidden;
    width: 22%;
    display: inline-block;
    vertical-align: top;
}
.badge{
    background: #0000AA;
    color: #fff;
    border-radius: 10px;
    padding: 2px 5px;
    display: inline-block;
    margin-left: 5px;
}
.job-code-img-container > img{
    border: none;
    border-radius: 5px;
}

JavaScript

var vacApp = angular.module('vacApp', []);

vacApp.controller('VacCtrl', function ($scope) {
    $scope.word = 'world!';
    $scope.jobCodes = {
        'Front-End Developer': {
            imgSrc: '',
            previewText: 'Front-End Developer',
            openNum: 10,
            inPoolNum: 33,
            liveNum: 2
        },
        'Quality Controller': {
            imgSrc: 'http://lorempixel.com/100/100/',
            openNum: 10,
            inPoolNum: 33,
            liveNum: 2
        },
        'Developer Lead': {
            imgSrc: 'http://lorempixel.com/100/100/',
            openNum: 10,
            inPoolNum: 33,
            liveNum: 2
        },
        'QC Lead': {
            imgSrc: 'http://lorempixel.com/100/100/',
            previewText: 'Quality Qontroller Lead',
            openNum: 10,
            inPoolNum: 33,
            liveNum: 2
        },
        'Team Lead': {
            imgSrc: 'http://lorempixel.com/100/100/',
            openNum: 10,
            inPoolNum: 33,
            liveNum: 2
        },
        'HR': {
            imgSrc: 'http://lorempixel.com/100/100/',
            openNum: 10,
            inPoolNum: 33,
            liveNum: 2
        },
        'Assistant': {
            imgSrc: '',
            previewText: 'Assistant',
            openNum: 10,
            inPoolNum: 33,
            liveNum: 2
        },
        'General Manager': {
            imgSrc: 'http://lorempixel.com/100/100/',
            previewText: 'General Manager',
            openNum: 10,
            inPoolNum: 33,
            liveNum: 2
        },
        'Accauntant': {
            imgSrc: 'http://lorempixel.com/100/100/',
            openNum: 10,
            inPoolNum: 33,
            liveNum: 2
        }
    };
});