import UiCloseOverlay from "../../CloseOverlay";
import DomUtil from "../../../Dom/Util";
+export const enum Orientation {
+ Left = "left",
+ Right = "right",
+}
+
export class PageMenuContainer {
private readonly container = document.createElement("div");
private readonly content = document.createElement("div");
private focusTrap?: FocusTrap = undefined;
+ private readonly orientation: Orientation;
private readonly provider: PageMenuProvider;
- private skipCloseOverlay = false;
- constructor(provider: PageMenuProvider) {
+ constructor(provider: PageMenuProvider, orientation: Orientation) {
this.provider = provider;
+ this.orientation = orientation;
const menuId = DomUtil.identify(this.provider.getMenuButton());
UiCloseOverlay.add(`WoltLabSuite/Core/Ui/PageMenu/Container-${menuId}`, () => {
}
this.container.classList.add("pageMenuContainer");
+ this.container.dataset.orientation = this.orientation;
this.container.hidden = true;
this.container.addEventListener("click", (event) => {
if (event.target === this.container) {
CloseOverlay_1 = (0, tslib_1.__importDefault)(CloseOverlay_1);
Util_1 = (0, tslib_1.__importDefault)(Util_1);
class PageMenuContainer {
- constructor(provider) {
+ constructor(provider, orientation) {
this.container = document.createElement("div");
this.content = document.createElement("div");
this.focusTrap = undefined;
- this.skipCloseOverlay = false;
this.provider = provider;
+ this.orientation = orientation;
const menuId = Util_1.default.identify(this.provider.getMenuButton());
CloseOverlay_1.default.add(`WoltLabSuite/Core/Ui/PageMenu/Container-${menuId}`, () => {
if (!this.container.hidden) {
return;
}
this.container.classList.add("pageMenuContainer");
+ this.container.dataset.orientation = this.orientation;
this.container.hidden = true;
this.container.addEventListener("click", (event) => {
if (event.target === this.container) {
.pageMenuContainer {
- background-color: rgba(0, 0, 0, 0.34);
- bottom: 0;
- display: grid;
- grid-template-areas: "content";
- grid-template-columns: auto;
- left: 0;
- overflow: hidden;
- position: fixed;
- right: 0;
- top: 50px;
- z-index: 300;
+ background-color: rgba(0, 0, 0, 0.34);
+ bottom: 0;
+ display: flex;
+ left: 0;
+ overflow: hidden;
+ position: fixed;
+ right: 0;
+ top: 50px;
+ z-index: 300;
+}
+
+@include screen-sm-md {
+ .pageMenuContainer[data-orientation="right"] .pageMenuContent {
+ margin-left: auto;
+ }
+
+ .pageMenuContent {
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.19), 0 0 6px rgb(0, 0, 0, 0.23);
+ width: 400px;
+ }
}
.pageMenuContent {
- --background-color: #{$wcfUserMenuBackground};
- --background-color-active: #{$wcfUserMenuBackgroundActive};
- --border-color: #{$wcfUserMenuBorder};
- --color: #{$wcfUserMenuText};
- --color-dimmed: #{$wcfUserMenuTextDimmed};
- --color-indicator: #{$wcfUserMenuIndicator};
+ --background-color: #{$wcfUserMenuBackground};
+ --background-color-active: #{$wcfUserMenuBackgroundActive};
+ --border-color: #{$wcfUserMenuBorder};
+ --color: #{$wcfUserMenuText};
+ --color-dimmed: #{$wcfUserMenuTextDimmed};
+ --color-indicator: #{$wcfUserMenuIndicator};
- background-color: var(--background-color);
- grid-area: content;
+ background-color: var(--background-color);
+ grid-area: content;
}
.pageMenuMainContainer {
- display: flex;
- flex-direction: column;
- height: 100%;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
}
.pageMenuMainNavigationFooter {
- margin-top: auto;
+ margin-top: auto;
}
.pageMenuMainItem {
- border-bottom: 1px solid var(--border-color);
- position: relative;
+ border-bottom: 1px solid var(--border-color);
+ position: relative;
}
.pageMenuMainItemExpandable {
- display: grid;
- grid-template-areas:
- "item button"
- "list list";
- grid-template-columns: auto 44px;
+ display: grid;
+ grid-template-areas:
+ "item button"
+ "list list";
+ grid-template-columns: auto 44px;
}
.pageMenuMainItemLink {
- align-items: center;
- color: inherit;
- display: flex;
- font-weight: 600;
- grid-area: item;
- min-height: 44px;
- padding: 0 10px;
+ align-items: center;
+ color: inherit;
+ display: flex;
+ font-weight: 600;
+ grid-area: item;
+ min-height: 44px;
+ padding: 0 10px;
}
.pageMenuMainItemToggle {
- align-items: center;
- display: flex;
- justify-content: center;
- position: relative;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ position: relative;
- &::before {
- border-left: 1px solid var(--border-color);
- bottom: 10px;
- content: "";
- left: 0;
- position: absolute;
- top: 10px;
- }
+ &::before {
+ border-left: 1px solid var(--border-color);
+ bottom: 10px;
+ content: "";
+ left: 0;
+ position: absolute;
+ top: 10px;
+ }
- .icon {
- transform: rotate(0);
- }
+ .icon {
+ transform: rotate(0);
+ }
- &[aria-expanded="true"] .icon {
- transform: rotate(180deg);
- }
+ &[aria-expanded="true"] .icon {
+ transform: rotate(180deg);
+ }
}
.pageMenuMainItemList {
- grid-area: list;
+ grid-area: list;
}
.pageMenuMainItem .pageMenuMainItemList {
- padding: 10px 0 20px 0;
+ padding: 10px 0 20px 0;
- .pageMenuMainItem {
- border-bottom-width: 0;
- }
+ .pageMenuMainItem {
+ border-bottom-width: 0;
+ }
- .pageMenuMainItemLink {
- font-weight: 400;
- min-height: 34px;
- padding-left: 20px;
- }
+ .pageMenuMainItemLink {
+ font-weight: 400;
+ min-height: 34px;
+ padding-left: 20px;
+ }
}
.pageMenuMainNavigationFooter .pageMenuMainItem:last-child {
- border-bottom-width: 0;
+ border-bottom-width: 0;
}
.pageMenuUserTabContainer {
- display: flex;
- flex-direction: column;
- height: 100%;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
}
.pageMenuUserTabList {
- border-bottom: 1px solid var(--border-color);
- display: grid;
- grid-auto-columns: minmax(70px, 1fr);
- grid-auto-flow: column;
- overflow: auto;
+ border-bottom: 1px solid var(--border-color);
+ display: grid;
+ grid-auto-columns: minmax(70px, 1fr);
+ grid-auto-flow: column;
+ overflow: auto;
}
.pageMenuUserTab {
- align-items: center;
- display: flex;
- justify-content: center;
- height: 50px;
- position: relative;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ height: 50px;
+ position: relative;
- &:not(:last-child) {
- border-right: 1px solid var(--border-color);
- }
+ &:not(:last-child) {
+ border-right: 1px solid var(--border-color);
+ }
- &[aria-selected="true"] {
- background-color: var(--background-color-active);
- }
+ &[aria-selected="true"] {
+ background-color: var(--background-color-active);
+ }
}
.pageMenuUserTabPanel {
- flex: 1 auto;
+ flex: 1 auto;
}
@include screen-md-down {
- .mainMenu[aria-expanded="true"]::before {
- content: $fa-var-times;
- }
-
- .userPanel.userPanelLoggedIn[aria-expanded="true"] {
- &::before {
- content: $fa-var-times;
- color: $wcfHeaderLink;
- font-family: FontAwesome;
- font-size: 28px;
- line-height: 32px;
- padding: 5px 5px;
- }
-
- .userPanelAvatar {
- display: none;
- }
- }
+ .mainMenu[aria-expanded="true"]::before {
+ content: $fa-var-times;
+ }
+
+ .userPanel.userPanelLoggedIn[aria-expanded="true"] {
+ &::before {
+ content: $fa-var-times;
+ color: $wcfHeaderLink;
+ font-family: FontAwesome;
+ font-size: 28px;
+ line-height: 32px;
+ padding: 5px 5px;
+ }
+
+ .userPanelAvatar {
+ display: none;
+ }
+ }
}
projects / GitHub / WoltLab / WCF.git / commitdiff