Use bootstrap containers.

2025-12-16 19:24:25 +00:00 · 2018-12-28 15:17:28 +00:00
parent 6d52e09d51
commit bd786b51b9
8 changed files with 119 additions and 54 deletions
--- a/DiscImageChef.Server/Views/Home/Changelog.cshtml
+++ b/DiscImageChef.Server/Views/Home/Changelog.cshtml
@@ -62,8 +62,8 @@
    @Html.ActionLink("Return to main page.", "Index")<br />
    DiscImageChef list of changes:
 </p>
-<div>@Html.Raw(ViewBag.Markdown)</div>
-<footer>
+<div class="container">@Html.Raw(ViewBag.Markdown)</div>
+<footer class="container-fluid">
    © 2011-2018
    <a href="http://www.claunia.com"
       target="_blank">
--- a/DiscImageChef.Server/Views/Home/DONATING.cshtml
+++ b/DiscImageChef.Server/Views/Home/DONATING.cshtml
@@ -62,8 +62,8 @@
    @Html.ActionLink("Return to main page.", "Index")<br />
    DiscImageChef list of things to be donated:
 </p>
-<div>@Html.Raw(ViewBag.Markdown)</div>
-<footer>
+<div class="container">@Html.Raw(ViewBag.Markdown)</div>
+<footer class="container-fluid">
    © 2011-2018
    <a href="http://www.claunia.com"
       target="_blank">
--- a/DiscImageChef.Server/Views/Home/Index.cshtml
+++ b/DiscImageChef.Server/Views/Home/Index.cshtml
@@ -43,6 +43,7 @@
    <link href="../../styles/dicserver_highcharts.css"
          rel="stylesheet"type="text/css" />
    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@ViewBag.Title</title>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async
@@ -58,7 +59,7 @@
    </script>
 </head>
 <body>
-<h1 align="center">
+<header>
    Welcome to
    <i>
        <a href="http://github.com/claunia/discimagechef"
@@ -66,9 +67,9 @@
            DiscImageChef
        </a>
    </i> Server version @ViewBag.lblVersion
-</h1>
-<div>@Html.Raw(ViewBag.Markdown)</div>
-<footer>
+</header>
+<div class="container">@Html.Raw(ViewBag.Markdown)</div>
+<footer class="container-fluid">
    © 2011-2018
    <a href="http://www.claunia.com"
       target="_blank">
--- a/DiscImageChef.Server/Views/Home/TODO.cshtml
+++ b/DiscImageChef.Server/Views/Home/TODO.cshtml
@@ -62,8 +62,8 @@
    @Html.ActionLink("Return to main page.", "Index")<br />
    DiscImageChef list of things to do:
 </p>
-<div>@Html.Raw(ViewBag.Markdown)</div>
-<footer>
+<div class="container">@Html.Raw(ViewBag.Markdown)</div>
+<footer class="container-fluid">
    © 2011-2018
    <a href="http://www.claunia.com"
       target="_blank">
--- a/DiscImageChef.Server/Views/Report/View.cshtml
+++ b/DiscImageChef.Server/Views/Report/View.cshtml
@@ -22,6 +22,7 @@
    </script>
 </head>
 <body>
+<div class="container-fluid">
 DiscImageChef Report for
@ViewBag.lblManufacturer
@ViewBag.lblModel
@@ -247,7 +248,8 @@ DiscImageChef Report for
        }
    </div>
 }
-<footer>
+</div>
+<footer class="container-fluid">
    © 2011-2018
    <a href="http://www.claunia.com"
       target="_blank">
--- a/DiscImageChef.Server/Views/Stats/Index.cshtml
+++ b/DiscImageChef.Server/Views/Stats/Index.cshtml
@@ -36,7 +36,7 @@
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
 </head>
 <body>
-<h1 align="center">
+<header>
    Welcome to
    <i>
        <a href="http://github.com/claunia/discimagechef"
@@ -44,24 +44,25 @@
            DiscImageChef
        </a>
    </i> Server version @ViewBag.Version
-</h1>
+</header>
 <br />
-<div>
+<div class="container">

@if(ViewBag.repOperatingSystems != null)
 {
-    <div id="divOperatingSystems">
-        <div id="osChart"
-             style="background-color: transparent; width: 25%">
+    <div class="container"
+         id="divOperatingSystems">
+        <div class="container"
+             id="osChart">
        </div>
-        <div id="linuxChart"
-             style="background-color: transparent; width: 25%">
+        <div class="container"
+             id="linuxChart">
        </div>
-        <div id="macosChart"
-             style="background-color: transparent; width: 25%">
+        <div class="container"
+             id="macosChart">
        </div>
-        <div id="windowsChart"
-             style="background-color: transparent; width: 25%">
+        <div class="container"
+             id="windowsChart">
        </div>
        <table>
            @foreach(NameValueStats os in ViewBag.repOperatingSystems)
@@ -78,9 +79,10 @@
 }
