Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Implemented profiles for tablet and phone; Added navigation view on i…

…Phone/phone with back button and swipe to change episode; Added navigation view on tablet/iPad with back, next, and previous buttons; Consolidated and cleaned up data, now use single store; Added local screenshots to project; Started to apply custom CSS.
  • Loading branch information...
commit e956b679b330bc7a7a7e444f759a6f885f9bf556 1 parent 4911518
@jayrobinson authored
Showing with 798 additions and 123 deletions.
  1. +0 −1  .gitignore
  2. +7 −2 README.md
  3. +8 −16 touch/app.js
  4. +26 −37 touch/app/controller/Series.js
  5. +48 −0 touch/app/controller/phone/Series.js
  6. +57 −0 touch/app/controller/tablet/Series.js
  7. +16 −0 touch/app/model/Episode.js
  8. +18 −0 touch/app/model/Series.js
  9. +20 −0 touch/app/profile/Phone.js
  10. +21 −0 touch/app/profile/Tablet.js
  11. +0 −24 touch/app/store/Episodes.js
  12. +2 −5 touch/app/store/Series.js
  13. +0 −12 touch/app/view/Episode.js
  14. +0 −11 touch/app/view/EpisodeList.js
  15. +0 −10 touch/app/view/Main.js
  16. +25 −0 touch/app/view/phone/Episode.js
  17. +15 −0 touch/app/view/phone/EpisodeList.js
  18. +16 −0 touch/app/view/phone/Main.js
  19. +3 −3 touch/app/view/{ → phone}/SeriesList.js
  20. +16 −0 touch/app/view/tablet/Episode.js
  21. +12 −0 touch/app/view/tablet/EpisodeList.js
  22. +53 −0 touch/app/view/tablet/Header.js
  23. +32 −0 touch/app/view/tablet/Main.js
  24. +42 −0 touch/app/view/tablet/NavButtons.js
  25. +12 −0 touch/app/view/tablet/SeriesList.js
  26. +3 −2 touch/index.html
  27. +122 −0 touch/resources/css/lcars-tablet.css
  28. +14 −0 touch/resources/scss/_iphone-episodeList.scss
  29. +57 −0 touch/resources/scss/_tablet-episodeList.scss
  30. +86 −0 touch/resources/scss/_themes.scss
  31. +25 −0 touch/resources/scss/config.rb
  32. +37 −0 touch/resources/scss/lcars-iphone.scss
  33. +5 −0 touch/resources/scss/lcars-tablet.scss
