Skip to content

Commit

Permalink
[INTERNAL] New (final) design of demo application
Browse files Browse the repository at this point in the history
  • Loading branch information
Jeremy Brown committed Dec 2, 2014
1 parent 928d74d commit 23cb54f
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 251 deletions.
172 changes: 2 additions & 170 deletions tests/dummy/app/styles/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,171 +1,3 @@
/*
* Globals
*/

/* Links */
a,
a:focus,
a:hover,
.mastfoot > .inner a,
.mastfoot > .inner a:focus,
.mastfoot > .inner a:hover {
color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}


/*
* Base structure
*/
body {
color: #fff;
text-align: center;
  background-color: #1E1E1E;
background: url("http://cdn.rawgit.com/softlayer/sl-ember-translate/862cb99e72a564badd8532993dd1cd9010a80eee/images/bg2.jpg");
background-repeat: no-repeat;
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}

/* Padding for spacing */
.inner {
padding: 30px;
color: #fff;
}


/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}

.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}

@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}


/*
* Cover
*/

.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}

.cover h4 {
margin-top: 20px;
}
.left-text {
text-align: left;
}
.center-text {
text-align: center;
}

/*
* Footer
*/

.mastfoot {
text-align: center;
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}


/*
* Affix and center
*/

@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: relative;
top: 0;
}
.mastfoot {
position: relative;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}

@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
html, body {
margin: 20px;
}
153 changes: 72 additions & 81 deletions tests/dummy/app/templates/application.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="ember, ember cli, translate, translation, dictionary">
<meta name="description" content="An Ember CLI Addon that provides the ability to lookup a dictionary value through method calls or via a component in your templates.">
<meta name="author" content="SoftLayer, an IBM Company">

<link type="image/png" href="http://cdn.rawgit.com/softlayer/sl-ember-translate/862cb99e72a564badd8532993dd1cd9010a80eee/images/favicon.png" rel="icon">
<title>sl-ember-translate</title>

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">

<div class="masthead clearfix">
<div class="inner">
<div class="row">
<div class="col-md-6">
<h3 class="masthead-brand"><img src="http://cdn.rawgit.com/softlayer/sl-ember-translate/862cb99e72a564badd8532993dd1cd9010a80eee/images/logo-reverse.png" height="31" width="183" alt="SoftLayer, an IBM Company"></h3>
</div>

<div class="col-md-6">
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-reorder"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="/sl-ember-translate"><i class="fa fa-home"></i> Home</a></li>
<li><a href="http://github.com/softlayer/sl-ember-translate/blob/master/README.md"><i class="fa fa-wrench"></i> Get Started</a></li>
<li><a href="http://github.com/softlayer/sl-ember-translate/blob/master/CONTRIBUTING.md"><i class="fa fa-cog"></i> Contribution Guide</a></li>
<li><a href="http://github.com/softlayer/sl-ember-translate/stargazers"><i class="fa fa-star"></i> Star Our Repo</a></li>
<li><a href="http://github.com/softlayer/sl-ember-translate/fork"><i class="fa fa-code-fork"></i> Fork Our Repo</a></li>
</ul>
</div>
</div>
</div>
</div>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="ember, ember cli, UI, UI components, calendar, chart, grid, menu, progress bar, modal">
<meta name="description" content="An Ember CLI Addon that provides the ability to lookup a dictionary value through method calls or via a component in your templates.">
<meta name="author" content="SoftLayer, an IBM Company">

<link type="image/png" href="images/favicon.png" rel="icon">
<title>sl-ember-translate</title>

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>

<br>
<div class="container">

<div class="row">
<div class="col-md-12">
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-reorder"></i> <span class="caret"></span>
</button>

<ul class="dropdown-menu" role="menu">
<li><a href="/sl-ember-translate"><i class="fa fa-home"></i> Home</a></li>
<li><a href="http://github.com/softlayer/sl-ember-translate/blob/master/README.md"><i class="fa fa-wrench"></i> Get Started</a></li>
<li><a href="http://github.com/softlayer/sl-ember-translate/blob/master/CONTRIBUTING.md"><i class="fa fa-cog"></i> Contribution Guide</a></li>
<li><a href="http://github.com/softlayer/sl-ember-translate/stargazers"><i class="fa fa-star"></i> Star Our Repo</a></li>
<li><a href="http://github.com/softlayer/sl-ember-translate/fork"><i class="fa fa-code-fork"></i> Fork Our Repo</a></li>
</ul>
</div>
</div>
</div>

<div class="inner cover">
<div class="left-text">
<h4>Simple Key</h4>
{{sl-translate key="SIMPLE_KEY"}}
<div class="row">
<div class="col-md-12 text-center">
<h1>Usage Demonstration</h1>
<p class="lead">View the source code of the dummy application for syntax employed in this demo</p>
</div>
</div>

<h4>Singular/Plural Keys</h4>
{{sl-translate key="SINGULAR_KEY" pluralKey="PLURAL_KEY" pluralCount="1"}}<br>
{{sl-translate key="SINGULAR_KEY" pluralKey="PLURAL_KEY" pluralCount="3"}}
<h4>Simple Key</h4>
{{sl-translate key="SIMPLE_KEY"}}

<h4>Replaced Values In Keys</h4>
Original String: {{sl-translate key="REPLACED_KEY"}}<br>
Replaced String: {{sl-translate key="REPLACED_KEY" $0="First" $1="Unicorn"}}
<br><br>
<h4>Singular/Plural Keys</h4>
{{sl-translate key="SINGULAR_KEY" pluralKey="PLURAL_KEY" pluralCount="1"}}<br>
{{sl-translate key="SINGULAR_KEY" pluralKey="PLURAL_KEY" pluralCount="3"}}

<h4>Bound Replacement Values In Keys</h4>
String Will Update: {{sl-translate key="REPLACED_KEY" $0="First" $1Binding="valueToDisplay"}}
<br><br>
<button class="btn-default" {{action "updateStringValues"}}>Update Values</button>
<br><br>
<h4>Replaced Values In Keys</h4>
Original String: {{sl-translate key="REPLACED_KEY"}}<br>
Replaced String: {{sl-translate key="REPLACED_KEY" $0="First" $1="Unicorn"}}

<h4>Used alongside other properties or attribute bindings</h4>
{{sl-translate tagName="em" key="REPLACED_KEY" $0="First" $1="Dragon"}}
<br><br>
<h4>Bound Replacement Values In Keys</h4>
String Will Update: {{sl-translate key="REPLACED_KEY" $0="First" $1Binding="valueToDisplay"}}
<br><br>
<button {{action "updateStringValues"}}>Update Values</button>

{{outlet}}
</div>
</div>
<br><br>
<h4>Used alongside other properties or attribute bindings</h4>
{{sl-translate tagName="em" key="REPLACED_KEY" $0="First" $1="Dragon"}}

<div class="mastfoot">
<div class="inner">
<p>npm install sl-ember-translate</p>
<p><a href="https://github.com/softlayer/sl-ember-translate/blob/master/LICENSE.md">MIT Licensed</a></p>
</div>
</div>
{{outlet}}

<br><br>
<div class="row">
<div class="col-md-12 text-center">
<p>npm intall sl-ember-translate</p>
<p><a href="https://github.com/softlayer/sl-ember-translate/blob/master/LICENSE.md">MIT Licensed</a></p>
</div>
</div>
</div>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>

0 comments on commit 23cb54f

Please sign in to comment.