@if(ViewBag.repVersions != null)
 {
-    <div id="divVersions">
-        <div id="versionsChart"
-             style="background-color: transparent; width: 25%">
+    <div class="container"
+         id="divVersions">
+        <div class="container"
+             id="versionsChart">
        </div>
        <table>
            @foreach(NameValueStats version in ViewBag.repVersions)
@@ -95,9 +97,10 @@
        <br />
    </div>
 }
-<div id="divCommands">
-    <div id="commandsChart"
-         style="background-color: transparent; width: 25%">
+<div class="container"
+     id="divCommands">
+    <div class="container"
+         id="commandsChart">
    </div>

    <h4>Commands run:</h4>
@@ -127,9 +130,10 @@
 </div>
@if(ViewBag.repFilters != null)
 {
-    <div id="divFilters">
-        <div id="filtersChart"
-             style="background-color: transparent; width: 25%">
+    <div class="container"
+         id="divFilters">
+        <div class="container"
+             id="filtersChart">
        </div>
        <h3>Filters found:</h3>
        <table align="center"
@@ -154,9 +158,10 @@
 }
@if(ViewBag.repMediaImages != null)
 {
-    <div id="divMediaImages">
-        <div id="formatsChart"
-             style="background-color: transparent; width: 25%">
+    <div class="container"
+         id="divMediaImages">
+        <div class="container"
+             id="formatsChart">
        </div>
        <h3>Media image formats found:</h3>
        <table align="center"
@@ -181,9 +186,10 @@
 }
@if(ViewBag.repPartitions != null)
 {
-    <div id="divPartitions">
-        <div id="partitionsChart"
-             style="background-color: transparent; width: 25%">
+    <div class="container"
+         id="divPartitions">
+        <div class="container"
+             id="partitionsChart">
        </div>
        <h3>Partition schemes found:</h3>
        <table align="center"
@@ -208,9 +214,10 @@
 }
@if(ViewBag.repFilesystems != null)
 {
-    <div id="divFilesystems">
-        <div id="filesystemsChart"
-             style="background-color: transparent; width: 25%">
+    <div class="container"
+         id="divFilesystems">
+        <div class="container"
+             id="filesystemsChart">
        </div>
        <h3>Filesystems found:</h3>
        <table align="center"
@@ -235,9 +242,10 @@
 }
@if(ViewBag.repVirtualMedia != null)
 {
-    <div id="divVirtualMedia">
-        <div id="virtualMediaChart"
-             style="background-color: transparent; width: 25%">
+    <div class="container"
+         id="divVirtualMedia">
+        <div class="container"
+             id="virtualMediaChart">
        </div>
        <h3>Media types found in images:</h3>
        <table align="center"
@@ -266,9 +274,10 @@
 }
@if(ViewBag.repRealMedia != null)
 {
-    <div id="divRealMedia">
-        <div id="realMediaChart"
-             style="background-color: transparent; width: 25%">
+    <div class="container"
+         id="divRealMedia">
+        <div class="container"
+             id="realMediaChart">
        </div>
        <h3>Media types found in devices:</h3>
        <table align="center"
@@ -297,12 +306,13 @@
 }
@if(ViewBag.repDevices != null)
 {
-    <div id="divDevices">
-        <div id="devicesBusChart"
-             style="background-color: transparent; width: 25%">
+    <div class="container"
+         id="divDevices">
+        <div class="container"
+             id="devicesBusChart">
        </div>
-        <div id="devicesManufacturerChart"
-             style="background-color: transparent; width: 25%">
+        <div class="container"
+             id="devicesManufacturerChart">
        </div>
        <h3>Found devices:</h3>
        <table align="center"
@@ -344,7 +354,7 @@
 }
 </div>
 <hr />
-<footer>
+<footer class="container-fluid">
    © 2011-2018
    <a href="http://www.claunia.com"
       target="_blank">
--- a/DiscImageChef.Server/styles/dicserver.css
+++ b/DiscImageChef.Server/styles/dicserver.css
@@ -9545,5 +9545,28 @@ h3 {
    border-color: #AAAAAA;
  }
 }
+footer {
+  background-color: #AA5500;
+  color: #000;
+}
+
+header {
+  background-color: #55FFFF;
+  color: #000;
+  text-align: center;
+}
+
+header a {
+  color: #FF55FF;
+}
+
+header a:hover {
+  color: #FF5555;
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: none;
+}

 /*# sourceMappingURL=dicserver.css.map */
--- a/DiscImageChef.Server/styles/dicserver.scss
+++ b/DiscImageChef.Server/styles/dicserver.scss
@@ -2,4 +2,33 @@
@import "_vgafont";
@import "_fontstyles";

-@import "../node_modules/bootstrap/scss/bootstrap";
+@import "../node_modules/bootstrap/scss/bootstrap";
+
+footer
+{
+    background-color: $brown;
+    color: $black;
+}
+
+header
+{
+    background-color: $teal;
+    color: $black;
+    text-align: center;
+}
+
+header a
+{
+    color: $pink;
+}
+
+header a:hover
+{
+    color: $orange;
+    text-decoration: none;
+}
+
+footer a:hover
+{
+    text-decoration: none;
+}