diff --git a/.sass-cache/e01cbd631dbca3602c2febd829b9081e931561d9/main.scssc b/.sass-cache/e01cbd631dbca3602c2febd829b9081e931561d9/main.scssc index ead5deb..48a9722 100644 Binary files a/.sass-cache/e01cbd631dbca3602c2febd829b9081e931561d9/main.scssc and b/.sass-cache/e01cbd631dbca3602c2febd829b9081e931561d9/main.scssc differ diff --git a/css/main.scss b/css/main.scss index e2f06e1..a4a63a6 100644 --- a/css/main.scss +++ b/css/main.scss @@ -77,40 +77,103 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; } a, a:active, a:visited { color: #607890; } a:hover { color: #036; } -/* - // ========================================== \\ - || || - || Application Styles || - || || - \\ ========================================== // -*/ +/* Custom Application Styles */ + +$black: #000; +$light-gray: #ddd; +$green: #090; +$magenta: #f4f; + +$nav-height: 40px; + +$home-widget-width: 300px; +$home-widget-height: 50px; +$home-widget-spacing: 8px; +$home-search-button-width: 80px; + +$widget-font-size: 20px; + +$standard-widget-spacing: 8px; body { - background-color: #000; + background-color: $black; + color: $light-gray; +} + +.button-magenta { + background-color: $magenta; + border-top-color: $magenta * 2; + border-left-color:$magenta * 2; + border-bottom-color: $magenta / 1.2; + border-right-color: $magenta / 1.2; + +} + +.button-green { + background-color: $green; + border-top-color: $green * 2; + border-left-color:$green * 2; + border-bottom-color: $green / 1.2; + border-right-color: $green / 1.2; +} + +@mixin main-content { + margin-top: $nav-height+$home-widget-spacing; + background-color: $black; } .nav { position: fixed; top: 0; - height: 20px; + height: $nav-height; width: 100%; - background-color: #ddd; + background-color: $light-gray; } .nav-title{ text-align: center; + font-size: $widget-font-size; } .nav-settings-button { float: right; + height: $home-widget-height * .75; + font-size: $widget-font-size; } -.nav-black-button { +.nav-back-button { + height: $home-widget-height * .75; + font-size: $widget-font-size; } .home { - margin-top: 30px; + @include main-content; +} + +.home-button-standard { + width: $home-widget-width; + height: $home-widget-height; + margin-bottom: $home-widget-spacing; + font-size: $widget-font-size; +} + +.home-button-search { + width: $home-widget-width * .2; + height: $home-widget-height; + margin-left:$home-widget-spacing; + font-size: $widget-font-size; +} + +.home-search-field { + width: $home-widget-width * .75; + height: $home-widget-height - 6; + margin-bottom: 3px; + font-size: $widget-font-size; +} + +.photo-grid { + @include main-content; } .dashboard-item { @@ -147,29 +210,20 @@ body { } .photo-details { - position: absolute; - top: 10px; - bottom: 10px; - left: 10px; - right: 10px; - z-index: 999; - background-color: #ccc; + @include main-content; } .photo-details-image { - width: 95%; - height: auto; + width: 95%; + height: auto; + } .photo-details-data { - float: right; - width: 50%; - margin-top:2%; - margin-right: 2%; + } .photo-details-user { - margin-top: 10px; } .photo-details-user-profile-picture { @@ -179,28 +233,38 @@ body { } .photo-details-user-profile-username { - float: left; - margin-top: 20px; - margin-left: 10px; - font-size: 30px; + color: $light-gray; + font-size: $widget-font-size; font-weight: bold; } .photo-details-comments { - clear: both; - margin-top: 80px; } .photo-details-comment-item { - margin-top: 10px; - font-size: 18px; + color: $light-gray; +} + +.photo-details-likes { + +} + +.photo-details-like-item { + margin-right: $standard-widget-spacing; + display: inline; +} + +.photo-details-tags { + +} + +.photo-details-tag-item { + margin-right: $standard-widget-spacing; + display: inline; } .photo-details-image-container { - float:left; - width:45%; - margin-top: 2%; - margin-left: 2%; + } .app-button { @@ -267,13 +331,7 @@ body { height: auto; } - .photo-details-image-container { - width: 100%; - } - .photo-details-data { - display: none; - } /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ } @@ -285,13 +343,7 @@ body { height: auto; } - .photo-details-image-container { - width: 100%; - } - .photo-details-data { - display: none; - } /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ } diff --git a/index.html b/index.html index 1faea36..9974adf 100644 --- a/index.html +++ b/index.html @@ -21,21 +21,24 @@ - + - + - + + + +
+ +

Tags:

+ {{#collection contentBinding="content.tags" class="photo-details-tags" itemClass="photo-details-tag-item"}} + {{#view SC.Button class="button-green"}}{{parentView.content}}{{/view}} + {{/collection}} + +

Likes:

+ + {{#collection contentBinding="content.likes.data" class="photo-details-likes" itemClass="photo-details-like-item"}} + {{#view SC.Button class="button-magenta"}} {{parentView.content.username}} {{/view}} + {{/collection}} + +

Comments:

+ {{#collection contentBinding="content.comments.data" class="photo-details-comments" itemClass="photo-details-comment-item"}} + {{content.from.username}}: {{content.text}} + {{/collection}} + + +
+ diff --git a/lib/controllers.js b/lib/controllers.js index 18c2963..3a0b011 100644 --- a/lib/controllers.js +++ b/lib/controllers.js @@ -4,6 +4,8 @@ // ========================================================================== App.homeViewDelegate = SC.Object.create({ + searchQuery: "SEARCH", + showPhotoGrid: function() { App.statechart.sendAction("showPhotoGrid"); } @@ -36,16 +38,7 @@ App.mediaController = SC.ArrayProxy.create({ openDetails: function(item) { SC.Logger.log("Opening: "+item.get("id")); - - var view = App.MediaDetailsView.create({ - content: item - }); - - this.set("comments", item.getPath("comments.data")); - - view.append(); - - this.set("detailsView", view); + App.statechart.sendAction("showPhotoDetails", item); }, closeDetails: function() { diff --git a/lib/main.js b/lib/main.js index 586580a..766911d 100644 --- a/lib/main.js +++ b/lib/main.js @@ -4,6 +4,7 @@ // ========================================================================== require('./core'); +require('./utils'); require('./models'); require('./datasource'); require('./controllers'); diff --git a/lib/models.js b/lib/models.js index 7d32d56..f7dd4f0 100644 --- a/lib/models.js +++ b/lib/models.js @@ -41,6 +41,11 @@ App.Models.CommentCollection = SC.Record.extend({ data: SC.Record.toMany('App.Models.Comment', {nested: true}) }); +App.Models.LikesCollection = SC.Record.extend({ + count: SC.Record.attr(Number), + data: SC.Record.toMany('App.Models.User', {nested: true}) +}); + App.Models.Tag = SC.Record.extend({ media_count: SC.Record.attr(Number), name: SC.Record.attr(String) @@ -52,7 +57,7 @@ App.Models.Media = SC.Record.extend({ images: SC.Record.toOne('App.Models.ImageCollection', {nested: true}), caption: SC.Record.toOne('App.Models.Comment', {nested: true}), comments: SC.Record.toOne('App.Models.CommentCollection', {nested: true}), - likes: SC.Record.toOne('App.Models.CommentCollection', {nested: true}), + likes: SC.Record.toOne('App.Models.LikesCollection', {nested: true}), tags: SC.Record.attr(Array), createDateTime: function() { return SC.DateTime.create(this.get("created_time")); diff --git a/lib/statechart.js b/lib/statechart.js index c82240d..c964f1a 100644 --- a/lib/statechart.js +++ b/lib/statechart.js @@ -59,7 +59,7 @@ App.statechart = SC.Statechart.create({ enterState: function() { if (!this._photoGrid) { - this._photoGrid = App.PhotoGridView.create().append(); + this._photoGrid = App.PhotoGridView.create(); } this._photoGrid.append(); @@ -69,6 +69,33 @@ App.statechart = SC.Statechart.create({ this._photoGrid.remove(); }, + goBack: function(){ + this.gotoState(this.get("statechart").popHistory()); + }, + + showPhotoDetails: function(item) { + this.get("statechart").pushHistory(this); + this.gotoState("showingPhotoDetails", item); + } + }), // end state: showingPhotoGrid + + //STATE: showingPhotoDetails + showingPhotoDetails: SC.State.extend({ + + _detailsView: null, + + enterState: function(item) { + if (!this._detailsView) { + this._detailsView = App.MediaDetailsView.create(); + } + this._detailsView.set("content", item); + this._detailsView.append(); + }, + + exitState: function(){ + this._detailsView.remove(); + }, + goBack: function(){ this.gotoState(this.get("statechart").popHistory()); } diff --git a/lib/utils.js b/lib/utils.js new file mode 100644 index 0000000..5588faf --- /dev/null +++ b/lib/utils.js @@ -0,0 +1,5 @@ +App.HistorySupport = SC.Object.extend({ + goBack: function(){ + this.gotoState(this.get("statechart").popHistory()); + } +}); \ No newline at end of file diff --git a/lib/views.js b/lib/views.js index fb19f6a..53a12e7 100644 --- a/lib/views.js +++ b/lib/views.js @@ -6,7 +6,7 @@ App.MainView = SC.View.extend({ templateName: "home", - classNames: ["home"], + classNames: ["home"] }); @@ -31,9 +31,7 @@ App.MediaItemView = SC.View.extend({ }, tapEnd: function() { SC.Logger.log("Tap/Click Detected: "+ this.getPath("content.id")); - App.mediaController.openDetails(this.get("content")); - return true; }