Skip to content

Commit 162b23d

Browse files
abzatsabzats
committed
#wr: Optimised code. Adjusted mobile view.
1 parent 163330d commit 162b23d

16 files changed

Lines changed: 130 additions & 77 deletions

‎index.html‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,33 @@
1010
<script src="web/js/ie.min.js"></script>
1111
<![endif]-->
1212

13+
<link rel="shortcut icon" href="web/img/favicon.png" type="image/x-icon" />
14+
<link rel="icon" href="web/img/favicon.png" type="image/x-icon" />
15+
<link rel="apple-touch-icon" href="web/img/apple-touch-icon.png" />
16+
1317
<link rel="stylesheet" href="web/css/main.css" />
1418

1519
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
1620
<meta name="robots" content="index,follow" />
1721
<meta name="keywords" content="white, rabbit, neo, there, is, no, spoon" />
1822
<meta name="description" content="What do all men with power want? More power." />
1923

24+
25+
26+
2027
<!-- FB graph tags -->
21-
<meta property="og:url" content="<?php echo $_SERVER['REQUEST_URI']; ?>" />
28+
<meta property="og:url" content="http://wr.thealexweb.net/" />
2229
<meta property="og:type" content="website" />
2330
<meta property="og:title" content="White rabbit" />
2431
<meta property="og:description" content="What do all men with power want? More power." />
25-
<meta property="og:image" content="web/img/some_logo.png" />
32+
<meta property="og:image" content="web/img/some_logo.jpg" />
2633

2734
<!-- Twitter Card -->
2835
<meta name="twitter:card" content="summary" />
2936
<meta name="twitter:site" content="@whiterabbit" />
3037
<meta name="twitter:title" content="White rabbit" />
3138
<meta name="twitter:description" content="What do all men with power want? More power." />
32-
<meta name="twitter:image" content="web/img/some_logo.png" />
39+
<meta name="twitter:image" content="web/img/some_logo.jpg" />
3340
</head>
3441
<body>
3542
<noscript>
@@ -60,13 +67,13 @@ <h1>
6067
<div class="row">
6168
<div class="col-8">
6269
<div id="whiteRabbit">
63-
<div id="whiteRabbitCards"></div>
64-
<div id="whiteRabbitDetails"></div>
70+
<div id="whiteRabbitCards" class="white-rabbit__cards"></div>
71+
<div id="whiteRabbitDetails" class="white-rabbit__details"></div>
6572
</div>
6673
</div>
67-
<div class="col-4">
74+
<div class="col-4 menu__wrapper">
6875
<div class="menu">
69-
<div class="menu__wrapper">
76+
<div class="menu__inner">
7077
<div class="menu__item active" data-mode="defaultTemplate">
7178
<div class="menu__item__title text-lg-1">
7279
Vertical 'side-bar' mode
@@ -77,7 +84,7 @@ <h1>
7784
* Scroll inside of the cards-bar.
7885
</p>
7986
<p class="pb-12">
80-
* Click on cards to see datails.
87+
* Click on cards to see details.
8188
</p>
8289
<p class="pb-12">
8390
That mode emulates 'side-bar' widget with opening separate 'details' block.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@
3939
},
4040
"author": "Alexander Sergeev",
4141
"license": "ISC",
42-
"description": "Test task for TrustPilot"
42+
"description": "Test task"
4343
}

‎web-src/img/apple-touch-icon.png‎

35.2 KB
Loading

‎web-src/img/favicon.png‎

35.2 KB
Loading

‎web-src/img/matrix-bg.jpg‎

-42.1 KB
Binary file not shown.

‎web-src/img/trustpilot-logo-dark-bg-120x18.png‎

-2.34 KB
Binary file not shown.

‎web-src/img/trustpilot-logo-light-bg-120x18.png‎

-2.42 KB
Binary file not shown.

‎web-src/js/components/card-actions.js‎

Lines changed: 36 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -10,59 +10,55 @@ var App = App || {};
1010
* Common init function
1111
*/
1212
function init(ajaxResponce) {
13-
/**
14-
* Show details
15-
*/
13+
// Show details
1614
$('.defaultTemplate #whiteRabbitCards .card')
1715
.off('click.showDetails')
1816
.on('click.showDetails', function(e) {
1917

2018
var id = $(this).attr('data-id');
2119
var result = '';
20+
21+
var fullName;
22+
var location;
23+
var reviewTitle;
24+
var reviewBody;
25+
var starRating;
26+
var createdOn;
27+
28+
// Check if we received json with more than 1 object
2229
if (id) {
23-
var fullName = ajaxResponce[id].fullName || 'no name';
24-
var location = ajaxResponce[id].location || 'no location';
25-
var reviewTitle = ajaxResponce[id].reviewTitle || 'no title';
26-
var reviewBody = ajaxResponce[id].reviewBody || 'no text';
30+
fullName = ajaxResponce[id].fullName || 'no name';
31+
location = ajaxResponce[id].location || 'no location';
32+
reviewTitle = ajaxResponce[id].reviewTitle || 'no title';
33+
reviewBody = ajaxResponce[id].reviewBody || 'no text';
2734
reviewBody = App.Utils.nl2br(reviewBody);
28-
var starRating = ajaxResponce[id].starRating || '5';
29-
var createdOn = ajaxResponce[id].createdOn || 'no date';
35+
starRating = ajaxResponce[id].starRating || '5';
36+
createdOn = ajaxResponce[id].createdOn || 'no date';
3037

31-
result += '<div class="description">* Click here to hide</div>';
32-
result += '<h2>Details</h2>';
33-
result += '<div class="text-md-2">';
34-
result += '<p class="pt-12"><strong>Name:</strong> ' + fullName + '</p>';
35-
result += '<p class="pt-12"><strong>Rate:</strong> ' + starRating + '</p>';
36-
result += '<p class="pt-12"><strong>Review title:</strong> ' + reviewTitle + '</p>';
37-
result += '<p class="pt-12"><strong>Review body:</strong></p>';
38-
result += '<p class="pt-12">' + reviewBody + '</p>';
39-
result += '<p class="pt-12"><strong>Location:</strong> ' + location + '</p>';
40-
result += '<p class="pt-12"><strong>Created:</strong> ' + createdOn + '</p>';
41-
result += '</div>';
42-
$('#whiteRabbitDetails').html('').append(result);
4338
} else {
44-
var fullName = ajaxResponce.fullName || 'no name';
45-
var location = ajaxResponce.location || 'no location';
46-
var reviewTitle = ajaxResponce.reviewTitle || 'no title';
47-
var reviewBody = ajaxResponce.reviewBody || 'no text';
39+
fullName = ajaxResponce.fullName || 'no name';
40+
location = ajaxResponce.location || 'no location';
41+
reviewTitle = ajaxResponce.reviewTitle || 'no title';
42+
reviewBody = ajaxResponce.reviewBody || 'no text';
4843
reviewBody = App.Utils.nl2br(reviewBody);
49-
var starRating = ajaxResponce.starRating || '5';
50-
var createdOn = ajaxResponce.createdOn || 'no date';
51-
52-
result += '<div class="description">* Click here to close</div>';
53-
result += '<h2>Details</h2>';
54-
result += '<div class="text-md-2">';
55-
result += '<p class="pt-12"><strong>Name:</strong> ' + fullName + '</p>';
56-
result += '<p class="pt-12"><strong>Rate:</strong> ' + starRating + '</p>';
57-
result += '<p class="pt-12"><strong>Review title:</strong> ' + reviewTitle + '</p>';
58-
result += '<p class="pt-12"><strong>Review body:</strong></p>';
59-
result += '<p class="pt-12">' + reviewBody + '</p>';
60-
result += '<p class="pt-12"><strong>Location:</strong> ' + location + '</p>';
61-
result += '<p class="pt-12"><strong>Created:</strong> ' + createdOn + '</p>';
62-
result += '</div>';
63-
$('#whiteRabbitDetails').html('').append(result);
44+
starRating = ajaxResponce.starRating || '5';
45+
createdOn = ajaxResponce.createdOn || 'no date';
6446
}
6547

48+
result += '<div class="description">* Click here to close</div>';
49+
result += '<h2>Details</h2>';
50+
result += '<div class="text-md-2">';
51+
result += '<p class="pt-12"><strong>Name:</strong> ' + fullName + '</p>';
52+
result += '<p class="pt-12"><strong>Rate:</strong> ' + starRating + '</p>';
53+
result += '<p class="pt-12"><strong>Review title:</strong> ' + reviewTitle + '</p>';
54+
result += '<p class="pt-12"><strong>Review body:</strong></p>';
55+
result += '<p class="pt-12">' + reviewBody + '</p>';
56+
result += '<p class="pt-12"><strong>Location:</strong> ' + location + '</p>';
57+
result += '<p class="pt-12"><strong>Created:</strong> ' + createdOn + '</p>';
58+
result += '</div>';
59+
60+
$('#whiteRabbitDetails').html('').append(result);
61+
6662
/**
6763
* Hide/close details block
6864
*/

‎web-src/js/components/card.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ var App = App || {};
66
/**
77
* Cards templates
88
*/
9-
109
App.Card = {
1110
defaultTemplate: defaultTemplate,
1211
responsiveTemplate: responsiveTemplate,
@@ -39,11 +38,11 @@ var App = App || {};
3938
card += reviewTitleFormated;
4039
card += '</h4>';
4140

42-
card += '<div class="card__avatar-img">';
41+
card += '<div class="card__avatar">';
4342
if (avatarUrl === '') {
44-
card += '<img src="web/img/noavatar.png" alt="' + fullName + '" />';
43+
card += '<img src="web/img/noavatar.png" alt="' + fullName + '" class="card__avatar__img" />';
4544
} else {
46-
card += '<img src="data/img/' + avatarUrl + '" alt="' + fullName + '" />';
45+
card += '<img src="data/img/' + avatarUrl + '" alt="' + fullName + '" class="card__avatar__img" />';
4746
}
4847
card += '</div>';
4948

@@ -55,7 +54,7 @@ var App = App || {};
5554
card += '</div>';
5655

5756
card += '<div class="card__stars-block pb-12">';
58-
card += '<img src="web/img/' + starRating + '-stars-260x48.png" alt="' + starRating + 'stars" />';
57+
card += '<img src="web/img/' + starRating + '-stars-260x48.png" alt="' + starRating + 'stars" class="card__stars-block__img" />';
5958
card += '</div>';
6059

6160
card += '<div class="card__text-block text-gray">';
@@ -104,7 +103,7 @@ var App = App || {};
104103
card += '<div class="card text-left">';
105104

106105
card += '<div class="card__stars-block card__stars-block--block pb-12">';
107-
card += '<img src="web/img/' + starRating + '-stars-260x48.png" alt="' + starRating + 'stars" />';
106+
card += '<img src="web/img/' + starRating + '-stars-260x48.png" alt="' + starRating + 'stars" class="card__stars-block__img" />';
108107
card += '</div>';
109108

110109
card += '<div class="card__top-overlay compact">';

‎web-src/js/components/responsive-grid.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ var App = App || {};
22

33
(function ($) {
44

5+
/**
6+
* Responsive grid
7+
*/
58
App.Grid = {
69
init: init,
710
};
811

912
/**
10-
* Replace '\n' with '<br />
13+
* Init function
1114
*/
1215
function init () {
1316
responsiveGrid();
@@ -39,7 +42,7 @@ var App = App || {};
3942
$('#whiteRabbitCards .card:nth-child(even)')
4043
.each(function () {
4144
$(this).css({
42-
left: 'calc(50% + 30px)',
45+
left: 'calc(50% + 22.5px)',
4346
top: evenHeight,
4447
});
4548
evenHeight = evenHeight + $(this).height() + 24;

0 commit comments

Comments
 (0)