diff options
5 files changed, 114 insertions, 46 deletions
diff --git a/main/app/sprinkles/admin/assets/userfrosting/js/widgets/users.js b/main/app/sprinkles/admin/assets/userfrosting/js/widgets/users.js index 2e153e5..952b241 100644 --- a/main/app/sprinkles/admin/assets/userfrosting/js/widgets/users.js +++ b/main/app/sprinkles/admin/assets/userfrosting/js/widgets/users.js @@ -18,7 +18,7 @@ function attachUserForm() { // Set up the form for submission form.ufForm({ validators: page.validators - }).on("submitSuccess.ufForm", function() { + }).on("submitSuccess.ufForm", function () { // Reload page on success window.location.reload(); }); @@ -41,14 +41,14 @@ function toggleChangePasswordMode(el, userName, changePasswordMode) { var validator = form.validate(); if (validator) { //Iterate through named elements inside of the form, and mark them as error free - el.find("input[type='password']").each(function() { - validator.successList.push(this); //mark as error free + el.find("input[type='password']").each(function () { + validator.successList.push(this); //mark as error free }); validator.resetForm();//remove error class on name elements and clear history validator.reset();//remove all error and success data } el.find("input[type='password']").closest('.form-group') - .removeClass('has-error has-success'); + .removeClass('has-error has-success'); el.find('.form-control-feedback').each(function () { $(this).remove(); }); @@ -66,7 +66,7 @@ function toggleChangePasswordMode(el, userName, changePasswordMode) { * Update user field(s) */ function updateUser(userName, fieldName, fieldValue) { - var data = { + var data = { 'value': fieldValue }; @@ -83,7 +83,7 @@ function updateUser(userName, fieldName, fieldValue) { dataType: debugAjax ? 'html' : 'json', converters: { // Override jQuery's strict JSON parsing - 'text json': function(result) { + 'text json': function (result) { try { // First try to use native browser parsing if (typeof JSON === 'object' && typeof JSON.parse === 'function') { @@ -92,19 +92,19 @@ function updateUser(userName, fieldName, fieldValue) { return $.parseJSON(result); } } catch (e) { - // statements to handle any exceptions - console.log("Warning: Could not parse expected JSON response."); - return {}; + // statements to handle any exceptions + console.log("Warning: Could not parse expected JSON response."); + return {}; } } } - }).fail(function (jqXHR) { + }).fail(function (jqXHR) { // Error messages if (debugAjax && jqXHR.responseText) { document.write(jqXHR.responseText); document.close(); } else { - console.log("Error (" + jqXHR.status + "): " + jqXHR.responseText ); + console.log("Error (" + jqXHR.status + "): " + jqXHR.responseText); // Display errors on failure // TODO: ufAlerts widget should have a 'destroy' method @@ -113,7 +113,7 @@ function updateUser(userName, fieldName, fieldValue) { } else { $("#alerts-page").ufAlerts('clear'); } - + $("#alerts-page").ufAlerts('fetch').ufAlerts('render'); } @@ -126,13 +126,13 @@ function updateUser(userName, fieldName, fieldValue) { /** * Link user action buttons, for example in a table or on a specific user's page. */ - function bindUserButtons(el) { +function bindUserButtons(el) { /** * Buttons that launch a modal dialog */ // Edit general user details button - el.find('.js-user-edit').click(function() { + el.find('.js-user-edit').click(function () { $("body").ufModal({ sourceUrl: site.uri.public + "/modals/users/edit", ajaxParams: { @@ -145,7 +145,7 @@ function updateUser(userName, fieldName, fieldValue) { }); // Manage user roles button - el.find('.js-user-roles').click(function() { + el.find('.js-user-roles').click(function () { var userName = $(this).data('user_name'); $("body").ufModal({ sourceUrl: site.uri.public + "/modals/users/roles", @@ -162,28 +162,27 @@ function updateUser(userName, fieldName, fieldValue) { // Set up collection widget var roleWidget = modal.find('.js-form-roles'); roleWidget.ufCollection({ - dropdown : { + dropdown: { ajax: { - url : site.uri.public + '/api/roles' + url: site.uri.public + '/api/roles' }, - placeholder : "Select a role" + placeholder: "Select a role" }, dropdownTemplate: modal.find('#user-roles-select-option').html(), - rowTemplate : modal.find('#user-roles-row').html() + rowTemplate: modal.find('#user-roles-row').html() }); // Get current roles and add to widget $.getJSON(site.uri.public + '/api/users/u/' + userName + '/roles') - .done(function (data) { - $.each(data.rows, function (idx, role) { - role.text = role.name; - roleWidget.ufCollection('addRow', role); + .done(function (data) { + $.each(data.rows, function (idx, role) { + role.text = role.name; + roleWidget.ufCollection('addRow', role); + }); }); - }); // Set up form for submission - form.ufForm({ - }).on("submitSuccess.ufForm", function() { + form.ufForm({}).on("submitSuccess.ufForm", function () { // Reload page on success window.location.reload(); }); @@ -191,7 +190,7 @@ function updateUser(userName, fieldName, fieldValue) { }); // Change user password button - el.find('.js-user-password').click(function() { + el.find('.js-user-password').click(function () { var userName = $(this).data('user_name'); $("body").ufModal({ sourceUrl: site.uri.public + "/modals/users/password", @@ -208,7 +207,7 @@ function updateUser(userName, fieldName, fieldValue) { // Set up form for submission form.ufForm({ validators: page.validators - }).on("submitSuccess.ufForm", function() { + }).on("submitSuccess.ufForm", function () { // Reload page on success window.location.reload(); }); @@ -216,7 +215,7 @@ function updateUser(userName, fieldName, fieldValue) { toggleChangePasswordMode(modal, userName, 'link'); // On submission, submit either the PUT request, or POST for a password reset, depending on the toggle state - modal.find("input[name='change_password_mode']").click(function() { + modal.find("input[name='change_password_mode']").click(function () { var changePasswordMode = $(this).val(); toggleChangePasswordMode(modal, userName, changePasswordMode); }); @@ -224,7 +223,7 @@ function updateUser(userName, fieldName, fieldValue) { }); // Delete user button - el.find('.js-user-delete').click(function() { + el.find('.js-user-delete').click(function () { $("body").ufModal({ sourceUrl: site.uri.public + "/modals/users/confirm-delete", ajaxParams: { @@ -238,17 +237,17 @@ function updateUser(userName, fieldName, fieldValue) { var form = modal.find('.js-form'); form.ufForm() - .on("submitSuccess.ufForm", function() { - // Reload page on success - window.location.reload(); - }); + .on("submitSuccess.ufForm", function () { + // Reload page on success + window.location.reload(); + }); }); }); /** * Direct action buttons */ - el.find('.js-user-activate').click(function() { + el.find('.js-user-activate').click(function () { var btn = $(this); updateUser(btn.data('user_name'), 'flag_verified', '1'); }); @@ -266,7 +265,7 @@ function updateUser(userName, fieldName, fieldValue) { function bindUserCreationButton(el) { // Link create button - el.find('.js-user-create').click(function() { + el.find('.js-user-create').click(function () { $("body").ufModal({ sourceUrl: site.uri.public + "/modals/users/create", msgTarget: $("#alerts-page") diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css index 4f0733f..ff3295a 100644 --- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css +++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css @@ -52,6 +52,11 @@ hr { padding: 0; } +hr.ShorterLine { + margin: 0 auto; + width: 90%; +} + /******* FLICKITY *******/ @@ -203,6 +208,59 @@ CHAT WINDOW display: none; } +/*********** +PERSONAL TAB +***********/ +.PersonalTabWindow { + position: relative; + height: 100%; + margin: 5px; +} + +.PersonalOverviewHeader { + display: flex; + justify-content: space-evenly; + align-items: flex-end; + width: 100%; +} + +.GenderFab { + height: 50px; + width: 50px; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; + color: white; + font-size: 25px; + line-height: 50px; + text-align: center; +} + +.GenderFab.Female { + background: linear-gradient(to right, #ff7a88, #ff9676); +} + +.AvatarImage { + height: 110px; + width: 110px; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; +} + +.GenderFab.Male { + background: linear-gradient(to right, #11c1d5, #1ddcb6); +} + +.DisplayNames { + text-align: center; +} + +.DisplayNames .FullName { + font-weight: bold; + font-size: 20px; +} + /***** NAVBAR *****/ diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/main.js b/main/app/sprinkles/core/assets/SiteAssets/js/main.js index 6f9147b..9f89394 100644 --- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js +++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js @@ -14,7 +14,7 @@ NavbarLine .data("origWidth", NavbarLine.width()); NavbarIconWrap.on("click", function () { NavbarIconWrap.removeClass("ActiveTab"); - $(this).children().attr("src", $(this).children().attr("src").split('.svg')[0] + "Activated.svg"); + //$(this).children().attr("src", $(this).children().attr("src").split('.svg')[0] + "Activated.svg"); var index = $(this).attr('id'); MainTabWindows.slick('slickGoTo', index); //$('.MainTabWindows').flickity().flickity('select', index); diff --git a/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig b/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig index 57e1ea1..2783358 100644 --- a/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig +++ b/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig @@ -24,6 +24,7 @@ {% block stylesheets_site %} <!-- Include main CSS asset bundle --> {{ assets.css('css/main-site') | raw }} + {{ assets.css('css/form-widgets') | raw }} {% endblock %} {# Override this block in a child layout template or page template to specify or override stylesheets for groups of similar pages. #} diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig index 3a78a16..f064cea 100644 --- a/main/app/sprinkles/core/templates/pages/index.html.twig +++ b/main/app/sprinkles/core/templates/pages/index.html.twig @@ -10,6 +10,7 @@ {% block content %} <div class="main"> <div class="MainTabWindows"> + <div class="carousel-cell FeedTab"> <div class="headerWrap"> <div class="header"> @@ -21,6 +22,7 @@ <hr> </div> </div> + <div class="carousel-cell ExploreTab"> <div class="headerWrap"> <div class="header"> @@ -43,18 +45,16 @@ </div> <hr> </div> - <div class="MainInTab"> - <div class="ChatWindow"> + <div class="MainInTab ChatWindow"> <div id="ChatMessages" class="ChatMessages"> <!-- Messages --> </div> <input title="Type your message..." id="ChatTextInput" class="ChatInput" type="text"/> <input title="Join a group..." id="SubscribeTextInput" class="ChatInput" type="text"/> - </div> </div> </div> - <div class="carousel-cell"> + <div class="carousel-cell FriendsTab"> <div class="headerWrap"> <div class="header"> <span class="LeftButtonHeader"><img draggable="false" ondragstart="return false;" @@ -65,7 +65,8 @@ <hr> </div> </div> - <div class="carousel-cell"> + + <div class="carousel-cell PersonalTab"> <div class="headerWrap"> <div class="header"> <span class="LeftButtonHeader"><img draggable="false" ondragstart="return false;" @@ -75,9 +76,18 @@ </div> <hr> </div> - <div class="MainInTab"> - {{current_user.first_name}} {{current_user.last_name}} - <small>({{current_user.user_name}})</small> + <div class="MainInTab PersonalTabWindow"> + <div class="PersonalOverviewHeader"> + <div class="GenderFab Female">♀</div> + <img class="AvatarImage" src="{{ current_user.avatar }}" /> + <div class="GenderFab Male">♂</div> + </div> + <br> + <div class="DisplayNames"> + <span class="FullName">{{ current_user.first_name}} {{current_user.last_name}}</span><br> + <small class="Username">{{current_user.user_name}}</small> + </div><br> + <hr class="ShorterLine" align="center"> </div> </div> </div> @@ -90,7 +100,7 @@ <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/ExploreGlobeOutline.svg') }}"> </span> <span id="2" class="NavbarIconWrap ActiveTab"> - <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/MessageBubbleOutlineActivated.svg') }}"> + <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/MessageBubbleOutline.svg') }}"> </span> <span id="3" class="NavbarIconWrap"> <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/UserGroupOutline.svg') }}"> |