zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-06-12 14:06:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: implement sidebar animation for smaller screens

Browse Source 
FIXME: This is a very very hacky implementation. I hate it
but I am not able to find a better solution. Simpler solutions
have performance issues as there are too many elements on the page
to be re-rendered.
This commit is contained in:
Jesse Chan
2020-08-22 00:15:46 +08:00
parent 834d016b1b
commit f1bb524324
4 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/javascript/components/torrent-list/ActionBar.js
+3 -8
View File
@@ -41,14 +41,9 @@ class ActionBar extends React.Component {
}
handleSidebarChange() {
const sidebar = document.getElementsByClassName('application__sidebar')[0];
if (sidebar != null) {
const expanded = window.getComputedStyle(sidebar, null).getPropertyValue('display') !== 'none';
if (expanded) {
sidebar.style.display = 'none';
} else {
sidebar.style.display = 'block';
}
const view = document.getElementsByClassName('application__view')[0];
if (view != null) {
view.classList.toggle('application__view--sidebar-alternative-state');
}
}
client/src/sass/base/_layout.scss
+36
View File
@@ -26,6 +26,36 @@ body {
justify-content: center;
height: 100%;
width: 100%;
&--sidebar-alternative-state {
.application__sidebar {
display: none;
}
@media (max-width: 720px) {
.application__sidebar {
display: block;
transform: translateX(120px);
z-index: unset;
}
.application__content {
transform: translateX(120px);
.modal {
transform: translateX(-240px);
}
.context-menu__items {
transform: translateX(-240px);
}
.table__heading__resize-line {
left: -240px;
}
}
}
}
}
&__content {
@@ -37,6 +67,12 @@ body {
justify-content: center;
position: relative;
min-width: 60px;
transition: transform 0.2s;
@media (max-width: 720px) {
width: 100vw;
transform: translateX(-120px);
}
}
&__panel {
client/src/sass/components/_sidebar.scss
+2 -2
View File
@@ -9,10 +9,10 @@
overflow: auto;
position: relative;
z-index: 2;
transition: transform 0.2s;
display: block;
@media (max-width: 720px) {
display: none;
transform: translateX(-120px);
}
}
}
client/src/sass/style.scss.d.ts
Vendored
+5 -3
View File
@@ -107,7 +107,12 @@ declare const styles: {
readonly app: string;
readonly application: string;
readonly application__view: string;
readonly 'application--sidebar-alternative-state': string;
readonly application__sidebar: string;
readonly 'application__view--sidebar-alternative-state': string;
readonly application__content: string;
readonly modal: string;
readonly 'table__heading__resize-line': string;
readonly application__panel: string;
readonly 'application__panel--torrent-list': string;
readonly 'is-open': string;
@@ -310,7 +315,6 @@ declare const styles: {
readonly tooltip__wrapper: string;
readonly 'mediainfo__copy-button': string;
readonly mediainfo__output: string;
readonly modal: string;
readonly modal__overlay: string;
readonly 'modal--align-center': string;
readonly modal__tabs: string;
@@ -376,7 +380,6 @@ declare const styles: {
readonly search: string;
readonly textbox: string;
readonly 'is-in-use': string;
readonly application__sidebar: string;
readonly 'sidebar__icon-button': string;
readonly 'sidebar__icon-button--interactive': string;
readonly 'sidebar__action--last': string;
@@ -413,7 +416,6 @@ declare const styles: {
readonly 'table__heading--fill': string;
readonly table__heading__handle: string;
readonly table__heading__label: string;
readonly 'table__heading__resize-line': string;
readonly 'table__heading__column-fill': string;
readonly table__cell: string;
readonly 'textbox-repeater': string;