View
1  .gitignore
@@ -5,6 +5,5 @@
/assets/
/touch/resources/scss/.sass-cache/
/touch/resources/scss/.sass-cache/*
-/touch/resources/scss/
/touch/touch2/
/touch/touch2/*
View
9 README.md
@@ -24,8 +24,13 @@ LCARS stands for Library Computer Access/Retrieval System, a fictional computer
*Feb 21, 2012*
-* Added SeriesList navigation view.
-* Cleaned up data; Stardates and JSON structure.
+* *Sencha Touch App*
+* Implemented profiles for tablet and phone.
+* Added navigation view on iPhone/phone with back button and swipe to change episode.
+* Added navigation view on tablet/iPad with back, next, and previous buttons.
+* Consolidated and cleaned up data; now use single store.
+* Added local screenshots to project.
+* Started to apply custom CSS.
*Feb 20, 2012*
View
24 touch/app.js
@@ -12,24 +12,16 @@ Ext.application({
],
models: [
-
+ 'LCARS.model.Episode',
+ 'LCARS.model.Series'
+ ],
+
+ profiles: [
+ 'Tablet',
+ 'Phone'
],
stores: [
'LCARS.store.Series',
- 'LCARS.store.Episodes'
- ],
-
- views: [
- 'LCARS.view.Main',
- 'LCARS.view.SeriesList',
- 'LCARS.view.EpisodeList',
- 'LCARS.view.Episode'
- ],
-
- launch: function() {
- Ext.create('LCARS.view.Main', {
- fullscreen: true
- });
- }
+ ]
});
View
63 touch/app/controller/Series.js
@@ -1,49 +1,38 @@
Ext.define('LCARS.controller.Series', {
extend: 'Ext.app.Controller',
- config: {
- refs: {
- 'main' : 'main'
- },
+ onPreviousButtonTap: function() {
+ var activeItem = this.getMain().getActiveItem(),
+ episodeList = this.getEpisodeList(),
+ episodeStore = episodeList.getStore(),
+ selected = episodeList.getSelection()[0],
+ index = episodeStore.indexOf(selected),
+ record;
- control : {
- serieslist : {
- itemtap: 'onSeriesTap'
+ if (activeItem.xtype == 'episodetablet' || activeItem.xtype == "episodephone") {
+ if (index > 0) {
+ record = episodeStore.getAt(index-1);
+ episodeList.select(record);
+ this.getEpisode().setData(record.data);
}
}
},
- onSeriesTap: function(dataView, index, target, record) {
- var episodeStore = Ext.getStore('Episodes'),
- url;
+ onNextButtonTap: function() {
+ var activeItem = this.getMain().getActiveItem(),
+ episodeList = this.getEpisodeList(),
+ episodeStore = episodeList.getStore(),
+ selected = episodeList.getSelection()[0],
+ index = episodeStore.indexOf(selected),
+ total = episodeStore.getCount(),
+ record;
- console.log(record.get('SeriesAbbr'))
-
- if ( record.get('SeriesAbbr') == 'TOS' ) {
- url = '../data/1-the-original-series.json';
- } else if ( record.get('SeriesAbbr') == 'TAS' ) {
- url = '../data/2-the-animated-series.json';
- } else if ( record.get('SeriesAbbr') == 'TNG' ) {
- url = '../data/3-the-next-generation.json';
- } else if ( record.get('SeriesAbbr') == 'DS9' ) {
- url = '../data/4-deep-space-nine.json';
- } else if ( record.get('SeriesAbbr') == 'VOY' ) {
- url = '../data/5-voyager.json';
- } else if ( record.get('SeriesAbbr') == 'ENT' ) {
- url = '../data/6-enterprise.json';
+ if (activeItem.xtype == 'episodetablet' || activeItem.xtype == "episodephone") {
+ if (index != total-1) {
+ record = episodeStore.getAt(index+1);
+ episodeList.select(record);
+ this.getEpisode().setData(record.data);
+ }
}
-
- episodeStore.load({
- url: url,
- callback: function() {
- console.log("Finished load")
- this.getMain().push({
- xtype: 'episodelist',
- title: record.get('SeriesName'),
- });
- },
- scope: this
- });
}
-
});
View
48 touch/app/controller/phone/Series.js
@@ -0,0 +1,48 @@
+Ext.define('LCARS.controller.phone.Series', {
+ extend: 'LCARS.controller.Series',
+
+ config: {
+ refs: {
+ 'main' : 'mainphone',
+ 'episodeList' : 'episodelistphone',
+ 'episode' : 'episodephone'
+ },
+
+ control : {
+ serieslistphone : {
+ itemtap: 'onSeriesTap'
+ },
+ episodelistphone : {
+ itemtap: 'onEpisodeTap'
+ },
+ episode: {
+ swipeepisode: 'onEpisodeSwipe'
+ }
+ }
+ },
+
+ onSeriesTap: function(dataView, index, target, record) {
+ this.getMain().setActiveItem({
+ xtype: 'episodelistphone',
+ store: record.episodes(),
+ title: record.get('SeriesName')
+ });
+ },
+
+ onEpisodeTap: function(dataView, index, target, record) {
+ this.getMain().setActiveItem({
+ xtype: 'episodephone',
+ data: record.data,
+ title: record.get('EpisodeName')
+ });
+ },
+
+ onEpisodeSwipe: function(episodeView, direction) {
+ if (direction == "left") {
+ this.onNextButtonTap();
+ } else if (direction == "right") {
+ this.onPreviousButtonTap();
+ }
+ }
+
+});
View
57 touch/app/controller/tablet/Series.js
@@ -0,0 +1,57 @@
+Ext.define('LCARS.controller.tablet.Series', {
+ extend: 'LCARS.controller.Series',
+
+ config: {
+ refs: {
+ 'main' : 'maintablet',
+ 'previousButton' : '#previousButton',
+ 'nextButton' : '#nextButton',
+ 'episodeList' : 'episodelisttablet',
+ 'episode' : 'episodetablet'
+ },
+
+ control : {
+ serieslisttablet : {
+ itemtap: 'onSeriesTap'
+ },
+ episodelisttablet : {
+ itemtap: 'onEpisodeTap'
+ },
+ '#backButton': {
+ tap: 'onBackButtonTap'
+ },
+ 'previousButton': {
+ tap: 'onPreviousButtonTap'
+ },
+ 'nextButton': {
+ tap: 'onNextButtonTap'
+ }
+ }
+ },
+
+ onSeriesTap: function(dataView, index, target, record) {
+ this.getMain().setActiveItem({
+ xtype: 'episodelisttablet',
+ store: record.episodes()
+ });
+ },
+
+ onEpisodeTap: function(dataView, index, target, record) {
+ this.getMain().setActiveItem({
+ xtype: 'episodetablet',
+ data: record.data
+ });
+ this.getPreviousButton().setText('PRV');
+ this.getNextButton().setText('NX');
+ },
+
+ onBackButtonTap: function() {
+ var activeItem = this.getMain().getActiveItem();
+ if (activeItem.xtype == 'episodetablet') {
+ this.getPreviousButton().setText('ASC');
+ this.getNextButton().setText('DESC');
+ }
+ this.getMain().pop();
+ }
+
+});
View
16 touch/app/model/Episode.js
@@ -0,0 +1,16 @@
+Ext.define('LCARS.model.Episode', {
+ extend: 'Ext.data.Model',
+
+ config: {
+ fields: [
+ 'SeasonNumber',
+ 'EpisodeNumber',
+ 'EpisodeName',
+ 'FirstAired',
+ 'Stardate',
+ 'Overview',
+ 'Screenshot',
+ 'playCount'
+ ]
+ }
+});
View
18 touch/app/model/Series.js
@@ -0,0 +1,18 @@
+Ext.define('LCARS.model.Series', {
+ extend: 'Ext.data.Model',
+
+ config: {
+ fields: [
+ 'SeriesName',
+ 'SeriesAbbr'
+ ],
+ associations: [
+ {
+ type: 'hasMany',
+ name: 'episodes',
+ associationKey: 'Episode',
+ model: 'LCARS.model.Episode'
+ }
+ ]
+ }
+});
View
20 touch/app/profile/Phone.js
@@ -0,0 +1,20 @@
+Ext.define('LCARS.profile.Phone', {
+ extend: 'Ext.app.Profile',
+
+ config: {
+ name: 'phone',
+ namespace: 'phone',
+ controllers: ['Series'],
+ views: ['LCARS.view.phone.Main']
+ },
+
+ isActive: function() {
+ return Ext.os.is.Phone;
+ },
+
+ launch: function() {
+ Ext.create('LCARS.view.phone.Main', {
+ fullscreen: true
+ });
+ }
+});
View
21 touch/app/profile/Tablet.js
@@ -0,0 +1,21 @@
+Ext.define('LCARS.profile.Tablet', {
+ extend: 'Ext.app.Profile',
+
+ config: {
+ name: 'tablet',
+ namespace: 'tablet',
+ controllers: ['Series'],
+ views: ['Main']
+
+ },
+
+ isActive: function() {
+ return Ext.os.is.Tablet;
+ },
+
+ launch: function() {
+ Ext.create('LCARS.view.tablet.Main', {
+ fullscreen: true
+ });
+ }
+});
View
24 touch/app/store/Episodes.js
@@ -1,24 +0,0 @@
-Ext.define('LCARS.store.Episodes', {
- extend: 'Ext.data.Store',
-
- config: {
- fields: [
- 'filename', // screenshot
- 'EpisodeName',
- 'DVD_season',
- 'EpisodeNumber',
- 'Stardate',
- 'FirstAired',
- 'Overview',
- 'playCount'
- ],
-
- proxy: {
- type: 'ajax',
-
- reader: {
- rootProperty: 'Data.Episode'
- }
- }
- }
-});
View
7 touch/app/store/Series.js
@@ -2,14 +2,11 @@ Ext.define('LCARS.store.Series', {
extend: 'Ext.data.Store',
config: {
- fields: [
- 'SeriesName',
- 'SeriesAbbr'
- ],
+ model: 'LCARS.model.Series',
proxy: {
type: 'ajax',
- url: '../data/0-all-series.json',
+ url: '../data/all.json',
reader: {
rootProperty: 'Data.Series'
View
12 touch/app/view/Episode.js
@@ -1,12 +0,0 @@
-Ext.define('LCARS.view.Episode', {
- extend: 'Ext.Component',
- xtype: 'episode',
-
- config: {
- styleHtmlContent: true,
- tpl: [
- '<div class="content"><img src="{filename}" alt="Screenshot" style="float:right;margin: 0 -10px 20px 10px;" width="48%"><p><strong>Stardate:</strong> {Stardate}<br><strong>Airdate:</strong> {FirstAired}</p><p><strong>Teaser:</strong> {Overview}</p></div>'
- ]
- }
-
-});
View
11 touch/app/view/EpisodeList.js
@@ -1,11 +0,0 @@
-Ext.define('LCARS.view.EpisodeList', {
- extend: 'Ext.DataView',
- xtype: 'episodelist',
-
- config: {
- store: 'Episodes',
- itemTpl: Ext.create('Ext.XTemplate',
- '<div class="listItem"><div class="screenshot"><img src="{filename}" alt="" height="55"></div><span class="episodeListTitle">{EpisodeName}</span><br><span class="episodeNumber">S0{DVD_season} E0{EpisodeNumber}</span>&nbsp;&nbsp;&nbsp;<span class="airdate">{FirstAired}</span></div>'
- )
- }
-});
View
10 touch/app/view/Main.js
@@ -1,10 +0,0 @@
-Ext.define('LCARS.view.Main', {
- extend: 'Ext.NavigationView',
- xtype: 'main',
-
- config: {
- items: [
- { xtype: 'serieslist' }
- ]
- }
-});
View
25 touch/app/view/phone/Episode.js
@@ -0,0 +1,25 @@
+Ext.define('LCARS.view.phone.Episode', {
+ extend: 'Ext.Container',
+ xtype: 'episodephone',
+
+ config: {
+ styleHtmlContent: true,
+ scrollable: {
+ direction: 'vertical',
+ directionLock: true
+ },
+ tpl: [
+ '<div class="content"><img src="{Screenshot}" alt="Screenshot" style="float:right;margin: 0 -10px 20px 10px;" width="48%"><p><strong>Stardate:</strong> {Stardate}<br><strong>Airdate:</strong> {FirstAired}</p><p><strong>Teaser:</strong> {Overview}</p></div>'
+ ],
+
+ listeners: {
+ element: 'element',
+ swipe: 'onSwipe'
+ }
+ },
+
+ onSwipe: function(e) {
+ this.fireEvent('swipeepisode', this, e.direction);
+ }
+
+});
View
15 touch/app/view/phone/EpisodeList.js
@@ -0,0 +1,15 @@
+Ext.define('LCARS.view.phone.EpisodeList', {
+ extend: 'Ext.List', // Ext.DataView is prettier? Changed only to see sort headers. They may be there but just unstyled.
+ xtype: 'episodelistphone',
+
+ config: {
+ // grouped: true,
+ // indexBar: {
+ // letters: ['S01','S02','S03','S04','S05','S06','S07']
+ // },
+ // store: 'Episodes',
+ itemTpl: Ext.create('Ext.XTemplate',
+ '<div class="listItem"><div class="screenshot"><img src="{Screenshot}" alt="" height="55"></div><span class="episodeListTitle">{EpisodeName}</span><br><span class="episodeNumber">S0{SeasonNumber} E0{EpisodeNumber}</span>&nbsp;&nbsp;&nbsp;<span class="airdate">{FirstAired}</span></div>'
+ )
+ }
+});
View
16 touch/app/view/phone/Main.js
@@ -0,0 +1,16 @@
+Ext.define('LCARS.view.phone.Main', {
+ extend: 'Ext.NavigationView',
+ xtype: 'mainphone',
+
+ requires: [
+ 'LCARS.view.phone.SeriesList',
+ 'LCARS.view.phone.EpisodeList',
+ 'LCARS.view.phone.Episode'
+ ],
+
+ config: {
+ items: [
+ { xtype: 'serieslistphone' }
+ ]
+ }
+});
View
6 touch/app/view/SeriesList.js → touch/app/view/phone/SeriesList.js
@@ -1,6 +1,6 @@
-Ext.define('LCARS.view.SeriesList', {
+Ext.define('LCARS.view.phone.SeriesList', {
extend: 'Ext.List',
- xtype: 'serieslist',
+ xtype: 'serieslistphone',
config: {
title: 'Select Series',
@@ -8,7 +8,7 @@ Ext.define('LCARS.view.SeriesList', {
store: 'Series',
itemTpl: Ext.create('Ext.XTemplate',
- '<div class="">{SeriesName}</div>'
+ '<div class="">{SeriesName} {SeriesAbbr}</div>'
)
}
});
View
16 touch/app/view/tablet/Episode.js
@@ -0,0 +1,16 @@
+Ext.define('LCARS.view.tablet.Episode', {
+ extend: 'Ext.Container',
+ xtype: 'episodetablet',
+
+ config: {
+ styleHtmlContent: true,
+ scrollable: {
+ direction: 'vertical',
+ directionLock: true
+ },
+ tpl: [
+ '<div class="content"><img src="{Screenshot}" alt="Screenshot" style="float:right;margin: 0 -10px 20px 10px;" width="48%"><p><strong>Stardate:</strong> {Stardate}<br><strong>Airdate:</strong> {FirstAired}</p><p><strong>Teaser:</strong> {Overview}</p></div>'
+ ]
+ }
+
+});
View
12 touch/app/view/tablet/EpisodeList.js
@@ -0,0 +1,12 @@
+Ext.define('LCARS.view.tablet.EpisodeList', {
+ extend: 'Ext.List',
+ xtype: 'episodelisttablet',
+
+ config: {
+ store: 'Episodes',
+
+ itemTpl: Ext.create('Ext.XTemplate',
+ '<div class=""><img src="{Screenshot}" alt="" width="110"><span class="episodeListTitle">{EpisodeName}</span><br><span class="episodeNumber">S0{SeasonNumber} E0{EpisodeNumber}</span>&nbsp;&nbsp;&nbsp;<span class="airdate">{FirstAired}</span></div>'
+ )
+ }
+});
View
53 touch/app/view/tablet/Header.js
@@ -0,0 +1,53 @@
+Ext.define('LCARS.view.tablet.Header', {
+ extend: 'Ext.Container',
+ xtype: 'header',
+
+ config: {
+ cls: ['orange','topHeader'], // these classes go on the header thingy, Ext.Container
+ layout: 'fit',
+ height: 150,
+
+ items: [
+ {
+ cls: ['inner'],
+ items: [
+ {
+ html: 'Series Name',
+ cls: 'seriesOrEpisodeTitle',
+ id: 'seriesOrEpisodeTitle'
+ },
+ {
+ cls: ['buttonGroup'],
+ right: 0,
+ bottom: 0,
+ height: 100,
+ width: 400,
+ items: [
+ {
+ xtype: 'textfield',
+ placeHolder: 'Search'
+ },
+ {
+ layout: 'hbox',
+ items: [
+ {
+ flex: 1,
+ xtype: 'button',
+ text: 'Top Episodes',
+ cls: 'sweepButton'
+ },
+ {
+ flex: 1,
+ xtype: 'button',
+ text: 'Random',
+ cls: 'sweepButton'
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ ]
+ }
+});
View
32 touch/app/view/tablet/Main.js
@@ -0,0 +1,32 @@
+Ext.define('LCARS.view.tablet.Main', {
+ extend: 'Ext.navigation.View', // Panel has more styling, which is not needed for custom UI
+ xtype: 'maintablet',
+
+ requires: [
+ 'LCARS.view.tablet.Header',
+ 'LCARS.view.tablet.NavButtons',
+ 'LCARS.view.tablet.EpisodeList',
+ 'LCARS.view.tablet.SeriesList',
+ 'LCARS.view.tablet.Episode'
+ ],
+
+ config: {
+ style: 'background-color: black',
+ navigationBar: false,
+ layout: 'fit',
+ items: [
+ {
+ xtype: 'navbuttons',
+ docked: 'left',
+ width: 100 // remove because we'll have CSS later
+ },
+ {
+ xtype: 'header',
+ docked: 'top'
+ },
+ {
+ xtype: 'serieslisttablet'
+ }
+ ]
+ }
+});
View
42 touch/app/view/tablet/NavButtons.js
@@ -0,0 +1,42 @@
+Ext.define('LCARS.view.tablet.NavButtons', {
+ extend: 'Ext.Container',
+ xtype: 'navbuttons',
+
+ config: {
+ layout: 'vbox',
+ items: [
+ { // the object defined by brackets says we want a container item
+ cls: ['orange','topLeft'],
+ items: [
+ {
+ xtype: 'button',
+ text: 'BK',
+ cls: 'sweepButton',
+ id: 'backButton',
+ top: 40 // replace with CSS?
+ }
+ ]
+ },
+ {
+ cls: ['orange','bottomLeft'],
+ flex: 1,
+ items: [
+ {
+ xtype: 'button',
+ text: 'ASC',
+ cls: ['sweepButton','vert'],
+ id: 'previousButton',
+ top: 500 // replace with CSS?
+ },
+ {
+ xtype: 'button',
+ text: 'DESC',
+ cls: ['sweepButton','vert','large'],
+ id: 'nextButton',
+ top: 600 // replace with CSS?
+ }
+ ]
+ },
+ ]
+ }
+});
View
12 touch/app/view/tablet/SeriesList.js
@@ -0,0 +1,12 @@
+Ext.define('LCARS.view.tablet.SeriesList', {
+ extend: 'Ext.List',
+ xtype: 'serieslisttablet',
+
+ config: {
+ store: 'Series',
+
+ itemTpl: Ext.create('Ext.XTemplate',
+ '<div class="">{SeriesName} {SeriesAbbr}</div>'
+ )
+ }
+});
View
5 touch/index.html
@@ -6,12 +6,13 @@
<title>LCARS Guide</title>
<!-- Sencha Touch -->
-<script src="touch2/sencha-touch-debug.js"></script>
+<script src="../../libs/touch2/sencha-touch-debug.js"></script>
<!-- Application -->
-<link rel="stylesheet" href="touch2/resources/css/sencha-touch.css">
+<link rel="stylesheet" href="../../libs/touch2/resources/css/sencha-touch.css">
<!-- <link rel="stylesheet" href="resources/css/lcars.css"> -->
<!-- <link rel="stylesheet" href="resources/css/lcars-iphone.css"> -->
+<link rel="stylesheet" href="resources/css/lcars-tablet.css">
<script src="app.js"></script>
</head>
<body></body>
View
122 touch/resources/css/lcars-tablet.css
@@ -0,0 +1,122 @@
+/*
+ Color Schemes
+*/
+/* Default, Enterprise-D */
+/* Red Alert, Enterprise-A */
+/*
+$primaryColor : #eb1c23; // Pinky Red
+$primaryAction : #760e12; // Darker Red
+$informational : #b0151a; // Dark Red
+$buttonsFilled : #ff0000; // Red
+$contentAccent : #820404; // Dark Red
+$contentText : #fff; // White
+$contentSubtext: #ddd; // Dim White
+*/
+/* Ocean Blue, Voyager */
+/*
+$primaryColor : #6598fd; // Blue
+$primaryAction : #0348fa; // Darker Pale Blue
+$informational : #2a66f8; // Deeper Blue
+$buttonsFilled : #6598fd; // Light Blue
+$contentAccent : #fe9a01; // Orange
+$contentText : #728cfd; // Lavender
+$contentSubtext: #aeafc4; // Light Orange
+*/
+/* Blue/Green, Enterprise-B */
+/*
+$primaryColor : #0d42c5; // Blue
+$primaryAction : #00b9cb; // Light Teal
+$informational : #00bdd0; // Teal
+$buttonsFilled : #006cd4; // Cerulean Blue
+$contentAccent : #6ae6e3; // Seafoam
+$contentText : #ddd; // Dim White
+$contentSubtext: #00c847; // Green
+*/
+/* Grayscale */
+/*
+$background : white;
+$primaryColor : #9f9f9f;
+$primaryAction : #7d7d7d;
+$informational : white;
+$buttonsFilled : #ddd;
+$contentAccent : #9f9f9f;
+$contentText : #ccc;
+$contentSubtext: #aaa;
+*/
+/* LCARSCom.net (Hex) */
+/*
+$primaryColor : #FF9900;
+$primaryAction : #CC99CC;
+$informational : #9999CC;
+$buttonsFilled : #FF9966;
+$buttonsHollow : #FFCC99;
+$contentAccent : #9999FF;
+$contentText : #CC6666;
+$contentSubtext: #CC6699;
+*/
+/* Show color values inside buttons */
+/*
+ :after {
+ color: red;
+ content: "#{$background}";
+ display: block;
+ font-size: 1.6em;
+ position: relative;
+ top: 0px;
+ left: 0px;
+ z-index: 99;
+ }
+*/
+/* line 1, ../scss/_tablet-episodeList.scss */
+html, body {
+ background-color: black;
+ margin: 0; }
+
+/* line 6, ../scss/_tablet-episodeList.scss */
+.orange {
+ background-color: #f58609; }
+ /* line 9, ../scss/_tablet-episodeList.scss */
+ .orange.topHeader {
+ padding-bottom: 20px; }
+ /* line 12, ../scss/_tablet-episodeList.scss */
+ .orange.topHeader > .x-inner {
+ background: black;
+ -moz-border-radius-bottomleft: 30px;
+ -webkit-border-bottom-left-radius: 30px;
+ -o-border-bottom-left-radius: 30px;
+ -ms-border-bottom-left-radius: 30px;
+ -khtml-border-bottom-left-radius: 30px;
+ border-bottom-left-radius: 30px; }
+ /* line 18, ../scss/_tablet-episodeList.scss */
+ .orange.topLeft {
+ -moz-border-radius-bottomleft: 60px;
+ -webkit-border-bottom-left-radius: 60px;
+ -o-border-bottom-left-radius: 60px;
+ -ms-border-bottom-left-radius: 60px;
+ -khtml-border-bottom-left-radius: 60px;
+ border-bottom-left-radius: 60px;
+ height: 150px;
+ margin-bottom: 5px; }
+ /* line 24, ../scss/_tablet-episodeList.scss */
+ .orange.bottomLeft {
+ -moz-border-radius-topleft: 60px;
+ -webkit-border-top-left-radius: 60px;
+ -o-border-top-left-radius: 60px;
+ -ms-border-top-left-radius: 60px;
+ -khtml-border-top-left-radius: 60px;
+ border-top-left-radius: 60px;
+ margin-top: 5px; }
+
+/* line 33, ../scss/_tablet-episodeList.scss */
+.sweepButton {
+ background: #8179fb;
+ border: 0;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ -o-border-radius: 0;
+ -ms-border-radius: 0;
+ -khtml-border-radius: 0;
+ border-radius: 0;
+ margin-bottom: 10px;
+ text-align: right;
+ width: 100px; }
View
14 touch/resources/scss/_iphone-episodeList.scss
@@ -0,0 +1,14 @@
+.listItem {
+ border-bottom:1px solid #000;
+ clear:both;
+ height:56px;
+ padding:0;
+
+ .screenshot {
+ float:left;
+ height:55px;
+ overflow:hidden;
+ margin-right:10px;
+ width:55px;
+ }
+}
View
57 touch/resources/scss/_tablet-episodeList.scss
@@ -0,0 +1,57 @@
+html, body {
+ background-color: black;
+ margin: 0;
+}
+
+.orange {
+ background-color: $primaryColor;
+
+ &.topHeader {
+ padding-bottom: 20px;
+
+ &>.x-inner {
+ background: black;
+ @include border-bottom-left-radius(30px);
+ }
+ }
+
+ &.topLeft {
+ @include border-bottom-left-radius(60px);
+ height: 150px;
+ margin-bottom: 5px;
+ }
+
+ &.bottomLeft {
+ @include border-top-left-radius(60px);
+ // display: -webkit-box;
+ // -webkit-box-orient: vertical;
+ // -webkit-box-flex: 1;
+ margin-top: 5px;
+ }
+}
+
+.sweepButton {
+ background: $primaryAction;
+ border: 0;
+ @include border-radius(0);
+ // border: 1em solid $background;
+ // color: $background;
+ margin-bottom: 10px;
+ // position: absolute;
+ text-align: right;
+ width: 100px;
+
+ .x-button-label {
+ // font-size: 1.6em;
+ }
+
+ &.horz {
+ // height: 2em;
+ // padding: 0 1em;
+ }
+ &.vert {
+ // height: 1em;
+ // line-height: 0.3;
+ // padding: 4em 1em 1em;
+ }
+}
View
86 touch/resources/scss/_themes.scss
@@ -0,0 +1,86 @@
+/*
+ Color Schemes
+*/
+
+$background : black;
+
+/* Default, Enterprise-D */
+$primaryColor : #F58609; // Orange
+$primaryAction : #8179FB; // Purple
+$informational : #B182BB; // Pink
+$buttonsFilled : #F8B462; // Lite Orange
+$buttonsHollow : #BAB7FB; // Lite Purple
+$contentAccent : #BAB7FB; // Lite Purple
+$contentText : #fff; // White
+$contentSubtext: #ddd; // Dim White
+
+/* Red Alert, Enterprise-A */
+/*
+$primaryColor : #eb1c23; // Pinky Red
+$primaryAction : #760e12; // Darker Red
+$informational : #b0151a; // Dark Red
+$buttonsFilled : #ff0000; // Red
+$contentAccent : #820404; // Dark Red
+$contentText : #fff; // White
+$contentSubtext: #ddd; // Dim White
+*/
+
+/* Ocean Blue, Voyager */
+/*
+$primaryColor : #6598fd; // Blue
+$primaryAction : #0348fa; // Darker Pale Blue
+$informational : #2a66f8; // Deeper Blue
+$buttonsFilled : #6598fd; // Light Blue
+$contentAccent : #fe9a01; // Orange
+$contentText : #728cfd; // Lavender
+$contentSubtext: #aeafc4; // Light Orange
+*/
+
+/* Blue/Green, Enterprise-B */
+/*
+$primaryColor : #0d42c5; // Blue
+$primaryAction : #00b9cb; // Light Teal
+$informational : #00bdd0; // Teal
+$buttonsFilled : #006cd4; // Cerulean Blue
+$contentAccent : #6ae6e3; // Seafoam
+$contentText : #ddd; // Dim White
+$contentSubtext: #00c847; // Green
+*/
+
+/* Grayscale */
+/*
+$background : white;
+$primaryColor : #9f9f9f;
+$primaryAction : #7d7d7d;
+$informational : white;
+$buttonsFilled : #ddd;
+$contentAccent : #9f9f9f;
+$contentText : #ccc;
+$contentSubtext: #aaa;
+*/
+
+/* LCARSCom.net (Hex) */
+/*
+$primaryColor : #FF9900;
+$primaryAction : #CC99CC;
+$informational : #9999CC;
+$buttonsFilled : #FF9966;
+$buttonsHollow : #FFCC99;
+$contentAccent : #9999FF;
+$contentText : #CC6666;
+$contentSubtext: #CC6699;
+*/
+
+/* Show color values inside buttons */
+/*
+ :after {
+ color: red;
+ content: "#{$background}";
+ display: block;
+ font-size: 1.6em;
+ position: relative;
+ top: 0px;
+ left: 0px;
+ z-index: 99;
+ }
+*/
View
25 touch/resources/scss/config.rb
@@ -0,0 +1,25 @@
+# Get the directory that this configuration file exists in
+dir = File.dirname(__FILE__)
+
+# Compass configurations
+sass_path = dir
+css_path = File.join(dir, "..", "css")
+
+# Set this to the root of your project when deployed:
+images_dir = File.join("..", "img")
+javascripts_dir = File.join("..", "js")
+
+output_style = :nested
+environment = :development
+
+# 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
View
37 touch/resources/scss/lcars-iphone.scss
@@ -0,0 +1,37 @@
+@import "compass/css3";
+@import "_themes.scss";
+
+* {
+ -webkit-text-size-adjust: none;
+ -webkit-touch-callout: none;
+ // -webkit-user-select: none; // Careful… .content should still be select-able.
+ /* -webkit-font-smoothing: antialiased; */
+ /* -webkit-text-stroke: -1px black; */
+}
+
+html { // miniapps.co.uk/blog/post/enable-css-active-pseudo-styles-in-mobile-safari/
+ background-color: $background;
+ height: 100%;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ tap-highlight-color: rgba(0,0,0,0);
+}
+
+body {
+ background-color: $background;
+ color: $contentSubtext;
+ font-family: "HelveticaNeue-CondensedBold",HelveticaNeue;
+ /* font-size: 62.5%; */ /* 1em = 10px */
+ max-height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+em, cite {
+ font-style: normal;
+}
+
+.clear {
+ display: none;
+}
+
+@import "_iphone-episodeList.scss";
View
5 touch/resources/scss/lcars-tablet.scss
@@ -0,0 +1,5 @@
+@import "compass/css3";
+@import "_themes.scss";
+
+
+@import "_tablet-episodeList.scss";
Please sign in to comment.
Something went wrong with that request. Please try again.