oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Really imrpoved the mobile UI, espically on iOS, started working on making a docker image

Browse Source
This commit is contained in:
subnub
2020-05-09 14:03:01 -04:00
parent d435443742
commit ff5022af4b
14 changed files with 144 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.dockerignore
+1
View File
@@ -0,0 +1 @@
node_modules
Dockerfile
+15
View File
@@ -0,0 +1,15 @@
FROM node
WORKDIR /usr/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8000
RUN npm run start
src/components/MainSection/MainSection.js
+3 -2
View File
@@ -26,13 +26,14 @@ const MainSection = React.forwardRef((props, ref) => {
<div className="section" ref={ref}>
{(props.quickFiles.length !== 0 && props.parent === "/") ?
<div>
<div className="spacer__mobile">
<Spacer title="Quick Access"/>
<QuickAccess
fileClick={props.fileClick}
downloadFile={props.downloadFile}/>
</div> :
undefined}
<div className="spacer__mobile">
</div>}
<ShareMenu />
src/components/Subbar/Subbar.js
+22 -27
View File
@@ -11,38 +11,33 @@ export class Subbar extends React.Component {
return (
<div className="subbar">
{!this.props.isMobile ? undefined :
<div className="add-button" onClick={this.props.addButtonEvent} ref={this.props.wrapperRef}>
<div className="add-button add-button-2" onClick={this.props.addButtonEvent} ref={this.props.wrapperRef}>
<img className="add-button__img" src="/images/add-blue.png"/>
<img className="add-button__img" src="/images/add-blue.png"/>
<h3 className="add-button__title">New</h3>
<h3 className="add-button__title">New</h3>
<div className={this.props.showAddOptions2 ? "add-button__option-wrapper2 add-button__option-wrapper--show" : "add-button__option-wrapper2"}>
<div className="add_button__option__add-folder-wrapper" onClick={this.props.createFolder}>
<img className="add_button__option__add-folder-image" src="/images/grey-add-folder.png"/>
<p className="add_button__option__add-folder-title">Folder</p>
</div>
<div className={this.props.showAddOptions2 ? "add-button__option-wrapper2 add-button__option-wrapper--show" : "add-button__option-wrapper2"}>
<div className="add_button__option__add-folder-wrapper" onClick={this.props.createFolder}>
<img className="add_button__option__add-folder-image" src="/images/grey-add-folder.png"/>
<p className="add_button__option__add-folder-title">Folder</p>
</div>
<div className="add_button__option__add-folder-wrapper add_button__option__add-folder-wrapper--no-border">
<img className="add_button__option__add-folder-image" src="/images/upload-file-grey.png"/>
<p className="add_button__option__add-folder-title">File Upload</p>
<input className="add_button__option__add-file-input" ref={this.props.uploadInput}
type="file" multiple={true} onChange={this.props.handleUpload}/>
</div>
<div className="add_button__option__add-folder-wrapper add_button__option__add-folder-wrapper--no-border">
<img className="add_button__option__add-folder-image" src="/images/upload-file-grey.png"/>
<p className="add_button__option__add-folder-title">File Upload</p>
<input className="add_button__option__add-file-input" ref={this.props.uploadInput}
type="file" multiple={true} onChange={this.props.handleUpload}/>
</div>
<div className="add_button__option__add-folder-wrapper add_button__option__add-folder-wrapper--no-border">
<img className="add_button__option__add-folder-image" src="/images/folder-upload-grey.png"/>
<p className="add_button__option__add-folder-title">Folder Upload</p>
</div>
</div>
</div>
}
<div className="add_button__option__add-folder-wrapper add_button__option__add-folder-wrapper--no-border">
<img className="add_button__option__add-folder-image" src="/images/folder-upload-grey.png"/>
<p className="add_button__option__add-folder-title">Folder Upload</p>
</div>
</div>
</div>
<div className="path__wrapper">
src/styles/components/_File.scss
+3 -2
View File
@@ -26,7 +26,7 @@
@media (max-width: $desktop-breakpoint) {
flex-basis: 28%;
max-width: 30.2%;
position: unset
position: unset;
}
}
@@ -116,7 +116,8 @@
-webkit-tap-highlight-color: transparent;
@media (max-width: $desktop-breakpoint) {
position: unset
position: unset;
overflow: hidden;
}
}
src/styles/components/_Filter.scss
+4
View File
@@ -3,6 +3,10 @@
justify-content: space-between;
align-items: center;
height: 52px;
@media (max-width: $desktop-breakpoint) {
width: 100vw;
}
}
.filter__folder-wrapper {
src/styles/components/_Header.scss
+14 -1
View File
@@ -9,6 +9,7 @@
position: fixed;
/* top: 0; */
width: 100%;
z-index: 1;
@media (max-width: $desktop-breakpoint) {
text-align: center;
@@ -16,10 +17,16 @@
flex-direction: row;
border-bottom: 1px solid #dadce0;
justify-content: space-between;
position: initial;
position: fixed;
background: white;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 80px;
padding: 0;
z-index: 2;
// background: blue;
}
}
@@ -155,6 +162,12 @@
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 50px;
// @media (max-width: $desktop-breakpoint) {
// height: 60px;
// }
}
.header__input__suggested__item:hover {
src/styles/components/_HomePage.scss
+31 -6
View File
@@ -10,7 +10,9 @@
-ms-overflow-style: none; /* IE 10+ */
&::-webkit-scrollbar {
width: 0px;
height: unset;
background: transparent; /* Chrome/Safari/Webkit */
overflow-y: unset;
}
}
@@ -26,7 +28,8 @@
// margin-top: 77px;
display: flex;
flex-direction: column;
overflow-x: hidden;
//overflow-x: hidden;
overflow: hidden;
width: unset;
}
@@ -38,12 +41,25 @@
height: -webkit-fill-available;
display: inherit;
overflow: hidden;
@media (max-width: $desktop-breakpoint) {
height: unset;
}
}
.outter-wrapper {
height: 100vh;
width: 100vw;
}
// .outter-wrapper {
// height: 100%;
// width: 100%;
// overflow: hidden;
// @media (max-width: $desktop-breakpoint) {
// //background: blue;
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// }
// }
.main-page {
background: white;
@@ -55,10 +71,19 @@
@media (max-width: $desktop-breakpoint) {
background: #fff;
/* height: 100vh; */
height: calc(100% - 80px);
// height: calc(100% - 80px);
height: unset;
width: 100vw;
display: inline-flex;
padding: 0;
overflow: hidden;
// position: fixed;
// padding: 0;
// bottom: 0;
// left: 0;
// right: 0;
// margin-top: 80px;
//background: red;
}
}
src/styles/components/_LeftSection.scss
+12
View File
@@ -35,6 +35,14 @@
}
}
.add-button-2 {
display: none;
@media (max-width: $desktop-breakpoint) {
display: inline-flex;
}
}
.add-button__img {
width: 30px;
height: 30px;
@@ -108,6 +116,10 @@
// padding: 0 140px 132px 36px;
margin-top: 52px;
box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);
@media (max-width: $desktop-breakpoint) {
margin-top: 75px;
}
}
.add_button__option__add-folder-wrapper {
src/styles/components/_Popup-window.scss
+13 -7
View File
@@ -22,6 +22,7 @@
@media (max-width: $desktop-breakpoint) {
width: 100%;
height: 100%;
z-index: 2;
}
}
@@ -60,12 +61,13 @@
.popup-window__image--loaded {
width: 100%;
max-height: 100%;
width: 94vw;
max-height: 70vh;
object-fit: cover;
opacity: 1;
max-width: 100%;
max-width: 94vw;
border-radius: 6px;
height: 70vh;
cursor: pointer;
}
@@ -94,13 +96,17 @@
align-items: center;
display: flex;
margin-bottom: 50px;
height: 65%;
width: 99%;
max-width: 99%;
overflow: visible;
// height: 65%;
// width: 99%;
max-width: 100%;
overflow: hidden;
position: relative;
justify-content: center;
max-height: 50%;
// max-height: 50%;
height: 70%;
width: 100%;
max-height: 70%;
}
}
src/styles/components/_QuickAccess.scss
+3
View File
@@ -9,6 +9,9 @@
/* overflow-y: hidden; */
overflow: hidden;
@media (max-width: $desktop-breakpoint) {
// margin-top: calc(80px + 3vh);
}
}
.quickaccess__item {
src/styles/components/_SettingsMenu.scss
+1
View File
@@ -17,6 +17,7 @@
@media (max-width: $desktop-breakpoint) {
width: 100%;
height: 100%;
z-index: 2;
}
}
src/styles/components/_Spacer.scss
+7
View File
@@ -3,6 +3,13 @@
height: 37px;
}
.spacer__mobile {
@media (max-width: $desktop-breakpoint) {
margin-top: calc(80px + 6vh);
}
}
.spacer__title {
color: #5f6368;
margin-left: 22px;
src/styles/components/_Subbar.scss
+15
View File
@@ -41,6 +41,21 @@
user-select: none;
// overflow-x: scroll;
@media (max-width: $desktop-breakpoint) {
width: 100vw;
display: flex;
flex-direction: row;
align-items: center;
height: 7vh;
min-height: 50px;
user-select: none;
position: fixed;
top: 80px;
background: white;
z-index: 1;
}
}
.path__block {