flashii/misuzu
flashii/misuzu
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Moved profile background settings out of the users table.

Browse source
This commit is contained in:
flash 2025-02-08 21:20:44 +00:00
parent 9f5076cc77
commit 31d89a08bf
18 changed files with 285 additions and 234 deletions

8
templates/_layout/input.twig
View file

@ -30,7 +30,7 @@
{% if name|length > 0 %}name="{{ name }}"{% endif %}
{% if checked %}checked{% endif %}
{% if disabled %}disabled{% endif %}
{% if value|length > 0 %}value="{{ value }}"{% endif %}
{% if value is defined and value is not null %}value="{{ value }}"{% endif %}
{% for name, value in attributes|default([]) %}
{{ name }}{% if value|length > 0 %}="{{ value }}"{% endif %}
{% endfor %}>
@ -74,9 +74,9 @@
Click here to select a file!
</div>
<script>
const parent = document.currentScript.parentNode,
input = parent.querySelector('input[type="file"]'),
display = parent.querySelector('.input__upload__selection');
const parent = document.currentScript.parentNode;
const input = parent.querySelector('input[type="file"]');
const display = parent.querySelector('.input__upload__selection');
input.addEventListener('change', ev => display.textContent = Array.from(ev.target.files).map(f => f.name).join(', '));
</script>
</label>

2
templates/manage/master.twig
View file

@ -4,7 +4,7 @@
{% set is_in_manage = true %}
{% set title = title|default('Broom Closet') %}
{% set site_logo = '/images/logos/imouto-broom.png' %}
{% set main_css_vars = main_css_vars|default([])|merge({'--site-logo': "url('/images/logos/imouto-broom.png')"}) %}
{% block content %}
<div class="manage">

17
templates/master.twig
View file

@ -5,26 +5,19 @@
<link href="/vendor/fontawesome/css/all.min.css" type="text/css" rel="stylesheet">
<link href="{{ asset('common.css') }}" type="text/css" rel="stylesheet">
<link href="{{ asset('misuzu.css') }}" type="text/css" rel="stylesheet">
{% if site_background is defined %}
{% if main_css_vars is defined and main_css_vars is iterable and main_css_vars is not empty %}
<style>
:root {
--background-width: {{ site_background.width }}px;
--background-height: {{ site_background.height }}px;
--background-image: url('{{ site_background_url|raw }}');
}
</style>
{% endif %}
{% if site_logo is defined %}
<style>
:root {
--site-logo: url('{{ site_logo }}');
{% for name, value in main_css_vars %}
{{ name }}: {{ value|raw }};
{% endfor %}
}
</style>
{% endif %}
{% endblock %}
{% set html_body_attrs = {
'class': 'main' ~ (site_background is defined ? (' ' ~ site_background.classNames('main--bg-%s')|join(' ')) : ''),
'class': html_classes('main', main_body_classes|default([])),
'style': global_accent_colour is defined ? ('--accent-colour: ' ~ global_accent_colour) : '',
} %}

67
templates/profile/index.twig
View file

@ -47,8 +47,8 @@
{% if perms.edit_avatar %}
<ul class="profile__guidelines__section">
<li class="profile__guidelines__line profile__guidelines__line--header">Avatar</li>
<li class="profile__guidelines__line">May not exceed the <span class="profile__guidelines__emphasis">{{ profile_avatar_info.maxBytes|format_filesize }}</span> file size limit.</li>
<li class="profile__guidelines__line">May not be larger than <span class="profile__guidelines__emphasis">{{ profile_avatar_info.maxWidth }}x{{ profile_avatar_info.maxHeight }}</span>.</li>
<li class="profile__guidelines__line">May not exceed the <span class="profile__guidelines__emphasis">{{ profile_avatar_asset.maxBytes|format_filesize }}</span> file size limit.</li>
<li class="profile__guidelines__line">May not be larger than <span class="profile__guidelines__emphasis">{{ profile_avatar_asset.maxWidth }}x{{ profile_avatar_asset.maxHeight }}</span>.</li>
<li class="profile__guidelines__line">Will be centre cropped and scaled to at most <span class="profile__guidelines__emphasis">240x240</span>.</li>
<li class="profile__guidelines__line">Animated GIF images are allowed.</li>
</ul>
@ -57,8 +57,8 @@
{% if perms.edit_background %}
<ul class="profile__guidelines__section">
<li class="profile__guidelines__line profile__guidelines__line--header">Background</li>
<li class="profile__guidelines__line">May not exceed the <span class="profile__guidelines__emphasis">{{ profile_background_info.maxBytes|format_filesize }}</span> file size limit.</li>
<li class="profile__guidelines__line">May not be larger than <span class="profile__guidelines__emphasis">{{ profile_background_info.maxWidth }}x{{ profile_background_info.maxHeight }}</span>.</li>
<li class="profile__guidelines__line">May not exceed the <span class="profile__guidelines__emphasis">{{ profile_background_asset.maxBytes|format_filesize }}</span> file size limit.</li>
<li class="profile__guidelines__line">May not be larger than <span class="profile__guidelines__emphasis">{{ profile_background_asset.maxWidth }}x{{ profile_background_asset.maxHeight }}</span>.</li>
<li class="profile__guidelines__line">GIF images, in general, are only allowed when tiling.</li>
</ul>
{% endif %}
@ -90,15 +90,14 @@
{{ container_title('Background') }}
<div class="profile__background-settings__content">
{{ input_file('background[file]', '', ['image/png', 'image/jpeg', 'image/gif'], {'id':'background-selection'}) }}
{{ input_file('bg_file', '', ['image/png', 'image/jpeg', 'image/gif'], {'id':'background-selection'}) }}
{{ input_checkbox('background[attach]', 'None', true, '', 0, true, {'onchange':'profileChangeBackgroundAttach(this.value)'}) }}
{% for key, value in background_attachments %}
{{ input_checkbox('background[attach]', value, key == profile_background_info.attachment, '', key, true, {'onchange':'profileChangeBackgroundAttach(this.value)'}) }}
{% for key, value in { '': 'None', 'cover': 'Cover', 'stretch': 'Stretch', 'tile': 'Tile', 'contain': 'Contain' } %}
{{ input_checkbox('bg_attach', value, key == profile_background_info.attach.value|default(''), '', key, true, {'onchange':'profileChangeBackgroundAttach(this.value)'}) }}
{% endfor %}
{{ input_checkbox('background[attr][blend]', 'Blend', profile_background_info.blend, '', '', false, {'onchange':'profileToggleBackgroundAttr(\'blend\', this.checked)'}) }}
{{ input_checkbox('background[attr][slide]', 'Slide', profile_background_info.slide, '', '', false, {'onchange':'profileToggleBackgroundAttr(\'slide\', this.checked)'}) }}
{{ input_checkbox('bg_blend', 'Blend', profile_background_info.blend|default(false), '', '', false, {'onchange':'profileToggleBackgroundAttr(\'blend\', this.checked)'}) }}
{{ input_checkbox('bg_slide', 'Slide', profile_background_info.slide|default(false), '', '', false, {'onchange':'profileToggleBackgroundAttr(\'slide\', this.checked)'}) }}
</div>
</div>
{% endif %}
@ -304,10 +303,10 @@
function profileToggleBackground(checked) {
let currentBg = document.body.style.getPropertyValue('--background-image');
if(currentBg != 'initial' && checked) {
if(currentBg != '' && checked) {
profilePreviousBackground = currentBg;
currentBg = 'initial';
} else if(currentBg == 'initial' && !checked) {
currentBg = '';
} else if(currentBg == '' && !checked) {
currentBg = profilePreviousBackground;
}
@ -315,47 +314,23 @@
}
function profileChangeBackgroundAttach(mode) {
const modes = {
1: 'cover',
2: 'stretch',
3: 'tile',
4: 'contain',
};
const modes = ['cover', 'stretch', 'tile', 'contain'];
profileToggleBackground(mode == 0);
for(const m of modes)
document.body.classList.remove(`main--bg-${m}`);
for(let i = 1; i <= Object.keys(modes).length; i++)
document.body.classList.remove('main--bg-' + modes[i]);
if(!modes[mode])
return;
document.body.classList.add('main--bg-' + modes[mode]);
const valid = modes.includes(mode);
profileToggleBackground(valid);
if(valid)
document.body.classList.add(`main--bg-${mode}`);
}
function profileToggleBackgroundAttr(attr, mode) {
let className = '';
switch(attr) {
case 'blend':
className = 'main--bg-blend';
break;
case 'slide':
className = 'main--bg-slide';
break;
}
if(className) {
if(mode)
document.body.classList.add(className);
else
document.body.classList.remove(className);
}
document.body.classList.toggle(`main--bg-${attr}`, mode);
}
document.getElementById('background-selection').addEventListener('change', ev => {
const image = new Image();
const image = new Image;
image.src = URL.createObjectURL(ev.target.files[0]);
image.addEventListener('load', () => {
document.body.style.setProperty('--background-image', 'url(%)'.replace('%', image.src));

17
templates/profile/master.twig
View file

@ -3,9 +3,20 @@
{% if profile_user is defined %}
{% set image = url('user-avatar', {'user': profile_user.id, 'res': 200}) %}
{% set manage_link = url('manage-user', {'user': profile_user.id}) %}
{% if (not profile_is_banned or profile_can_edit) %}
{% set site_background = profile_background_info %}
{% set site_background_url = url('user-background', {'user': profile_user.id}) %}
{% if (not profile_is_banned or profile_can_edit) and profile_background_info is not null %}
{% set main_body_classes = main_body_classes|default([])|merge({
'main--bg-cover': profile_background_info.cover,
'main--bg-stretch': profile_background_info.stretch,
'main--bg-tile': profile_background_info.tile,
'main--bg-contain': profile_background_info.contain,
'main--bg-blend': profile_background_info.blend,
'main--bg-slide': profile_background_info.slide,
}) %}
{% set main_css_vars = main_css_vars|default([])|merge({
'--background-width': '%dpx'|format(profile_background_asset.width),
'--background-height': '%dpx'|format(profile_background_asset.height),
'--background-image': "url('%s')"|format(url('user-background', {'user': profile_user.id})),
}) %}
{% endif %}
{% set stats = [
{