style stuff
This commit is contained in:
parent
1230cc1f21
commit
e2e62e7e25
8 changed files with 318 additions and 302 deletions
191
resources/assets/less/yuuno/alert.less
Normal file
191
resources/assets/less/yuuno/alert.less
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
/*
|
||||
* Notification styling
|
||||
*/
|
||||
.alerts {
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
z-index: 3;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 100%;
|
||||
max-width: 600px;
|
||||
text-align: right;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.alert {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-height: 80px;
|
||||
background: rgba(113, 74, 150, .9);
|
||||
border: 1px solid #507;
|
||||
color: #FFF;
|
||||
padding: 2px 0 2px 2px;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, .9);
|
||||
pointer-events: auto;
|
||||
|
||||
&--enter {
|
||||
animation: slideInFromRight 1 .4s, fadeIn 1 .4s;
|
||||
}
|
||||
|
||||
&--exit {
|
||||
animation: slideOutToBottom 1 .4s, fadeOut 1 .4s;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
vertical-align: middle;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-inner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&-inner--image {
|
||||
max-height: 80px;
|
||||
max-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
min-width: 350px;
|
||||
max-width: 450px;
|
||||
padding-right: 6px;
|
||||
border-left: 1px solid #507;
|
||||
margin-left: 2px;
|
||||
flex-grow: 2;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 300;
|
||||
font-size: 1.7em;
|
||||
line-height: 1.5em;
|
||||
padding-left: 4px;
|
||||
border-bottom: 1px solid #507;
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
&__close {
|
||||
font-size: 0;
|
||||
width: 3px;
|
||||
line-height: 100%;
|
||||
background: #507;
|
||||
margin-top: -3px;
|
||||
margin-bottom: -3px;
|
||||
padding: 0 1px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: .1s;
|
||||
|
||||
&:before {
|
||||
font-family: FontAwesome;
|
||||
content: "\f00d";
|
||||
}
|
||||
|
||||
&-inner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.alert__close {
|
||||
font-size: 2em;
|
||||
width: 20px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.alerts {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: none;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.alert {
|
||||
min-height: 40px;
|
||||
width: 100%;
|
||||
background: rgba(113, 74, 150, 1);
|
||||
border: 0;
|
||||
margin: 0 !important;
|
||||
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&-inner {
|
||||
&--font {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
&--image {
|
||||
max-height: 40px;
|
||||
max-width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
border-left: 0;
|
||||
margin: 0;
|
||||
padding-left: 4px;
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__close {
|
||||
height: 40px !important;
|
||||
width: 40px !important;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
margin-right: 4px;
|
||||
visibility: visible;
|
||||
flex-shrink: 0;
|
||||
font-size: 2em !important;
|
||||
|
||||
&-inner {
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
82
resources/assets/less/yuuno/dropdown.less
Normal file
82
resources/assets/less/yuuno/dropdown.less
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
.dropDown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner {
|
||||
display: inline-block;
|
||||
background: rgba(12, 12, 12, .7);
|
||||
min-width: 200px;
|
||||
border: 2px solid #9475B2;
|
||||
float: left;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
text-align: left;
|
||||
margin: 0 2px;
|
||||
transition: background .5s;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner:hover {
|
||||
background: rgba(21, 21, 21, .8);
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a {
|
||||
padding: 0 1px 0 4px;
|
||||
display: none;
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
clear: both;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a:hover {
|
||||
background: rgba(21, 21, 21, .5);
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a:active {
|
||||
background: rgba(21, 21, 21, .7);
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a.dropDownSelected {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner:hover a {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a.dropDownDesc {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner:hover a.dropDownDesc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
.dropDown {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner {
|
||||
float: none !important;
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a {
|
||||
padding: 3px 6px;
|
||||
float: none !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a:not(:last-child) {
|
||||
border-bottom: 2px solid #9475B2;
|
||||
}
|
||||
|
||||
.membersPageList {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -5,6 +5,8 @@
|
|||
|
||||
/* Import bbcode specific style */
|
||||
@import "bbcode";
|
||||
@import "alert";
|
||||
@import "dropdown";
|
||||
|
||||
/*
|
||||
* Animation Keyframes
|
||||
|
|
@ -312,87 +314,10 @@ a.default:active {
|
|||
margin: 10px 0 10px 30px;
|
||||
}
|
||||
|
||||
.dropDown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner {
|
||||
display: inline-block;
|
||||
background: rgba(12, 12, 12, .7);
|
||||
min-width: 200px;
|
||||
border: 2px solid #9475B2;
|
||||
float: left;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
text-align: left;
|
||||
margin: 0 2px;
|
||||
transition: background .5s;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner:hover {
|
||||
background: rgba(21, 21, 21, .8);
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a {
|
||||
padding: 0 1px 0 4px;
|
||||
display: none;
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
clear: both;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a:hover {
|
||||
background: rgba(21, 21, 21, .5);
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a:active {
|
||||
background: rgba(21, 21, 21, .7);
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a.dropDownSelected {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner:hover a {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a.dropDownDesc {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner:hover a.dropDownDesc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
.dropDown {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner {
|
||||
float: none !important;
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a {
|
||||
padding: 3px 6px;
|
||||
float: none !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.dropDown .dropDownInner a:not(:last-child) {
|
||||
border-bottom: 2px solid #9475B2;
|
||||
}
|
||||
|
||||
.membersPageList {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.headerLoginContainer {
|
||||
|
|
@ -923,196 +848,6 @@ a.default:active {
|
|||
background: #A586C4;
|
||||
}
|
||||
|
||||
/*
|
||||
* Notification styling
|
||||
*/
|
||||
#notifications {
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
z-index: 3;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 100%;
|
||||
max-width: 600px;
|
||||
text-align: right;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#notifications > div {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-height: 80px;
|
||||
background: rgba(113, 74, 150, .9);
|
||||
border: 1px solid #507;
|
||||
color: #FFF;
|
||||
padding: 2px 0 2px 2px;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, .9);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#notifications > .notification-enter {
|
||||
animation: slideInFromRight 1 .4s, fadeIn 1 .4s;
|
||||
}
|
||||
|
||||
#notifications > .notification-exit {
|
||||
animation: slideOutToBottom 1 .4s, fadeOut 1 .4s;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-icon {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
vertical-align: middle;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-icon > * {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-icon > img {
|
||||
max-height: 80px;
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-content {
|
||||
min-width: 350px;
|
||||
max-width: 450px;
|
||||
padding-right: 6px;
|
||||
border-left: 1px solid #507;
|
||||
margin-left: 2px;
|
||||
flex-grow: 2;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-content > .notification-title {
|
||||
font-weight: 300;
|
||||
font-size: 1.7em;
|
||||
line-height: 1.5em;
|
||||
padding-left: 4px;
|
||||
border-bottom: 1px solid #507;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-content > .notification-text {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-close {
|
||||
font-size: 0;
|
||||
width: 3px;
|
||||
line-height: 100%;
|
||||
background: #507;
|
||||
margin-top: -3px;
|
||||
margin-bottom: -3px;
|
||||
padding: 0 1px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: .1s;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-close > div {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#notifications > div:hover > .notification-close {
|
||||
font-size: 2em;
|
||||
width: 20px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-close > div:before {
|
||||
font-family: FontAwesome;
|
||||
content: "\f00d";
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
#notifications {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: none;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#notifications > div {
|
||||
min-height: 40px;
|
||||
width: 100%;
|
||||
background: rgba(113, 74, 150, 1);
|
||||
border: 0;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-icon > img {
|
||||
max-height: 40px;
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-icon > .font-icon {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-content {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
border-left: 0;
|
||||
margin: 0;
|
||||
padding-left: 4px;
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-content > .notification-title {
|
||||
font-weight: 700;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-content > .notification-text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-close {
|
||||
height: 40px !important;
|
||||
width: 40px !important;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
margin-right: 4px;
|
||||
visibility: visible;
|
||||
flex-shrink: 0;
|
||||
font-size: 2em !important;
|
||||
}
|
||||
|
||||
#notifications > div > .notification-close > div {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Private Messages Styling
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -16,23 +16,24 @@ namespace Yuuno
|
|||
public static Display(alert: Sakura.INotification): void
|
||||
{
|
||||
var id = 'yuuno-alert-' + Date.now(),
|
||||
container: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'notification-enter', id),
|
||||
iconContent: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div'),
|
||||
icon: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'notification-icon'),
|
||||
inner: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'notification-content'),
|
||||
title: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'notification-title'),
|
||||
text: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'notification-text'),
|
||||
close: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'notification-close'),
|
||||
closeIcon: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div');
|
||||
container: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'alert alert--enter', id),
|
||||
iconContent: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'alert__icon-inner'),
|
||||
icon: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'alert__icon'),
|
||||
inner: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'alert__content'),
|
||||
title: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'alert__title'),
|
||||
text: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'alert__text'),
|
||||
close: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'alert__close'),
|
||||
closeIcon: HTMLDivElement = <HTMLDivElement>Sakura.DOM.Create('div', 'alert__close-inner');
|
||||
|
||||
if (alert.image === null) {
|
||||
Sakura.DOM.AddClass(iconContent, ['font-icon', 'fa', 'fa-info', 'fa-4x']);
|
||||
Sakura.DOM.AddClass(iconContent, ['alert__icon-inner--font', 'fa', 'fa-info', 'fa-4x']);
|
||||
} else if (alert.image.substring(0, 5) == 'FONT:') {
|
||||
Sakura.DOM.AddClass(iconContent, ['font-icon', 'fa', alert.image.replace('FONT:', ''), 'fa-4x']);
|
||||
Sakura.DOM.AddClass(iconContent, ['alert__icon-inner--font', 'fa', alert.image.replace('FONT:', ''), 'fa-4x']);
|
||||
} else {
|
||||
iconContent.style.background = "url(0) no-repeat center center / cover transparent".replace('0', alert.image);
|
||||
iconContent.style.width = "100%";
|
||||
iconContent.style.height = "100%";
|
||||
iconContent.className += " alert__icon-inner--image";
|
||||
}
|
||||
|
||||
Sakura.DOM.Append(icon, iconContent);
|
||||
|
|
@ -71,7 +72,7 @@ namespace Yuuno
|
|||
private static CloseAlert(id: string): void
|
||||
{
|
||||
var element: HTMLElement = Sakura.DOM.ID(id);
|
||||
Sakura.DOM.AddClass(element, ['notification-exit']);
|
||||
Sakura.DOM.AddClass(element, ['alert--exit']);
|
||||
setTimeout(() => {
|
||||
Sakura.DOM.Remove(element);
|
||||
}, 410);
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
{% if user.isActive %}
|
||||
<a class="menu-item avatar" href="{{ route('user.profile', user.id) }}" title="Logged in as {{ user.username }}" style="background-image: url('{{ route('user.avatar', user.id) }}'); width: auto; color: {{ user.colour }}; border-color: {{ user.colour }}; font-weight: 700;"></a>
|
||||
{#<a class="menu-item fa-envelope" href="#" title="Messages"></a>#}
|
||||
<a class="menu-item fa-bell" href="javascript:;" title="Notifications"></a>
|
||||
{% if user.permission(constant('Sakura\\Perms\\Manage::USE_MANAGE'), constant('Sakura\\Perms::MANAGE')) %}
|
||||
<a class="menu-item fa-gavel" href="{{ route('manage.index') }}" title="Manage"></a>
|
||||
{% endif %}
|
||||
|
|
@ -62,7 +63,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="contentwrapper">
|
||||
<div id="notifications"></div>
|
||||
<div id="notifications" class="alerts"></div>
|
||||
{% if profile is defined ? profile.background : (user.permission(constant('Sakura\\Perms\\Site::CHANGE_BACKGROUND')) and (user.backgroundSitewide or showBG) and user.background) %}
|
||||
<div id="userBackground" style="background-image: url('{{ route('user.background', (profile is defined ? profile : user).id) }}');"></div>
|
||||
{% endif %}
|
||||
|
|
@ -112,7 +113,7 @@
|
|||
</div>
|
||||
<div class="footer">
|
||||
<div class="ftsections">
|
||||
<div class="copycentre">Powered by <a href="https://github.com/flashwave/sakura/">Sakura</a> © 2013-2016 <a href="http://flash.moe/">Flashwave</a></div>
|
||||
<div class="copycentre">Powered by <a href="https://github.com/flashwave/sakura/">Sakura</a> © 2013-2016 <a href="http://aitemu.moe/">Aitemu</a></div>
|
||||
<ul class="ftsection">
|
||||
<li class="fthead">General</li>
|
||||
<li><a href="{{ route('main.index') }}">Home</a></li>
|
||||
|
|
@ -128,7 +129,7 @@
|
|||
<li><a href="https://twitter.com/_flashii">Twitter</a></li>
|
||||
<li><a href="https://youtube.com/user/flashiinet">YouTube</a></li>
|
||||
<li><a href="https://steamcommunity.com/groups/flashiinet">Steam</a></li>
|
||||
<li><a href="https://github.com/flashii">GitHub</a></li>
|
||||
<li><a href="https://github.com/aitemu">GitHub</a></li>
|
||||
</ul>
|
||||
<ul class="ftsection">
|
||||
<li class="fthead">Information</li>
|
||||
|
|
|
|||
|
|
@ -6,27 +6,6 @@
|
|||
{% include 'elements/indexPanel.twig' %}
|
||||
</div>
|
||||
<div class="content-left content-column">
|
||||
<div class="head">Temporary avatar upload test form!!</div>
|
||||
<form enctype="multipart/form-data" method="post" action="{{ route('user.avatar', user.id) }}" style="margin: 1em">
|
||||
<input type="hidden" name="MAX_FILE_SIZE" value="{{ config('file.avatar.max_file_size') }}">
|
||||
<input type="hidden" name="session" value="{{ session_id() }}">
|
||||
<input type="file" name="file">
|
||||
<button>upload</button>
|
||||
</form>
|
||||
<div class="head">Temporary <del>avatar</del> background upload test form!!</div>
|
||||
<form enctype="multipart/form-data" method="post" action="{{ route('user.background', user.id) }}" style="margin: 1em">
|
||||
<input type="hidden" name="MAX_FILE_SIZE" value="{{ config('file.background.max_file_size') }}">
|
||||
<input type="hidden" name="session" value="{{ session_id() }}">
|
||||
<input type="file" name="file">
|
||||
<button>upload</button>
|
||||
</form>
|
||||
<div class="head">Temporary <del>avatar background</del> header upload test form!!</div>
|
||||
<form enctype="multipart/form-data" method="post" action="{{ route('user.header', user.id) }}" style="margin: 1em">
|
||||
<input type="hidden" name="MAX_FILE_SIZE" value="{{ config('file.header.max_file_size') }}">
|
||||
<input type="hidden" name="session" value="{{ session_id() }}">
|
||||
<input type="file" name="file">
|
||||
<button>upload</button>
|
||||
</form>
|
||||
<div class="head">News</div>
|
||||
{% for post in news %}
|
||||
{% include 'elements/newsPost.twig' %}
|
||||
|
|
|
|||
21
resources/views/yuuno/profile/images.twig
Normal file
21
resources/views/yuuno/profile/images.twig
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<h1>Avatar</h1>
|
||||
<form enctype="multipart/form-data" method="post" action="{{ route('user.avatar', user.id) }}" style="margin: 1em">
|
||||
<input type="hidden" name="MAX_FILE_SIZE" value="{{ config('file.avatar.max_file_size') }}">
|
||||
<input type="hidden" name="session" value="{{ session_id() }}">
|
||||
<input type="file" name="file">
|
||||
<button>upload</button>
|
||||
</form>
|
||||
<h1>Background</h1>
|
||||
<form enctype="multipart/form-data" method="post" action="{{ route('user.background', user.id) }}" style="margin: 1em">
|
||||
<input type="hidden" name="MAX_FILE_SIZE" value="{{ config('file.background.max_file_size') }}">
|
||||
<input type="hidden" name="session" value="{{ session_id() }}">
|
||||
<input type="file" name="file">
|
||||
<button>upload</button>
|
||||
</form>
|
||||
<h1>Header</h1>
|
||||
<form enctype="multipart/form-data" method="post" action="{{ route('user.header', user.id) }}" style="margin: 1em">
|
||||
<input type="hidden" name="MAX_FILE_SIZE" value="{{ config('file.header.max_file_size') }}">
|
||||
<input type="hidden" name="session" value="{{ session_id() }}">
|
||||
<input type="file" name="file">
|
||||
<button>upload</button>
|
||||
</form>
|
||||
|
|
@ -170,6 +170,9 @@
|
|||
<a class="fa fa-reply" title="View {{ profile.username }}'s posts" href="#_posts" onclick="profileMode('posts');"></a>
|
||||
<a class="fa fa-star" title="View {{ profile.username }}'s friends" href="#_friends" onclick="profileMode('friends');"></a>
|
||||
<a class="fa fa-comments-o" title="View {{ profile.username }}'s profile comments" href="#_comments" onclick="profileMode('comments');"></a>
|
||||
{% if (profile.isActive and profile.id == user.id) or user.permission(constant('Sakura\\Perms\\Manage::CHANGE_IMAGES'), constant('Sakura\\Perms::MANAGE')) %}
|
||||
<a class="fa fa-picture-o" title="Edit your avatar, background and header" href="#_images" onclick="profileMode('images');"></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if user.isActive %}
|
||||
<div class="new-profile-actions">
|
||||
|
|
@ -207,6 +210,9 @@
|
|||
<div id="profile-mode-comments" class="hidden">
|
||||
{% include 'profile/comments.twig' %}
|
||||
</div>
|
||||
<div id="profile-mode-images" class="hidden">
|
||||
{% include 'profile/images.twig' %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="new-profile-data">
|
||||
<table style="width: 100%;">
|
||||
|
|
|
|||
Reference in a new issue