make web layout more responsive

This commit is contained in:
Jesse Plamondon-Willard 2018-06-09 15:02:25 -04:00
parent 317a337646
commit 1ae1a2620e
3 changed files with 43 additions and 7 deletions

View File

@ -57,11 +57,12 @@
* Fixed `world_settime` sometimes breaking NPC schedules (e.g. so they stay in bed).
* Fixed `world_setseason` not normalising the season value.
* For the log parser:
* Redesigned upload page to make it more intuitive for new players.
* Changed filters to show `DEBUG` messages by default.
* Fixed issue parsing content packs with no description.
* Fixed mangled crossplatform paths in some cases.
* For the web UI:
* Redesigned log parser upload page to make it more intuitive for new players.
* Changed log parser filters to show `DEBUG` messages by default.
* Improved layout on small screens.
* Fixed log parser issue when content packs have no description.
* Fixed log parser mangling crossplatform paths in some cases.
* For SMAPI developers:
* Added more consistent crossplatform handling using a new `EnvironmentUtility`, including MacOS detection.

View File

@ -6,6 +6,7 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewData["Title"] - SMAPI.io</title>
<link rel="stylesheet" href="~/Content/css/main.css" />
@RenderSection("Head", required: false)

View File

@ -28,7 +28,8 @@ h2 {
h3 {
font-size: 1.2em;
border-bottom: 1px solid #AAA;
width: 50%;
width: 55em;
max-width: 100%;
}
a {
@ -44,6 +45,8 @@ a {
#content {
min-height: 140px;
width: calc(100% - 2em);
max-width: 60em;
padding: 0 1em 1em 1em;
border-left: 1px solid #CCC;
background: #FFF;
@ -51,7 +54,7 @@ a {
}
#content p {
max-width: 55em;
max-width: 100%;
}
.section {
@ -105,3 +108,34 @@ a {
#footer a {
color: #669;
}
/* mobile fixes */
@media (min-width: 1020px) and (max-width: 1199px) {
#sidebar {
width: 7em;
background: none;
}
#content-column {
left: 7em;
}
}
@media (max-width: 1019px) {
h1 {
margin-top: 0;
}
#sidebar {
margin-top: 0;
width: auto;
min-height: 0;
background: none;
}
#content-column {
position: inherit;
top: inherit;
left: inherit;
}
}