Merge pull request #57 from acacode/fixes/adaptive-layout

js2me · web-flow · commit 37e1e5bde466 · 2018-12-06T02:49:42.000+03:00
📳 Mobile version 📳
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
     - <kbd>SHIFT</kbd> + <kbd>&uparrow;</kbd> Fully scroll up logs in selected task
     - <kbd>SHIFT</kbd> + <kbd>&downarrow;</kbd> Fully scroll down logs in selected task
 - `web` browser notifications about updates of the running tasks
+- `web` mobile version
 
 ### Changed
 - added emojis to `README.md`
diff --git a/lib/app/index.html b/lib/app/index.html
@@ -11,7 +11,8 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i|Source+Sans+Pro:600">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
     <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="styles.smallscreens.css" media="screen and (max-width: 923px)">
+    <link rel="stylesheet" href="medium-screens.css" media="screen and (max-width: 923px)">
+    <link rel="stylesheet" href="small-screens.css" media="screen and (max-width: 545px)">
 </head>
 
 <body>
diff --git a/lib/app/medium-screens.css b/lib/app/medium-screens.css
@@ -17,7 +17,8 @@ body {
     border-radius: 0;
     color: #4e4e4e;
     font-size: 24px;
-	cursor:pointer;
+    cursor:pointer;
+    z-index: 10;
 }
 .tasks-button > .fas:before{
     content: "\f0c9";
@@ -28,12 +29,12 @@ body {
 header .title {
     padding-left: 50px;
 }
-section#tasks {
+#tasks {
     transform: translateX(-100%);
     width: 0;
 }
 
-section#task-logs {
+#task-logs {
     width: 100%;
 }
 .task-list-showed #tasks {
@@ -51,7 +52,7 @@ section#task-logs {
 .task-list-showed #task-logs {
     width: 70%;
 }
-.task-list-showed span.tabs {
+.task-list-showed .tabs {
     position: absolute;
     left: 31.3%;
     top: 292px;
diff --git a/lib/app/small-screens.css b/lib/app/small-screens.css
@@ -0,0 +1,48 @@
+header .title{
+    display: none;
+}
+.main-buttons {
+    margin-left: auto;
+}
+
+.main-button:not(.toggle).run{
+    margin-left: 30px;
+}
+.main-button.toggle.hot-keys{
+    display: none;
+}
+
+.task-list-showed #task-logs{
+    width: 100%;
+}
+
+#tasks{
+    position: absolute;
+    z-index: 1;
+    height: calc(100% - 40px);
+    background: inherit;
+    transition: transform 289ms ease;
+}
+body #tasks,.task-list-showed #tasks{
+    width: 80%;
+}
+
+header{
+    height: 40px;
+}
+
+.tabs {
+    transition: left 289ms ease;
+    position: absolute;
+    left: -32px;
+    top: 292px;
+    transform: rotate(90deg);
+    z-index: 2;
+}
+
+.task-list-showed .tabs {
+    left: calc(80% + 6px);
+}
+.main-button.toggle.resize {
+    display: none;
+}
diff --git a/lib/app/styles.css b/lib/app/styles.css
@@ -435,7 +435,7 @@ button#procfile {
     content:'envs: ';
 }
 
-span.tabs {
+.tabs {
     position: absolute;
     left: -32px;
     top: 215px;
diff --git a/lib/app/styles/fullscreen.css b/lib/app/styles/fullscreen.css
@@ -19,7 +19,7 @@ header .title {
     padding-left: 20px;
     padding-right: 20px;
 }
-span.tabs {
+.tabs {
     position: absolute;
     left: 332px;
     top: 2px;

Original file line number	Diff line number	Diff line change
`@@ -435,7 +435,7 @@ button#procfile {`
`435`	`435`	`content:'envs: ';`
`436`	`436`	`}`
`437`	`437`
`438`		`-span.tabs {`
	`438`	`+.tabs {`
`439`	`439`	`position: absolute;`
`440`	`440`	`left: -32px;`
`441`	`441`	`top: 215px;`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ header .title {`
`19`	`19`	`padding-left: 20px;`
`20`	`20`	`padding-right: 20px;`
`21`	`21`	`}`
`22`		`-span.tabs {`
	`22`	`+.tabs {`
`23`	`23`	`position: absolute;`
`24`	`24`	`left: 332px;`
`25`	`25`	`top: 2px;`