From d40e28d13ff826d6bcaed99068ded1b8e21188d3 Mon Sep 17 00:00:00 2001
From: Dan <daniel2.lorych@live.uwe.ac.uk>
Date: Mon, 2 May 2022 12:01:16 +0100
Subject: [PATCH] Update the configurator input to make it more clear
---
Helios/Views/Configurator/Index.cshtml | 103 +++++++++++++------------
Helios/wwwroot/css/site.css | 8 ++
2 files changed, 62 insertions(+), 49 deletions(-)
diff --git a/Helios/Views/Configurator/Index.cshtml b/Helios/Views/Configurator/Index.cshtml
index 0e2ed14..f3a03ea 100644
--- a/Helios/Views/Configurator/Index.cshtml
+++ b/Helios/Views/Configurator/Index.cshtml
@@ -12,72 +12,77 @@
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
- <h5>Roof #1</h5>
+ <div class="input-border">
+ <h5>Roof #1</h5>
- <div class="form-group">
- @Html.LabelFor(model => model.Roofs[0].Area, htmlAttributes: new { @class = "control-label col-md-2" })
- <div class="col-md-10">
- @Html.EditorFor(model => model.Roofs[0].Area, new { htmlAttributes = new { @class = "form-control" } })
- @Html.ValidationMessageFor(model => model.Roofs[0].Area, "", new { @class = "text-danger" })
+ <div class="form-group">
+ @Html.LabelFor(model => model.Roofs[0].Area, htmlAttributes: new { @class = "control-label col-md-3" })
+ <div class="col-md-10">
+ @Html.EditorFor(model => model.Roofs[0].Area, new { htmlAttributes = new { @class = "form-control" } })
+ @Html.ValidationMessageFor(model => model.Roofs[0].Area, "", new { @class = "text-danger" })
+ </div>
</div>
- </div>
- <div class="form-group">
- @Html.LabelFor(model => model.Roofs[0].Elevation, htmlAttributes: new { @class = "control-label col-md-2" })
- <div class="col-md-10">
- @Html.EditorFor(model => model.Roofs[0].Elevation, new { htmlAttributes = new { @class = "form-control" } })
- @Html.ValidationMessageFor(model => model.Roofs[0].Elevation, "", new { @class = "text-danger" })
+ <div class="form-group">
+ @Html.LabelFor(model => model.Roofs[0].Elevation, htmlAttributes: new { @class = "control-label col-md-3" })
+ <div class="col-md-10">
+ @Html.EditorFor(model => model.Roofs[0].Elevation, new { htmlAttributes = new { @class = "form-control" } })
+ @Html.ValidationMessageFor(model => model.Roofs[0].Elevation, "", new { @class = "text-danger" })
+ </div>
</div>
</div>
- <h5>Roof #2</h5>
+ <div class="input-border">
+ <h5>Roof #2</h5>
- <div class="form-group">
- @Html.LabelFor(model => model.Roofs[1].Area, htmlAttributes: new { @class = "control-label col-md-2" })
- <div class="col-md-10">
- @Html.EditorFor(model => model.Roofs[1].Area, new { htmlAttributes = new { @class = "form-control" } })
- @Html.ValidationMessageFor(model => model.Roofs[1].Area, "", new { @class = "text-danger" })
+ <div class="form-group">
+ @Html.LabelFor(model => model.Roofs[1].Area, htmlAttributes: new { @class = "control-label col-md-3" })
+ <div class="col-md-10">
+ @Html.EditorFor(model => model.Roofs[1].Area, new { htmlAttributes = new { @class = "form-control" } })
+ @Html.ValidationMessageFor(model => model.Roofs[1].Area, "", new { @class = "text-danger" })
+ </div>
</div>
- </div>
- <div class="form-group">
- @Html.LabelFor(model => model.Roofs[1].Elevation, htmlAttributes: new { @class = "control-label col-md-2" })
- <div class="col-md-10">
- @Html.EditorFor(model => model.Roofs[1].Elevation, new { htmlAttributes = new { @class = "form-control" } })
- @Html.ValidationMessageFor(model => model.Roofs[1].Elevation, "", new { @class = "text-danger" })
+ <div class="form-group">
+ @Html.LabelFor(model => model.Roofs[1].Elevation, htmlAttributes: new { @class = "control-label col-md-3" })
+ <div class="col-md-10">
+ @Html.EditorFor(model => model.Roofs[1].Elevation, new { htmlAttributes = new { @class = "form-control" } })
+ @Html.ValidationMessageFor(model => model.Roofs[1].Elevation, "", new { @class = "text-danger" })
+ </div>
</div>
</div>
- <h5>Energy Information</h5>
+ <div class="input-border">
+ <h5>Energy Information</h5>
- <div class="form-group">
- @Html.LabelFor(model => model.PowerRequired, htmlAttributes: new { @class = "control-label col-md-2" })
- <div class="col-md-10">
- @Html.EditorFor(model => model.PowerRequired, new { htmlAttributes = new { @class = "form-control" } })
- @Html.ValidationMessageFor(model => model.PowerRequired, "", new { @class = "text-danger" })
+ <div class="form-group">
+ @Html.LabelFor(model => model.PowerRequired, htmlAttributes: new { @class = "control-label col-md-3" })
+ <div class="col-md-10">
+ @Html.EditorFor(model => model.PowerRequired, new { htmlAttributes = new { @class = "form-control" } })
+ @Html.ValidationMessageFor(model => model.PowerRequired, "", new { @class = "text-danger" })
+ </div>
</div>
- </div>
- <div class="form-group">
- @Html.LabelFor(model => model.MaximumPower, htmlAttributes: new { @class = "control-label col-md-2" })
- <div class="col-md-10">
- @Html.EditorFor(model => model.MaximumPower, new { htmlAttributes = new { @class = "form-control" } })
- @Html.ValidationMessageFor(model => model.MaximumPower, "", new { @class = "text-danger" })
+ <div class="form-group">
+ @Html.LabelFor(model => model.MaximumPower, htmlAttributes: new { @class = "control-label col-md-3" })
+ <div class="col-md-10">
+ @Html.EditorFor(model => model.MaximumPower, new { htmlAttributes = new { @class = "form-control" } })
+ @Html.ValidationMessageFor(model => model.MaximumPower, "", new { @class = "text-danger" })
+ </div>
</div>
- </div>
- <div class="form-group">
- @Html.LabelFor(model => model.Budget, htmlAttributes: new { @class = "control-label col-md-2" })
- <div class="col-md-10">
- @Html.EditorFor(model => model.Budget, new { htmlAttributes = new { @class = "form-control" } })
- @Html.ValidationMessageFor(model => model.Budget, "", new { @class = "text-danger" })
+ <div class="form-group">
+ @Html.LabelFor(model => model.Budget, htmlAttributes: new { @class = "control-label col-md-3" })
+ <div class="col-md-10">
+ @Html.EditorFor(model => model.Budget, new { htmlAttributes = new { @class = "form-control" } })
+ @Html.ValidationMessageFor(model => model.Budget, "", new { @class = "text-danger" })
+ </div>
</div>
- </div>
-
- <div class="form-group">
- <div class="col-md-offset-2 col-md-10">
- <input type="submit" value="Create" class="btn btn-default" />
+ </div>
+ <div class="form-group">
+ <div class="col-md-offset-2 col-md-10">
+ <input type="submit" value="Submit" class="btn btn-primary" />
+ </div>
</div>
</div>
-</div>
-}
\ No newline at end of file
+ }
diff --git a/Helios/wwwroot/css/site.css b/Helios/wwwroot/css/site.css
index 3470064..154949f 100644
--- a/Helios/wwwroot/css/site.css
+++ b/Helios/wwwroot/css/site.css
@@ -16,3 +16,11 @@ html {
body {
margin-bottom: 60px;
}
+
+.input-border {
+ border: gray;
+ border-style: solid;
+ border-radius: 10px;
+ padding: 20px;
+ margin-bottom: 20px;
+}
--
GitLab