Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

iOS Header style for phoen when device is deployed for iOS

  • Loading branch information...
commit f076a372381e59ec0227fd2749187f544da70b4a 1 parent b7f74a6
@steren steren authored
View
397 app/bootstrap.js
397 additions, 0 deletions not shown
View
114 app/customCSS.css
@@ -1,114 +0,0 @@
-#container{
- background: #ffffff;
-
-}
-
-header>span {
- display: none;
- background-image: transparent;
- }
-
-#video header h1{
- background: #06c1ff;
- background: -webkit-linear-gradient(top, #c1fff3 0%,#06c1ff 2%,#067fd1 98%,#006399 100%);
- background: linear-gradient(to bottom, #c1fff3 0%,#06c1ff 2%,#067fd1 98%,#006399 100%);
-}
-#video #back {
- border-image-source: url('images/phone-ios-back-blue@2x.png');
-}
-#video #refresh,
-#video #share {
- border-image-source: url('images/phone-ios-button-blue@2x.png');
-}
-
-#status header h1{
- background: #ffcb38;
- background: -webkit-linear-gradient(top, #ffebc1 0%,#ffcb38 2%,#eda600 98%,#d37400 100%);
- background: linear-gradient(to bottom, #ffebc1 0%,#ffcb38 2%,#eda600 98%,#d37400 100%);
-}
-#status #back {
- border-image-source: url('images/phone-ios-back-yellow@2x.png');
-}
-#status #refresh,
-#status #share {
- border-image-source: url('images/phone-ios-button-yellow@2x.png');
-}
- #status header h1{
- color: #ffffff;
-}
-
-.status-item > div p {
- color: #000000;
-font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;
-font-size: 1em;
-}
-
-.status-item .right h3 {
-font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;
-font-size: 1em;
-color: #000000;
- }
-
-.status-item .right h4 {
-font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;
-font-weight: normal;
-font-size: 1em;
-margin-bottom: .8em;
-margin-top: 1em;
- color: #000000;
- }
-
-#status .detail .message p {
-font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-font-size: 1em;
-color: #000000;
-}
-
-#status .detail .message h4 {
-font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-letter-spacing: .5px;
-color: #000000;
-}
-
-#status .detail .message .cover {
- background: #ffffff;
- }
-
-.detail h2, .single h2 {
-font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;
-font-size: 1em;
-color: #000000;
-}
-
-.detail h3, .single h3 {
-font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;
-letter-spacing: .5px;
-color: #000000;
-}
-
-#status .detail .message {
- text-align: right;
-letter-spacing: .5px;
- }
-
-.hashed-list li:nth-child(even) {
-background-color: rgba(0,0,0,0.05);
-}
-
-
-#news header h1{
- background: #ffa854;
- background: -webkit-linear-gradient(top, #ffde93 0%,#ffa854 2%,#c46d19 98%,#995400 100%);
- background: linear-gradient(to bottom, #ffde93 0%,#ffa854 2%,#c46d19 98%,#995400 100%);
-}
-#news #back {
- border-image-source: url('images/phone-ios-back-orange@2x.png');
-}
-#news #refresh,
-#news #share {
- border-image-source: url('images/phone-ios-button-orange@2x.png');
-}
-#event header h1{
-background: #9b44c8;
-}
-
View
BIN  app/images/phone-ios-back-blue@2x.png 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/images/phone-ios-back-earth@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0  app/images/phone-ios-back@2x.png → app/images/phone-ios-back-gray@2x.png
File renamed without changes
View
BIN  app/images/phone-ios-back-orange@2x.png
Deleted file not rendered
View
BIN  app/images/phone-ios-back-spicy@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/images/phone-ios-back-vegetal@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/images/phone-ios-back-yellow@2x.png
Deleted file not rendered
View
BIN  app/images/phone-ios-button-blue@2x.png 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/images/phone-ios-button-earth@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0  app/images/phone-ios-button@2x.png → app/images/phone-ios-button-gray@2x.png
File renamed without changes
View
BIN  app/images/phone-ios-button-orange@2x.png
Deleted file not rendered
View
BIN  app/images/phone-ios-button-spicy@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/images/phone-ios-button-vegetal@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/images/phone-ios-button-yellow@2x.png
Deleted file not rendered
View
BIN  app/images/phone-ios-shadow@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/images/phone-shadow@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
421 app/index.phone.ios.optimized.html
@@ -0,0 +1,421 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+
+ <title></title>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+ <style type="text/css" media="screen">
+ body, html {
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+ }
+
+ body {
+ background: #000 url(data:image/gif;base64,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) no-repeat center center;
+ }
+
+ #container {
+ display: none;
+ }
+ </style>
+ </head>
+
+ <body class="device-phone-ios">
+ <div id="container">
+ <header>
+ <h1><span id="title">&nbsp;</span></h1>
+ <span>&nbsp;</span>
+ <a id="back"><span class="inner">Back</span></a>
+ <a id="refresh"><span class="inner">Refresh</span></a>
+ <a id="share"><span class="inner">Share</span></a>
+ </header>
+
+ <div id="viewport">
+ <div id="cards"></div>
+ </div>
+
+ <footer id="toolbar"><div>&nbsp;</div></footer>
+ </div>
+
+ <!-- TEMPLATES SHARED BY PHONE/TABLET/DESKTOP versions -->
+
+ <script type="text/template" id="template-nodata">
+ <div class="single content nodata">
+ <%= T('nodata') %>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-toolbar">
+ <ul>
+ <%= children %>
+ </ul>
+ </script>
+
+ <script type="text/template" id="toolbar-item">
+ <a href="<%= item.linkURL %>" class="<%= (item.name.toLowerCase() === 'contact') ? 'contact' : item.icon %> section-<%= item.slug %>">
+ <div class="indicator"><span>&nbsp;</span></div>
+ <%= item.name %><span>&nbsp;</span>
+ </a>
+ </script>
+
+ <script type="text/template" id="template-list-view">
+ <div class="first">
+ <ul class="list">
+ <% if (typeof children != "undefined" && children.length == 0) {%>
+ <li class="no-data"><%= T("No data") %></li>
+ <%} %>
+ <%= children %>
+ </ul>
+ </div>
+ <div class="loader large">&nbsp;</div>
+ </script>
+
+ <script type="text/template" id="template-single-photo">
+ <div class="first">
+ <ul class="list">
+ <%= children %>
+ </ul>
+ <div class="meta">
+ <div class="cell">
+ <% if(collection.at(0)) { %>
+ <%= collection.at(0).get('name') %>
+ <% } %>
+ </div>
+ </div>
+ </div>
+ <div class="loader large">&nbsp;</div>
+ </script>
+
+ <script type="text/template" id="template-photo-item">
+ <div class="figure">
+ <a class="img fadein" href="<%= item.contentURL %>" title="<%= item.name %>" data-joshfire-autothumb="true">&nbsp;</a>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-status-item">
+ <div>
+ <a href="#<%= section.slug %>/<%= offset %>">
+ <% if (imageUrl) { %>
+ <div class="figure">
+ <div class="img fadein" title="<%= (item.author && item.author[0] ? item.author[0].name : '') %>" data-joshfire-autothumb="true"></div>
+ <div class="loader"></div>
+ </div>
+ <% } %>
+ <div class="right">
+ <% if (item.author && item.author[0] && item.author[0].name) { %>
+ <h3>
+ <%= item.author[0].name %>
+ <% if (item.author[0]['foaf:nick']) { %>
+ @<%= item.author[0]['foaf:nick'] %>
+ <% } %>
+ </h3>
+ <% } %>
+ <p><%= item.name %></p>
+ <% if (item.datePublished || item.uploadDate || item.dateCreated) { %>
+ <h4><%= moment(toDate(item.datePublished || item.uploadDate || item.dateCreated)).fromNow() %></h4>
+ <% } %>
+ </div>
+ </a>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-video-item">
+ <div>
+ <a href="#<%= section.slug %>/<%= offset %>">
+ <div>
+ <% if (imageUrl) { %>
+ <div class="figure">
+ <div class="img fadein" data-joshfire-autothumb="true"></div>
+ <div class="loader inv"></div>
+ </div>
+ <% } %>
+ <div class="right">
+ <h3><%= item.name %></h3>
+ </div>
+ </div>
+ </a>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-event-item">
+ <div>
+ <a href="#<%= section.slug %>/<%= offset %>">
+ <div>
+ <% if (item.startDate) { %>
+ <h3>
+ <span><%= moment(toDate(item.startDate)).calendar() %></span>
+ </h3>
+ <% } %>
+ <h4><%= item.name || item.description %></h4>
+ </div>
+ </a>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-news-item">
+ <div>
+ <a href="#<%= section.slug %>/<%= offset %>">
+ <div>
+ <% if (imageUrl) { %>
+ <div class="figure">
+ <div class="img fadein" data-joshfire-autothumb="true"></div>
+ <div class="loader inv"></div>
+ </div>
+ <% } %>
+ <% if (item.datePublished || item.uploadDate || item.dateCreated) { %>
+ <h3>
+ <span><%= moment(toDate(item.datePublished || item.uploadDate || item.dateCreated)).fromNow() %></span>
+ </h3>
+ <% } %>
+ <h4><%= item.name || item.description %></h4>
+ </div>
+ </a>
+ </div>
+ </script>
+
+
+ <script type="text/template" id="template-sound-item">
+ <div>
+ <a href="#<%= section.slug %>/<%= offset %>">
+ <div>
+ <% if (item.byArtist && item.byArtist.name) { %>
+ <h3><%= item.byArtist.name %></h3>
+ <% } else if (item.author && item.author.name) { %>
+ <h3><%= item.author.name %></h3>
+ <% } %>
+ <h4><%= item.name %></h4>
+ </div>
+ </a>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-other-item">
+ <div>
+ <a href="#<%= section.slug %>/<%= offset %>">
+ <div>
+ <h4><%= item.name || item.description %></h4>
+ </div>
+ </a>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-status">
+ <div class="body">
+ <div class="header">
+ <% if (imageUrl) { %>
+ <img src="<%= thumbnail(48,48) %>" alt="" />
+ <% } %>
+ <% if (item.author && item.author[0] && item.author[0].name) { %>
+ <h2><%= item.author[0].name %></h2>
+ <% } %>
+ <% if (item.author && item.author[0] && item.author[0]['foaf:nick']) { %>
+ <h3>@<%= item.author[0]['foaf:nick'] %></h3>
+ <% } %>
+ </div>
+ <div class="arrow"><span>&nbsp;</span></div>
+ <div class="message">
+ <div class="cover">&nbsp;</div>
+ <% if (item.datePublished || item.uploadDate || item.dateCreated) { %>
+ <h4><%= moment(toDate(item.datePublished || item.uploadDate || item.dateCreated)).fromNow() %></h4>
+ <% } %>
+ <p><%= prettyStatus(item.name) %></p>
+ </div>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-event">
+ <div class="body">
+ <% if (item.startDate && item.endDate && (item.startDate !== item.endDate)) { %>
+ <h3><span>From <%= moment(toDate(item.startDate)).format('LLLL') %> to <%= moment(toDate(item.endDate)).format('LLLL') %></span></h3>
+ <% } else if (item.startDate) { %>
+ <h3><span>On <%= moment(toDate(item.startDate)).format('LLLL') %></span></h3>
+ <% } %>
+ <h4><%= item.name %></h4>
+ <% if(item.description) { %>
+ <p class="description"><%= item.description %></p>
+ <% } %>
+ <% if(item.location && item.location.name) { %>
+ <p class="location"><%= item.location.name %></p>
+ <% } %>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-news">
+ <div class="body">
+ <% if (item.datePublished || item.uploadDate || item.dateCreated) { %>
+ <h3><%= moment(toDate(item.datePublished || item.uploadDate || item.dateCreated)).format('LLLL') %></h3>
+ <% } %>
+ <h4><%= item.name %></h4>
+ <div class="article">
+ <% if (item.articleBody) { %>
+ <%= item.articleBody %>
+ <% } else if (item.description) { %>
+ <%= item.description %>
+ <% } %>
+ </div>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-product">
+ <div class="body">
+ <h4><%= item.name %></h4>
+ <% if (imageUrl) { %>
+ <div class="center"><img src="<%= thumbnail(120,90) %>" alt="" /></div>
+ <% } %>
+ <div class="article">
+ <% if (item.articleBody) { %>
+ <%= item.articleBody %>
+ <% } else if (item.description) { %>
+ <%= item.description %>
+ <% } %>
+ </div>
+
+ <% if (item.offers && item.offers[0] && item.offers[0].price) { %>
+ <div class="offer">Price: <%= (item.offers[0].priceCurrency === 'EUR') ? '€' : ((item.offers[0].priceCurrency === 'GBP') ? '₤' : '$') %><%= item.offers[0].price %></div>
+ <% } %>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-photo">
+ <div class="body">
+ <h4><%= item.name %></h4>
+ <% if (imageUrl) { %>
+ <div class="center"><img src="<%= imageUrl %>" alt="" /></div>
+ <% } %>
+ <div class="article">
+ <% if (item.articleBody) { %>
+ <%= item.articleBody %>
+ <% } else if (item.description) { %>
+ <%= item.description %>
+ <% } %>
+ </div>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-video">
+ <div class="media" style="height:<%= media.metadata.height %>px">
+ <%= media.html %>
+ </div>
+ <div class="body">
+ <div class="wrapper" style="height:<%= height - media.metadata.height %>px;position:relative">
+ <div>
+ <% if (item.datePublished || item.uploadDate || item.dateCreated) { %>
+ <h3><%= moment(toDate(item.datePublished || item.uploadDate || item.dateCreated)).format('LLLL') %></h3>
+ <% } %>
+ <h4><%= item.name %></h4>
+ <div class="article">
+ <% if(item.description) { %>
+ <p><%= item.description %></p>
+ <% } %>
+ </div>
+ </div>
+ </div>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-other">
+ <div class="body">
+ <h4><%= item.name %></h4>
+ <% if (imageUrl) { %>
+ <div class="center"><img src="<%= imageUrl %>" alt="" /></div>
+ <% } %>
+ <div class="article">
+ <% if (item.articleBody) { %>
+ <%= item.articleBody %>
+ <% } else if (item.description) { %>
+ <%= item.description %>
+ <% } %>
+ </div>
+ </div>
+ </script>
+
+ <!-- TEMPLATES SHARED BY ALL VERSIONS FOR SPOT -->
+
+ <script type="text/template" id="template-contact-index">
+ <div class="body"><%= textContent %></div>
+ </script>
+
+ <script type="text/template" id="template-contact-map">
+ <div class="google-map"></div>
+ </script>
+
+ <script type="text/template" id="template-map-overlay">
+ <p class="map-overlay"><%= address %></p>
+ </script>
+
+ <!-- TEMPLATES SPECIFIC TO THIS VERSION -->
+
+ <script type="text/template" id="template-product-item">
+ <div>
+ <a href="#<%= section.slug %>/<%= offset %>">
+ <div>
+ <% if (imageUrl) { %>
+ <div class="figure">
+ <div class="img fadein" data-joshfire-autothumb="true"></div>
+ <div class="loader"></div>
+ </div>
+ <% } %>
+ <h4>
+ <%= item.name %>
+ <% if (item.offers && item.offers[0] && item.offers[0].price) { %>
+ <span class="offer"><%= (item.offers[0].priceCurrency === 'EUR') ? '€' : ((item.offers[0].priceCurrency === 'GBP') ? '₤' : '$') %><%= item.offers[0].price %></span>
+ <% } %>
+ </h4>
+ </div>
+ </a>
+ </div>
+ </script>
+
+ <script type="text/template" id="template-sound">
+ <div class="body">
+ <% if (item.datePublished || item.uploadDate || item.dateCreated) { %>
+ <h3><%= moment(toDate(item.datePublished || item.uploadDate || item.dateCreated)).format('LLLL') %></h3>
+ <% } %>
+ <h4>
+ <%= item.name %>
+ <% if (item.byArtist && item.byArtist.name) { %> by <%= item.byArtist.name %>
+ <% } else if (item.author && item.author.name) { %> by <%= item.author.name %><% } %>
+ </h4>
+ <% if(item.thumbnail && item.thumbnail.length) { %>
+ <img src="<%= item.thumbnail[0].contentURL %>" />
+ <% } %>
+ <div class="media"><%= media.html %></div>
+ <% if(item.description) { %>
+ <p><%= item.description %></p>
+ <% } %>
+ </div>
+ </script>
+
+ <script data-joshfire-bootstrap src="bootstrap.js"></script>
+
+ <script>Joshfire.debug=false;</script>
+ <script type="text/javascript" src="todate.js"></script>
+ <script type="text/javascript" src="vendor/moment.js"></script>
+ <script type="text/javascript" src="vendor/sidjs-0.1.js"></script>
+ <script type="text/javascript" src="prettystatus.js"></script>
+ <script type="text/javascript">
+ if ((/android/gi).test(navigator.appVersion)) {
+ document.write('<script src="app.phone.android.optimized.js"></'+'script>');
+ } else {
+ document.write('<script src="app.phone.ios.optimized.js"></'+'script>');
+ }
+ </script>
+ <script type="text/javascript">
+ // if app icon, set "apple-touch-icon-precomposed" for webapps installed on mobile
+ // For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: (have to be an absolute URL)
+ if (Joshfire.factory.config.app.icon && document.getElementsByTagName('head')[0]) {
+ var link = document.createElement('link');
+ link.rel = "apple-touch-icon-precomposed";
+ link.href = Joshfire.factory.config.app.icon.contentURL;
+ document.getElementsByTagName('head')[0].appendChild(link);
+ }
+ </script>
+ </body>
+</html>
View
2  app/index.phone.optimized.html
@@ -393,7 +393,7 @@
</div>
</script>
- <script data-joshfire-bootstrap src="http://preview-staging.joshfireapps.com/bootstrap/50e6b8dff1cfc8020000000f/50e5b055a8f1990200000002/phone-ios/"></script>
+ <script data-joshfire-bootstrap src="bootstrap.js"></script>
<script>Joshfire.debug=false;</script>
<script type="text/javascript" src="todate.js"></script>
View
118 app/less/phone.less
@@ -20,7 +20,9 @@ body {
// Header
//---------------------------------------------------------------------------
header {
- background: url(../images/phone-shadow@2x.png) no-repeat center 2.2em;
+ background-image: url(../images/phone-shadow@2x.png);
+ background-repeat: no-repeat;
+ background-position: center 2.2em;
background-size: 100% 53px;
padding-bottom: 5em;
background-size: 100% auto;
@@ -42,7 +44,7 @@ header {
text-transform: uppercase;
text-align: center;
line-height: 1em;
- padding: .65em 0;
+ padding: .4em 0;
span {
display: block;
@@ -71,38 +73,61 @@ header {
}
}
+// iOS Style
+.device-phone-ios {
+ header>span {
+ display: none;
+ }
+
+ header h1 {
+ padding: .65em 0;
+ }
+
+ header {
+ background-image: url(../images/phone-ios-shadow@2x.png);
+ }
+
+}
+
// Back button
#back {
position: absolute;
left: 0;
top: 0;
- // width: 3em;
+ width: 3em;
height: 2.24em;
overflow: hidden;
z-index: 35;
background: transparent url(../images/phone-back@2x.png) no-repeat center center;
background-size: 18px 13px;
- // text-indent: -30000px;
+ text-indent: -30000px;
display: none;
pointer-events: all;
+}
- //iOS style
- height: 2em;
- left: .26em;
- top: .46em;
- box-sizing: border-box;
- border-width: 5px 6px 5px 14px;
- border-style: solid;
- border-image:url('../images/phone-ios-back@2x.png') 10 11 10 26 fill stretch;
+//iOS style
+.device-phone-ios {
+ #back {
+ text-indent: 0;
+ width: auto;
- .inner {
- display: block;
- font-size: .8em;
- font-weight: bold;
- height: 100%;
- color: #FFF;
- text-shadow: 0 -1px 0 rgba(0,0,0,.5);
- padding: .2em 0;
+ height: 2em;
+ left: .26em;
+ top: .46em;
+ box-sizing: border-box;
+ border-width: 5px 6px 5px 14px;
+ border-style: solid;
+ border-image: @image-ios-back 10 11 10 26 fill stretch;
+
+ .inner {
+ display: block;
+ font-size: .8em;
+ font-weight: bold;
+ height: 100%;
+ color: #FFF;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.5);
+ padding: .2em 0;
+ }
}
}
@@ -120,38 +145,36 @@ header {
background-size: 20px 18px;
text-indent: -30000px;
pointer-events: all;
-
- //iOS style
- height: 2em;
- right: .46em;
- top: .46em;
- box-sizing: border-box;
- border-width: 5px 6px;
- border-style: solid;
- border-image:url('../images/phone-ios-button@2x.png') 10 11 fill stretch;
-
- // right: .33em;
- // top: .46em;
- // height: 2em;
- // border: 1px solid rgba(0,0,0,.3);
- // border-radius: 5px;
- // box-shadow:
- // 0 1px 0 rgba(255,255,255,.5),
- // inset 0px -2px 3px rgba(0,0,0,.2),
- // inset 0px 5px 5px rgba(255,255,255,.15),
- // inset 0px 1px 0 rgba(255,255,255,.5);
-
- .inner {
- display: block;
- height: 100%;
- background: transparent url(../images/phone-refresh@2x.png) no-repeat center center;
- background-size: 20px 18px;
- }
}
#share .inner {
background-image: url(../images/phone-share@2x.png);
}
+//iOS style
+.device-phone-ios {
+ #refresh,
+ #share {
+ //iOS style
+ height: 2em;
+ right: .46em;
+ top: .46em;
+ box-sizing: border-box;
+ border-width: 5px 6px;
+ border-style: solid;
+ border-image: @image-ios-button 10 11 fill stretch;
+
+ .inner {
+ display: block;
+ height: 100%;
+ background: transparent url(../images/phone-refresh@2x.png) no-repeat center center;
+ background-size: 20px 18px;
+ }
+ }
+ #share .inner {
+ background-image: url(../images/phone-share@2x.png);
+ }
+}
+
//---------------------------------------------------------------------------
// Toolbar
//---------------------------------------------------------------------------
@@ -845,7 +868,6 @@ header {
-o-box-sizing: border-box;
}
-
//---------------------------------------------------------------------------
// Videos
//---------------------------------------------------------------------------
View
18 app/sleek.phone.js
@@ -154,14 +154,16 @@ define([
// returns a non empty list and provided the item to display can
// be shared, in other words that its "url" property is a valid
// absolute URL (as opposed to a simple ID)
- $share.show()
- .unbind('touchstart mousedown')
- .bind('touchstart mousedown', function (e) {
- var model = section.collection.at(0);
- self.share(model);
- e.preventDefault();
- return false;
- });
+ // Disabled share for the moment, while we check the presence of the share add-on
+ $share.hide();
+ // $share.show()
+ // .unbind('touchstart mousedown')
+ // .bind('touchstart mousedown', function (e) {
+ // var model = section.collection.at(0);
+ // self.share(model);
+ // e.preventDefault();
+ // return false;
+ // });
$back.attr('href', '#' + section.slug);
$back.css({display: 'block'});
View
5 package.json
@@ -36,6 +36,11 @@
"orientation": "portrait"
},
{
+ "devices": "phone-ios",
+ "startfile": "app/index.phone.ios.optimized.html",
+ "orientation": "portrait"
+ },
+ {
"devices": "tablet",
"startfile": "app/index.tablet.optimized.html",
"images": "marketing/small-tablet.png",
View
6 tasks/compile_less.js
@@ -46,7 +46,11 @@ var compileColor = function(str, file, colorName, cb) {
var color = colors[colorName];
var linkColor = linkColors[colorName] || 'saturate(lighten(@background-color, 10%), 10%)';
// prepend to the file the generated colors
- parser.parse('@background-color: ' + color + ';\n@link-color: ' + linkColor + ';\n' + str, function (e, tree) {
+ parser.parse('@background-color: ' + color + ';\n'
+ + '@link-color: ' + linkColor + ';\n'
+ + '@image-ios-back: url("../images/phone-ios-back-' + colorName + '@2x.png");\n'
+ + '@image-ios-button: url("../images/phone-ios-button-' + colorName + '@2x.png");\n'
+ + str, function (e, tree) {
try {
var css = tree.toCSS({compress: compress});
var dest = destPath(file, colorName);
Please sign in to comment.
Something went wrong with that request. Please try again.