FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 06:08:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added responsivenes to sidebar and layout

Browse Source
This commit is contained in:
Fran Jurmanović
2021-07-05 20:38:56 +02:00
parent c999fdc21b
commit 740b89c1d2
5 changed files with 261 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/app-menu/AppMenuElement.ts
View File

@@ -105,6 +105,11 @@ class AppMenuElement extends BaseComponentElement {
} }
return html`<menu-item data-path="${path}">${title}</menu-item>`; return html`<menu-item data-path="${path}">${title}</menu-item>`;
}; };
const menuButton = (title: string, action?: string): TemplateResult => {
return html` <div class="menu-item --retract" data-target="menu-item.itemEl">
<button class="btn btn-link" data-target="app-link.main" app-action="${action}">${title}</button>
</div>`;
};
const authMenu = (path: string, title: string, action?: string): TemplateResult => { const authMenu = (path: string, title: string, action?: string): TemplateResult => {
if (isAuth) { if (isAuth) {
return regularMenu(path, title, action); return regularMenu(path, title, action);
@@ -133,7 +138,8 @@ class AppMenuElement extends BaseComponentElement {
${authMenu('/subscriptions', 'Subscriptions', 'click:app-menu#modalSubscription')} ${authMenu('/subscriptions', 'Subscriptions', 'click:app-menu#modalSubscription')}
${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)} ${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)}
<span class="menu-item divider"></span> <span class="menu-item divider"></span>
${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')} ${notAuthMenu('/register', 'Register')} ${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')}
${notAuthMenu('/register', 'Register')}${menuButton('Retract', 'click:menu-layout#retractMenu')}
</div> </div>
`; `;
}; };

13
src/layouts/menu-layout/MenuLayoutElement.ts
View File

@@ -8,6 +8,7 @@ import { AppMainElement } from 'components/';
class MenuLayoutElement extends BaseLayoutElement { class MenuLayoutElement extends BaseLayoutElement {
@closest appMain: AppMainElement; @closest appMain: AppMainElement;
@target appPage: HTMLDivElement; @target appPage: HTMLDivElement;
@target appSidebar: HTMLDivElement;
constructor() { constructor() {
super(); super();
@@ -36,13 +37,21 @@ class MenuLayoutElement extends BaseLayoutElement {
this.update(); this.update();
}; };
retractMenu = () => {
this.appPage.classList.toggle('--retracted');
};
render = (): TemplateResult => { render = (): TemplateResult => {
const _isAuth = this.isAuth; const _isAuth = this.isAuth;
return html` return html`
<div data-target="menu-layout.appPage"> <div class="app-layout" data-target="menu-layout.appPage">
${_isAuth ? html`<app-menu></app-menu>` : html``} ${_isAuth
? html`<div class="app-sidebar" data-target="menu-layout.appSidebar"><app-menu></app-menu></div>`
: html``}
<div class="app-content">
<app-slot data-target="menu-layout.appSlot"></app-slot> <app-slot data-target="menu-layout.appSlot"></app-slot>
</div> </div>
</div>
`; `;
}; };
} }

32
src/styles/menu-item/menu-item.scss
View File

@@ -17,13 +17,12 @@
font-size: 38px !important; font-size: 38px !important;
} }
} }
menu-item {
[data-target="menu-item.itemEl"] { [data-target='menu-item.itemEl'] {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
grid-template-areas: "main custom"; grid-template-areas: 'main custom';
app-link { [data-target='app-link.main'] {
[data-target="app-link.main"] {
grid-area: main; grid-area: main;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -39,15 +38,19 @@ menu-item {
background-color: $gray-10; background-color: $gray-10;
} }
} }
}
&.selected { &.selected {
app-link { app-link {
[data-target="app-link.main"] { [data-target='app-link.main'] {
background-color: $gray-09; background-color: $gray-09;
} }
} }
} }
[data-target="menu-item.customButton"] { &.--retract {
position: absolute;
bottom: 0;
width: 100%;
}
[data-target='menu-item.customButton'] {
grid-area: custom; grid-area: custom;
display: flex; display: flex;
width: 10px; width: 10px;
@@ -65,7 +68,7 @@ menu-item {
} }
} }
&:hover { &:hover {
[data-target="menu-item.customButton"] { [data-target='menu-item.customButton'] {
grid-area: custom; grid-area: custom;
width: 50px; width: 50px;
transition: color 0.3s step-start; transition: color 0.3s step-start;
@@ -78,5 +81,16 @@ menu-item {
} }
} }
} }
}
@media (max-width: 600px) {
menu-item {
[data-target='menu-item.itemEl'] {
[data-target='menu-item.customButton'] {
grid-area: custom;
width: 50px;
color: $white;
}
}
} }
} }

