Added styling to about editor.
This commit is contained in:
parent
65e70ce1f8
commit
1468d22c9c
9 changed files with 102 additions and 71 deletions
|
|
@ -1,30 +0,0 @@
|
|||
.profile__container {
|
||||
display: flex;
|
||||
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__side {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
background-image: repeating-linear-gradient(-45deg, yellow, yellow 10px, black 10px, black 20px);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
margin: 2px 0;
|
||||
padding: 2px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
background-color: rgba(17, 17, 17, .9);
|
||||
padding: 2px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,20 @@
|
|||
.profile {
|
||||
margin-top: 10px;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__side {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
19
assets/less/mio/classes/settings/about.less
Normal file
19
assets/less/mio/classes/settings/about.less
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.settings__about {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2px;
|
||||
|
||||
&__text {
|
||||
min-height: 400px;
|
||||
|
||||
// prevents resizing horizontally
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&__options {
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
16
assets/less/mio/classes/warning.less
Normal file
16
assets/less/mio/classes/warning.less
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.warning {
|
||||
--start-colour: yellow;
|
||||
--end-colour: black;
|
||||
|
||||
background-image: repeating-linear-gradient(-45deg, var(--start-colour), var(--start-colour) 10px, var(--end-colour) 10px, var(--end-colour) 20px);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
margin: 2px 0;
|
||||
padding: 2px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
background-color: rgba(17, 17, 17, .9);
|
||||
padding: 2px 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -75,11 +75,11 @@ body {
|
|||
@import "classes/header";
|
||||
@import "classes/index";
|
||||
@import "classes/permissions";
|
||||
@import "classes/warning";
|
||||
|
||||
// Profile
|
||||
@import "classes/profile/profile";
|
||||
@import "classes/profile/header";
|
||||
@import "classes/profile/container";
|
||||
@import "classes/profile/accounts";
|
||||
@import "classes/profile/about";
|
||||
|
||||
|
|
@ -97,6 +97,7 @@ body {
|
|||
@import "classes/settings/log";
|
||||
@import "classes/settings/login-history";
|
||||
@import "classes/settings/sessions";
|
||||
@import "classes/settings/about";
|
||||
|
||||
// News
|
||||
@import "classes/news/container";
|
||||
|
|
|
|||
|
|
@ -386,42 +386,29 @@ tpl_vars([
|
|||
switch ($settingsMode) {
|
||||
case 'account': // TODO: FIX THIS GARBAGE HOLY HELL
|
||||
$profileFields = user_profile_fields_get();
|
||||
$getUserFields = Database::prepare('
|
||||
SELECT ' . pdo_prepare_array($profileFields, true, '`user_%s`') . '
|
||||
FROM `msz_users`
|
||||
WHERE `user_id` = :user_id
|
||||
');
|
||||
$getUserFields->bindValue('user_id', $app->getUserId());
|
||||
$userFields = $getUserFields->execute() ? $getUserFields->fetch() : [];
|
||||
|
||||
$getMail = Database::prepare('
|
||||
SELECT `email`
|
||||
FROM `msz_users`
|
||||
WHERE `user_id` = :user_id
|
||||
');
|
||||
$getMail->bindValue('user_id', $app->getUserId());
|
||||
$currentEmail = $getMail->execute() ? $getMail->fetchColumn() : 'Failed to fetch e-mail address.';
|
||||
$getAccountInfo = Database::prepare(sprintf(
|
||||
'
|
||||
SELECT %s, `email`, `user_about_content`, `user_about_parser`
|
||||
FROM `msz_users`
|
||||
WHERE `user_id` = :user_id
|
||||
',
|
||||
pdo_prepare_array($profileFields, true, '`user_%s`')
|
||||
));
|
||||
$getAccountInfo->bindValue('user_id', $app->getUserId());
|
||||
$accountInfo = $getAccountInfo->execute() ? $getAccountInfo->fetch(PDO::FETCH_ASSOC) : [];
|
||||
|
||||
$userHasAvatar = is_file(build_path($app->getStoragePath(), 'avatars/original', $avatarFileName));
|
||||
$userHasBackground = is_file(build_path($app->getStoragePath(), 'backgrounds/original', $avatarFileName));
|
||||
|
||||
$getAboutInfo = Database::prepare('
|
||||
SELECT `user_about_content`, `user_about_parser`
|
||||
FROM `msz_users`
|
||||
WHERE `user_id` = :user_id
|
||||
');
|
||||
$getAboutInfo->bindValue('user_id', $app->getUserId());
|
||||
$aboutInfo = $getAboutInfo->execute() ? $getAboutInfo->fetch(PDO::FETCH_ASSOC) : [];
|
||||
|
||||
tpl_vars([
|
||||
'avatar' => $avatarProps,
|
||||
'background' => $backgroundProps,
|
||||
'user_has_avatar' => $userHasAvatar,
|
||||
'user_has_background' => $userHasBackground,
|
||||
'settings_profile_fields' => $profileFields,
|
||||
'settings_profile_values' => $userFields,
|
||||
'settings_disable_account_options' => $disableAccountOptions,
|
||||
'settings_email' => $currentEmail,
|
||||
'about_info' => $aboutInfo,
|
||||
'account_info' => $accountInfo,
|
||||
]);
|
||||
break;
|
||||
|
||||
|
|
|
|||
|
|
@ -11,11 +11,22 @@ define('MSZ_PARSERS', [
|
|||
MSZ_PARSER_MARKDOWN,
|
||||
]);
|
||||
|
||||
define('MSZ_PARSERS_NAMES', [
|
||||
MSZ_PARSER_PLAIN => 'Plain text',
|
||||
MSZ_PARSER_BBCODE => 'BB Code',
|
||||
MSZ_PARSER_MARKDOWN => 'Markdown',
|
||||
]);
|
||||
|
||||
function parser_is_valid(int $parser): bool
|
||||
{
|
||||
return in_array($parser, MSZ_PARSERS, true);
|
||||
}
|
||||
|
||||
function parser_name(int $parser): string
|
||||
{
|
||||
return parser_is_valid($parser) ? MSZ_PARSERS_NAMES[$parser] : '';
|
||||
}
|
||||
|
||||
function parse_text(string $text, int $parser): string
|
||||
{
|
||||
if (!parser_is_valid($parser)) {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
{{ props.name }}
|
||||
</div>
|
||||
<div class="settings__account__input__value">
|
||||
<input type="{{ props.type|default('text') }}" name="profile[{{ name }}]" value="{{ settings_profile_values['user_' ~ name] }}" class="input__text settings__account__input__value__text">
|
||||
<input type="{{ props.type|default('text') }}" name="profile[{{ name }}]" value="{{ account_info['user_' ~ name] }}" class="input__text settings__account__input__value__text">
|
||||
</div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
Current e-mail address
|
||||
</div>
|
||||
<div class="settings__account__input__value">
|
||||
<input type="text" class="input__text input__text--readonly settings__account__input__value__text" readonly value="{{ settings_email }}">
|
||||
<input type="text" class="input__text input__text--readonly settings__account__input__value__text" readonly value="{{ account_info.email }}">
|
||||
</div>
|
||||
</label>
|
||||
|
||||
|
|
@ -265,24 +265,34 @@
|
|||
{% if settings_perms.edit_about %}
|
||||
<div class="container">
|
||||
<div class="container__title">
|
||||
About you
|
||||
About
|
||||
</div>
|
||||
|
||||
<form method="post" action="" enctype="multipart/form-data">
|
||||
<form method="post" action="" enctype="multipart/form-data" class="settings__about">
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token() }}">
|
||||
|
||||
<textarea name="about[text]">{{ about_info.user_about_content }}</textarea>
|
||||
<textarea name="about[text]" class="input__textarea settings__about__text" id="about-textarea">{{ account_info.user_about_content }}</textarea>
|
||||
|
||||
<select name="about[parser]">
|
||||
{# todo: foreach #}
|
||||
<option value="0">Plain text</option>
|
||||
<option value="1">BB Code</option>
|
||||
<option value="2">Markdown</option>
|
||||
</select>
|
||||
<div class="settings__about__options">
|
||||
<select name="about[parser]" class="input__select">
|
||||
{% for parser, name in constant('MSZ_PARSERS_NAMES') %}
|
||||
<option value="{{ parser }}"{% if parser == account_info.user_about_parser %} selected{% endif %}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<button class="input__button">Update</button>
|
||||
<button class="input__button" type="reset">Reset</button>
|
||||
<div>
|
||||
<span id="about-character-count"></span>
|
||||
<button class="input__button">Update</button>
|
||||
<button class="input__button" type="reset">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/*document.getElementById('about-textarea').addEventListener('change', function (ev) {
|
||||
document.getElementById('about-character-count').textContent = ' / ' . ;
|
||||
});*/
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -132,8 +132,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile__container__placeholder">
|
||||
<div class="profile__container__placeholder__content">
|
||||
<div class="warning">
|
||||
<div class="warning__content">
|
||||
The profile pages are still under much construction, more things will eventually populate the area where this container current exists.
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue