mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-01-18 22:08:22 +01:00
Add sidebar.
This commit is contained in:
Lars Jung
parent
d6cef5c787
commit
506c93340a
@ -6,6 +6,7 @@
|
||||
|
||||
* replaces PHP backtick operator with `exec`
|
||||
* adds initial theme support
|
||||
* adds sidebar
|
||||
* adds icons from [Evolvere Icon Theme](http://franksouza183.deviantart.com/art/Evolvere-Icon-theme-440718295)
|
||||
* adds PHP variant to calc folder sizes
|
||||
* adds scroll position reset on location change (issue [#279](https://github.com/lrsjng/h5ai/issues/279))
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
|
||||
#delete {
|
||||
display: none;
|
||||
.topbar-right;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
&.failed {
|
||||
background-color: rgba(255,0,0,0.5);
|
||||
}
|
||||
}
|
||||
@ -1,89 +0,0 @@
|
||||
|
||||
#content {
|
||||
border: 1px dashed #fff;
|
||||
border-radius: 8px;
|
||||
.transition(border-color 0.2s ease-in-out);
|
||||
|
||||
&.hint {
|
||||
border-color: #ddd;
|
||||
}
|
||||
&.match {
|
||||
border-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#uploads {
|
||||
width: 450px;
|
||||
margin: 12px auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
.upload {
|
||||
color: #555;
|
||||
font-size: 0.9em;
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
content: '•';
|
||||
color: #55c;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.size {
|
||||
display: none;
|
||||
float: right;
|
||||
white-space: nowrap;
|
||||
|
||||
&:after {
|
||||
content: ' bytes'
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
float: right;
|
||||
white-space: nowrap;
|
||||
color: #c55;
|
||||
}
|
||||
|
||||
.finished {
|
||||
float: right;
|
||||
white-space: nowrap;
|
||||
color: #008200;
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: inline-block;
|
||||
margin: 4px 8px;
|
||||
|
||||
width: 84px;
|
||||
height: 8px;
|
||||
background-color: #ddd;
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
|
||||
.bar {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&.finished .name:before {
|
||||
content: '✔';
|
||||
color: #008200;
|
||||
}
|
||||
&.error .name:before {
|
||||
content: '✖';
|
||||
color: #c55;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,6 +8,7 @@
|
||||
color: @col;
|
||||
background-color: rgba(0,0,0,0);
|
||||
width: 30px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.current {
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
html {
|
||||
min-height: 100%;
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
|
||||
&.js .noJsMsg {
|
||||
display: none;
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
|
||||
#langSelector {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.langOptions {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
right: 0;
|
||||
top: 0;
|
||||
max-height: 200px;
|
||||
background-color: @col-widget-back;
|
||||
border: @border-widget;
|
||||
|
||||
.sp-scrollbar {
|
||||
margin: 0;
|
||||
width: 6px;
|
||||
background-color: @col-sb-back;
|
||||
cursor: pointer;
|
||||
|
||||
.sp-thumb {
|
||||
background-color: @col-sb-thumb;
|
||||
}
|
||||
&.active .sp-thumb {
|
||||
background-color: @col-sb-thumb-active;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 8px 24px 10px 24px;
|
||||
white-space: nowrap;
|
||||
border-top: @border-widget-sep;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
&.current {
|
||||
color: #333;
|
||||
background-color: @col-widget-back-sel;
|
||||
}
|
||||
&:hover {
|
||||
color: @col-hover;
|
||||
background-color: @col-widget-back-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 50px;
|
||||
z-index: 1;
|
||||
z-index: 10;
|
||||
|
||||
background-color: @col-widget-back;
|
||||
border: @border-widget;
|
||||
|
||||
@ -7,9 +7,6 @@
|
||||
.current {
|
||||
display: block;
|
||||
}
|
||||
.view span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#view.view-details {
|
||||
.header .label, .item .label {
|
||||
@ -21,7 +18,6 @@
|
||||
}
|
||||
#view.view-icons {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
#bottombar {
|
||||
.center {
|
||||
@ -54,7 +50,7 @@ a[href]:after {
|
||||
position: static;
|
||||
margin-top: 2em;
|
||||
}
|
||||
#tree {
|
||||
#tree, #sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
133
src/_h5ai/client/css/inc/sidebar.less
Normal file
133
src/_h5ai/client/css/inc/sidebar.less
Normal file
@ -0,0 +1,133 @@
|
||||
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
right: -220px;
|
||||
width: 200px;
|
||||
top: 31px;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
overflow: auto;
|
||||
padding: 8px;
|
||||
background-color: @col-widget-back;
|
||||
border-left: @border-widget;
|
||||
|
||||
.sp-scrollbar {
|
||||
width: 6px;
|
||||
background-color: @col-sb-back;
|
||||
cursor: pointer;
|
||||
|
||||
.sp-thumb {
|
||||
background-color: @col-sb-thumb;
|
||||
}
|
||||
&.active .sp-thumb {
|
||||
background-color: @col-sb-thumb-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#settings {
|
||||
a, a:active, a:visited, span.element {
|
||||
color: @col;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover, &.hover {
|
||||
.topbar-hover;
|
||||
}
|
||||
}
|
||||
.current {
|
||||
a, span.element {
|
||||
.topbar-highlight;
|
||||
}
|
||||
}
|
||||
img {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
img + span, img + input {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.view {
|
||||
display: inline-block;
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.select {
|
||||
background-color: @col-widget-back-highlight;
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input, select {
|
||||
font-family: @font-family;
|
||||
font-size: 13px;
|
||||
font-weight: @font-weight;
|
||||
color: @col;
|
||||
background-color: @col-widget-back;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border: 0 solid #000;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
padding: 0 4px;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
-webkit-appearance: none;
|
||||
border-width: 0;
|
||||
border-radius: 2px;
|
||||
background-color: #eee;
|
||||
height: 12px;
|
||||
vertical-align: middle;
|
||||
width: 64px;
|
||||
margin: 0 0 4px 12px;
|
||||
}
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 2px;
|
||||
background-color: #aaa;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
input[type='range']::-moz-range-track {
|
||||
-moz-appearance: none;
|
||||
border-width: 0;
|
||||
border-radius: 2px;
|
||||
background-color: #eee;
|
||||
height: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
input[type='range']::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 2px;
|
||||
background-color: #aaa;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 31px;
|
||||
top: 31px;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
overflow: auto;
|
||||
|
||||
@ -5,10 +5,9 @@
|
||||
@import "inc/general";
|
||||
@import "inc/topbar";
|
||||
@import "inc/bottombar";
|
||||
@import "inc/sidebar";
|
||||
@import "inc/download";
|
||||
@import "inc/delete";
|
||||
@import "inc/filter";
|
||||
@import "inc/l10n";
|
||||
@import "inc/tree";
|
||||
@import "inc/qrcode";
|
||||
@import "inc/preview";
|
||||
@ -24,7 +23,6 @@
|
||||
@import "inc/view-icons";
|
||||
@import "inc/view-grid";
|
||||
// @import "inc/context-menu";
|
||||
@import "inc/dropbox";
|
||||
@import "inc/fallback";
|
||||
|
||||
@import "inc/responsive";
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<title id="title9167">Gnome Symbolic Icon Theme</title>
|
||||
<metadata id="metadata90">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<dc:title>Gnome Symbolic Icon Theme</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g id="layer12" transform="translate(-40,-518)">
|
||||
<path id="path10839" style="block-progression:tb;text-indent:0;color:#555555;enable-background:new;text-transform:none;fill:#555555" d="m48 519.03c-3.8533 0-6.9688 3.1155-6.9688 6.9688s3.1155 6.9688 6.9688 6.9688 6.9688-3.1155 6.9688-6.9688-3.1155-6.9688-6.9688-6.9688zm-3 3.97h1c0.01037-0.00012 0.02079-0.00046 0.03125 0 0.25495 0.0112 0.50987 0.12858 0.6875 0.3125l1.281 1.28 1.312-1.28c0.266-0.23 0.447-0.3 0.688-0.31h1v1c0 0.28647-0.03434 0.55065-0.25 0.75l-1.2812 1.2812 1.25 1.25c0.188 0.19 0.281 0.45 0.281 0.72v1h-1c-0.2653-0.00001-0.53059-0.0931-0.71875-0.28125l-1.281-1.28-1.281 1.28c-0.188 0.19-0.454 0.28-0.719 0.28h-1v-1c-0.000003-0.26529 0.09306-0.53058 0.28125-0.71875l1.2812-1.25-1.281-1.28c-0.21-0.19-0.303-0.47-0.281-0.75v-1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -11,8 +11,8 @@ modulejs.define('ext/l10n', ['_', '$', 'core/settings', 'core/langs', 'core/form
|
||||
isoCode: 'en',
|
||||
lang: 'english',
|
||||
details: 'details',
|
||||
list: "list",
|
||||
grid: "grid",
|
||||
list: 'list',
|
||||
grid: 'grid',
|
||||
icons: 'icons',
|
||||
name: 'Name',
|
||||
lastModified: 'Last modified',
|
||||
@ -28,11 +28,8 @@ modulejs.define('ext/l10n', ['_', '$', 'core/settings', 'core/langs', 'core/form
|
||||
'delete': 'delete'
|
||||
},
|
||||
|
||||
template = '<span id="langSelector">' +
|
||||
'<span class="l10n-isoCode"/> - <span class="l10n-lang"/>' +
|
||||
'<span class="langOptions"><ul/></span>' +
|
||||
'</span>',
|
||||
langOptionTemplate = '<li class="langOption"/>',
|
||||
blockTemplate = '<div class="block"><div class="select"><select id="langs"/></div></div>',
|
||||
optionTemplate = '<option/>',
|
||||
|
||||
storekey = 'ext/l10n',
|
||||
|
||||
@ -47,12 +44,14 @@ modulejs.define('ext/l10n', ['_', '$', 'core/settings', 'core/langs', 'core/form
|
||||
currentLang = lang;
|
||||
}
|
||||
|
||||
$('#langs option')
|
||||
.removeAttr('selected').removeProp('selected')
|
||||
.filter('.' + currentLang.isoCode)
|
||||
.attr('selected', 'selected').prop('selected', 'selected');
|
||||
|
||||
$.each(currentLang, function (key, value) {
|
||||
$('.l10n-' + key).text(value);
|
||||
});
|
||||
$('.langOption').removeClass('current');
|
||||
$('.langOption.' + currentLang.isoCode).addClass('current');
|
||||
|
||||
format.setDefaultDateFormat(currentLang.dateFormat);
|
||||
|
||||
$('#items .item .date').each(function () {
|
||||
@ -107,46 +106,24 @@ modulejs.define('ext/l10n', ['_', '$', 'core/settings', 'core/langs', 'core/form
|
||||
|
||||
initLangSelector = function (langs) {
|
||||
|
||||
var $langSelector = $(template).appendTo('#bottombar .right'),
|
||||
$langOptions = $langSelector.find('.langOptions'),
|
||||
$ul = $langOptions.find('ul'),
|
||||
isoCodes = [];
|
||||
|
||||
$.each(langs, function (isoCode) {
|
||||
isoCodes.push(isoCode);
|
||||
});
|
||||
isoCodes.sort();
|
||||
|
||||
$.each(isoCodes, function (idx, isoCode) {
|
||||
$(langOptionTemplate)
|
||||
.addClass(isoCode)
|
||||
.text(isoCode + ' - ' + (_.isString(langs[isoCode]) ? langs[isoCode] : langs[isoCode].lang))
|
||||
.appendTo($ul)
|
||||
.click(function () {
|
||||
var isoCodes = _.keys(langs).sort(),
|
||||
$block = $(blockTemplate),
|
||||
$select = $block.find('select')
|
||||
.on('change', function (event) {
|
||||
var isoCode = event.target.value;
|
||||
store.put(storekey, isoCode);
|
||||
localize(langs, isoCode, false);
|
||||
});
|
||||
|
||||
$.each(isoCodes, function (idx, isoCode) {
|
||||
$(optionTemplate)
|
||||
.attr('value', isoCode)
|
||||
.addClass(isoCode)
|
||||
.text(isoCode + ' - ' + (_.isString(langs[isoCode]) ? langs[isoCode] : langs[isoCode].lang))
|
||||
.appendTo($select);
|
||||
});
|
||||
$langOptions
|
||||
.append($ul)
|
||||
.scrollpanel();
|
||||
|
||||
$langSelector.hover(
|
||||
function () {
|
||||
$langOptions
|
||||
.css('top', '-' + $langOptions.outerHeight() + 'px')
|
||||
.stop(true, true)
|
||||
.fadeIn();
|
||||
|
||||
// needs to be updated twice for initial fade in rendering :/
|
||||
$langOptions.scrollpanel('update').scrollpanel('update');
|
||||
},
|
||||
function () {
|
||||
$langOptions
|
||||
.stop(true, true)
|
||||
.fadeOut();
|
||||
}
|
||||
);
|
||||
$block.appendTo('#settings');
|
||||
},
|
||||
|
||||
init = function () {
|
||||
|
||||
@ -172,7 +172,7 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
|
||||
|
||||
$document
|
||||
.on('mousedown', '.noSelection', noSelection)
|
||||
.on('mousedown', '.noSelectionUnlessCtrl,input,a', noSelectionUnlessCtrl)
|
||||
.on('mousedown', '.noSelectionUnlessCtrl,input,select,a', noSelectionUnlessCtrl)
|
||||
.on('mousedown', selectionStart);
|
||||
};
|
||||
|
||||
|
||||
@ -10,20 +10,24 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
||||
}, allsettings.view),
|
||||
|
||||
storekey = 'viewmode',
|
||||
menuIsVisible = false,
|
||||
|
||||
template = '<li id="view-[MODE]" class="view">' +
|
||||
'<a href="#">' +
|
||||
'<img src="' + resource.image('view-[MODE]') + '" alt="view-[MODE]"/>' +
|
||||
'<span class="l10n-[MODE]"/>' +
|
||||
'</a>' +
|
||||
'</li>',
|
||||
sidebarToggleTemplate =
|
||||
'<li id="menu-toggle" class="view">' +
|
||||
'<a href="#">' +
|
||||
'<img src="' + resource.image('settings') + '" alt="settings"/>' +
|
||||
'</a>' +
|
||||
'</li>',
|
||||
|
||||
sizeTemplate = '<li id="view-[SIZE]" class="view">' +
|
||||
'<a href="#">' +
|
||||
'<img src="' + resource.image('size') + '" alt="size"/>' +
|
||||
'<span>[SIZE]</span>' +
|
||||
'</a>' +
|
||||
'</li>',
|
||||
modeTemplate =
|
||||
'<div id="view-[MODE]" class="view">' +
|
||||
'<a href="#">' +
|
||||
'<img src="' + resource.image('view-[MODE]') + '" alt="view-[MODE]"/>' +
|
||||
'</a>' +
|
||||
'</div>',
|
||||
|
||||
sizeTemplate =
|
||||
'<input id="view-size" type="range" min="0" max="0" value="0">',
|
||||
|
||||
adjustSpacing = function () {
|
||||
|
||||
@ -57,29 +61,44 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
||||
|
||||
_.each(sizes, function (s) {
|
||||
if (s === size) {
|
||||
$('#view-' + s).addClass('current');
|
||||
$view.addClass('size-' + s).show();
|
||||
} else {
|
||||
$('#view-' + s).removeClass('current');
|
||||
$view.removeClass('size-' + s);
|
||||
}
|
||||
});
|
||||
|
||||
$('#view-size').val(_.indexOf(_.intersection(sizes, settings.sizes), size));
|
||||
|
||||
adjustSpacing();
|
||||
},
|
||||
|
||||
init = function () {
|
||||
|
||||
var $navbar = $('#navbar');
|
||||
var $sidebar = $('#sidebar'),
|
||||
$settings = $('#settings'),
|
||||
$viewBlock = $('<div class="block"/>'),
|
||||
max;
|
||||
|
||||
$(sidebarToggleTemplate)
|
||||
.on('click', 'a', function (event) {
|
||||
|
||||
menuIsVisible = !menuIsVisible;
|
||||
$sidebar.stop().animate({
|
||||
right: menuIsVisible ? 0 : -$sidebar.outerWidth()-1
|
||||
});
|
||||
event.preventDefault();
|
||||
})
|
||||
.appendTo('#navbar');
|
||||
|
||||
settings.modes = _.intersection(settings.modes, modes);
|
||||
|
||||
if (settings.modes.length > 1) {
|
||||
_.each(modes.slice(0).reverse(), function (mode) {
|
||||
_.each(modes, function (mode) {
|
||||
if (_.contains(settings.modes, mode)) {
|
||||
$(template.replace(/\[MODE\]/g, mode))
|
||||
.appendTo($navbar)
|
||||
$(modeTemplate.replace(/\[MODE\]/g, mode))
|
||||
.appendTo($viewBlock)
|
||||
.on('click', 'a', function (event) {
|
||||
|
||||
update(mode);
|
||||
event.preventDefault();
|
||||
});
|
||||
@ -88,18 +107,18 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
||||
}
|
||||
|
||||
if (settings.sizes.length > 1) {
|
||||
_.each(sizes.slice(0).reverse(), function (size) {
|
||||
if (_.contains(settings.sizes, size)) {
|
||||
$(sizeTemplate.replace(/\[SIZE\]/g, size))
|
||||
.appendTo($navbar)
|
||||
.on('click', 'a', function (event) {
|
||||
update(null, size);
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
});
|
||||
max = settings.sizes.length-1;
|
||||
$(sizeTemplate)
|
||||
.prop('max', max).attr('max', max)
|
||||
.on('input', function (event) {
|
||||
|
||||
update(null, settings.sizes[parseInt(event.target.value, 10)]);
|
||||
})
|
||||
.appendTo($viewBlock);
|
||||
}
|
||||
|
||||
$viewBlock.appendTo($settings);
|
||||
|
||||
update();
|
||||
|
||||
event.sub('location.changed', adjustSpacing);
|
||||
|
||||
@ -52,7 +52,7 @@ Options
|
||||
"hideParentFolder": false,
|
||||
"modes": ["details", "grid", "icons"],
|
||||
"setParentFolderLabels": true,
|
||||
"sizes": [24, 48, 96],
|
||||
"sizes": [24, 32, 48, 64, 96],
|
||||
"smartBrowsing": true,
|
||||
"theme": "fallback",
|
||||
"unmanaged": ["index.html", "index.htm", "index.php"],
|
||||
|
||||
@ -39,4 +39,7 @@ html.no-js.browser( lang="en" )
|
||||
span.right
|
||||
span.center
|
||||
|
||||
div#sidebar
|
||||
div#settings
|
||||
|
||||
div#fallback !{fallback}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user