83
src/styles/sidebar/sidebar.scss
View File

@@ -1,31 +1,82 @@
menu-layout { menu-layout {
[data-target='menu-layout.appPage'] { [data-target='menu-layout.appPage'] {
display: grid; &.app-layout {
position: relative; display: flex;
height: 100%; flex-direction: row;
flex-wrap: wrap;
width: 100%; width: 100%;
min-height: 100vh; .app-sidebar {
grid-template-columns: 301px auto; width: 301px;
grid-template-areas: 'sidebar content';
app-menu {
[data-target='app-menu.sidebar'] { [data-target='app-menu.sidebar'] {
grid-area: sidebar; z-index: 100;
position: absolute; position: fixed;
overflow: hidden;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 301px; width: 301px;
border-right: 1px solid $gray-08; border-right: 1px solid #6b6b6b;
background-color: $black; background-color: #181818;
} }
} }
.app-content {
app-slot { flex: 1;
[data-target='base-layout.content'] {
grid-area: content;
margin: 15px; margin: 15px;
} }
&.--retracted {
.app-sidebar {
position: absolute;
left: -302px;
[data-target='app-menu.sidebar'] {
left: -302px;
overflow: visible;
[data-target='menu-item.itemEl'] {
&.--retract {
position: absolute;
left: 60px;
button {
background-color: $white;
}
&::after {
content: '>';
margin: auto;
margin-left: -25px;
font-size: 32px;
pointer-events: none;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #000;
}
}
}
}
}
}
}
}
}
@media (max-width: 600px) {
menu-layout {
[data-target='menu-layout.appPage'] {
&.app-layout {
.app-sidebar {
width: 100%;
[data-target='app-menu.sidebar'] {
width: 100%;
}
}
&.--retracted {
.app-sidebar {
width: 301px;
[data-target='app-menu.sidebar'] {
width: 301px;
}
}
}
}
} }
} }
} }

76
src/styles/wallet-header/wallet-header.scss
View File

@@ -53,3 +53,79 @@ wallet-header {
right: 0; right: 0;
} }
} }
@media (max-width: 600px) {
.wallet-buttons {
position: relative;
height: 50px;
margin-bottom: 10px;
.button-group {
display: flex;
align-content: space-between;
button {
flex: 1;
height: 50px;
}
}
}
.wallet-header {
width: 100%;
height: 143px;
display: block;
position: relative;
.header-item {
position: absolute;
height: 143px;
&:nth-child(1) {
z-index: 15;
width: 25%;
background-color: transparent;
border: none;
height: auto;
left: 0;
bottom: 12px;
.--header {
font-size: 11px;
margin-top: 0;
}
.--content {
.--balance {
font-size: 12px;
margin-top: 0;
}
}
.--currency {
font-size: 10px;
margin-top: 0;
}
}
&:nth-child(2) {
z-index: 10;
width: 100%;
}
&:nth-child(3) {
z-index: 15;
width: 25%;
background-color: transparent;
border: none;
height: auto;
right: 0;
bottom: 12px;
.--header {
font-size: 11px;
margin-top: 0;
}
.--content {
.--balance {
font-size: 12px;
margin-top: 0;
}
}
.--currency {
font-size: 10px;
margin-top: 0;
}
}
}
}
}