diff --git a/src/components/SidePane.jsx b/src/components/SidePane.jsx
index ab59dd3..8a0cd06 100644
--- a/src/components/SidePane.jsx
+++ b/src/components/SidePane.jsx
@@ -214,6 +214,7 @@ export class SidePane extends Component {
}
dropHandler(e) {
e.preventDefault();
+ // Object with `children` key is to simulate a folder structure for root folder
this.props.onFileDrop(e.dataTransfer.getData('text/plain'), {
children: this.props.files
});
diff --git a/src/components/app.jsx b/src/components/app.jsx
index 1e3a6df..a220b02 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -1283,9 +1283,17 @@ export default class App extends Component {
});
}
+ getRootClasses() {
+ const classes = [];
+ if (this.state.currentItem && this.state.currentItem.files) {
+ classes.push('is-file-mode');
+ }
+ return classes.join(' ');
+ }
+
render() {
return (
- <div>
+ <div class={this.getRootClasses()}>
<div class="main-container">
<MainHeader
externalLibCount={this.state.externalLibCount}
diff --git a/src/index.html b/src/index.html
index e6f22da..a65ecaf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -67,9 +67,9 @@
</style>
</head>
- <body class="is-project">
- <!-- SCRIPT-TAGS -->
- <%= htmlWebpackPlugin.options.ssr({
+<body>
+ <!-- SCRIPT-TAGS -->
+ <%= htmlWebpackPlugin.options.ssr({
url: '/'
}) %>
<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
diff --git a/src/style.css b/src/style.css
index 6aa9f45..54b5fea 100644
--- a/src/style.css
+++ b/src/style.css
@@ -387,7 +387,7 @@ body:not(.light-version).overlay-visible .main-container {
width: auto;
}
-.is-project .content-wrap {
+.is-file-mode .content-wrap {
flex-direction: row;
}
@@ -455,7 +455,7 @@ body:not(.light-version).overlay-visible .main-container {
height: auto;
width: 33%;
}
-.is-project .code-wrap {
+.is-file-mode .code-wrap {
flex-basis: 100%;
}
@@ -1673,7 +1673,7 @@ body:not(.is-app) .show-when-app {
display: none;
}
-.is-project .hide-in-file-mode {
+.is-file-mode .hide-in-file-mode {
display: none !important;
}
@media screen and (max-width: 600px) {