Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9ff6cfb
commit c6e72a4
Showing
18 changed files
with
3,537 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,24 @@ | |||
# Require any additional compass plugins here. | |||
|
|||
# Set this to the root of your project when deployed: | |||
http_path = "/" | |||
css_dir = "stylesheets" | |||
sass_dir = "sass" | |||
images_dir = "images" | |||
javascripts_dir = "javascripts" | |||
|
|||
# You can select your preferred output style here (can be overridden via the command line): | |||
# output_style = :expanded or :nested or :compact or :compressed | |||
|
|||
# To enable relative paths to assets via compass helper functions. Uncomment: | |||
# relative_assets = true | |||
|
|||
# To disable debugging comments that display the original location of your selectors. Uncomment: | |||
# line_comments = false | |||
|
|||
|
|||
# If you prefer the indented syntax, you might want to regenerate this | |||
# project again passing --syntax sass, or you can uncomment this: | |||
# preferred_syntax = :sass | |||
# and then run: | |||
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,60 @@ | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>Viewporter</title> | |||
<meta name="viewport" content="width=device-width"> | |||
<link rel="stylesheet" href="stylesheets/normalize.css"> | |||
<link rel="stylesheet" href="stylesheets/main.css"> | |||
</head> | |||
<body> | |||
<header class="header group"> | |||
<div class="container"> | |||
<h1 class="trafalgar">Viewporter</h1> | |||
<p class="great-primer">An <a href="http://news.bbc.co.uk/sport1/hi/football/euro_2008/7479459.stm">“absolutely phenomonal”</a> tool for viewing websites at any size.</p> | |||
<!--<p>You want your designs to stand the test of time, just like Motty's commentary has.</p>--> | |||
</div> | |||
</header> | |||
<div role="main"> | |||
<section class="group size-section"> | |||
<div class="group container"> | |||
<div class="region size-description"> | |||
<h2>Any site at any size</h2> | |||
<h3 class="pica">Designing for the unknown</h3> | |||
<p class="lead"> | |||
Make sure that your content adapts and scales properly at any width and height, find the breaking-point in the design and apply tweaks appropriately. | |||
</p> | |||
</div> | |||
<div class="region size-figure"> | |||
<figure> | |||
<img src="stylesheets/images/url_size_toggle.png"> | |||
<figcaption class="img-caption long-primer">Quickly toggle between size and URL input</figcaption> | |||
</figure> | |||
</div> | |||
</section> | |||
<section class="group presets-section"> | |||
<div class="group container"> | |||
<div class="region presets-description"> | |||
<h2>Presets</h2> | |||
</div> | |||
<div class="region presets-figure"> | |||
<figure> | |||
<img src="stylesheets/images/preset_box.png"> | |||
<figcaption class="img-caption long-primer">Store preset sizes relevant to your project</figcaption> | |||
</figure> | |||
</div> | |||
</section> | |||
<section class="group saving-section"> | |||
<div class="group container"> | |||
<div class="region saving-description"> | |||
<h2>State Saving</h2> | |||
</div> | |||
<div class="region saving-figure"> | |||
<figure> | |||
<img src="stylesheets/images/saving.png"> | |||
<figcaption class="img-caption long-primer">Quickly toggle between size and URL input</figcaption> | |||
</figure> | |||
</div> | |||
</section> | |||
</div> | |||
</body> | |||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,97 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>Viewporter</title> | |||
<meta name="viewport" content="width=device-width"> | |||
<link rel="stylesheet" href="stylesheets/normalize.css"> | |||
<link rel="stylesheet" href="stylesheets/viewporter.css"> | |||
<script> | |||
/* | |||
(function () { | |||
var params = {}, qs = location.search.substring(1), re = /([^&=]+)=([^&]*)/g, m; | |||
while (m = re.exec(qs)) | |||
params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); | |||
window.viewporter = {params: params}; | |||
} ()); | |||
*/ | |||
</script> | |||
|
|||
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |||
<script src="js/mousetrap.min.js"></script> | |||
<script src="js/utils.js"></script> | |||
<script src="js/viewporter.js"></script> | |||
</head> | |||
<body> | |||
<h1 class="visually-hidden">Viewporter</h1> | |||
<noscript>Oops, your browser doesn't support JavaScript or it is disabled.</noscript> | |||
<script> | |||
/* var url = viewporter.params.url || 'default.html'; */ | |||
document.write('<div id="viewport-container"><iframe id="viewport" src="http://www.bbc.co.uk/sport/winter-olympics/2014"></iframe></div>'); | |||
</script> | |||
|
|||
<section id="main-menu" class="menu main-menu mode-url"> | |||
<a id="presets-btn" class="toggle-btn presets-btn h-bdr" href="#"><span class="icon"></span> <span class="label">Presets</span></a> | |||
<a id="share-btn" class="toggle-btn share-btn h-bdr" href="#"><span class="icon"></span> <span class="label">Share</span></a> | |||
<div class="mode-menu"> | |||
|
|||
<section id="size-menu" class="menu size-menu h-bdr"> | |||
<form class="size-form" method="get" action="index.html"> | |||
<label for="size-width-input" class="size-lbl size-width-lbl">W</label> | |||
<input id="size-width-input" class="menu-item text-input size-width-input" type="text" placeholder="Auto" /> | |||
<label for="size-height-input" class="size-lbl size-height-lbl">H</label> | |||
<input id="size-height-input" class="menu-item text-input size-height-input" type="text" placeholder="Auto" /> | |||
<input type="submit" name="resize" value="Resize" id="resize-btn" class="menu-item menu-btn resize-btn" /> | |||
</form> | |||
</section> | |||
|
|||
<section id="url-menu" class="menu url-menu h-bdr"> | |||
<form class="url-form" method="get" action="index.html"> | |||
<label class="visually-hidden" for="url">URL</label> | |||
<input id="url-input" class="menu-item text-input url-input" type="url" name="url" placeholder="Enter a URL" /> | |||
<input type="submit" value="Set" id="url-btn" class="menu-item menu-btn url-btn" /> | |||
</form> | |||
</section> | |||
|
|||
</div> | |||
<a id="help-btn" class="toggle-btn help-btn h-bdr" href="#"><span class="label">Help</span></a> | |||
<a id="mode-btn" class="toggle-btn mode-btn h-bdr mode-size" href="#"><span class="icon"></span> <span class="label">URL</span></a> | |||
</section> | |||
|
|||
<!-- Presets panel --> | |||
<section id="presets-panel" class="panel presets-panel edit-disabled" style="display: none"> | |||
<table id="presets-table" class="table presets-table"> | |||
<colgroup> | |||
<col class="col-name" /> | |||
<col class="col-size" /> | |||
<col class="col-kb" /> | |||
<col class="col-delete" /> | |||
<col class="col-move" /> | |||
</colgroup> | |||
<thead> | |||
<tr> | |||
<th class="col-name" scope="col">Name</th> | |||
<th class="col-size" scope="col"> | |||
<span class="icon icon-size" title="Size">Size</span> | |||
</th> | |||
<th class="col-kb" scope="col"> | |||
<span class="icon icon-kb" title="Keyboard shortcut">Keyboard shortcut</span> | |||
</th> | |||
<th class="col-delete" scope="col">Delete</th> | |||
<th class="col-move" scope="col">Move</th> | |||
</tr> | |||
</thead> | |||
<tbody> | |||
</tbody> | |||
</table> | |||
<footer class="menu presets-footer-menu"> | |||
<div class="save-container h-bdr-l"> | |||
<a id="save-current-as-preset-btn" href="#" class="menu-item menu-btn save-btn"><span class="icon icon-save-white"></span>Save current</a> | |||
</div> | |||
<a id="presets-edit-btn" class="toggle-btn edit-btn h-bdr-r" href="#"><span class="icon"></span> <span class="label">Edit</span></a> | |||
</footer> | |||
</section> | |||
|
|||
<section id="flash-info" class="flash-info"></section> | |||
</body> | |||
</html> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,36 @@ | |||
/* http://api.jquery.com/jQuery.Callbacks/ */ | |||
var topics = {}; | |||
jQuery.Topic = function(id) { | |||
var callbacks, | |||
method, | |||
topic = id && topics[id]; | |||
if (!topic) { | |||
callbacks = jQuery.Callbacks(); | |||
topic = { | |||
publish: callbacks.fire, | |||
subscribe: callbacks.add, | |||
unsubscribe: callbacks.remove | |||
}; | |||
if (id) { | |||
topics[id] = topic; | |||
} | |||
} | |||
return topic; | |||
}; | |||
|
|||
Function.prototype.debounce = function (threshold, execAsap) { | |||
var func = this, timeout; | |||
return function debounced () { | |||
var obj = this, args = arguments; | |||
function delayed () { | |||
if (!execAsap) | |||
func.apply(obj, args); | |||
timeout = null; | |||
}; | |||
if (timeout) | |||
clearTimeout(timeout); | |||
else if (execAsap) | |||
func.apply(obj, args); | |||
timeout = setTimeout(delayed, threshold || 100); | |||
}; | |||
}; |
Oops, something went wrong.