From e2e62e7e25b54fe1b0595d0242baf8f76922c971 Mon Sep 17 00:00:00 2001 From: flashwave Date: Fri, 16 Sep 2016 23:00:46 +0200 Subject: [PATCH] style stuff --- resources/assets/less/yuuno/alert.less | 191 +++++++++++++ resources/assets/less/yuuno/dropdown.less | 82 ++++++ resources/assets/less/yuuno/master.less | 269 +----------------- .../assets/typescript/Yuuno/Notifications.ts | 23 +- resources/views/yuuno/master.twig | 7 +- resources/views/yuuno/meta/index.twig | 21 -- resources/views/yuuno/profile/images.twig | 21 ++ resources/views/yuuno/user/profile.twig | 6 + 8 files changed, 318 insertions(+), 302 deletions(-) create mode 100644 resources/assets/less/yuuno/alert.less create mode 100644 resources/assets/less/yuuno/dropdown.less create mode 100644 resources/views/yuuno/profile/images.twig diff --git a/resources/assets/less/yuuno/alert.less b/resources/assets/less/yuuno/alert.less new file mode 100644 index 0000000..d68f366 --- /dev/null +++ b/resources/assets/less/yuuno/alert.less @@ -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; + } + } + } +} diff --git a/resources/assets/less/yuuno/dropdown.less b/resources/assets/less/yuuno/dropdown.less new file mode 100644 index 0000000..aef59f5 --- /dev/null +++ b/resources/assets/less/yuuno/dropdown.less @@ -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; + } + +} diff --git a/resources/assets/less/yuuno/master.less b/resources/assets/less/yuuno/master.less index df128fe..3975df4 100644 --- a/resources/assets/less/yuuno/master.less +++ b/resources/assets/less/yuuno/master.less @@ -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 */ diff --git a/resources/assets/typescript/Yuuno/Notifications.ts b/resources/assets/typescript/Yuuno/Notifications.ts index d1f625b..40b0316 100644 --- a/resources/assets/typescript/Yuuno/Notifications.ts +++ b/resources/assets/typescript/Yuuno/Notifications.ts @@ -16,23 +16,24 @@ namespace Yuuno public static Display(alert: Sakura.INotification): void { var id = 'yuuno-alert-' + Date.now(), - container: HTMLDivElement = Sakura.DOM.Create('div', 'notification-enter', id), - iconContent: HTMLDivElement = Sakura.DOM.Create('div'), - icon: HTMLDivElement = Sakura.DOM.Create('div', 'notification-icon'), - inner: HTMLDivElement = Sakura.DOM.Create('div', 'notification-content'), - title: HTMLDivElement = Sakura.DOM.Create('div', 'notification-title'), - text: HTMLDivElement = Sakura.DOM.Create('div', 'notification-text'), - close: HTMLDivElement = Sakura.DOM.Create('div', 'notification-close'), - closeIcon: HTMLDivElement = Sakura.DOM.Create('div'); + container: HTMLDivElement = Sakura.DOM.Create('div', 'alert alert--enter', id), + iconContent: HTMLDivElement = Sakura.DOM.Create('div', 'alert__icon-inner'), + icon: HTMLDivElement = Sakura.DOM.Create('div', 'alert__icon'), + inner: HTMLDivElement = Sakura.DOM.Create('div', 'alert__content'), + title: HTMLDivElement = Sakura.DOM.Create('div', 'alert__title'), + text: HTMLDivElement = Sakura.DOM.Create('div', 'alert__text'), + close: HTMLDivElement = Sakura.DOM.Create('div', 'alert__close'), + closeIcon: 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); diff --git a/resources/views/yuuno/master.twig b/resources/views/yuuno/master.twig index 5015a30..f580e82 100644 --- a/resources/views/yuuno/master.twig +++ b/resources/views/yuuno/master.twig @@ -49,6 +49,7 @@ {% if user.isActive %} {##} + {% if user.permission(constant('Sakura\\Perms\\Manage::USE_MANAGE'), constant('Sakura\\Perms::MANAGE')) %} {% endif %} @@ -62,7 +63,7 @@
-
+
{% if profile is defined ? profile.background : (user.permission(constant('Sakura\\Perms\\Site::CHANGE_BACKGROUND')) and (user.backgroundSitewide or showBG) and user.background) %}
{% endif %} @@ -112,7 +113,7 @@
-
Powered by Sakura © 2013-2016 Flashwave
+
Powered by Sakura © 2013-2016 Aitemu
  • Information
    • diff --git a/resources/views/yuuno/meta/index.twig b/resources/views/yuuno/meta/index.twig index 2e60b8b..84ddf6e 100644 --- a/resources/views/yuuno/meta/index.twig +++ b/resources/views/yuuno/meta/index.twig @@ -6,27 +6,6 @@ {% include 'elements/indexPanel.twig' %}
-
Temporary avatar upload test form!!
-
- - - - -
-
Temporary avatar background upload test form!!
-
- - - - -
-
Temporary avatar background header upload test form!!
-
- - - - -
News
{% for post in news %} {% include 'elements/newsPost.twig' %} diff --git a/resources/views/yuuno/profile/images.twig b/resources/views/yuuno/profile/images.twig new file mode 100644 index 0000000..b130521 --- /dev/null +++ b/resources/views/yuuno/profile/images.twig @@ -0,0 +1,21 @@ +

Avatar

+
+ + + + +
+

Background

+
+ + + + +
+

Header

+
+ + + + +
diff --git a/resources/views/yuuno/user/profile.twig b/resources/views/yuuno/user/profile.twig index 190f078..0183fe7 100644 --- a/resources/views/yuuno/user/profile.twig +++ b/resources/views/yuuno/user/profile.twig @@ -170,6 +170,9 @@ + {% if (profile.isActive and profile.id == user.id) or user.permission(constant('Sakura\\Perms\\Manage::CHANGE_IMAGES'), constant('Sakura\\Perms::MANAGE')) %} + + {% endif %}
{% if user.isActive %}
@@ -207,6 +210,9 @@ +