From f5606c416953bc1554daab6dd1b76d10f87c75db Mon Sep 17 00:00:00 2001 From: Marcin Kurczewski Date: Sun, 7 Sep 2014 09:57:01 +0200 Subject: [PATCH] Worked on user view appearance --- public_html/css/core.css | 5 ++ public_html/css/forms.css | 2 + public_html/css/top-navigation.css | 1 + public_html/css/user-list.css | 32 +++++++++ public_html/css/user.css | 51 ++++++++++++++ public_html/index.html | 1 + public_html/js/Controls/FileDropper.js | 18 ++--- .../js/Presenters/PagedCollectionPresenter.js | 11 +-- .../Presenters/UserAccountRemovalPresenter.js | 5 +- .../UserBrowsingSettingsPresenter.js | 2 +- .../js/Presenters/UserListPresenter.js | 12 ++-- public_html/js/Presenters/UserPresenter.js | 25 ++++++- public_html/js/Router.js | 1 + public_html/js/Util.js | 52 ++++++++++++++ public_html/templates/account-removal.tpl | 4 +- public_html/templates/account-settings.tpl | 4 +- public_html/templates/browsing-settings.tpl | 4 +- public_html/templates/login-form.tpl | 2 +- public_html/templates/registration-form.tpl | 2 +- public_html/templates/user-list.tpl | 27 ++++++-- public_html/templates/user.tpl | 69 ++++++++++++++++--- 21 files changed, 279 insertions(+), 51 deletions(-) create mode 100644 public_html/css/user.css diff --git a/public_html/css/core.css b/public_html/css/core.css index 0b07536f..bbb32489 100644 --- a/public_html/css/core.css +++ b/public_html/css/core.css @@ -8,6 +8,11 @@ body { font-size: 17px; } +h2 { + font-variant: small-caps; + font-weight: normal; +} + #middle { padding: 0 2em; } diff --git a/public_html/css/forms.css b/public_html/css/forms.css index 0b8b4181..be463dac 100644 --- a/public_html/css/forms.css +++ b/public_html/css/forms.css @@ -1,5 +1,7 @@ .form-wrapper { display: table; + margin: 0 auto; + text-align: left !important; } .form-row { diff --git a/public_html/css/top-navigation.css b/public_html/css/top-navigation.css index 3a25b2a7..72fae24e 100644 --- a/public_html/css/top-navigation.css +++ b/public_html/css/top-navigation.css @@ -14,6 +14,7 @@ #top-navigation li a { display: inline-block; + font-variant: small-caps; padding: 0.5em 1em; color: #000; } diff --git a/public_html/css/user-list.css b/public_html/css/user-list.css index 2bf223aa..4c1552f1 100644 --- a/public_html/css/user-list.css +++ b/public_html/css/user-list.css @@ -1,5 +1,6 @@ #user-list { min-width: 20em; + text-align: center; } #user-list ul { @@ -25,3 +26,34 @@ display: inline-block; padding: 0.2em 0.5em; } + +#user-list .users { + display: inline-block; + margin: 1em auto; +} +#user-list .users li { + text-align: left; + margin: 0.5em 0; +} + +#user-list li:after { + clear: left; + content: ''; + display: block; +} + +#user-list .user img { + float: left; + vertical-align: top; + margin-right: 1em; +} +#user-list .user .details { + float: left; + vertical-align: top; +} + +#user-list .user h1 { + margin-top: 0; + font-weight: normal; + font-size: 16pt; +} diff --git a/public_html/css/user.css b/public_html/css/user.css new file mode 100644 index 00000000..ab4bce7e --- /dev/null +++ b/public_html/css/user.css @@ -0,0 +1,51 @@ +#user-view { + min-width: 30em; + text-align: center; +} + +#user-view .side { + text-align: center; + width: 150px; + float: left; +} + +#user-view .top { + display: inline-block; + margin: 0 auto; +} + +#user-view ul { + display: inline-block; + list-style-type: none; + text-align: left; + margin: 0; + padding: 0; +} + +#user-view ul a { + cursor: pointer; + display: inline-block; + padding: 0.2em 0.5em; +} + +#user-view ul a.active { + background: #faffca; +} + +#user-view .tab { + display: none; + margin-top: 1.5em; + clear: both; +} + +#user-view .tab.active { + display: block; +} + +#user-view .tab.basic-info table { + margin: 0 auto; + text-align: left; +} +#user-view .tab.basic-info td { + padding: 0.2em 0.5em; +} diff --git a/public_html/index.html b/public_html/index.html index 6c4d92a9..0eff7b27 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -16,6 +16,7 @@ + diff --git a/public_html/js/Controls/FileDropper.js b/public_html/js/Controls/FileDropper.js index 9fcf71f5..2899afeb 100644 --- a/public_html/js/Controls/FileDropper.js +++ b/public_html/js/Controls/FileDropper.js @@ -13,26 +13,20 @@ App.Controls.FileDropper = function( $fileInput.attr('multiple', allowMultiple); $fileInput.hide(); - $fileInput.change(function(e) - { + $fileInput.change(function(e) { addFiles(this.files); }); - $dropDiv.on('dragenter', function(e) - { + $dropDiv.on('dragenter', function(e) { $dropDiv.addClass('active'); - }).on('dragleave', function(e) - { + }).on('dragleave', function(e) { $dropDiv.removeClass('active'); - }).on('dragover', function(e) - { + }).on('dragover', function(e) { e.preventDefault(); - }).on('drop', function(e) - { + }).on('drop', function(e) { e.preventDefault(); addFiles(e.originalEvent.dataTransfer.files); - }).on('click', function(e) - { + }).on('click', function(e) { $fileInput.show().focus().trigger('click').hide(); $dropDiv.addClass('active'); }); diff --git a/public_html/js/Presenters/PagedCollectionPresenter.js b/public_html/js/Presenters/PagedCollectionPresenter.js index 85a36f92..b9d3e382 100644 --- a/public_html/js/Presenters/PagedCollectionPresenter.js +++ b/public_html/js/Presenters/PagedCollectionPresenter.js @@ -16,7 +16,9 @@ App.Presenters.PagedCollectionPresenter = function(util, promise, api) { var totalRecords; function init(args) { - parseSearchArgs(args.searchArgs); + pageNumber = parseInt(args.page) || 1; + searchOrder = args.order; + searchQuery = args.query; baseUri = args.baseUri; backendUri = args.backendUri; renderCallback = args.renderCallback; @@ -99,13 +101,6 @@ App.Presenters.PagedCollectionPresenter = function(util, promise, api) { }); } - function parseSearchArgs(searchArgs) { - var args = util.parseComplexRouteArgs(searchArgs); - pageNumber = parseInt(args.page) || 1; - searchOrder = args.order; - searchQuery = args.query; - } - return { init: init, render: render, diff --git a/public_html/js/Presenters/UserAccountRemovalPresenter.js b/public_html/js/Presenters/UserAccountRemovalPresenter.js index a9749663..b2b10d28 100644 --- a/public_html/js/Presenters/UserAccountRemovalPresenter.js +++ b/public_html/js/Presenters/UserAccountRemovalPresenter.js @@ -33,7 +33,7 @@ App.Presenters.UserAccountRemovalPresenter = function( } function render() { - $el = jQuery(target); + var $el = jQuery(target); $el.html(template({ user: user, canDeleteAccount: privileges.canDeleteAccount})); @@ -47,7 +47,8 @@ App.Presenters.UserAccountRemovalPresenter = function( function accountRemovalFormSubmitted(e) { e.preventDefault(); - $messages = jQuery(target).find('.messages'); + var $el = jQuery(target); + $messages = $el.find('.messages'); messagePresenter.hideMessages($messages); if (!$el.find('input[name=confirmation]:visible').prop('checked')) { messagePresenter.showError($messages, 'Must confirm to proceed.'); diff --git a/public_html/js/Presenters/UserBrowsingSettingsPresenter.js b/public_html/js/Presenters/UserBrowsingSettingsPresenter.js index 1a58a9be..d4907d15 100644 --- a/public_html/js/Presenters/UserBrowsingSettingsPresenter.js +++ b/public_html/js/Presenters/UserBrowsingSettingsPresenter.js @@ -28,7 +28,7 @@ App.Presenters.UserBrowsingSettingsPresenter = function( } function render() { - $el = jQuery(target); + var $el = jQuery(target); $el.html(template({user: user})); } diff --git a/public_html/js/Presenters/UserListPresenter.js b/public_html/js/Presenters/UserListPresenter.js index 9d00c6c8..2c63f663 100644 --- a/public_html/js/Presenters/UserListPresenter.js +++ b/public_html/js/Presenters/UserListPresenter.js @@ -26,9 +26,13 @@ App.Presenters.UserListPresenter = function( } function initPaginator(args) { - activeSearchOrder = util.parseComplexRouteArgs(args.searchArgs).order; + var searchArgs = util.parseComplexRouteArgs(args.searchArgs); + searchArgs.order = searchArgs.order || 'name'; + activeSearchOrder = searchArgs.order; + pagedCollectionPresenter.init({ - searchArgs: args.searchArgs, + pageNumber: searchArgs.page, + order: searchArgs.order, baseUri: '#/users', backendUri: '/users', renderCallback: function updateCollection(data) { @@ -44,6 +48,7 @@ App.Presenters.UserListPresenter = function( function render() { $el.html(template({ userList: userList, + formatRelativeTime: util.formatRelativeTime, })); $el.find('.order a').click(orderLinkClicked); $el.find('.order [data-order="' + activeSearchOrder + '"]').parent('li').addClass('active'); @@ -52,8 +57,7 @@ App.Presenters.UserListPresenter = function( pagedCollectionPresenter.render($pager); }; - function orderLinkClicked(e) - { + function orderLinkClicked(e) { e.preventDefault(); var $orderLink = jQuery(this); activeSearchOrder = $orderLink.attr('data-order'); diff --git a/public_html/js/Presenters/UserPresenter.js b/public_html/js/Presenters/UserPresenter.js index bfd04bc2..f4703244 100644 --- a/public_html/js/Presenters/UserPresenter.js +++ b/public_html/js/Presenters/UserPresenter.js @@ -18,6 +18,7 @@ App.Presenters.UserPresenter = function( var template; var user; var userName; + var activeTab; function init(args) { userName = args.userName; @@ -39,7 +40,9 @@ App.Presenters.UserPresenter = function( userBrowsingSettingsPresenter.init(_.extend(extendedContext, {target: '#browsing-settings-target'})), userAccountSettingsPresenter.init(_.extend(extendedContext, {target: '#account-settings-target'})), userAccountRemovalPresenter.init(_.extend(extendedContext, {target: '#account-removal-target'}))) - .then(render); + .then(function() { + initTabs(args); + }) }).fail(function(response) { $el.empty(); @@ -47,6 +50,11 @@ App.Presenters.UserPresenter = function( }); } + function initTabs(args) { + activeTab = args.tab || 'basic-info'; + render(); + } + function render() { $el.html(template({ user: user, @@ -56,10 +64,23 @@ App.Presenters.UserPresenter = function( userBrowsingSettingsPresenter.render(); userAccountSettingsPresenter.render(); userAccountRemovalPresenter.render(); - }; + changeTab(activeTab); + } + + function changeTab(targetTab) { + var $link = $el.find('a[data-tab=' + targetTab + ']'); + var $links = $link.closest('ul').find('a[data-tab]'); + var tab = $link.attr('data-tab'); + var $tabs = $link.closest('.tab-wrapper').find('.tab'); + $links.removeClass('active'); + $link.addClass('active'); + $tabs.removeClass('active'); + $tabs.filter('[data-tab=' + tab + ']').addClass('active'); + } return { init: init, + reinit: initTabs, render: render }; diff --git a/public_html/js/Router.js b/public_html/js/Router.js index 04097ccf..b32176f9 100644 --- a/public_html/js/Router.js +++ b/public_html/js/Router.js @@ -25,6 +25,7 @@ App.Router = function(jQuery, util, appState) { inject('#/users', 'userListPresenter'); inject('#/users/:searchArgs', 'userListPresenter'); inject('#/user/:userName', 'userPresenter'); + inject('#/user/:userName/:tab', 'userPresenter'); setRoot('#/users'); }; diff --git a/public_html/js/Util.js b/public_html/js/Util.js index a178cf77..1269497b 100644 --- a/public_html/js/Util.js +++ b/public_html/js/Util.js @@ -90,12 +90,64 @@ App.Util = (function(jQuery, promise) { }); } + function formatRelativeTime(timeString) { + if (!timeString) + return 'never'; + + var time = Date.parse(timeString); + var now = Date.now(); + var difference = Math.abs(now - time); + var future = now < time; + + var text = (function(difference) { + var mul = 1000; + var prevMul; + + mul *= 60; + if (difference < mul) + return 'a few seconds'; + if (difference < mul * 2) + return 'a minute'; + + prevMul = mul; mul *= 60; + if (difference < mul) + return Math.round(difference / prevMul) + ' minutes'; + if (difference < mul * 2) + return 'an hour'; + + prevMul = mul; mul *= 24; + if (difference < mul) + return Math.round(difference / prevMul) + ' hours'; + if (difference < mul * 2) + return 'a day'; + + prevMul = mul; mul *= 30.42; + if (difference < mul) + return Math.round(difference / prevMul) + ' days'; + if (difference < mul * 2) + return 'a month'; + + prevMul = mul; mul *= 12; + if (difference < mul) + return Math.round(difference / prevMul) + ' months'; + if (difference < mul * 2) + return 'a year'; + + return Math.round(difference / mul) + ' years'; + })(difference); + + if (text == 'a day') + return future ? 'tomorrow' : 'yesterday'; + return future ? 'in ' + text : text + ' ago'; + } + return { promiseTemplate: promiseTemplate, initPresenter : initPresenter, initContentPresenter: initContentPresenter, parseComplexRouteArgs: parseComplexRouteArgs, compileComplexRouteArgs: compileComplexRouteArgs, + formatRelativeTime: formatRelativeTime, }; }); diff --git a/public_html/templates/account-removal.tpl b/public_html/templates/account-removal.tpl index 0eb928ff..3daef798 100644 --- a/public_html/templates/account-removal.tpl +++ b/public_html/templates/account-removal.tpl @@ -1,6 +1,6 @@ -
-
+
+
diff --git a/public_html/templates/account-settings.tpl b/public_html/templates/account-settings.tpl index 17e06ecc..da371e91 100644 --- a/public_html/templates/account-settings.tpl +++ b/public_html/templates/account-settings.tpl @@ -1,6 +1,6 @@ - -
+
+ <% if (canChangeAvatarStyle) { %>
diff --git a/public_html/templates/browsing-settings.tpl b/public_html/templates/browsing-settings.tpl index ccbee420..cfbe04f8 100644 --- a/public_html/templates/browsing-settings.tpl +++ b/public_html/templates/browsing-settings.tpl @@ -1,6 +1,6 @@ - -
+
+
diff --git a/public_html/templates/login-form.tpl b/public_html/templates/login-form.tpl index ad0c1698..a2f35b0d 100644 --- a/public_html/templates/login-form.tpl +++ b/public_html/templates/login-form.tpl @@ -6,7 +6,7 @@
- +
diff --git a/public_html/templates/registration-form.tpl b/public_html/templates/registration-form.tpl index 94dfc6eb..cf027be8 100644 --- a/public_html/templates/registration-form.tpl +++ b/public_html/templates/registration-form.tpl @@ -6,7 +6,7 @@
- +
diff --git a/public_html/templates/user-list.tpl b/public_html/templates/user-list.tpl index f7b5e217..2d2fba60 100644 --- a/public_html/templates/user-list.tpl +++ b/public_html/templates/user-list.tpl @@ -14,11 +14,28 @@ - <% _.each(userList, function(user) { %> -
- User name: <%= user.name %> -
- <% }); %> +
    + <% _.each(userList, function(user) { %> +
  • + + <%= user.name %> + +
    +

    + + <%= user.name %> + +

    +
    + Joined: <%= formatRelativeTime(user.registrationTime) %> +
    +
    + Last seen: <%= formatRelativeTime(user.lastLoginTime) %> +
    +
    +
    • + <% }); %> +
diff --git a/public_html/templates/user.tpl b/public_html/templates/user.tpl index b7c24c9e..7ca6d653 100644 --- a/public_html/templates/user.tpl +++ b/public_html/templates/user.tpl @@ -1,22 +1,73 @@ -
+
- Avatar - <%= user.name %> +
+
+ Avatar +
+ <%= user.name %> +
+ + +
+ +
+

Basic information

+ + + + + + + + + + + +
Registered:<%= user.registrationTime %>
Seen:<%= user.lastLoginTime %>
+
<% if (canChangeBrowsingSettings) { %> -

Browsing settings

-
+
+

Browsing settings

+
+
<% } %> <% if (canChangeAccountSettings) { %> -

Account settings

-
+
+

Account settings

+
+
<% } %> <% if (canDeleteAccount) { %> -

Account removal

-
+
+

Account removal

+
+
<% } %>