diff --git a/app/assets/javascripts/discourse/controllers/user_activity_controller.js b/app/assets/javascripts/discourse/controllers/user_activity_controller.js index a17a13ea0fd..0b0cc3ab702 100644 --- a/app/assets/javascripts/discourse/controllers/user_activity_controller.js +++ b/app/assets/javascripts/discourse/controllers/user_activity_controller.js @@ -7,25 +7,5 @@ @module Discourse **/ Discourse.UserActivityController = Discourse.ObjectController.extend({ - needs: ['composer'], - - privateMessageView: function() { - return (this.get('userActionType') === Discourse.UserAction.TYPES.messages_sent) || - (this.get('userActionType') === Discourse.UserAction.TYPES.messages_received); - }.property('userActionType'), - - actions: { - composePrivateMessage: function() { - return this.get('controllers.composer').open({ - action: Discourse.Composer.PRIVATE_MESSAGE, - usernames: this.get('model.username'), - archetypeId: 'private_message', - draftKey: 'new_private_message' - }); - } - }, - - privateMessagesActive: Em.computed.equal('pmView', 'index'), - privateMessagesMineActive: Em.computed.equal('pmView', 'mine'), - privateMessagesUnreadActive: Em.computed.equal('pmView', 'unread') + needs: ['composer'] }); diff --git a/app/assets/javascripts/discourse/controllers/user_controller.js b/app/assets/javascripts/discourse/controllers/user_controller.js index 9151922315a..2872d5c6ffd 100644 --- a/app/assets/javascripts/discourse/controllers/user_controller.js +++ b/app/assets/javascripts/discourse/controllers/user_controller.js @@ -14,7 +14,16 @@ Discourse.UserController = Discourse.ObjectController.extend({ canSeePrivateMessages: function() { return this.get('viewingSelf') || Discourse.User.currentProp('staff'); - }.property('viewingSelf') + }.property('viewingSelf'), + + privateMessageView: function() { + return (this.get('userActionType') === Discourse.UserAction.TYPES.messages_sent) || + (this.get('userActionType') === Discourse.UserAction.TYPES.messages_received); + }.property('userActionType'), + + privateMessagesActive: Em.computed.equal('pmView', 'index'), + privateMessagesMineActive: Em.computed.equal('pmView', 'mine'), + privateMessagesUnreadActive: Em.computed.equal('pmView', 'unread') }); diff --git a/app/assets/javascripts/discourse/routes/user_activity_route.js b/app/assets/javascripts/discourse/routes/user_activity_route.js new file mode 100644 index 00000000000..e5c9644110c --- /dev/null +++ b/app/assets/javascripts/discourse/routes/user_activity_route.js @@ -0,0 +1,39 @@ +/** + The base route for showing a user's activity + + @class UserActivityRoute + @extends Discourse.Route + @namespace Discourse + @module Discourse +**/ +Discourse.UserActivityRoute = Discourse.Route.extend({ + + model: function() { + return this.modelFor('user'); + }, + + setupController: function(controller, user) { + + this.controllerFor('userActivity').set('model', user); + this.controllerFor('user').set('pmView', null); + + // Bring up a draft + var composerController = this.controllerFor('composer'); + controller.set('model', user); + if (Discourse.User.current()) { + Discourse.Draft.get('new_private_message').then(function(data) { + if (data.draft) { + composerController.open({ + draft: data.draft, + draftKey: 'new_private_message', + ignoreIfChanged: true, + draftSequence: data.draft_sequence + }); + } + }); + } + } + +}); + +Discourse.UserPrivateMessagesRoute = Discourse.UserActivityRoute.extend({}); \ No newline at end of file diff --git a/app/assets/javascripts/discourse/routes/user_activity_stream_route.js b/app/assets/javascripts/discourse/routes/user_activity_stream_route.js new file mode 100644 index 00000000000..8106599300a --- /dev/null +++ b/app/assets/javascripts/discourse/routes/user_activity_stream_route.js @@ -0,0 +1,33 @@ +/** + The base route for showing an activity stream. + + @class UserActivityStreamRoute + @extends Discourse.Route + @namespace Discourse + @module Discourse +**/ +Discourse.UserActivityStreamRoute = Discourse.Route.extend({ + model: function() { + return this.modelFor('user').get('stream'); + }, + + afterModel: function() { + return this.modelFor('user').get('stream').filterBy(this.get('userActionType')); + }, + + renderTemplate: function() { + this.render('user_stream', {into: 'user', outlet: 'userOutlet'}); + }, + + setupController: function(controller, model) { + controller.set('model', model); + this.controllerFor('user_activity').set('userActionType', this.get('userActionType')); + } +}); + +// Build all activity stream routes +['bookmarks', 'edits', 'likes_given', 'likes_received', 'replies', 'posts', 'index'].forEach(function (userAction) { + Discourse["UserActivity" + userAction.classify() + "Route"] = Discourse.UserActivityStreamRoute.extend({ + userActionType: Discourse.UserAction.TYPES[userAction] + }); +}); \ No newline at end of file diff --git a/app/assets/javascripts/discourse/routes/user_index_route.js b/app/assets/javascripts/discourse/routes/user_index_route.js new file mode 100644 index 00000000000..06f8745511e --- /dev/null +++ b/app/assets/javascripts/discourse/routes/user_index_route.js @@ -0,0 +1,13 @@ +/** + If we request /user/eviltrout without a sub route. + + @class UserIndexRoute + @extends Discourse.Route + @namespace Discourse + @module Discourse +**/ +Discourse.UserIndexRoute = Discourse.UserActivityRoute.extend({ + redirect: function() { + this.transitionTo('userActivity', this.modelFor('user')); + } +}); diff --git a/app/assets/javascripts/discourse/routes/user_invited_routes.js b/app/assets/javascripts/discourse/routes/user_invited_routes.js new file mode 100644 index 00000000000..de08b47eb9f --- /dev/null +++ b/app/assets/javascripts/discourse/routes/user_invited_routes.js @@ -0,0 +1,17 @@ +/** + This route shows who a user has invited + + @class UserInvitedRoute + @extends Discourse.Route + @namespace Discourse + @module Discourse +**/ +Discourse.UserInvitedRoute = Discourse.Route.extend({ + renderTemplate: function() { + this.render({ into: 'user', outlet: 'userOutlet' }); + }, + + model: function() { + return Discourse.InviteList.findInvitedBy(this.modelFor('user')); + } +}); \ No newline at end of file diff --git a/app/assets/javascripts/discourse/routes/user_routes.js b/app/assets/javascripts/discourse/routes/user_routes.js index ab8d8699bf4..41faade43a8 100644 --- a/app/assets/javascripts/discourse/routes/user_routes.js +++ b/app/assets/javascripts/discourse/routes/user_routes.js @@ -8,6 +8,22 @@ **/ Discourse.UserRoute = Discourse.Route.extend({ + actions: { + logout: function() { + Discourse.logout(); + }, + + composePrivateMessage: function() { + var user = this.modelFor('user'); + return this.controllerFor('composer').open({ + action: Discourse.Composer.PRIVATE_MESSAGE, + usernames: user.get('username'), + archetypeId: 'private_message', + draftKey: 'new_private_message' + }); + } + }, + model: function(params) { // If we're viewing the currently logged in user, return that object @@ -53,157 +69,3 @@ Discourse.UserRoute = Discourse.Route.extend({ } }); - -/** - This route shows who a user has invited - - @class UserInvitedRoute - @extends Discourse.Route - @namespace Discourse - @module Discourse -**/ -Discourse.UserInvitedRoute = Discourse.Route.extend({ - renderTemplate: function() { - this.render({ into: 'user', outlet: 'userOutlet' }); - }, - - model: function() { - return Discourse.InviteList.findInvitedBy(this.modelFor('user')); - } -}); - - -/** - The base route for showing a user's activity - - @class UserActivityRoute - @extends Discourse.Route - @namespace Discourse - @module Discourse -**/ -Discourse.UserActivityRoute = Discourse.Route.extend({ - renderTemplate: function() { - this.render('user_activity', {into: 'user', outlet: 'userOutlet' }); - }, - - model: function() { - return this.modelFor('user'); - }, - - setupController: function(controller, user) { - this.controllerFor('userActivity').set('model', user); - - var composerController = this.controllerFor('composer'); - controller.set('model', user); - if (Discourse.User.current()) { - Discourse.Draft.get('new_private_message').then(function(data) { - if (data.draft) { - composerController.open({ - draft: data.draft, - draftKey: 'new_private_message', - ignoreIfChanged: true, - draftSequence: data.draft_sequence - }); - } - }); - } - } -}); -Discourse.UserPrivateMessagesRoute = Discourse.UserActivityRoute.extend({}); - -/** - If we request /user/eviltrout without a sub route. - - @class UserIndexRoute - @extends Discourse.Route - @namespace Discourse - @module Discourse -**/ -Discourse.UserIndexRoute = Discourse.UserActivityRoute.extend({ - redirect: function() { - this.transitionTo('userActivity', this.modelFor('user')); - } -}); - -/** - The base route for showing an activity stream. - - @class UserActivityStreamRoute - @extends Discourse.Route - @namespace Discourse - @module Discourse -**/ -Discourse.UserActivityStreamRoute = Discourse.Route.extend({ - model: function() { - return this.modelFor('user').get('stream'); - }, - - afterModel: function() { - return this.modelFor('user').get('stream').filterBy(this.get('userActionType')); - }, - - renderTemplate: function() { - this.render('user_stream', {into: 'user_activity', outlet: 'activity'}); - }, - - setupController: function(controller, model) { - controller.set('model', model); - this.controllerFor('user_activity').set('userActionType', this.get('userActionType')); - } -}); - -// Build all activity stream routes -['bookmarks', 'edits', 'likes_given', 'likes_received', 'replies', 'posts', 'index'].forEach(function (userAction) { - Discourse["UserActivity" + userAction.classify() + "Route"] = Discourse.UserActivityStreamRoute.extend({ - userActionType: Discourse.UserAction.TYPES[userAction] - }); -}); - -Discourse.UserTopicListRoute = Discourse.Route.extend({ - - renderTemplate: function() { - this.render('paginated_topic_list', {into: 'user_activity', outlet: 'activity'}); - }, - - setupController: function(controller, model) { - this.controllerFor('user_activity').set('userActionType', this.get('userActionType')); - controller.set('model', model); - } -}); - -function createPMRoute(viewName, path, type) { - return Discourse.UserTopicListRoute.extend({ - userActionType: Discourse.UserAction.TYPES.messages_received, - - model: function() { - return Discourse.TopicList.find('topics/' + path + '/' + this.modelFor('user').get('username_lower')); - }, - - setupController: function(controller, model) { - this._super(controller, model); - controller.set('hideCategories', true); - this.controllerFor('userActivity').set('pmView', viewName); - } - }); -} - -Discourse.UserPrivateMessagesIndexRoute = createPMRoute('index', 'private-messages'); -Discourse.UserPrivateMessagesMineRoute = createPMRoute('mine', 'private-messages-sent'); -Discourse.UserPrivateMessagesUnreadRoute = createPMRoute('unread', 'private-messages-unread'); - - -Discourse.UserActivityTopicsRoute = Discourse.UserTopicListRoute.extend({ - userActionType: Discourse.UserAction.TYPES.topics, - - model: function() { - return Discourse.TopicList.find('topics/created-by/' + this.modelFor('user').get('username_lower')); - } -}); - -Discourse.UserActivityFavoritesRoute = Discourse.UserTopicListRoute.extend({ - userActionType: Discourse.UserAction.TYPES.favorites, - - model: function() { - return Discourse.TopicList.find('favorited?user_id=' + this.modelFor('user').get('id')); - } -}); diff --git a/app/assets/javascripts/discourse/routes/user_topic_list_routes.js b/app/assets/javascripts/discourse/routes/user_topic_list_routes.js new file mode 100644 index 00000000000..127d0dbe428 --- /dev/null +++ b/app/assets/javascripts/discourse/routes/user_topic_list_routes.js @@ -0,0 +1,48 @@ +Discourse.UserTopicListRoute = Discourse.Route.extend({ + + renderTemplate: function() { + this.render('paginated_topic_list', {into: 'user', outlet: 'userOutlet'}); + }, + + setupController: function(controller, model) { + this.controllerFor('user_activity').set('userActionType', this.get('userActionType')); + controller.set('model', model); + } +}); + +function createPMRoute(viewName, path, type) { + return Discourse.UserTopicListRoute.extend({ + userActionType: Discourse.UserAction.TYPES.messages_received, + + model: function() { + return Discourse.TopicList.find('topics/' + path + '/' + this.modelFor('user').get('username_lower')); + }, + + setupController: function(controller, model) { + this._super(controller, model); + controller.set('hideCategories', true); + this.controllerFor('user').set('pmView', viewName); + } + }); +} + +Discourse.UserPrivateMessagesIndexRoute = createPMRoute('index', 'private-messages'); +Discourse.UserPrivateMessagesMineRoute = createPMRoute('mine', 'private-messages-sent'); +Discourse.UserPrivateMessagesUnreadRoute = createPMRoute('unread', 'private-messages-unread'); + + +Discourse.UserActivityTopicsRoute = Discourse.UserTopicListRoute.extend({ + userActionType: Discourse.UserAction.TYPES.topics, + + model: function() { + return Discourse.TopicList.find('topics/created-by/' + this.modelFor('user').get('username_lower')); + } +}); + +Discourse.UserActivityFavoritesRoute = Discourse.UserTopicListRoute.extend({ + userActionType: Discourse.UserAction.TYPES.favorites, + + model: function() { + return Discourse.TopicList.find('favorited?user_id=' + this.modelFor('user').get('id')); + } +}); \ No newline at end of file diff --git a/app/assets/javascripts/discourse/templates/user/activity.js.handlebars b/app/assets/javascripts/discourse/templates/user/activity.js.handlebars index c8d17d83921..e24df580f9f 100644 --- a/app/assets/javascripts/discourse/templates/user/activity.js.handlebars +++ b/app/assets/javascripts/discourse/templates/user/activity.js.handlebars @@ -1,70 +1,3 @@ -
- -
- - - -
-
- {{#if websiteName}} -
{{i18n user.website}}:
{{websiteName}}
- {{/if}} - {{#if created_at}} -
{{i18n user.created}}:
{{date created_at}}
- {{/if}} - {{#if last_posted_at}} -
{{i18n user.last_posted}}:
{{date last_posted_at}}
- {{/if}} - {{#if last_seen_at}} -
{{i18n user.last_seen}}:
{{date last_seen_at}}
- {{/if}} - {{#if invited_by}} -
{{i18n user.invited_by}}:
{{#link-to 'userActivity' invited_by}}{{invited_by.username}}{{/link-to}}
- {{/if}} - {{#if email}} -
{{i18n user.email.title}}:
{{email}}
- {{/if}} -
{{i18n user.trust_level}}:
{{trustLevel.name}}
-
-
- - {{#if can_edit}} -
- -
- {{/if}} -
- -
- {{outlet activity}} -
+YOU SHOULD REMOVE THIS +{{outlet activity}} diff --git a/app/assets/javascripts/discourse/templates/user/preferences.js.handlebars b/app/assets/javascripts/discourse/templates/user/preferences.js.handlebars index 1148bbd9204..9edce0a7839 100644 --- a/app/assets/javascripts/discourse/templates/user/preferences.js.handlebars +++ b/app/assets/javascripts/discourse/templates/user/preferences.js.handlebars @@ -1,127 +1,130 @@ -
+
-
- -
- {{username}} - {{#if can_edit_username}} - {{#link-to "preferences.username" class="btn pad-left"}}{{/link-to}} - {{/if}} -
-
- {{{i18n user.username.short_instructions username="username"}}} -
-
+ -
- -
- {{textField value=name classNames="input-xxlarge"}} -
-
- {{i18n user.name.instructions}} -
-
- -
- -
- {{email}} - {{#if can_edit_email}} - {{#link-to "preferences.email" class="btn pad-left"}}{{/link-to}} - {{/if}} -
-
- {{i18n user.email.instructions}} -
-
- -
- -
- {{i18n user.change_password.action}} {{passwordProgress}} -
-
- -
- -
- {{boundAvatar model imageSize="large"}} - -
-
- -
- -
- {{pagedown value=bio_raw}} -
-
- -
- -
- {{textField value=website classNames="input-xxlarge"}} -
-
- -
- -
- - - {{#if email_digests}} -
- {{combobox valueAttribute="value" content=digestFrequencies value=digest_after_days}} -
- {{/if}} - - - -
-
- {{i18n user.email.frequency}} -
-
- -
- - -
- - {{combobox valueAttribute="value" content=autoTrackDurations value=auto_track_topics_after_msecs}} +
+ +
+ {{username}} + {{#if can_edit_username}} + {{#link-to "preferences.username" class="btn pad-left"}}{{/link-to}} + {{/if}} +
+
+ {{{i18n user.username.short_instructions username="username"}}} +
-
- - {{combobox valueAttribute="value" content=considerNewTopicOptions value=new_topic_duration_minutes}} +
+ +
+ {{textField value=name classNames="input-xxlarge"}} +
+
+ {{i18n user.name.instructions}} +
-
- - +
+ +
+ {{email}} + {{#if can_edit_email}} + {{#link-to "preferences.email" class="btn pad-left"}}{{/link-to}} + {{/if}} +
+
+ {{i18n user.email.instructions}} +
-
- +
+ +
+ {{i18n user.change_password.action}} {{passwordProgress}} +
-
- -
-
- - {{#if saved}}{{i18n saved}}{{/if}} +
+ +
+ {{boundAvatar model imageSize="large"}} + +
-
- +
+ +
+ {{pagedown value=bio_raw}} +
+
+ +
+ +
+ {{textField value=website classNames="input-xxlarge"}} +
+
+ +
+ +
+ + + {{#if email_digests}} +
+ {{combobox valueAttribute="value" content=digestFrequencies value=digest_after_days}} +
+ {{/if}} + + + +
+
+ {{i18n user.email.frequency}} +
+
+ +
+ + +
+ + {{combobox valueAttribute="value" content=autoTrackDurations value=auto_track_topics_after_msecs}} +
+ +
+ + {{combobox valueAttribute="value" content=considerNewTopicOptions value=new_topic_duration_minutes}} +
+ +
+ + +
+ +
+ +
+ +
+ +
+
+ + {{#if saved}}{{i18n saved}}{{/if}} +
+
+ + +
diff --git a/app/assets/javascripts/discourse/templates/user/user.js.handlebars b/app/assets/javascripts/discourse/templates/user/user.js.handlebars index c4925336405..9ed035c5e09 100644 --- a/app/assets/javascripts/discourse/templates/user/user.js.handlebars +++ b/app/assets/javascripts/discourse/templates/user/user.js.handlebars @@ -1,47 +1,102 @@ {{#unless loading}} -
-
-
-

{{name}}{{username}}{{{statusIcon}}}

+
- {{#if viewingSelf}} - - {{/if}} - {{#if currentUser.staff}} -  {{i18n admin.user.show_admin_profile}} - {{/if}} -
-
-
- -
-
- {{outlet userOutlet}} + {{/if}} + + +
+
+
+
+ {{boundAvatar model imageSize="huge"}} +

{{username}} {{{statusIcon}}}

+

{{name}}

+ +
{{{bio_excerpt}}}
+
+ +
+
+ {{#if websiteName}} +
{{i18n user.website}}
{{websiteName}}
+ {{/if}} + {{#if created_at}} +
{{i18n user.created}}
{{date created_at}}
+ {{/if}} + {{#if last_posted_at}} +
{{i18n user.last_posted}}
{{date last_posted_at}}
+ {{/if}} + {{#if last_seen_at}} +
{{i18n user.last_seen}}
{{date last_seen_at}}
+ {{/if}} + {{#if invited_by}} +
{{i18n user.invited_by}}
{{#link-to 'userActivity' invited_by}}{{invited_by.username}}{{/link-to}}
+ {{/if}} + {{#if email}} +
{{i18n user.email.title}}
{{email}}
+ {{/if}} +
{{i18n user.trust_level}}
{{trustLevel.name}}
+
+
+ +
+
+ +
+ {{#if can_send_private_message_to_user}} + + {{/if}} + + {{#if viewingSelf}} + + {{/if}} + + {{#if currentUser.staff}} +  {{i18n admin.user.show_admin_profile}} + {{/if}} + + {{#if can_edit}} + {{#link-to 'preferences' class="btn"}}{{i18n user.preferences}}{{/link-to}} + {{/if}} + + {{#link-to 'user.invited' class="btn"}}{{i18n user.invited.title}}{{/link-to}} + +
+
+ + {{outlet userOutlet}} +
+
{{/unless}} diff --git a/app/assets/javascripts/discourse/views/user/user_activity_view.js b/app/assets/javascripts/discourse/views/user/user_activity_view.js index bed6c6525d9..c4df3b4fbd5 100644 --- a/app/assets/javascripts/discourse/views/user/user_activity_view.js +++ b/app/assets/javascripts/discourse/views/user/user_activity_view.js @@ -7,7 +7,6 @@ @module Discourse **/ Discourse.UserActivityView = Discourse.View.extend({ - templateName: 'user/activity', userBinding: 'controller.content', didInsertElement: function() { diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index 3732eb88ca0..1c0d34a237c 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -71,7 +71,7 @@ $nav-pills-background-color-active: #e45735 !default; // Stacked nav -$nav-stacked-border-color: #b9b9b9 !default; +$nav-stacked-border-color: #ccc !default; $nav-stacked-background-color: #fafafa !default; $nav-stacked-divider-color: #e6e6e6 !default; $nav-stacked-chevron-color: #ccc !default; diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index 1f3c1c88e82..e58ed72ece9 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -7,6 +7,21 @@ width: 530px; height: 100px; } + + input[type=text] { + @include small-width { + width: 450px; + } + } + + #pagedown-editor { + width: 450px; + + textarea { + width: 440px; + } + } + .static { color: $black; margin-top: 5px; @@ -40,29 +55,15 @@ } } -#user-menu { - .btn { - float: right; - margin: 5px 0 0 10px; - } -} - -#about-me { - padding: 4px; - margin: -4px; - display: block; - width: 220px; - min-height: 200px; - background-color: #f8f8f8; - border-radius: 5px; - color: #444; - word-wrap: break-word; -} - -#user-info { +.user-navigation { width: 240px; margin-right: 20px; float: left; + + h3 { + color: #666; + } + .summary { height: 50px; } @@ -88,43 +89,6 @@ cursor: pointer; } } - .show { - dl { - width: 100%; - overflow: hidden; - dt { - margin: 0; - padding: 0; - width: 80px; - font-size: 12px; - color: #555555; - float: left; - clear: left; - } - dd { - margin: 0; - padding: 0; - width: 100px; - float: left; - color: #444444; - } - } - } - .avatar { - vertical-align: bottom; - a { - display: inline-block; - } - } - form { - .bio { - width: 220px; - height: 150px; - } - } - .side-nav { - margin-top: 5px; - } } #no-invites { @@ -144,104 +108,97 @@ } } -#user-menu h1 { - color: #2d3234; - float: left; - padding-left: 150px; - span { - font-size: 18px; - color: #676b6c; - margin-left: 15px; - font-weight: lighter; - position: relative; - top: -4px; - .icon { - margin-left: 5px; - font-size: 14px; - } - } -} - -#user-menu { - margin: 10px 0 0; -} - -.user-heading { - border-bottom: 1px solid #bcbcbc; - background-color: #e6e6e6; - margin-top: -15px; - margin-bottom: 10px; - position: relative; - .nav { - float: right; - margin: 5px 0 14px 5px; - } -} - -.user-info { - margin-bottom: 10px; - .about-me { - position: relative; - border: 1px solid #b9b9b9; - padding: 6px; - @include border-radius-all(4px); - float: left; - width: 936px; - height: 57px; - margin-left: 150px; - background-color: white; - @include box-shadow((0 1px 2px rgba($black, 0.07), inset 0 -4px 4px -4px rgba($black, 0.14))); - &:before, - &:after { - position: absolute; - width: 0; - height: 0; - content: ""; - border-style: solid; - border-color: transparent; - pointer-events: none; - } - &:before { - top: 12px; - left: -10px; - border-width: 10px 10px 10px 0; - border-right-color: #b9b9b9; - } - &:after { - top: 13px; - left: -9px; - border-width: 9px 9px 9px 0; - border-right-color: $white; - } - .missing-profile { - color: lighten(#000, 70%); - } - } - @include medium-width { - .about-me { - width: 821px; - } - } - @include small-width { - .about-me { - width: 776px; - } - } -} - -.user-heading { - .avatar-wrapper { - position: absolute; - display: block; - width: 120px; - } -} - -#user-activity { +.user-main { width: 840px; float: left; margin-bottom: 50px; + @include medium-width { + width: 730px; + } + + @include small-width { + width: 650px; + } + + .user-content { + padding: 10px 8px; + background-color: white; + border: 1px solid #ddd; + margin-bottom: 10px; + @include border-radius-all(4px); + } + + .about { + background-color: #444; + margin-bottom: 10px; + overflow: hidden; + border: 1px solid #bbb; + color: #fff; + + @include border-radius-all(4px); + + .details { + text-align: center; + padding: 10px; + + + h1 { + font-size: 30px; + font-weight: normal; + } + + h2 { + font-size: 20px; + margin-bottom: 6px; + font-weight: normal; + } + + a[href] { + color: #fff; + } + + img.avatar { + border: 3px solid #eee; + margin-bottom: 4px; + } + + .primary { + margin-top: 30px; + float: left; + width: 75%; + } + + .secondary { + float: right; + background-color: #222; + text-align: right; + padding: 0 10px; + width: 20%; + @include border-radius-all(4px); + + dd { + color: white; + margin: 0 0 7px 0; + } + dt { + color: #aaa; + margin: 0; + } + } + } + + .controls { + background-color: #ddd; + margin-top: 10px; + padding: 5px; + + .right { + float: right; + } + } + } + .user-stream { .excerpt { margin: 5px 0px; @@ -263,10 +220,9 @@ .item { padding: 10px 8px; background-color: white; - border: 1px solid #b9b9b9; + border: 1px solid #ddd; margin-bottom: 10px; @include border-radius-all(4px); - @include box-shadow((0 1px 2px rgba($black, 0.07), inset 0 -4px 4px -4px rgba($black, 0.14))); } .type { color: lighten($black, 40%); @@ -313,17 +269,6 @@ } } -@include medium-width { - #user-activity { - width: 725px; - } -} -@include small-width { - #user-activity { - width: 680px; - } -} - .avatar-selector { label { display: inline-block; diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index 998195a1c9f..6efc3abb76b 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -40,13 +40,6 @@ } } -#user-menu { - .btn { - float: right; - margin: 5px 0 0 10px; - } -} - #about-me { padding: 4px; margin: -4px; @@ -59,9 +52,12 @@ word-wrap: break-word; } -#user-info { - margin-right: 20px; - float: left; +.user-navigation { + + h3 { + color: #666; + } + .summary { height: 50px; } @@ -87,55 +83,6 @@ cursor: pointer; } } - .show { - dl { - width: 100%; - overflow: hidden; - dt { - margin: 0; - padding: 0; - width: 80px; - font-size: 12px; - color: #555555; - float: left; - clear: left; - } - dd { - margin: 0; - padding: 0; - width: 100px; - float: left; - color: #444444; - } - } - } - .avatar { - vertical-align: bottom; - a { - display: inline-block; - } - } - form { - .bio { - width: 220px; - height: 150px; - } - } - .nav-stacked { - > li { - display: inline-block; - > a { - padding: 7px; - } - } - .icon-chevron-right { - padding-left: 7px; - } - } - .side-nav { - margin: 0 5px; - max-width: 100%; - } } #no-invites { @@ -155,91 +102,69 @@ } } -#user-menu h1 { - color: #2d3234; - float: left; - padding-left: 150px; - span { - font-size: 18px; - color: #676b6c; - font-weight: lighter; - position: relative; - top: 5px; - display: block; - .icon { - margin-left: 5px; - font-size: 14px; - } - } -} - -#user-menu { - margin: 10px 0 0; -} - -.user-heading { - border-bottom: 1px solid #bcbcbc; - background-color: #e6e6e6; - margin-top: -15px; - margin-bottom: 10px; - position: relative; - .nav { - float: left; - margin: 5px 0 10px 147px; - } -} - -.user-info { - margin-bottom: 10px; - .about-me { - position: relative; - border: 1px solid #b9b9b9; - padding: 6px; - @include border-radius-all(4px); - float: left; - margin: 0 5px 0 20px; - background-color: white; - @include box-shadow((0 1px 2px rgba($black, 0.07), inset 0 -4px 4px -4px rgba($black, 0.14))); - &:before, - &:after { - position: absolute; - width: 0; - height: 0; - content: ""; - border-style: solid; - border-color: transparent; - pointer-events: none; - } - &:before { - top: 12px; - left: -10px; - border-width: 10px 10px 10px 0; - border-right-color: #b9b9b9; - } - &:after { - top: 13px; - left: -9px; - border-width: 9px 9px 9px 0; - border-right-color: $white; - } - .missing-profile { - color: lighten(#000, 70%); - } - } -} - -.user-heading { - .avatar-wrapper { - position: absolute; - display: block; - width: 120px; - } -} - -#user-activity { - float: left; +.user-main { + clear: both; margin-bottom: 50px; + .about { + background-color: #444; + margin-bottom: 10px; + overflow: hidden; + border: 1px solid #bbb; + color: #fff; + + @include border-radius-all(4px); + + .details { + text-align: center; + padding: 10px; + + h1 { + font-size: 30px; + font-weight: normal; + } + + h2 { + font-size: 20px; + margin-bottom: 6px; + font-weight: normal; + } + + a[href] { + color: #fff; + } + + img.avatar { + border: 3px solid #eee; + margin-bottom: 4px; + } + + .secondary { + background-color: #222; + text-align: left; + padding: 0 10px; + @include border-radius-all(4px); + + dd { + color: white; + margin: 0 0 7px 0; + } + dt { + color: #aaa; + margin: 0; + } + } + } + + .controls { + background-color: #ddd; + margin-top: 0px; + padding: 5px; + + button { margin-bottom: 3px; } + } + } + .user-stream { .excerpt { margin: 5px 0px; @@ -264,7 +189,6 @@ border: 1px solid #b9b9b9; margin-bottom: 10px; @include border-radius-all(4px); - @include box-shadow((0 1px 2px rgba($black, 0.07), inset 0 -4px 4px -4px rgba($black, 0.14))); } .type { color: lighten($black, 40%); diff --git a/test/javascripts/integration/user_test.js b/test/javascripts/integration/user_test.js index eedbbb68e0a..b0549550364 100644 --- a/test/javascripts/integration/user_test.js +++ b/test/javascripts/integration/user_test.js @@ -5,8 +5,8 @@ test("Activity Streams", function() { var streamTest = function(url) { visit(url).then(function() { - ok(exists(".user-heading"), "The heading is rendered"); - ok(exists("#user-activity"), "The activity is rendered"); + ok(exists(".user-main"), "The main content is rendered"); + ok(exists(".user-navigation"), "The navigation is rendered"); }); };