diff --git a/packages/music-library-app/src/common/_global-modifiers.scss b/packages/music-library-app/src/common/_global-modifiers.scss new file mode 100644 index 00000000..dbeaaca9 --- /dev/null +++ b/packages/music-library-app/src/common/_global-modifiers.scss @@ -0,0 +1,9 @@ +.flex-column { + display: flex; + flex-direction: column; +} + +.flex-row { + display: flex; + flex-direction: row; +} diff --git a/packages/music-library-app/src/index.scss b/packages/music-library-app/src/index.scss index 2b3334af..08efe5ef 100644 --- a/packages/music-library-app/src/index.scss +++ b/packages/music-library-app/src/index.scss @@ -1,4 +1,5 @@ @import "./common/blueprint-overrides"; +@import "./common/global-modifiers"; body { height: 100%; diff --git a/packages/music-library-app/src/ui/libraryView.module.scss b/packages/music-library-app/src/ui/libraryView.module.scss index 67c6dbe6..22f53d76 100644 --- a/packages/music-library-app/src/ui/libraryView.module.scss +++ b/packages/music-library-app/src/ui/libraryView.module.scss @@ -12,13 +12,22 @@ } } -.libraryHeader { - padding: bp.$pt-grid-size * 2; +.libraryLoaded { + height: 100%; + position: relative; } -.libraryLoaded { - .loadLibraryButton { - float: right; - margin: $double-grid-size; - } +.loadLibraryButton { + position: absolute; + right: $double-grid-size; + top: $double-grid-size; +} + +.library { + width: 100%; + height: 100%; +} + +.libraryHeader { + padding: bp.$pt-grid-size * 2; } diff --git a/packages/music-library-app/src/ui/libraryView.tsx b/packages/music-library-app/src/ui/libraryView.tsx index 82a5e3fe..0295eac6 100644 --- a/packages/music-library-app/src/ui/libraryView.tsx +++ b/packages/music-library-app/src/ui/libraryView.tsx @@ -16,6 +16,7 @@ import ResizeHandle from "./resizeHandle"; import { appStore } from "./store/appStore"; import styles from "./libraryView.module.scss"; +import classNames from "classnames"; declare global { interface Window { @@ -102,7 +103,7 @@ function Library(props: LibraryProps) { const masterPlaylist = getMasterPlaylist(props.library); return ( -
Date created: {format(props.library.Date, "Pp")}