Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hk responsive layout #47

Merged
merged 16 commits into from Apr 7, 2018
Merged
Diff settings

Always

Just for now

Copy path View file
@@ -9,3 +9,5 @@ Gemfile.lock
/junit/
*.dwarf
/bin/lucky/
/backstop_data/html_report/
/backstop_data/bitmaps_test/
Copy path View file
@@ -0,0 +1,74 @@
{
"id": "backstop_default",
"viewports": [
{
"label": "phone",
"width": 320,
"height": 480
},
{
"label": "tablet",
"width": 1024,
"height": 768
},
{
"label": "desktop",
"width": 2880,
"height": 1800
}
],
"onBeforeScript": "chromy/onBefore.js",
"onReadyScript": "chromy/onReady.js",
"scenarios": [
{
"label": "Blog Index",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
"url": "http://localhost:5000",
"referenceUrl": "",
"readyEvent": "",
"readySelector": "",
"delay": 0,
"hideSelectors": [],
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"postInteractionWait": 0,
"selectors": [],
"selectorExpansion": true,
"misMatchThreshold" : 0.1,
"requireSameDimensions": true
},
{
"label": "Blog Sample Post",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
"url": "http://localhost:5000/posts/sample-post",
"referenceUrl": "",
"readyEvent": "",
"readySelector": "",
"delay": 0,
"hideSelectors": [],
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"postInteractionWait": 0,
"selectors": [],
"selectorExpansion": true,
"misMatchThreshold" : 0.1,
"requireSameDimensions": true
}
],
"paths": {
"bitmaps_reference": "backstop_data/bitmaps_reference",
"bitmaps_test": "backstop_data/bitmaps_test",
"engine_scripts": "backstop_data/engine_scripts",
"html_report": "backstop_data/html_report",
"ci_report": "backstop_data/ci_report"
},
"report": ["browser"],
"engine": "chrome",
"engineFlags": [],
"asyncCaptureLimit": 5,
"asyncCompareLimit": 50,
"debug": false,
"debugWindow": false
}
@@ -0,0 +1,25 @@
var WAIT_TIMEOUT = 5000;

module.exports = function(casper, scenario) {
var waitFor = require('./waitForHelperHelper')(casper, WAIT_TIMEOUT);
var hoverSelector = scenario.hoverSelector,
clickSelector = scenario.clickSelector,
postInteractionWait = scenario.postInteractionWait;

if (hoverSelector) {
waitFor(hoverSelector);
casper.then(function () {
casper.mouse.move(hoverSelector);
});
}

if (clickSelector) {
waitFor(clickSelector);
casper.then(function () {
casper.click(clickSelector);
});
}

// TODO: if postInteractionWait === integer then do ==> wait(postInteractionWait) || elsevvv

This comment has been minimized.

Copy link
@hanneskaeufler

hanneskaeufler Apr 7, 2018

Author Owner

Lol thanks

waitFor(postInteractionWait);
};
@@ -0,0 +1,15 @@
var fs = require('fs');

module.exports = function (casper, scenario) {
var cookies = [];
var cookiePath = scenario.cookiePath;

// READ COOKIES FROM FILE IF EXISTS
if (fs.exists(cookiePath)) {
cookies = JSON.parse(fs.read(cookiePath));
}

casper.page.cookies = cookies;
console.log('Cookie state restored with cookies:', JSON.stringify(cookies, null, 2));
casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36');
};
@@ -0,0 +1,4 @@
module.exports = function (casper, scenario, vp) {
require('./loadCookies')(casper, scenario);
casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36');
};
@@ -0,0 +1,5 @@
module.exports = function(casper, scenario, vp) {
console.log('SCENARIO> ' + scenario.label);
require('./clickAndHoverHelper')(casper, scenario);
// add more helpers here...
};
@@ -0,0 +1,18 @@
var TIMEOUT_DEFAULT = 2000;

module.exports = function (casper, timeout) {
var TIMEOUT = timeout || TIMEOUT_DEFAULT;

return function waitFor (selector) {
if (selector) {
casper.waitForSelector(
selector,
function () {},
function () {
console.error('NOT FOUND > ' + selector);
},
TIMEOUT
);
}
};
};
@@ -0,0 +1,24 @@
module.exports = function (chromy, scenario) {
var hoverSelector = scenario.hoverSelector;
var clickSelector = scenario.clickSelector;
var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]

if (hoverSelector) {
chromy
.wait(hoverSelector)
.rect(hoverSelector)
.result(function (rect) {
chromy.mouseMoved(rect.left, rect.top);
});
}

if (clickSelector) {
chromy
.wait(clickSelector)
.click(clickSelector);
}

if (postInteractionWait) {
chromy.wait(postInteractionWait);
}
};
@@ -0,0 +1,22 @@
var fs = require('fs');

