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

View File

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

View File

@ -28,7 +28,8 @@ h2 {
h3 { h3 {
font-size: 1.2em; font-size: 1.2em;
border-bottom: 1px solid #AAA; border-bottom: 1px solid #AAA;
width: 50%; width: 55em;
max-width: 100%;
} }
a { a {
@ -44,6 +45,8 @@ a {
#content { #content {
min-height: 140px; min-height: 140px;
width: calc(100% - 2em);
max-width: 60em;
padding: 0 1em 1em 1em; padding: 0 1em 1em 1em;
border-left: 1px solid #CCC; border-left: 1px solid #CCC;
background: #FFF; background: #FFF;
@ -51,7 +54,7 @@ a {
} }
#content p { #content p {
max-width: 55em; max-width: 100%;
} }
.section { .section {
@ -105,3 +108,34 @@ a {
#footer a { #footer a {
color: #669; 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;
}
}