Skip to content

Instantly share code, notes, and snippets.

@chrdek

chrdek/app.js

Created December 11, 2019 10:03
Show Gist options
  • Save chrdek/0ccbc2e60bdcbd673937173b1f1cc5cf to your computer and use it in GitHub Desktop.
Save chrdek/0ccbc2e60bdcbd673937173b1f1cc5cf to your computer and use it in GitHub Desktop.
Download ZIP
angular,bootstrap index
Raw
app.js
angular.module("MainContent",[]).controller("ProfileController",
function($scope,$http){
$scope.searchData = [{
"name":"Customer 1",
"description":"Default description"
},
{
"name":"Customer 2",
"description":"Description 2"
},
{
"name":"Default customer 5",
"description":"Primary customer"
}];
$http({
method:'GET',
url:'https://sampledataurl/'
}).then(function successCallback(response){
$scope.profileInfo = response.data;
$scope.fmtDate = (new Date($scope.profileInfo.dateOfBirth)).getTime();
$scope.fmtFacebook = Object.keys($scope.profileInfo.contactDetails.socialLinks)[0];
$scope.modDate = (new Number(new Date().getFullYear())-$scope.profileInfo.dateOfBirth.toString().split('-')[0]);
}).then(function errorCallback(error){
let err = error;
console.log("Request failed on error: "+err);
})
});
Raw
custom-styles.css
.txtfollow {
font-size:x-small;
}
.txt-layoutcolor {
color: rgba(0,4,238);
}
.txt-layoutcolor.sm {
font-size:10px;
margin-top:38.666%;
}
.txt-grey-sm {
font-size:11px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color:grey;
}
.txt-grey-md {
font-size:15px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color:grey;
}
label.upperFirst {
font-size:large;
font-weight:bolder;
}
label.upperFirst:first-letter {
text-transform:capitalize;
}
.align-fix {
margin-left:1.553%;
}
.manuf-item {
border-radius:50%;
background-color: darkgray;
margin-top:2.33%;
margin-left:2.55%;
font-weight:bold;
list-style:none;
border-bottom:0.75px solid darkgrey;
}
.circle {
line-height: 10px;
display:block;
margin: 5px;
border: 15px solid rgba(255,255,255,0.4);
border-radius: 50%;
height: 32px;
width: 32px;
}
hr.gray {
border-top: 4px solid gainsboro;
}
.nav-tabs {
border-bottom:
4px solid #ddd;
}
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
border-color: rgba(0,4,238);
border-radius: 5px;
}
Raw
index.html
<!doctype html>
<html ng-app="MainContent" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="../example/scripts/angular.js"></script>
<script src="../example/scripts/app.js"></script>
<script src="../example/scripts/angular-animate.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="../example/scripts/bootstrap.js"></script>
<link rel="stylesheet" href="../example/css/bootstrap.css"/>
<link rel="stylesheet" href="../example/css/custom-styles.css"/>
</head>
<body>
<!--Main content-->
<div class="row" style="border:1px solid rgba(86,61,124,.2);">
<!--Left panel-->
<div class="col-sm-3" style="max-height:100%;border:1px solid rgba(86,61,124,.2);border-bottom:none;">
<div ng-controller="ProfileController">
<label class="txt-layoutcolor" ng-model="profile">CarTeam</label>
</div>
<img src="../dev-exercise/images/adv1.png"/>
</div>
<!--Middle panel-->
<div class="col-md-6" style="border:1px solid rgba(86,61,124,.2);margin-bottom:10.3%">
<div ng-controller="ProfileController">
<i class="txt-layoutcolor glyphicon glyphicon-chevron-left">&nbsp;&nbsp;</i><label class="upperFirst">{{profileInfo.fullName}}</label>
<picture>
<img src="../dev-exercise/images/cover_photo.jpg" style="border-radius:5px;width:100.4599%;height:32.9999%" alt="Main Banner"/>
</picture>
<div class="row">
<div class="col-xs-3">
<picture>
<img src="../dev-exercise/images/avatar.png" class="img-fluid" alt="Avatar Image"/>
</picture>
</div>
<div class="col-xs-4">
<label class="upperFirst">{{profileInfo.fullName}}</label>
<div class="txt-grey-sm">@{{profileInfo.username}}</div>
<div class="row">
<button type="button" class="txtfollow btn btn-primary">FOLLOW</button>
<button type="button" class="btn btn-light"><i class="glyphicon glyphicon-share-alt"></i></button>
<button type="button" class="btn btn-light"><i class="glyphicon glyphicon-option-vertical"></i></buttton>
</div>
</div>
</div>
</div>
<hr/>
<div ng-controller="ProfileController">
<div class="row">
<div class="col-sm-4">
<i class="glyphicon glyphicon-fire"></i>&nbsp;{{profileInfo.followers}}
</div>
<div class="col-sm-4">
<i class="glyphicon glyphicon-map-marker"></i>&nbsp;{{profileInfo.contactDetails.address.country}}
</div>
</div>
<div class="row">
<div class="col-sm-6">
<i class="glyphicon glyphicon-calendar"></i>&nbsp;{{fmtDate | date:'medium'}}&nbsp;
<div class="txt-grey-sm">{{modDate}}&nbsp;(year ago)</div>
</div>
</div>
</div>
<hr/>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">Posts</a>
</li>
<li class="nav-item active">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
<label>Manufacturers</label>
<div>
<div ng-controller="ProfileController" class="row">
<div ng-repeat="man in profileInfo.manufacturers" class="col-xs-6">
<ul>
<li class="manuf-item circle">{{man.fullName}}</li>
</ul>
<hr/>
</div>
<hr class="gray"/>
</div>
<label>Brands</label>
<div ng-controller="ProfileController" class="row">
<div ng-repeat="m in profileInfo.manufacturers" class="col-xs-6">
<ul>
<span class="txt-grey-sm">{{m.fullName | uppercase}}</span>
<li style="list-style:none;">
<i class="glyphicon glyphicon-chevron-down"></i>
{{m.brands[0].name}}
</li>
</ul>
</div>
</div>
<hr class="gray"/>
<label>General</label>
&nbsp;&nbsp;
<div style="font-weight:bold;"><i class="glyphicon glyphicon-user"></i>Other Names</div>
<div ng-controller="ProfileController" class="row">
<div ng-repeat="other in profileInfo.otherNames">
<ul>
<li style="list-style:none">
{{other}}
</li>
</ul>
</div>
</div>
<div style="font-weight:bold;"><i class="glyphicon glyphicon-flag"></i>Origin</div>
<div ng-controller="ProfileController" class="row">
<ul>
<li style="list-style:none">
{{profileInfo.contactDetails.address.suburb}}
&nbsp;,
{{profileInfo.contactDetails.address.city}}
</li>
</ul>
</div>
<div style="font-weight:bold;"><i class="glyphicon glyphicon-info-sign"></i>About</div>
<div ng-controller="ProfileController" class="row">
<ul>
<li style="list-style:none">
{{profileInfo.about}}
</li>
</ul>
<hr class="gray"/>
<label class="align-fix">Contact Details</label>
&nbsp;&nbsp;
<div class="align-fix" style="font-weight:bold;"><i class="glyphicon glyphicon-map-marker"></i>Address</div>
<ul>
<li style="list-style:none">
{{profileInfo.contactDetails.address.street}} {{profileInfo.contactDetails.address.number}},
{{profileInfo.contactDetails.address.suburb}} {{profileInfo.contactDetails.address.moreInfo}},
{{profileInfo.contactDetails.address.city}}, 2409, {{profileInfo.contactDetails.address.country}}
</li>
</ul>
<div class="align-fix" style="font-weight:bold;"><i class="glyphicon glyphicon-earphone"></i>Contact number</div>
<ul>
<li style="list-style:none;">
+{{profileInfo.contactDetails.contactNumber.areaCode}} {{profileInfo.contactDetails.contactNumber.number}}
</li>
</ul>
<div class="align-fix" style="font-weight:bold;"><i class="glyphicon glyphicon-globe"></i>Website</div>
<ul>
<li class="txt-layoutcolor" style="list-style:none;">
{{profileInfo.contactDetails.website}}
</li>
</ul>
<div class="align-fix" style="font-weight:bold;"><i class="glyphicon glyphicon-envelope"></i>Email</div>
<ul>
<li class="txt-layoutcolor" style="list-style:none;">
{{profileInfo.contactDetails.email}}
</li>
</ul>
<div class="align-fix" style="font-weight:bold;"><i class="glyphicon glyphicon-thumbs-up"></i>Facebook</div>
<ul>
<li class="txt-layoutcolor" style="list-style:none;">
{{fmtFacebook}}.com/{{profileInfo.contactDetails.socialLinks['facebook']}}
</li>
</ul>
</div>
</div>
</div>
<!--Right panel-->
<div ng-controller="ProfileController" class="col-sm-3" style="max-height:100%;border:1px solid rgba(86,61,124,.2);border-bottom:none;">
<div class="input-group col-sm-12" style="margin-bottom:23%">
<input type="text" class="form-control input-sm" style="border-top:none;border-left:none;border-right:none" placeholder="Search"/>
<div class="row">
<span class="col-sm-2 txt-grey-sm" style="margin-top:5%">Recommendations</span>
</div>
<div class="input-group col-sm-10" ng-repeat="item in searchData">
<ul>
<div class="manuf-item circle"></div>
<li style="list-style:none;font-weight:bold">
{{item.name}}
</li>
<li class="txt-grey-sm" style="list-style:none;">
{{item.description}}
</li>
<button type="button" class="btn btn-link">
<i class="glyphicon glyphicon-plus"></i>
</button>
<hr/>
</ul>
</div>
</div>
<label class="txt-layoutcolor">View all recommendations</label>
<img src="../dev-exercise/images/adv2.png"/>
<label class="txt-layoutcolor sm">English (UK) - Privacy Terms</label>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment