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>
`; `;
}; };

15
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,12 +37,20 @@ 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
<app-slot data-target="menu-layout.appSlot"></app-slot> ? 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>
</div>
</div> </div>
`; `;
}; };

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

@@ -1,82 +1,96 @@
.menu-item { .menu-item {
&.divider { &.divider {
display: block; display: block;
height: 1px; height: 1px;
width: 80%; width: 80%;
margin: 1px auto; margin: 1px auto;
border-bottom: 1px solid $gray-08; border-bottom: 1px solid $gray-08;
} }
&.menu-header { &.menu-header {
flex: 1; flex: 1;
align-self: center; align-self: center;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
text-decoration: underline; text-decoration: underline;
margin: 8px auto; margin: 8px auto;
font-family: Roboto; font-family: Roboto;
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; background-color: $black;
background-color: $black; color: $gray-01;
color: $gray-01; border-radius: 0;
border-radius: 0; padding: 2px 0;
padding: 2px 0; height: 44px;
height: 44px; text-align: left;
text-align: left; padding-left: 80px;
padding-left: 80px; &:hover {
&:hover { color: $white;
color: $white; background-color: $gray-10;
background-color: $gray-10; }
} }
} &.selected {
} app-link {
&.selected { [data-target='app-link.main'] {
app-link { background-color: $gray-09;
[data-target="app-link.main"] { }
background-color: $gray-09; }
} }
} &.--retract {
} position: absolute;
[data-target="menu-item.customButton"] { bottom: 0;
grid-area: custom; width: 100%;
display: flex; }
width: 10px; [data-target='menu-item.customButton'] {
height: 100%; grid-area: custom;
background-color: $blue-09; display: flex;
cursor: pointer; width: 10px;
user-select: none; height: 100%;
align-items: center; background-color: $blue-09;
justify-content: center; cursor: pointer;
overflow: hidden; user-select: none;
transition: width 0.3s; align-items: center;
color: transparent; justify-content: center;
* { overflow: hidden;
visibility: hidden; transition: width 0.3s;
} color: transparent;
} * {
&:hover { visibility: hidden;
[data-target="menu-item.customButton"] { }
grid-area: custom; }
width: 50px; &:hover {
transition: color 0.3s step-start; [data-target='menu-item.customButton'] {
color: $white; grid-area: custom;
* { width: 50px;
transition: visibility 0.3s; transition: color 0.3s step-start;
} color: $white;
&:hover { * {
background-color: $blue-08; transition: visibility 0.3s;
} }
} &:hover {
} background-color: $blue-08;
} }
}
}
}
@media (max-width: 600px) {
menu-item {
[data-target='menu-item.itemEl'] {
[data-target='menu-item.customButton'] {
grid-area: custom;
width: 50px;
color: $white;
}
}
}
} }

95
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;
width: 100%; flex-wrap: wrap;
min-height: 100vh; width: 100%;
grid-template-columns: 301px auto; .app-sidebar {
grid-template-areas: 'sidebar content';
app-menu {
[data-target='app-menu.sidebar'] {
grid-area: sidebar;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 301px; width: 301px;
border-right: 1px solid $gray-08; [data-target='app-menu.sidebar'] {
background-color: $black; z-index: 100;
position: fixed;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
width: 301px;
border-right: 1px solid #6b6b6b;
background-color: #181818;
}
} }
} .app-content {
flex: 1;
app-slot {
[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;
}
}
}
}
}