Skip to content

Commit

Permalink
tweaking typography, layout, and mobile/desktop design elements to be…
Browse files Browse the repository at this point in the history 
… more readable
  • Loading branch information
Norris Hung authored and Norris Hung committed Sep 21, 2015
1 parent eb493a5 commit e51a0eb
Show file tree
Hide file tree
Showing 104 changed files with 4,737 additions and 457 deletions.
2 changes: 2 additions & 0 deletions config.rb
View file
@@ -0,0 +1,2 @@
css_dir = "public/stylesheets"
sass_dir = "public/stylesheets"
235 changes: 116 additions & 119 deletions public/index.html
View file
@@ -1,96 +1,93 @@
<!doctype html>
<head>
<title>Data Screen</title>
<link rel="stylesheet" href="./stylesheets/base.css" />
<link rel="stylesheet" href="./stylesheets/font-awesome/css/font-awesome.min.css">
<head>
<title>Data Screen</title>
<link rel="stylesheet" href="./stylesheets/base.css" />
<link rel="stylesheet" href="./stylesheets/font-awesome/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="./stylesheets/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css' />
<meta name="viewport"
content="width=device-width, minimum-scale=1.0,initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
<div class="top-bar">
<div class="inner">
<img src="http://style.codeforamerica.org/media/images/logo-colored.png" alt="Code for America">
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,300,300italic,700,700italic' rel='stylesheet' type='text/css'>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0,initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
<div class="top-bar">
<div class="inner">
<img src="http://style.codeforamerica.org/media/images/logo-colored.png" alt="Code for America">
</div>
<p class="colophon">This is an experiment from Code for America. You can log issues and find out more from our <a href="https://github.com/codeforamerica/display-screen">GitHub repository</a>. You must use <a href="https://www.google.com/intl/en_us/chrome/browser/">Chrome</a> to view this dashboard.</p>
</div>
<p>This is an experiment from Code for America. You can log issues and find out more from our <a href="https://github.com/codeforamerica/display-screen">GitHub repository</a>. You must use <a href="https://www.google.com/intl/en_us/chrome/browser/">Chrome</a> to view this dashboard.</p>
<div style="width:75%;overflow:hidden" class="small-box traffic">
<div class="traffic-stats">
<div class="small-box traffic">
<h2 class="stat-header" id="graph-text">Visitors over the last 48 hours (30 minute interval)</h2>
<div class="graph box-in">
<div id="traffic-count-graph" class="box-inner">
</div>
<div id="graph-text">visitors over the last 48 hours (30 minute interval)</div>
</div>
<span id="traffic" class="count">
<div class="visitor-count" id="mobile-count">
<span class="text-feature" id="traffic-count-mobile">&nbsp;</span>
<i class="icon-mobile-phone"></i>
mobile
</div>
<div class="visitor-count" id="desktop-count">
<span class="text-feature" id="traffic-count">&nbsp;</span>
<i class="icon-desktop"></i>
desktop
</div>
<span>visitors online</span>
</span>
</div>

</div>

<ul class="bricks">
<li class="brick">
<h2 class="brick-heading">Live search</h2>
<div class="box search-terms">
<div class="box-inner">
<ul id="search-terms"></ul>
<div id="traffic" class="count">
<h2 class="stat-header">Visitors online now</h2>
<div class="visitor-count" id="mobile-count">
<i class="icon-mobile-phone"></i> <span class="text-feature" id="traffic-count-mobile">&nbsp;</span> mobile
</div>
</div>
</li>

<li class="brick">
<h2 class="brick-heading">Active pages</h2>
<div class="box searches">
<div class="box-inner">
<ul id="search"></ul>
<div class="visitor-count" id="desktop-count">
<i class="icon-desktop"></i> <span class="text-feature" id="traffic-count">&nbsp;</span> desktop
</div>
</div>
</li>
</div>

<li class="brick last">
<h2 class="brick-heading">Most popular pages</h2>
<div class="box popular content">
<div class="box-inner">
<ul id="content"></ul>
<ul class="bricks">
<li class="brick">
<h2 class="brick-heading">Live search</h2>
<div class="box search-terms">
<div class="box-inner">
<ul id="search-terms"></ul>
</div>
</div>
</div>
</li>
</ul>


<script src="javascripts/vendor/xhr.min.js"></script>
<script src="javascripts/vendor/time.min.js"></script>
<script src="javascripts/vendor/timeFormat.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="javascripts/vendor/handlebars-v3.0.3.js"></script>
<script src="javascripts/vendor/pretty.js"></script>
<script src="javascripts/vendor/bezier.js"></script>
</li>

<script src="javascripts/helpers/dataHelper.js"></script>
<script src="javascripts/helpers/templateHelper.js"></script>
<script src="javascripts/helpers/helper.js"></script>
<script src="javascripts/helpers/raphaelHelper.js"></script>
<script src="javascripts/landing-pages.js"></script>
<script src="javascripts/search.js"></script>
<script src="javascripts/traffic.js"></script>
<script src="javascripts/content.js"></script>
<li class="brick">
<h2 class="brick-heading">Active pages</h2>
<div class="box searches">
<div class="box-inner">
<ul id="search"></ul>
</div>
</div>
</li>

<script src="javascripts/manager.js"></script>
<script>
<li class="brick last">
<h2 class="brick-heading">Most popular pages</h2>
<div class="box popular content">
<div class="box-inner">
<ul id="content"></ul>
</div>
</div>
</li>
</ul>


<script src="javascripts/vendor/xhr.min.js"></script>
<script src="javascripts/vendor/time.min.js"></script>
<script src="javascripts/vendor/timeFormat.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="javascripts/vendor/handlebars-v3.0.3.js"></script>
<script src="javascripts/vendor/pretty.js"></script>
<script src="javascripts/vendor/bezier.js"></script>

<script src="javascripts/helpers/dataHelper.js"></script>
<script src="javascripts/helpers/templateHelper.js"></script>
<script src="javascripts/helpers/helper.js"></script>
<script src="javascripts/helpers/raphaelHelper.js"></script>
<script src="javascripts/landing-pages.js"></script>
<script src="javascripts/search.js"></script>
<script src="javascripts/traffic.js"></script>
<script src="javascripts/content.js"></script>

<script src="javascripts/manager.js"></script>
<script>
if(typeof window.matrix === 'undefined'){ window.matrix = {}; }

matrix.settings = {
Expand All @@ -101,66 +98,66 @@ <h2 class="brick-heading">Most popular pages</h2>
};

addEvent("load", window, matrix.manager.init);
</script>
</script>



<script type="template" id="select-options">
<script type="template" id="select-options">
<option value="">Select {{object}}</option>
{{#options}}
<option value="{{id}}">{{name}}</option>
<option value="{{id}}">{{name}}</option>
{{/options}}
</script>
</script>

<script type="template" id="content-results">
<script type="template" id="content-results">
{{#pages}}
<li>
<a href="http://{{ url }}" target="_blank">{{ title }}</a>
<em>
<div class="visitor-types mobile">
<i class="icon mobile icon-mobile-phone"></i> {{ numberFormat visits.mobile }}
</div>
<div class="visitor-types desktop">
<i class="icon desktop icon-desktop"></i> {{ numberFormat visits.desktop }}
</div>
</em>
</li>
<li>
<a href="http://{{ url }}" target="_blank">{{ title }}</a>
<em>
<div class="visitor-types mobile">
{{ numberFormat visits.mobile }} <i class="icon mobile icon-mobile-phone"></i>
</div>
<div class="visitor-types desktop">
{{ numberFormat visits.desktop }} <i class="icon desktop icon-desktop"></i>
</div>
</em>
</li>
{{/pages}}
</script>
</script>

<script type="template" id="search-result-items">
<script type="template" id="search-result-items">
{{#pages}}
<li>
<div class="device-type {{deviceCategory}}"></div>
<div class="link">
<a href="http://{{ url }}" target="_blank">{{ term }}</a>
</div>
<div class="device-type {{deviceCategory}}"></div>
<div class="link">
<a href="http://{{ url }}" target="_blank">{{ term }}</a>
</div>
</li>
{{/pages}}
</script>
<script type="template" id="search-result-item">
</script>
<script type="template" id="search-result-item">
<li>
<div class="device-type {{deviceCategory}}"></div>
<div>
<a href="http://{{ url }}" target="_blank">{{ term }}</a>
</div>
<div class="device-type {{deviceCategory}}"></div>
<div>
<a href="http://{{ url }}" target="_blank">{{ term }}</a>
</div>
</li>
</script>
</script>

<script type="template" id="landing-pages-items">
<script type="template" id="landing-pages-items">
{{#each pages}}
<li>
<div class="device-type {{deviceCategory}}"></div>
<div class="link">
{{#has_url}}<a href="http://{{ url }}" target="_blank">{{/has_url}}
{{ term }}
{{#has_url}}</a>{{/has_url}}
{{#has_source}}
<em>via: {{ source }}</em>
{{/has_source}}
</div>
<div class="device-type {{deviceCategory}}"></div>
<div class="link">
{{#has_url}}<a href="http://{{ url }}" target="_blank">{{/has_url}}
{{ term }}
{{#has_url}}</a>{{/has_url}}
{{#has_source}}
<em>via: {{ source }}</em>
{{/has_source}}
</div>
</li>
{{/each}}
</script>
</body>
</html>
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion public/javascripts/traffic.js
View file
Expand Up @@ -52,7 +52,7 @@
ykeys: ['desktop', 'mobile'],
labels: ['Desktop', 'Mobile'],
stacked: true,
barColors: ["#265C8D", "#B26E00"],
barColors: ["#265c8d", "#B96425"],
hideHover: 'always',
xLabelFormat: function(data){
return "";
Expand Down

0 comments on commit e51a0eb

Please sign in to comment.