module.exports = function (chromy, scenario) {
var cookies = [];
var cookiePath = scenario.cookiePath;

// READ COOKIES FROM FILE IF EXISTS
if (fs.existsSync(cookiePath)) {
cookies = JSON.parse(fs.readFileSync(cookiePath));
}

// MUNGE COOKIE DOMAIN FOR CHROMY USAGE
cookies = cookies.map(cookie => {
cookie.url = 'https://' + cookie.domain;
delete cookie.domain;
return cookie;
});

// SET COOKIES VIA CHROMY
chromy.setCookie(cookies);
console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
};
@@ -0,0 +1,6 @@
module.exports = function (chromy, scenario, vp) {
require('./loadCookies')(chromy, scenario);

// IGNORE ANY CERT WARNINGS
chromy.ignoreCertificateErrors();
};
@@ -0,0 +1,5 @@
module.exports = function (chromy, scenario, vp) {
console.log('SCENARIO > ' + scenario.label);
require('./clickAndHoverHelper')(chromy, scenario);
// add more ready handlers here...
};
@@ -0,0 +1,14 @@
[
{
"domain": ".www.yourdomain.com",
"path": "/",
"name": "yourCookieName",
"value": "yourCookieValue",
"expirationDate": 1798790400,
"hostOnly": false,
"httpOnly": false,
"secure": false,
"session": false,
"sameSite": "no_restriction"
}
]
@@ -0,0 +1,4 @@
module.exports = function (engine, scenario, vp) {
// This script runs before your app loads. Edit here to log-in, load cookies or set other states required for your test.
console.log('onBefore.js has run for ' + vp.label + '.');
};
@@ -0,0 +1,6 @@
module.exports = function (engine, scenario, vp) {
engine.evaluate(function () {
// Your web-app is now loaded. Edit here to simulate user interactions or other state changes in the browser window context.
});
console.log('onReady.js has run for: ', vp.label);
};
Copy path View file
@@ -5,6 +5,7 @@
"babel-brunch": "^6.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.6.0",
"backstopjs": "^3.1.21",
"browser-sync": "^2.18.13",
"brunch": "^2.10.10",
"fingerprinter-brunch": "^0.0.2",
@@ -21,6 +22,7 @@
"turbolinks": "^5.0.3"
},
"scripts": {
"test": "backstop test",
"heroku-postbuild": "bin/compile_assets build --production"
}
}
@@ -1,6 +1,17 @@
describe PostContentRenderer do
it "downgrades headings" do
renderer = PostContentRenderer.new
post = build_post(content: "Yo hello\n# Title\n well ...")
PostContentRenderer.new.render(post).should contain("\n<h2>")
renderer.render(post).should contain("\n<h2>")

post = build_post(content: "# Title")
renderer.render(post).should contain("<h2>")
end

it "does not mess with hashes in text" do
renderer = PostContentRenderer.new
post = build_post(content: "Just some text containing a # innocent hash")

renderer.render(post).should contain("Just some text containing a # innocent has")
end
end
@@ -32,6 +32,6 @@ class PostContentRenderer
end

private def downgrade_headings(content : String)
content.gsub(/\n#/, "\n##")
content.gsub(/(^|\n)#/, "\\0#")
end
end
Copy path View file
@@ -31,10 +31,6 @@ a:hover {
color: #32325d;
}

.blog-title {
height: 300px;
}

.blog-title-small {
background: rgba(36,180,126,.4);
padding: 10px;
@@ -100,6 +96,7 @@ a:hover {
> p > img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}

@@ -133,23 +130,28 @@ a:hover {
font-size: 0.8em;
}

.intro ul {
list-style-type: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.intro {
padding: 0 1em;

ul {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
list-style-type: none;
padding: 0;
}
}

.intro li a:link {
color: white;
background: rgba(0,0,0,.2);
border-radius: 20px;
color: transparent;
display: inline-block;
font-size: 0;
margin: 5px;
padding: 6px 14px;
text-decoration: none;
border-radius: 20px;
font-size: 0.8em;
}

.intro li a:hover {
@@ -163,7 +165,6 @@ a:hover {
.intro li img {
color: white;
height: 15px;
margin-right: 10px;
opacity: .2;
}

@@ -218,8 +219,9 @@ a:hover {
}

.blog-footer a img {
width: 15px; height: 15px;
height: 15px;
opacity: 0.6;
width: 15px;
}

.blog-footer section {
@@ -301,3 +303,36 @@ a:hover {
padding: 10px 15px;
text-align: center;
}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
.intro li a:link {
color: white;
font-size: 0.8em;
}

.intro li img {
margin-right: 10px;
}

.posts-container {
padding-top: 50px;
}
}

@media (min-width: 992px) {
.intro li a:link {
color: white;
font-size: 0.8em;
}

.intro li img {
margin-right: 10px;
}

.posts-container {
padding-top: 100px;
}
}
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.