mirror of
https://github.com/twisterarmy/twister-html.git
synced 2025-03-13 05:51:03 +00:00
convert profile-edit.html to #/account modal
This commit is contained in:
Simon Grim
parent
8c70eae82a
commit
cecd428e5d
130
css/profile.css
130
css/profile.css
@ -68,86 +68,86 @@
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.profile-card.forEdition
|
||||
{
|
||||
margin: 0 auto;
|
||||
width: 540px;
|
||||
}
|
||||
.forEdition .profile-card-photo
|
||||
{
|
||||
border: solid 2px #fff;
|
||||
border-radius: 0%;
|
||||
float:none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
.forEdition .profile-card-main:hover:after,
|
||||
.forEdition .profile-card-photo:after
|
||||
{
|
||||
content: "";
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: url(../img/edit.png) no-repeat right top;
|
||||
}
|
||||
.forEdition .profile-card-main:hover:before
|
||||
{
|
||||
border: solid 5px #fff;
|
||||
}
|
||||
.forEdition .profile-card-main h2
|
||||
{
|
||||
margin-bottom: 8px;
|
||||
/*************************************
|
||||
************ ACCOUNT MODAL ***********
|
||||
**************************************/
|
||||
|
||||
.account-modal.modal-wrapper {
|
||||
height: 394px;
|
||||
margin-top: -197px;
|
||||
}
|
||||
|
||||
.forEdition .profile-card-main input, .forEdition .profile-card-main textarea {
|
||||
.account-modal .module {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.account-modal .module > div {
|
||||
width: 100%;
|
||||
margin: 4px 0;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.account-modal input, .account-modal textarea {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
background: rgba( 0, 0, 0, .1 );
|
||||
border: none;
|
||||
padding: 6px 4px;
|
||||
color: #fff;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
transition: all .2s linear;
|
||||
border: solid 1px rgba(0, 0, 0, .3);
|
||||
border-radius: 3px;
|
||||
width: 320px;
|
||||
margin: 12px 16px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.forEdition .profile-card-main input:hover,
|
||||
.forEdition .profile-card-main input:focus,
|
||||
.forEdition .profile-card-main textarea:hover, .forEdition .profile-card-main textarea:focus,
|
||||
.forEdition .profile-card-photo:hover
|
||||
{
|
||||
background: rgba( 0, 0, 0, .3 );
|
||||
.account-modal textarea {
|
||||
width: 330px;
|
||||
max-width: 330px;
|
||||
min-width: 330px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.input-description {
|
||||
width: 90%;
|
||||
max-width: 90%;
|
||||
.account-modal input:focus, .account-modal textarea:focus {
|
||||
border: solid 1px rgba(227, 79, 66, .5);
|
||||
}
|
||||
|
||||
.input-name
|
||||
{
|
||||
font-size: 20px;
|
||||
.account-modal .alias {
|
||||
margin: 0px 16px;
|
||||
}
|
||||
.forEdition .profile-card-main .input-website,
|
||||
.forEdition .profile-card-main .input-city
|
||||
{
|
||||
display: inline-block;
|
||||
|
||||
.account-modal .avatar {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 42px;
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
margin: 12px 16px;
|
||||
}
|
||||
.forEdition .profile-card-main .input-tox,
|
||||
.forEdition .profile-card-main .input-bitmessage
|
||||
{
|
||||
width: 90%;
|
||||
margin-top: 10px;
|
||||
|
||||
.account-modal .avatar img {
|
||||
width: 64px;
|
||||
height: auto;
|
||||
border: solid 1px rgba(0, 0, 0, .3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.profile-edition-buttons
|
||||
{
|
||||
padding: 10px;
|
||||
|
||||
.account-modal .c-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.account-modal .toggle-secret-key {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.account-modal .secret-key-container {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.account-modal .secret-key {
|
||||
background-color: #FFFFED;
|
||||
border: solid 1px rgba(0, 0, 0, .3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*************************************
|
||||
************ PROFILE MODAL ***********
|
||||
**************************************/
|
||||
|
||||
28
home.html
28
home.html
@ -51,7 +51,7 @@
|
||||
<a class="dropdown-menu-item uri-shortener">URI_shortener</a>
|
||||
<a class="dropdown-menu-item" href="options.html">Options</a>
|
||||
<a class="dropdown-menu-item" href="network.html">Network config</a>
|
||||
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
|
||||
<a class="dropdown-menu-item" href="#/account">Setup account</a>
|
||||
<a class="dropdown-menu-item" href="#/login">Change user</a>
|
||||
<a class="dropdown-menu-item updates-check-client">Check for client's updates</a>
|
||||
<a class="dropdown-menu-item dropdown-menu-following" href="#following">Following users</a>
|
||||
@ -474,6 +474,32 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="template-account-modal">
|
||||
<div class="module">
|
||||
<div>
|
||||
<div class="avatar">
|
||||
<img src="img/genericPerson.png"/>
|
||||
</div>
|
||||
<input type="text" class="input-name"/>
|
||||
<h2 class="alias"></h2>
|
||||
<textarea class="input-bio"></textarea>
|
||||
<input type="text" class="input-location"/>
|
||||
<input type="text" class="input-url"/>
|
||||
<input type="text" class="input-tox"/>
|
||||
<input type="text" class="input-bitmessage"/>
|
||||
</div>
|
||||
<div class="c-buttons">
|
||||
<button class="toggle-secret-key">Secret Key</button>
|
||||
<button class="submit-changes">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="module secret-key-container">
|
||||
<div class="label">Secret key:</div>
|
||||
<div class="secret-key"></div>
|
||||
</div>
|
||||
<input type="file" accept="image/*" class="input-avatar" style="display: none;"/>
|
||||
</div>
|
||||
|
||||
<div id="template-login-modal">
|
||||
<div class="module">
|
||||
<div>
|
||||
|
||||
@ -20,6 +20,7 @@ var twister = {
|
||||
},
|
||||
modal: {},
|
||||
res: {}, // reses for various reqs are cached here
|
||||
twists: {},
|
||||
var: {
|
||||
dateFormatter: {
|
||||
format: function (req) {
|
||||
@ -456,6 +457,121 @@ function timeSincePost(t) {
|
||||
return polyglot.t('time_ago', {time: expression});
|
||||
}
|
||||
|
||||
function openModalAccount() {
|
||||
if (!defaultScreenName) {
|
||||
alertPopup({
|
||||
//txtTitle: polyglot.t(''), add some title (not 'error', please) or just KISS
|
||||
txtMessage: polyglot.t('username_undefined')
|
||||
});
|
||||
history.back();
|
||||
return;
|
||||
}
|
||||
|
||||
var modal = openModal({
|
||||
classAdd: 'account-modal',
|
||||
content: twister.tmpl.accountMC.clone(true),
|
||||
title: polyglot.t('Edit profile')
|
||||
});
|
||||
|
||||
modal.content.find('.alias').text('@' + defaultScreenName);
|
||||
|
||||
loadProfileForEdit(defaultScreenName, {
|
||||
fullname: modal.content.find('.input-name').attr('placeholder', polyglot.t('Full name here')),
|
||||
bio: modal.content.find('.input-bio').attr('placeholder', polyglot.t('Describe yourself')),
|
||||
location: modal.content.find('.input-location').attr('placeholder', polyglot.t('Location')),
|
||||
url: modal.content.find('.input-url').attr('placeholder', polyglot.t('website')),
|
||||
tox: modal.content.find('.input-tox').attr('placeholder', polyglot.t('Tox address')),
|
||||
bitmessage: modal.content.find('.input-bitmessage').attr('placeholder', polyglot.t('Bitmessage address'))
|
||||
});
|
||||
loadAvatarForEdit(defaultScreenName, modal.content.find('.avatar img'));
|
||||
|
||||
dumpPubkey(defaultScreenName, checkAccountRegistrationCB, {
|
||||
peerAlias: defaultScreenName,
|
||||
cbFunc: checkAccountRegistrationCB,
|
||||
submitChangesElem: modal.content.find('.submit-changes')
|
||||
});
|
||||
}
|
||||
|
||||
function checkAccountRegistrationCB(req, res) {
|
||||
if (res.length > 0) {
|
||||
if (followingUsers.indexOf('twister') !== -1) {
|
||||
if (!isModalWithElemExists(req.submitChangesElem))
|
||||
return;
|
||||
|
||||
req.submitChangesElem.attr('data-blocked', 'false');
|
||||
if (req.submitChangesElem.attr('data-profile-changed') === 'true'
|
||||
|| req.submitChangesElem.attr('data-avatar-changed') === 'true')
|
||||
$.MAL.enableButton(req.submitChangesElem);
|
||||
} else {
|
||||
follow('twister', true,
|
||||
function (req) {
|
||||
// TODO add alertPopup() with welcome message
|
||||
|
||||
if (!isModalWithElemExists(req))
|
||||
return;
|
||||
|
||||
req.attr('data-blocked', 'false');
|
||||
if (req.attr('data-profile-changed') === 'true'
|
||||
|| req.attr('data-avatar-changed') === 'true')
|
||||
$.MAL.enableButton(req);
|
||||
},
|
||||
req.submitChangesElem
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if (!req.notYetAcceptedWarnDisplayed) {
|
||||
req.notYetAcceptedWarnDisplayed = true;
|
||||
alertPopup({
|
||||
//txtTitle: polyglot.t(''), add some title or just KISS
|
||||
txtMessage: polyglot.t('user_not_yet_accepted')
|
||||
});
|
||||
}
|
||||
setTimeout(dumpPubkey, 5000, req.peerAlias, req.cbFunc, req);
|
||||
}
|
||||
}
|
||||
|
||||
function handleAvatarFileSelect(event, avatarElem) {
|
||||
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
|
||||
alert('The File APIs are not fully supported in this browser.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!event || !event.target || !event.target.files || !event.target.files.length
|
||||
|| !avatarElem || !avatarElem.length)
|
||||
return;
|
||||
|
||||
var file = event.target.files[0];
|
||||
|
||||
if (!file.type.startsWith('image/'))
|
||||
return;
|
||||
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.data = avatarElem;
|
||||
reader.onload = function (event) {
|
||||
var img = document.createElement('img');
|
||||
|
||||
img.data = event.target.data;
|
||||
img.onload = function (event) {
|
||||
var ratio = 64 / Math.max(event.target.width, event.target.height);
|
||||
var canvas = document.createElement('canvas');
|
||||
|
||||
canvas.width = Math.round(event.target.width * ratio);
|
||||
canvas.height = Math.round(event.target.height * ratio);
|
||||
canvas.getContext('2d').drawImage(event.target, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
var imgURL;
|
||||
for (var quality = 1.0; (!imgURL || imgURL.length > 4096) && quality > 0.1; quality -= 0.01)
|
||||
imgURL = canvas.toDataURL('image/jpeg', quality);
|
||||
|
||||
event.target.data.attr('src', imgURL);
|
||||
};
|
||||
|
||||
img.src = event.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function openModalLogin() {
|
||||
var modal = openModal({
|
||||
classAdd: 'login-modal',
|
||||
@ -958,7 +1074,8 @@ function addToCommonDMsList(list, targetAlias, message) {
|
||||
.text(timeGmtToText(message.time))
|
||||
;
|
||||
if (targetAlias[0] === '*') {
|
||||
getAvatar(message.from, item.find('.post-photo img')); // it's impossible yet to get group avatar
|
||||
getAvatar(message.from, // it's impossible yet to get or to set an avatar of a group itself
|
||||
item.find('.post-photo').attr('data-peer-alias', message.from).find('img'));
|
||||
getGroupChatName(targetAlias, item.find('a.post-info-name'));
|
||||
} else {
|
||||
getAvatar(targetAlias, item.find('.post-photo img'));
|
||||
@ -1367,6 +1484,8 @@ function loadModalFromHash() {
|
||||
openGroupMessagesNewGroupModal();
|
||||
else if (hashstring === '#groupmessages+joingroup')
|
||||
openGroupMessagesJoinGroupModal();
|
||||
else if (hashstring === '#/account')
|
||||
openModalAccount();
|
||||
else if (hashstring === '#/login')
|
||||
openModalLogin();
|
||||
else if (hashstring === '#whotofollow')
|
||||
@ -2625,7 +2744,12 @@ function changeStyle() {
|
||||
if (theme === 'nin') {
|
||||
style = 'theme_nin/css/style.css';
|
||||
profile = 'theme_nin/css/profile.css';
|
||||
$.getScript('theme_nin/js/theme_option.js');
|
||||
$.ajax({dataType: 'text', url: 'theme_nin/js/theme_option.js'})
|
||||
.done(function(script, textStatus) {
|
||||
eval(script); // FIXME
|
||||
//applyThemePptions();
|
||||
})
|
||||
;
|
||||
} else if (theme === 'calm') {
|
||||
style = 'theme_calm/css/style.css';
|
||||
profile = 'theme_calm/css/profile.css';
|
||||
@ -2915,6 +3039,157 @@ function initInterfaceCommon() {
|
||||
})
|
||||
;
|
||||
twister.tmpl.post.find('.post-stats').hide();
|
||||
|
||||
twister.tmpl.accountMC = extractTemplate('#template-account-modal');
|
||||
twister.tmpl.accountMC.find('.avatar').on('click',
|
||||
function (event) {
|
||||
$(event.target).closest('.modal-content').find('.input-avatar').trigger('click');
|
||||
}
|
||||
);
|
||||
twister.tmpl.accountMC.find('input[type="text"], textarea').on('input', function (event) {
|
||||
var saveElem = $(event.target).closest('.modal-content').find('.submit-changes')
|
||||
.attr('data-profile-changed', 'true');
|
||||
|
||||
if (saveElem.prop('disabled') && saveElem.attr('data-blocked') !== 'true')
|
||||
$.MAL.enableButton(saveElem);
|
||||
});
|
||||
twister.tmpl.accountMC.filter('.input-avatar').on('change', function (event) {
|
||||
var containerElem = $(event.target).closest('.modal-content');
|
||||
var saveElem = containerElem.find('.submit-changes')
|
||||
.attr('data-avatar-changed', 'true');
|
||||
|
||||
if (saveElem.prop('disabled') && saveElem.attr('data-blocked') !== 'true')
|
||||
$.MAL.enableButton(saveElem);
|
||||
|
||||
handleAvatarFileSelect(event, containerElem.find('.avatar img'));
|
||||
});
|
||||
twister.tmpl.accountMC.find('.submit-changes').attr('data-blocked', 'true')
|
||||
.on('click', function (event) {
|
||||
var saveElem = $(event.target);
|
||||
var containerElem = saveElem.closest('.modal-content');
|
||||
|
||||
$.MAL.disableButton(saveElem);
|
||||
|
||||
var profileDataChanged = saveElem.attr('data-profile-changed') === 'true';
|
||||
var avatarDataChanged = saveElem.attr('data-avatar-changed') === 'true';
|
||||
|
||||
if (profileDataChanged) {
|
||||
saveElem.attr('data-profile-changed', 'false');
|
||||
var profileData = {
|
||||
fullname: containerElem.find('.input-name').val(),
|
||||
bio: containerElem.find('.input-bio').val(),
|
||||
location: containerElem.find('.input-location').val(),
|
||||
url: containerElem.find('.input-url').val(),
|
||||
tox: containerElem.find('.input-tox').val(),
|
||||
bitmessage: containerElem.find('.input-bitmessage').val()
|
||||
};
|
||||
}
|
||||
if (avatarDataChanged) {
|
||||
saveElem.attr('data-avatar-changed', 'false');
|
||||
var avatarData = containerElem.find('.avatar img').attr('src');
|
||||
}
|
||||
|
||||
if (profileDataChanged && avatarDataChanged) {
|
||||
redrawProfileAndAvatar(defaultScreenName, profileData, avatarData);
|
||||
|
||||
saveProfile(defaultScreenName, profileData,
|
||||
function (req) {
|
||||
saveAvatar(req.peerAlias, req.avatarData,
|
||||
alertPopup,
|
||||
{
|
||||
txtMessage: polyglot.t('profile_saved')
|
||||
},
|
||||
alertPopup,
|
||||
{
|
||||
txtMessage: polyglot.t('profile_not_saved') + '\n\nCan\'t save avatar data.',
|
||||
cbConfirm: function (req) {
|
||||
$.MAL.enableButton(req.attr('data-avatar-changed', 'true'));
|
||||
},
|
||||
cbConfirmReq: req.saveElem,
|
||||
cbClose: 'cbConfirm'
|
||||
}
|
||||
);
|
||||
},
|
||||
{
|
||||
peerAlias: defaultScreenName,
|
||||
avatarData: avatarData,
|
||||
saveElem: saveElem
|
||||
},
|
||||
alertPopup,
|
||||
{
|
||||
txtMessage: polyglot.t('profile_not_saved') + '\n\nCan\'t save profile data.',
|
||||
cbConfirm: function (req) {
|
||||
$.MAL.enableButton(req.attr('data-profile-changed', 'true'));
|
||||
},
|
||||
cbConfirmReq: saveElem,
|
||||
cbClose: 'cbConfirm'
|
||||
}
|
||||
);
|
||||
} else if (profileDataChanged) {
|
||||
redrawProfile(defaultScreenName, profileData);
|
||||
|
||||
saveProfile(defaultScreenName, profileData,
|
||||
alertPopup,
|
||||
{
|
||||
txtMessage: polyglot.t('profile_saved')
|
||||
},
|
||||
alertPopup,
|
||||
{
|
||||
txtMessage: polyglot.t('profile_not_saved') + '\n\nCan\'t save profile data.',
|
||||
cbConfirm: function (req) {
|
||||
$.MAL.enableButton(req.attr('data-profile-changed', 'true'));
|
||||
},
|
||||
cbConfirmReq: saveElem,
|
||||
cbClose: 'cbConfirm'
|
||||
}
|
||||
);
|
||||
} else if (avatarDataChanged) {
|
||||
redrawAvatar(defaultScreenName, avatarData);
|
||||
|
||||
saveAvatar(defaultScreenName, avatarData,
|
||||
alertPopup,
|
||||
{
|
||||
txtMessage: polyglot.t('profile_saved')
|
||||
},
|
||||
alertPopup,
|
||||
{
|
||||
txtMessage: polyglot.t('profile_not_saved') + '\n\nCan\'t save avatar data.',
|
||||
cbConfirm: function (req) {
|
||||
$.MAL.enableButton(req.attr('data-avatar-changed', 'true'));
|
||||
},
|
||||
cbConfirmReq: saveElem,
|
||||
cbClose: 'cbConfirm'
|
||||
}
|
||||
);
|
||||
} else
|
||||
$.MAL.enableButton(saveElem);
|
||||
})
|
||||
;
|
||||
$.MAL.disableButton(twister.tmpl.accountMC.find('.submit-changes'));
|
||||
twister.tmpl.accountMC.filter('.secret-key-container').hide();
|
||||
twister.tmpl.accountMC.find('.toggle-secret-key').on('click', function (event) {
|
||||
var containerElem = $(event.target).closest('.modal-content').find('.secret-key-container');
|
||||
|
||||
if (containerElem.is(':visible'))
|
||||
containerElem.slideUp('fast');
|
||||
else {
|
||||
var secretKeyElem = containerElem.find('.secret-key');
|
||||
|
||||
if (secretKeyElem.text())
|
||||
containerElem.slideDown('fast');
|
||||
else
|
||||
dumpPrivkey(defaultScreenName,
|
||||
function(req, res) {
|
||||
req.secretKeyElem.text(res);
|
||||
req.containerElem.slideDown('fast');
|
||||
},
|
||||
{
|
||||
containerElem: containerElem,
|
||||
secretKeyElem: secretKeyElem
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function extractTemplate(selector) {
|
||||
@ -3082,8 +3357,6 @@ $(function () {
|
||||
} else if (page.indexOf('options.html') === 0) {
|
||||
initInterfaceCommon();
|
||||
$.Options.initControls();
|
||||
} else if (page.indexOf("profile-edit.html") === 0) {
|
||||
initProfileEdit();
|
||||
}
|
||||
|
||||
changeStyle();
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
// interface_profile-edit.js
|
||||
// 2013 Miguel Freitas
|
||||
//
|
||||
// Profile editing interface (profile-edit.html)
|
||||
|
||||
var newUserWarnDisplayed = false;
|
||||
|
||||
function initProfileEdit() {
|
||||
// Check for the various File API support.
|
||||
if (window.File && window.FileReader && window.FileList && window.Blob) {
|
||||
// Great success! All the File APIs are supported.
|
||||
} else {
|
||||
alert('The File APIs are not fully supported in this browser.');
|
||||
}
|
||||
|
||||
initInterfaceCommon();
|
||||
|
||||
$('.profile-card-photo.forEdition').on('click', function () {$('#avatar-file').trigger('click');});
|
||||
$('#avatar-file').on('change', handleAvatarFileSelect);
|
||||
$('.submit-changes').on('click', saveProfile);
|
||||
$('.cancel-changes').on('click', $.MAL.goHome);
|
||||
|
||||
initUser(function() {
|
||||
if (!defaultScreenName) {
|
||||
alert(polyglot.t('username_undefined'));
|
||||
$.MAL.goLogin();
|
||||
return;
|
||||
}
|
||||
checkNetworkStatusAndAskRedirect();
|
||||
|
||||
loadFollowing(function() {
|
||||
twisterFollowingO = TwisterFollowing(defaultScreenName);
|
||||
verifyUserAlreadyInBlockchain();
|
||||
initMentionsCount();
|
||||
initDMsCount();
|
||||
});
|
||||
|
||||
$('.profile-card-main h2').text('@' + defaultScreenName);
|
||||
loadAvatarForEdit();
|
||||
loadProfileForEdit();
|
||||
|
||||
$('.secret-key-container').hide();
|
||||
|
||||
$('.toggle-priv-key').on('click', function () {
|
||||
if ($('.secret-key-container').is(':visible')) {
|
||||
$('.secret-key-container').fadeOut(function () {
|
||||
$('.secret-key').text('');
|
||||
});
|
||||
} else {
|
||||
dumpPrivkey(defaultScreenName, function(args, key) {
|
||||
$('.secret-key').text(key);
|
||||
$('.secret-key-container').fadeIn();
|
||||
}, {});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleAvatarFileSelect(event) {
|
||||
var files = event.target.files; // FileList object
|
||||
var file = files[0];
|
||||
|
||||
// Only process image files.
|
||||
if (file.type.match('image.*')) {
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function(event) {
|
||||
var img = new Image();
|
||||
img.onload = function() {
|
||||
var MAXWidthHeight = 64;
|
||||
var ratio = MAXWidthHeight / Math.max(this.width, this.height);
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = Math.round(this.width * ratio);
|
||||
canvas.height = Math.round(this.height * ratio);
|
||||
canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
var imgURL = undefined;
|
||||
for (var quality = 1.0; (!imgURL || imgURL.length > 4096) && quality > 0.1; quality -= 0.01) {
|
||||
imgURL = canvas.toDataURL('image/jpeg', quality);
|
||||
}
|
||||
$('.profile-card-photo.forEdition').attr('src', imgURL);
|
||||
}
|
||||
img.src = event.target.result;
|
||||
}
|
||||
|
||||
// Read in the image file as a data URL.
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function verifyUserAlreadyInBlockchain() {
|
||||
$.MAL.disableButton($('.submit-changes'));
|
||||
|
||||
dumpPubkey(defaultScreenName, function(args, pubkey) {
|
||||
if (pubkey.length > 0) {
|
||||
follow('twister', true, function() {
|
||||
$.MAL.enableButton($('.submit-changes'));
|
||||
});
|
||||
} else {
|
||||
if (!newUserWarnDisplayed) {
|
||||
alert(polyglot.t('user_not_yet_accepted'));
|
||||
newUserWarnDisplayed = true;
|
||||
}
|
||||
setTimeout(verifyUserAlreadyInBlockchain, 5000);
|
||||
}
|
||||
}, {});
|
||||
}
|
||||
|
||||
function localizePlaceholders() {
|
||||
$('.input-name').attr('placeholder', polyglot.t('Full name here'));
|
||||
$('.input-description').attr('placeholder', polyglot.t('Describe yourself'));
|
||||
$('.input-city').attr('placeholder', polyglot.t('Location'));
|
||||
$('.input-website').attr('placeholder', polyglot.t('website'));
|
||||
$('.input-tox').attr('placeholder', polyglot.t('Tox address'));
|
||||
$('.input-bitmessage').attr('placeholder', polyglot.t('Bitmessage address'));
|
||||
}
|
||||
|
||||
$(localizePlaceholders);
|
||||
@ -326,7 +326,7 @@ var MAL = function()
|
||||
if( $.hasOwnProperty("mobile") ) {
|
||||
$.mobile.navigate( "#profile-edit" );
|
||||
} else {
|
||||
window.location.href = "profile-edit.html";
|
||||
window.location.hash = '#/account';
|
||||
}
|
||||
}
|
||||
|
||||
@ -420,7 +420,13 @@ var MAL = function()
|
||||
txtTitle: polyglot.t('propagating_nickname', {username: peerAlias}),
|
||||
txtMessage: polyglot.t('new_account_briefing', {secretKey: secretKey}),
|
||||
txtConfirm: polyglot.t('Login'),
|
||||
cbConfirm: $.MAL.goProfileEdit,
|
||||
cbConfirm: function () {
|
||||
// FIXME we're reloading the page entirely for now
|
||||
// here should be $.MAL.goProfileEdit but first an additional code should be added to change user globally
|
||||
twister.var.initializated = false; // to not do openModalAccount()
|
||||
window.location.href = '/#/account';
|
||||
location.reload();
|
||||
},
|
||||
addBlackout: true,
|
||||
removeCancel: true,
|
||||
removeClose: true
|
||||
|
||||
@ -136,8 +136,14 @@ var router=new $.mobile.Router(
|
||||
profileedit: function(type,match,ui) {
|
||||
$.mobile.loading('show');
|
||||
initializeTwister( true, true, function() {
|
||||
loadAvatarForEdit();
|
||||
loadProfileForEdit();
|
||||
var containerElem = $('.profile-card.forEdition');
|
||||
loadProfileForEdit(defaultScreenName, {
|
||||
fullname: containerElem.find('.input-name').attr('placeholder', polyglot.t('Full name here')),
|
||||
bio: containerElem.find('.input-bio').attr('placeholder', polyglot.t('Describe yourself')),
|
||||
location: containerElem.find('.input-location').attr('placeholder', polyglot.t('Location')),
|
||||
url: containerElem.find('.input-url').attr('placeholder', polyglot.t('website'))
|
||||
});
|
||||
loadAvatarForEdit(defaultScreenName, $('.profile-card-photo.forEdition'));
|
||||
dumpPrivkey(defaultScreenName, function(args, key) {
|
||||
$(".secret-key").text(key);
|
||||
}, {});
|
||||
@ -449,10 +455,47 @@ function installUserSearchHandler() {
|
||||
function installProfileEditHandlers() {
|
||||
$('.profile-card-photo.forEdition').on('click', function () {$('#avatar-file').trigger('click');});
|
||||
$('#avatar-file').on('change', handleAvatarFileSelectMobile);
|
||||
$('.submit-changes').on('click', function () {
|
||||
saveProfile();
|
||||
setTimeout( function() {$.MAL.goHome();}, 1000);
|
||||
} );
|
||||
$('.submit-changes').on('click', function (event) {
|
||||
var saveElem = $(event.target);
|
||||
var containerElem = saveElem.closest('.content');
|
||||
|
||||
$.MAL.disableButton(saveElem);
|
||||
|
||||
saveProfile(defaultScreenName,
|
||||
{
|
||||
fullname: containerElem.find('.input-name').val(),
|
||||
bio: containerElem.find('.input-bio').val(),
|
||||
location: containerElem.find('.input-location').val(),
|
||||
url: containerElem.find('.input-url').val(),
|
||||
tox: containerElem.find('.input-tox').val(),
|
||||
bitmessage: containerElem.find('.input-bitmessage').val()
|
||||
},
|
||||
function (req) {
|
||||
saveAvatar(req.peerAlias, req.avatarData,
|
||||
function () {
|
||||
alert(polyglot.t('profile_saved'));
|
||||
$.MAL.goHome();
|
||||
},
|
||||
null,
|
||||
function (req) {
|
||||
alert(polyglot.t('profile_not_saved') + '\n\nCan\'t save avatar data.');
|
||||
$.MAL.enableButton(req);
|
||||
},
|
||||
req.saveElem
|
||||
);
|
||||
},
|
||||
{
|
||||
peerAlias: defaultScreenName,
|
||||
avatarData: containerElem.find('.profile-card-photo.forEdition').attr('src'),
|
||||
saveElem: saveElem
|
||||
},
|
||||
function (req) {
|
||||
alert(polyglot.t('profile_not_saved') + '\n\nCan\'t save profile data.');
|
||||
$.MAL.enableButton(req);
|
||||
},
|
||||
saveElem
|
||||
);
|
||||
});
|
||||
$('.cancel-changes').on('click', $.mobile.back);
|
||||
}
|
||||
|
||||
|
||||
@ -533,6 +533,152 @@ function updateProfilePosts(postsView, username, useGetposts) {
|
||||
});
|
||||
}
|
||||
|
||||
function loadProfileForEdit(peerAlias, req) {
|
||||
loadProfile(peerAlias,
|
||||
function (peerAlias, req, res) {
|
||||
for (var i in req)
|
||||
if (req[i].length && res[i])
|
||||
req[i].val(res[i]);
|
||||
},
|
||||
req
|
||||
);
|
||||
}
|
||||
|
||||
function loadAvatarForEdit(peerAlias, req) {
|
||||
loadAvatar(peerAlias,
|
||||
function (peerAlias, req, res) {
|
||||
req.attr('src', res);
|
||||
},
|
||||
req
|
||||
);
|
||||
}
|
||||
|
||||
function redrawProfileAndAvatar(peerAlias, profileData, avatarData) {
|
||||
var containerElem;
|
||||
|
||||
if (peerAlias === defaultScreenName) {
|
||||
containerElem = $('.module .mini-profile-info, .userMenu .mini-profile-info');
|
||||
containerElem.find('.mini-profile-name').text(profileData.fullname);
|
||||
containerElem.find('.mini-profile-photo img').attr('src', avatarData);
|
||||
}
|
||||
|
||||
containerElem = getElem('.profile-modal[data-modal-id="#profile?user=' + peerAlias + '"]')
|
||||
.find('.profile-card-main');
|
||||
if (containerElem.length) {
|
||||
containerElem.find('.profile-name').text(profileData.fullname);
|
||||
containerElem.find('.profile-bio').text(profileData.bio);
|
||||
containerElem.find('.profile-location').text(profileData.location);
|
||||
containerElem.find('.profile-url').text(profileData.url).attr('href', profileData.url);
|
||||
containerElem.find('.profile-tox').text(profileData.tox);
|
||||
containerElem.find('.profile-bitmessage').text(profileData.bitmessage);
|
||||
containerElem.find('img.profile-card-photo').attr('src', avatarData);
|
||||
}
|
||||
|
||||
containerElem = getElem('.post-data[data-screen-name="' + peerAlias + '"]');
|
||||
if (containerElem.length) {
|
||||
containerElem.find('.post-info-name').text(profileData.fullname);
|
||||
containerElem.find('.post-photo img').attr('src', avatarData);
|
||||
}
|
||||
|
||||
containerElem = getElem('.directMessages .direct-messages-thread .post.sent');
|
||||
if (containerElem.length) {
|
||||
containerElem.find('.post-info-name').text(profileData.fullname);
|
||||
containerElem.find('.post-photo img').attr('src', avatarData);
|
||||
}
|
||||
|
||||
getElem('.directMessages .direct-messages-list .post-photo'
|
||||
+ '[data-peer-alias="' + peerAlias + '"] img').attr('src', avatarData);
|
||||
|
||||
containerElem = getElem('.twister-user-info[data-screen-name="' + peerAlias + '"]')
|
||||
.closest('.twister-user');
|
||||
if (containerElem.length) {
|
||||
containerElem.find('.twister-user-full').text(profileData.fullname);
|
||||
containerElem.find('.bio').text(profileData.bio);
|
||||
containerElem.find('img.twister-user-photo').attr('src', avatarData);
|
||||
}
|
||||
|
||||
containerElem = getElem('.twister-peer[data-peer-alias="' + peerAlias + '"]');
|
||||
if (containerElem.length) {
|
||||
containerElem.find('.fullname').text(profileData.fullname);
|
||||
containerElem.find('.bio').text(profileData.bio);
|
||||
containerElem.find('.avatar img').attr('src', avatarData);
|
||||
}
|
||||
|
||||
containerElem = getElem('.avatar-row [data-peer-alias="' + peerAlias + '"]');
|
||||
if (containerElem.length) {
|
||||
containerElem.find('.user-name-tooltip').text(profileData.fullname);
|
||||
containerElem.find('img.avatar').attr('src', avatarData);
|
||||
}
|
||||
}
|
||||
|
||||
function redrawProfile(peerAlias, profileData) {
|
||||
var containerElem;
|
||||
|
||||
if (peerAlias === defaultScreenName)
|
||||
$('.module .mini-profile-info, .userMenu .mini-profile-info')
|
||||
.find('.mini-profile-name').text(profileData.fullname);
|
||||
|
||||
containerElem = getElem('.profile-modal[data-modal-id="#profile?user=' + peerAlias + '"]')
|
||||
.find('.profile-card-main');
|
||||
if (containerElem.length) {
|
||||
containerElem.find('.profile-name').text(profileData.fullname);
|
||||
containerElem.find('.profile-bio').text(profileData.bio);
|
||||
containerElem.find('.profile-location').text(profileData.location);
|
||||
containerElem.find('.profile-url').text(profileData.url).attr('href', profileData.url);
|
||||
containerElem.find('.profile-tox').text(profileData.tox);
|
||||
containerElem.find('.profile-bitmessage').text(profileData.bitmessage);
|
||||
}
|
||||
|
||||
getElem('.post-data[data-screen-name="' + peerAlias + '"]')
|
||||
.find('.post-info-name').text(profileData.fullname);
|
||||
|
||||
getElem('.directMessages .direct-messages-thread .post.sent')
|
||||
.find('.post-info-name').text(profileData.fullname);
|
||||
|
||||
containerElem = getElem('.twister-user-info[data-screen-name="' + peerAlias + '"]')
|
||||
.closest('.twister-user');
|
||||
if (containerElem.length) {
|
||||
containerElem.find('.twister-user-full').text(profileData.fullname);
|
||||
containerElem.find('.bio').text(profileData.bio);
|
||||
}
|
||||
|
||||
containerElem = getElem('.twister-peer[data-peer-alias="' + peerAlias + '"]');
|
||||
if (containerElem.length) {
|
||||
containerElem.find('.fullname').text(profileData.fullname);
|
||||
containerElem.find('.bio').text(profileData.bio);
|
||||
}
|
||||
|
||||
getElem('.avatar-row [data-peer-alias="' + peerAlias + '"]')
|
||||
.find('.user-name-tooltip').text(profileData.fullname);
|
||||
}
|
||||
|
||||
function redrawAvatar(peerAlias, avatarData) {
|
||||
if (peerAlias === defaultScreenName)
|
||||
$('.module .mini-profile-info, .userMenu .mini-profile-info')
|
||||
.find('.mini-profile-photo img').attr('src', avatarData);
|
||||
|
||||
getElem('.profile-modal[data-modal-id="#profile?user=' + peerAlias + '"]').find('.profile-card-main')
|
||||
.find('img.profile-card-photo').attr('src', avatarData);
|
||||
|
||||
getElem('.post-data[data-screen-name="' + peerAlias + '"]')
|
||||
.find('.post-photo img').attr('src', avatarData);
|
||||
|
||||
getElem('.directMessages .direct-messages-thread .post.sent')
|
||||
.find('.post-photo img').attr('src', avatarData);
|
||||
|
||||
getElem('.directMessages .direct-messages-list .post-photo'
|
||||
+ '[data-peer-alias="' + peerAlias + '"] img').attr('src', avatarData);
|
||||
|
||||
getElem('.twister-user-info[data-screen-name="' + peerAlias + '"]').closest('.twister-user')
|
||||
.find('img.twister-user-photo').attr('src', avatarData);
|
||||
|
||||
getElem('.twister-peer[data-peer-alias="' + peerAlias + '"]')
|
||||
.find('.avatar img').attr('src', avatarData);
|
||||
|
||||
getElem('.avatar-row [data-peer-alias="' + peerAlias + '"]')
|
||||
.find('img.avatar').attr('src', avatarData);
|
||||
}
|
||||
|
||||
function queryCreateRes(query, resource, extra) {
|
||||
var req = query + '@' + resource;
|
||||
twister.res[req] = {
|
||||
|
||||
@ -54,6 +54,14 @@ function postToElem(post, kind, promoted, templatePost) {
|
||||
"sig_userpost" : signature by userpost.n
|
||||
*/
|
||||
|
||||
/*if (!twister.twists[post.userpost.n])
|
||||
twister.twists[post.userpost.n] = {};
|
||||
else {
|
||||
var i = post.sig_userpost ? post.userpost.k : - post.userpost.k;
|
||||
if (twister.twists[post.userpost.n][i])
|
||||
return twister.twists[post.userpost.n][i].elem.clone(true);
|
||||
}*/
|
||||
|
||||
var username, k, time, msg, rt, content_to_rt, content_to_sigrt, retweeted_by;
|
||||
|
||||
// Obtain data from userpost
|
||||
@ -109,6 +117,14 @@ function postToElem(post, kind, promoted, templatePost) {
|
||||
.attr('data-time', time)
|
||||
;
|
||||
|
||||
/*var i = post.sig_userpost ? post.userpost.k : - post.userpost.k;
|
||||
twister.twists[post.userpost.n][i] = {
|
||||
data: post,
|
||||
elem: elem
|
||||
};
|
||||
var twistId = post.userpost.n + '/' + i;
|
||||
elem.attr('data-twist-id', twistId);*/
|
||||
|
||||
if (post.isNew)
|
||||
elem.addClass('new');
|
||||
|
||||
@ -226,7 +242,7 @@ function postToElem(post, kind, promoted, templatePost) {
|
||||
}
|
||||
}
|
||||
|
||||
return elem;
|
||||
return elem; //.clone(true);
|
||||
}
|
||||
|
||||
function setPostCommon(elem, username, time) {
|
||||
|
||||
@ -537,16 +537,59 @@ function cacheAvatar(peerAlias, req, version) {
|
||||
_putResourceIntoStorage('avatar:' + peerAlias, {src: req, version: version});
|
||||
}
|
||||
|
||||
function clearAvatarAndProfileCache(peerAlias) {
|
||||
var storage = $.localStorage;
|
||||
storage.remove('avatar:' + peerAlias);
|
||||
storage.remove('profile:' + peerAlias);
|
||||
if (twister.avatars[peerAlias]) {
|
||||
delete twister.avatars[peerAlias];
|
||||
}
|
||||
if (twister.profiles[peerAlias]) {
|
||||
delete twister.profiles[peerAlias];
|
||||
}
|
||||
function saveProfile(peerAlias, req, cbFunc, cbReq, cbErrFunc, cbErrReq) {
|
||||
if (twister.profiles[peerAlias] && twister.profiles[peerAlias].version)
|
||||
req.version = ++twister.profiles[peerAlias].version;
|
||||
else
|
||||
req.version = 1;
|
||||
|
||||
cacheProfile(peerAlias, req);
|
||||
|
||||
var dat = {};
|
||||
for (var i in req)
|
||||
if (i !== 'version' && req[i])
|
||||
dat[i] = req[i];
|
||||
|
||||
dhtput(peerAlias, 'profile', 's', dat,
|
||||
peerAlias, req.version,
|
||||
function (req, res) {
|
||||
if (!res) {
|
||||
if (typeof req.cbErrFunc === 'function')
|
||||
req.cbErrFunc(req.cbErrReq);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof req.cbFunc === 'function')
|
||||
req.cbFunc(req.cbReq);
|
||||
},
|
||||
{cbFunc: cbFunc, cbReq: cbReq, cbErrFunc: cbErrFunc, cbErrReq: cbErrReq}
|
||||
);
|
||||
}
|
||||
|
||||
function saveAvatar(peerAlias, req, cbFunc, cbReq, cbErrFunc, cbErrReq) {
|
||||
if (twister.avatars[peerAlias] && twister.avatars[peerAlias].version)
|
||||
var version = ++twister.avatars[peerAlias].version;
|
||||
else
|
||||
var version = 1;
|
||||
|
||||
cacheAvatar(peerAlias, req, version);
|
||||
|
||||
dhtput(peerAlias, 'avatar', 's', req,
|
||||
peerAlias, version,
|
||||
function (req, res) {
|
||||
if (!res) {
|
||||
if (typeof req.cbErrFunc === 'function')
|
||||
req.cbErrFunc(req.cbErrReq);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof req.cbFunc === 'function')
|
||||
req.cbFunc(req.cbReq);
|
||||
},
|
||||
{cbFunc: cbFunc, cbReq: cbReq, cbErrFunc: cbErrFunc, cbErrReq: cbErrReq}
|
||||
);
|
||||
}
|
||||
|
||||
// get estimative for number of followers (use known peers of torrent tracker)
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
//
|
||||
// Load/save current user to localStorage
|
||||
// keep track of lastPostId (used for posting as defaultScreenName)
|
||||
// Load/save profile (profile-edit.html)
|
||||
// Load/save profile
|
||||
|
||||
var defaultScreenName = undefined;
|
||||
var lastPostId = undefined;
|
||||
@ -158,100 +158,3 @@ function sendNewUserTransaction(peerAlias, cbFunc, cbReq) {
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// profile-related functions used by profile-edit
|
||||
// ----------------------------------------------
|
||||
var avatarSeqNum = 0;
|
||||
var profileSeqNum = 0;
|
||||
|
||||
function loadAvatarForEdit() {
|
||||
dhtget( defaultScreenName, "avatar", "s",
|
||||
function(args, imagedata, rawdata) {
|
||||
if( rawdata ) {
|
||||
var seq = parseInt(rawdata[0]["p"]["seq"]);
|
||||
if( seq > avatarSeqNum ) avatarSeqNum = seq;
|
||||
}
|
||||
if( imagedata && imagedata.length ) {
|
||||
$(".profile-card-photo.forEdition").attr("src", imagedata);
|
||||
}
|
||||
}, {} );
|
||||
}
|
||||
|
||||
function loadProfileForEdit() {
|
||||
dhtget( defaultScreenName, "profile", "s",
|
||||
function(args, profile, rawdata) {
|
||||
if( rawdata ) {
|
||||
var seq = parseInt(rawdata[0]["p"]["seq"]);
|
||||
if( seq > profileSeqNum ) profileSeqNum = seq;
|
||||
}
|
||||
if( profile ) {
|
||||
if( "fullname" in profile)
|
||||
$(".input-name").val(profile.fullname);
|
||||
if( "bio" in profile)
|
||||
$(".input-description").val(profile.bio);
|
||||
if( "location" in profile)
|
||||
$(".input-city").val(profile.location);
|
||||
if( "url" in profile)
|
||||
$(".input-website").val(profile.url);
|
||||
if( "tox" in profile)
|
||||
$(".input-tox").val(profile.tox);
|
||||
if( "bitmessage" in profile)
|
||||
$(".input-bitmessage").val(profile.bitmessage);
|
||||
}
|
||||
}, {} );
|
||||
}
|
||||
|
||||
function saveProfile(e) {
|
||||
function saveAvatar(req, isProfileDataSaved) {
|
||||
dhtput(defaultScreenName, 'avatar', 's',
|
||||
req.avatarImgSrc,
|
||||
defaultScreenName, ++avatarSeqNum,
|
||||
completeProfileSaving, {isProfileDataSaved: isProfileDataSaved}
|
||||
);
|
||||
}
|
||||
|
||||
function completeProfileSaving(req, isAvatarDataSaved) {
|
||||
if (req.isProfileDataSaved && isAvatarDataSaved) {
|
||||
clearAvatarAndProfileCache(defaultScreenName);
|
||||
var txtTitle = '';
|
||||
var txtMessage = polyglot.t('profile_saved');
|
||||
} else {
|
||||
var txtTitle = polyglot.t('error', {error: ''});
|
||||
var txtMessage = polyglot.t('profile_not_saved');
|
||||
}
|
||||
alertPopup({
|
||||
txtTitle: txtTitle,
|
||||
txtMessage: txtMessage,
|
||||
cbConfirm: $.MAL.enableButton,
|
||||
cbConfirmReq: $('.submit-changes'),
|
||||
cbClose: 'cbConfirm'
|
||||
});
|
||||
}
|
||||
|
||||
$.MAL.disableButton($('.submit-changes'));
|
||||
|
||||
dhtput(defaultScreenName, 'profile', 's',
|
||||
setObjPropFromElemVal({}, {
|
||||
fullname: '.input-name',
|
||||
bio: '.input-description',
|
||||
location: '.input-city',
|
||||
url: '.input-website',
|
||||
tox: '.input-tox',
|
||||
bitmessage: '.input-bitmessage'
|
||||
}),
|
||||
defaultScreenName, ++profileSeqNum,
|
||||
saveAvatar, {avatarImgSrc: $('.profile-card-photo.forEdition').attr('src')}
|
||||
);
|
||||
}
|
||||
|
||||
function setObjPropFromElemVal(object, req) {
|
||||
var props = Object.getOwnPropertyNames(req); // req's props names will be object's props names
|
||||
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
elem = $(req[props[i]]); // req's props values are elements selectors
|
||||
if (elem.length && elem.val())
|
||||
object[props[i]] = elem.val();
|
||||
}
|
||||
|
||||
return object;
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
<span class="mini-profile-view">View</span>
|
||||
</div>
|
||||
<a class="dropdown-menu-item" href="options.html">Options</a>
|
||||
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
|
||||
<a class="dropdown-menu-item" href="/#/account">Setup account</a>
|
||||
<a class="dropdown-menu-item updates-check-client">Check for client's updates</a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
<a class="userMenu-config-dropdown">
|
||||
<div class="config-menu dialog-modal">
|
||||
<a class="dropdown-menu-item" href="network.html">Network config</a>
|
||||
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
|
||||
<a class="dropdown-menu-item" href="/#/account">Setup account</a>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,108 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Edit profile</title>
|
||||
<link id="stylecss" rel="stylesheet" href="css/style.css" type="text/css">
|
||||
<link id="profilecss" rel="stylesheet" href="css/profile.css" type="text/css">
|
||||
<script src="js/jquery-3.3.1.min.js"></script>
|
||||
<script src="js/jQueryPlugins.js"></script>
|
||||
<script src="js/jquery.jsonrpcclient.js"></script>
|
||||
<script src="js/jquery.storageapi.js"></script>
|
||||
<script src="js/options.js"></script>
|
||||
<script src="js/franc.js"></script>
|
||||
<script src="js/notify.js"></script>
|
||||
<script src="js/mobile_abstract.js"></script>
|
||||
<script src="js/twister_io.js"></script>
|
||||
<script src="js/polyglot.min.js"></script>
|
||||
<script src="js/interface_localization.js"></script>
|
||||
<script src="js/twister_user.js"></script>
|
||||
<script src="js/twister_formatpost.js"></script>
|
||||
<script src="js/twister_actions.js"></script>
|
||||
<script src="js/twister_network.js"></script>
|
||||
<script src="js/twister_following.js"></script>
|
||||
<script src="js/twister_newmsgs.js"></script>
|
||||
<script src="js/interface_common.js"></script>
|
||||
<script src="js/interface_profile-edit.js"></script>
|
||||
<script src="js/twister-crypto-bundle.js"></script>
|
||||
|
||||
<link rel="shortcut icon" type="image/png" href="img/twister_mini.png" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- MENU SUPERIOR INIT -->
|
||||
<nav class="userMenu">
|
||||
<ul>
|
||||
<li class="userMenu-home"><a href="home.html">
|
||||
<span class="selectable_theme theme_original label">Home</span>
|
||||
<span class="selectable_theme theme_nin menu-news"></span>
|
||||
</a></li>
|
||||
<li class="userMenu-network selectable_theme theme_original theme_nin"><a class="label" href="network.html">Network</a></li>
|
||||
<li class="userMenu-config">
|
||||
<a class="userMenu-config-dropdown">
|
||||
<div class="config-menu dialog-modal">
|
||||
<div class="mini-profile-info selectable_theme theme_original">
|
||||
<div class="mini-profile-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
|
||||
<a href="#" class="mini-profile-name">Fulano da Silva</a>
|
||||
<span class="mini-profile-view">View</span>
|
||||
</div>
|
||||
<a class="dropdown-menu-item" href="options.html">Options</a>
|
||||
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
|
||||
<a class="dropdown-menu-item" href="network.html">Network config</a>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="userMenu-dhtindicator selectable_theme theme_calm"><a href="network.html"></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- MENU SUPERIOR END -->
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<!-- ÁREA DE PROFILE PHOTO INIT -->
|
||||
<div class="profile-card forEdition">
|
||||
<!-- Coloquei a imagem de fundo do card do usuário como background da div abaixo inline na tag para poder ser alterada dinamicamente -->
|
||||
<div class="profile-card-main" style="background: url(img/img.png) no-repeat center center #b43e34;">
|
||||
<img class="profile-card-photo forEdition" src="img/genericPerson.png"/>
|
||||
<input type="text" class="input-name" placeholder="Full name here"/>
|
||||
<h2></h2>
|
||||
<textarea class="input-description" placeholder="Describe yourself"></textarea>
|
||||
<input type="text" class="input-city" placeholder="Location"/>
|
||||
<input type="text" class="input-website" placeholder="website"/>
|
||||
<input type="text" class="input-tox" placeholder="Tox address"/>
|
||||
<input type="text" class="input-bitmessage" placeholder="Bitmessage address"/>
|
||||
</div>
|
||||
<div class="profile-edition-buttons">
|
||||
<button class="toggle-priv-key" style="float: left" href="#">Secret Key</button>
|
||||
<button class="cancel-changes" href="#">Cancel</button>
|
||||
<button class="submit-changes" href="#">Save Changes</button>
|
||||
</div>
|
||||
|
||||
<div style="font-size:80%;text-align: center;" class="secret-key-container">
|
||||
<span class="label">Secret key:</span> <span class="secret-key"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="file" id="avatar-file" name="avatar_files" style="display:none;"/>
|
||||
|
||||
<div id="templates" style="display:none;">
|
||||
<div class="prompt-wrapper">
|
||||
<div class="modal-header">
|
||||
<h3></h3>
|
||||
<span class="modal-close prompt-close">×</span>
|
||||
</div>
|
||||
<div class="modal-content"></div>
|
||||
<div class="modal-blackout"></div>
|
||||
</div>
|
||||
|
||||
<div id="confirm-popup-template">
|
||||
<div class="message"></div>
|
||||
<div class="modal-buttons">
|
||||
<button class="confirm"></button>
|
||||
<button class="cancel"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -56,11 +56,6 @@
|
||||
color: #7691ce;
|
||||
font-size: 14px;
|
||||
}
|
||||
.forEdition .profile-card-main h2 {
|
||||
left: 20%;
|
||||
top: 19%;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
.profile-card-buttons {
|
||||
padding: 4px 0;
|
||||
@ -72,135 +67,86 @@
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.profile-card.forEdition
|
||||
{
|
||||
margin: 0 auto;
|
||||
width: 540px;
|
||||
}
|
||||
.forEdition .profile-card-photo
|
||||
{
|
||||
border: solid 2px #fff;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all .2s linear;
|
||||
z-index: 10;
|
||||
}
|
||||
.forEdition .profile-card-main:hover:after,
|
||||
.forEdition .profile-card-photo:after
|
||||
{
|
||||
content: "";
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 0px;
|
||||
background: url(../img/edit.png) no-repeat right top;
|
||||
}
|
||||
.forEdition .profile-card-main:hover:before
|
||||
{
|
||||
border: solid 5px #fff;
|
||||
}
|
||||
.forEdition .profile-card-main h2
|
||||
{
|
||||
margin-bottom: 8px;
|
||||
|
||||
/*************************************
|
||||
************ ACCOUNT MODAL ***********
|
||||
**************************************/
|
||||
|
||||
.account-modal.modal-wrapper {
|
||||
height: 394px;
|
||||
margin-top: -197px;
|
||||
}
|
||||
|
||||
.forEdition .profile-card-main input, .forEdition .profile-card-main textarea {
|
||||
.account-modal .module {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.account-modal .module > div {
|
||||
width: 100%;
|
||||
margin: 4px 0;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.account-modal input, .account-modal textarea {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
background: rgba( 255, 255, 255, .8 );
|
||||
border: none;
|
||||
padding: 6px 4px;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
transition: all .2s linear;
|
||||
border: solid 1px rgba(0, 0, 0, .3);
|
||||
border-radius: 4px;
|
||||
width: 320px;
|
||||
margin: 12px 16px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.forEdition .profile-card-main input:hover, .forEdition .profile-card-main textarea:hover {
|
||||
background: rgba( 255, 255, 255, .7 );
|
||||
.account-modal textarea {
|
||||
width: 330px;
|
||||
max-width: 330px;
|
||||
min-width: 330px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.forEdition .profile-card-photo:hover{
|
||||
background: #9096a5;
|
||||
.account-modal input:focus, .account-modal textarea:focus {
|
||||
border: solid 1px rgba(118, 145, 206, .8);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.forEdition .profile-card-main input:focus, .forEdition .profile-card-main textarea:focus {
|
||||
background: #fff;
|
||||
color: #4d4d4d;
|
||||
.account-modal .alias {
|
||||
margin: 0px 16px;
|
||||
}
|
||||
|
||||
/* inputs placeholders color */
|
||||
.forEdition .profile-card-main input::-webkit-input-placeholder {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
.forEdition .profile-card-main input:-moz-placeholder {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
.forEdition .profile-card-main input::-moz-placeholder {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
.forEdition .profile-card-main input:-ms-input-placeholder {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
.forEdition .profile-card-main input:focus::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
.forEdition .profile-card-main input:focus:-moz-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
.forEdition .profile-card-main input:focus::-moz-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
.forEdition .profile-card-main input:focus::-ms-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.profile-card-main input.input-name{
|
||||
.account-modal .avatar {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 20px;
|
||||
right: 12px;
|
||||
top: 42px;
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
margin: 12px 16px;
|
||||
}
|
||||
|
||||
.profile-card-main .input-description {
|
||||
width: 90%;
|
||||
max-width: 90%;
|
||||
margin-top: 100px;
|
||||
.account-modal .avatar img {
|
||||
width: 64px;
|
||||
height: auto;
|
||||
border: solid 1px rgba(0, 0, 0, .3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.input-name
|
||||
{
|
||||
font-size: 20px;
|
||||
}
|
||||
.forEdition .profile-card-main .input-website,
|
||||
.forEdition .profile-card-main .input-city
|
||||
{
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.forEdition .profile-card-main .input-tox,
|
||||
.forEdition .profile-card-main .input-bitmessage
|
||||
{
|
||||
width: 90%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.profile-edition-buttons
|
||||
{
|
||||
padding: 10px;
|
||||
.account-modal .c-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
.profile-edition-buttons button {
|
||||
background: #f1f1f1;
|
||||
color: #333;
|
||||
|
||||
.account-modal .toggle-secret-key {
|
||||
float: left;
|
||||
}
|
||||
.profile-edition-buttons button:hover {
|
||||
background: #fff;
|
||||
transition: background-color 300ms ease-in;
|
||||
|
||||
.account-modal .secret-key-container {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.secret-key-container .label {
|
||||
color: #9096a5;
|
||||
}
|
||||
.secret-key-container .secret-key {
|
||||
color: #d2dbf1;
|
||||
|
||||
.account-modal .secret-key {
|
||||
background-color: #FFF;
|
||||
border: solid 1px rgba(0, 0, 0, .3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*************************************
|
||||
|
||||
@ -281,7 +281,7 @@ samp {
|
||||
|
||||
/* FONTS */
|
||||
/* line 2, ../sass/_utils.sass */
|
||||
.clear-fix:after, .userMenu ul:after, .profile-modal .profile-data:after, .profile-card .twister-user-info:after, .forEdition.profile-card:after, .postboard:after, .following:after, .expanded-content:after, .following-list li:after, .twistday-reminder li:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, .dashboard.right:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .toptrends ol:after, .twistday-reminder ol:after, .twister-user:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after {
|
||||
.clear-fix:after, .userMenu ul:after, .profile-modal .profile-data:after, .profile-card .twister-user-info:after, .postboard:after, .following:after, .expanded-content:after, .following-list li:after, .twistday-reminder li:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, .dashboard.right:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .toptrends ol:after, .twistday-reminder ol:after, .twister-user:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
@ -541,17 +541,6 @@ samp {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* line 127, ../sass/_profile.sass */
|
||||
.profile-card-photo.forEdition {
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
/* line 134, ../sass/_profile.sass */
|
||||
.profile-bio {
|
||||
padding: 10px;
|
||||
@ -655,79 +644,92 @@ samp {
|
||||
color: #B4C669;
|
||||
}
|
||||
|
||||
/* line 222, ../sass/_profile.sass */
|
||||
.forEdition.profile-card {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: auto;
|
||||
background: #f3f2f1;
|
||||
}
|
||||
/* line 227, ../sass/_profile.sass */
|
||||
.forEdition.profile-card .profile-card-main {
|
||||
margin: 0;
|
||||
width: 330px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
background: #f3f2f1;
|
||||
}
|
||||
/* line 233, ../sass/_profile.sass */
|
||||
.forEdition.profile-card .profile-card-main input, .forEdition .profile-card-main textarea {
|
||||
display: block;
|
||||
margin: 5px auto;
|
||||
background: white;
|
||||
border: 1px solid #e7e8e9;
|
||||
padding: 6px 4px;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
/* line 242, ../sass/_profile.sass */
|
||||
.forEdition .profile-card-main textarea:hover, .forEdition .profile-card-main textarea:focus,
|
||||
.forEdition.profile-card .profile-card-main input:hover, .forEdition.profile-card .profile-card-main input:focus {
|
||||
background: white;
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
/* line 246, ../sass/_profile.sass */
|
||||
.input-description {
|
||||
width: 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
/* line 249, ../sass/_profile.sass */
|
||||
.input-name {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* line 253, ../sass/_profile.sass */
|
||||
.forEdition .profile-card-main .input-website, .forEdition .profile-card-main .input-city {
|
||||
display: inline-block;
|
||||
}
|
||||
/* line 255, ../sass/_profile.sass */
|
||||
.forEdition .profile-card-main .input-tox, .forEdition .profile-card-main .input-bitmessage {
|
||||
width: 90%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* line 258, ../sass/_profile.sass */
|
||||
.forEdition .profile-card-main h2 {
|
||||
text-transform: none;
|
||||
font-weight: 700;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* line 263, ../sass/_profile.sass */
|
||||
.profile-edition-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* line 266, ../sass/_profile.sass */
|
||||
.selectable_theme.theme_calm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*************************************
|
||||
************ ACCOUNT MODAL ***********
|
||||
**************************************/
|
||||
|
||||
.account-modal.modal-wrapper {
|
||||
width: 580px;
|
||||
height: 394px;
|
||||
margin: -197px 0 0 -290px;
|
||||
}
|
||||
|
||||
.account-modal .modal-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.account-modal .module {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.account-modal .module > div {
|
||||
margin: 4px 0;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.account-modal input, .account-modal textarea {
|
||||
display: block;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
width: 320px;
|
||||
margin: 12px 16px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.account-modal textarea {
|
||||
width: 320px;
|
||||
max-width: 320px;
|
||||
min-width: 320px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.account-modal input:focus, .account-modal textarea:focus {
|
||||
border-bottom: solid 1px #B4C669;
|
||||
}
|
||||
|
||||
.account-modal .alias {
|
||||
margin: 0px 16px;
|
||||
}
|
||||
|
||||
.account-modal .avatar {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 42px;
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
margin: 12px 16px;
|
||||
}
|
||||
|
||||
.account-modal .avatar img {
|
||||
width: 64px;
|
||||
height: auto;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.account-modal .c-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.account-modal .toggle-secret-key {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.account-modal .secret-key-container {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.account-modal .secret-key {
|
||||
background-color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/************* POST BOARD ************ */
|
||||
/* line 3, ../sass/_postboard.sass */
|
||||
.postboard, .following {
|
||||
|
||||
@ -122,13 +122,6 @@ $modal-postboard-post-height: 100%
|
||||
display: block
|
||||
width: auto
|
||||
|
||||
.profile-card-photo.forEdition
|
||||
+border-radius(50%)
|
||||
height: 75px
|
||||
margin: 0 auto
|
||||
display: block
|
||||
width: 75px
|
||||
|
||||
.profile-bio
|
||||
padding: 10px
|
||||
font-style: italic
|
||||
@ -215,51 +208,60 @@ $modal-postboard-post-height: 100%
|
||||
.profile-modal .modal-buttons
|
||||
display: none
|
||||
|
||||
/* EDITION PROFILE*/
|
||||
|
||||
.forEdition.profile-card
|
||||
+box-sizing(border-box)
|
||||
@extend .clear-fix
|
||||
width: auto
|
||||
background: $background-light
|
||||
.profile-card-main
|
||||
margin: 0
|
||||
width: 330px
|
||||
+box-sizing(border-box)
|
||||
padding: 10px
|
||||
background: $background-light
|
||||
input
|
||||
display: block
|
||||
margin: 5px auto
|
||||
background: white
|
||||
border: 1px solid lighten($dark-grey, 50%)
|
||||
padding: 6px 4px
|
||||
margin-bottom: 4px
|
||||
text-align: center
|
||||
transition: all .2s linear
|
||||
&:hover, &:focus
|
||||
background: white
|
||||
border-color: $main-color-light
|
||||
|
||||
.input-description
|
||||
width: 90%
|
||||
|
||||
.input-name
|
||||
font-size: 20px
|
||||
|
||||
.forEdition .profile-card-main
|
||||
.input-website, .input-city
|
||||
display: inline-block
|
||||
.input-tox, .input-bitmessage
|
||||
width: 90%
|
||||
margin-top: 10px
|
||||
h2
|
||||
text-transform: none
|
||||
font-weight: 700
|
||||
font-size: .9em
|
||||
|
||||
.profile-edition-buttons
|
||||
text-align: right
|
||||
|
||||
.selectable_theme.theme_calm
|
||||
display: none
|
||||
|
||||
/*************************************
|
||||
************ ACCOUNT MODAL ***********
|
||||
**************************************/
|
||||
|
||||
.account-modal
|
||||
&.modal-wrapper
|
||||
width: 580px
|
||||
height: 394px
|
||||
margin: -197px 0 0 -290px
|
||||
.modal-content
|
||||
padding: 0
|
||||
.module
|
||||
margin: 4px
|
||||
> div
|
||||
margin: 4px 0
|
||||
padding: 4px 12px
|
||||
input, textarea
|
||||
display: block
|
||||
border: 1px solid rgba(0, 0, 0, .1)
|
||||
width: 320px
|
||||
margin: 12px 16px
|
||||
padding: 2px 4px
|
||||
textarea
|
||||
width: 320px
|
||||
max-width: 320px
|
||||
min-width: 320px
|
||||
min-height: 28px
|
||||
input:focus, textarea:focus
|
||||
border-bottom: solid 1px $color-green
|
||||
.alias
|
||||
margin: 0px 16px
|
||||
.avatar
|
||||
position: absolute
|
||||
right: 12px
|
||||
top: 42px
|
||||
cursor: pointer
|
||||
width: 64px
|
||||
height: 64px
|
||||
overflow: hidden
|
||||
margin: 12px 16px
|
||||
img
|
||||
width: 64px
|
||||
height: auto
|
||||
border: 1px solid rgba(0, 0, 0, .1)
|
||||
.c-buttons
|
||||
text-align: right
|
||||
.toggle-secret-key
|
||||
float: left
|
||||
.secret-key-container
|
||||
text-align: center
|
||||
font-size: 12px
|
||||
.secret-key
|
||||
background-color: $bloc-background-color
|
||||
font-weight: bold
|
||||
|
||||
@ -443,16 +443,16 @@
|
||||
</div>
|
||||
|
||||
<div class="content" data-role="content">
|
||||
<input type="file" id="avatar-file" name="avatar_files"/>
|
||||
<input type="file" id="avatar-file"/>
|
||||
<div class="profile-card forEdition">
|
||||
<!-- Coloquei a imagem de fundo do card do usuário como background da div abaixo inline na tag para poder ser alterada dinamicamente -->
|
||||
<div class="profile-card-main" style="background: url(img/img.png) no-repeat center center #b43e34;">
|
||||
<img class="profile-card-photo forEdition avatar" src="img/genericPerson.png"/>
|
||||
<input type="text" class="input-name" placeholder="Full name here"/>
|
||||
<h2></h2>
|
||||
<input type="text" class="input-description" placeholder="Describe yourself"/>
|
||||
<input type="text" class="input-city" placeholder="Location"/>
|
||||
<input type="text" class="input-website" placeholder="website"/>
|
||||
<input type="text" class="input-bio" placeholder="Describe yourself"/>
|
||||
<input type="text" class="input-location" placeholder="Location"/>
|
||||
<input type="text" class="input-url" placeholder="website"/>
|
||||
</div>
|
||||
<div class="profile-edition-buttons">
|
||||
<button class="cancel-changes" href="#">Cancel</button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user