Skip to content
This repository was archived by the owner on Jun 11, 2019. It is now read-only.

Device guide added #16

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Device guide added #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9981fd0
Device guide added
sarahcapecci Jun 23, 2014
8f7f457
Device guide finished
sarahcapecci Jun 23, 2014
a64e7e5
Ready to use
sarahcapecci Jun 23, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions demo/device-guide.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Harvey - Device Guide</title>

<link href="layout.css" media="all" rel="stylesheet" type="text/css" />

</head>
<body>

<div class="dimensions"></div>
<div id="device">
<p>Device:<span class="device"></span></p>
<p class="orientation">Orientation:<span></span></p>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script src="../harvey.js" type="text/javascript"></script>
<script src="interface.js" type="text/javascript"></script>
<script src="device.js" type="text/javascript"></script>

</body>
</html>
44 changes: 44 additions & 0 deletions demo/device.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
var deviceCheck = function(){
var device = $('.device');
var orientation = $('.orientation');
var orientSpan = $('.orientation span');

if ($(window).width() < 320) {
device.html('Smartphones');
orientation.show();
orientSpan.html('Portrait');
} else if ( 320 <= $(window).width() && $(window).width() < 480) {
device.html('Smartphones');
orientation.show();
orientSpan.html('Portrait & Landscape');
} else if (480 <= $(window).width() && $(window).width() < 768) {
device.html('Smartphones');
orientation.show();
orientSpan.html('Mainly Landscape');
} else if ( 768 <= $(window).width() && $(window).width() < 960) {
device.html('Tablet');
orientation.show();
orientSpan.html('Portrait & Landscape');
} else if (960 <= $(window).width() && $(window).width() < 1224) {
device.html('Desktop Screen and some Tablets');
orientation.show();
orientSpan.html('Landscape (Tablets)');
} else if (1224 < $(window).width() && $(window).width() < 1824) {
device.html('Wider Desktop Screens');
orientation.hide();
} else if ($(window).width() >= 1824) {
device.html('Large screens');
} else {
console.log('Sorry, this screen size does not seem to be standard');
}
};


deviceCheck();
$(window).resize(function() {
deviceCheck();
});




2 changes: 1 addition & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
<body>

<p class="dimensions"></p>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script src="../harvey.js" type="text/javascript"></script>
<script src="interface.js" type="text/javascript"></script>

Expand Down
1 change: 1 addition & 0 deletions demo/interface.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 20 additions & 0 deletions demo/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 14px;
line-height: 25px;
}

.dimensions {
position: absolute;
top: 50%;
Expand All @@ -8,4 +14,18 @@
text-align: center;
font-size: 2em;
font-weight: bold;
}


#device {
max-width: 50%;
}

p {
font-weight: bold;
}

span {
display: block;
font-weight: normal;
}