Form styling

Bonus commit for today. Also fixes #55
This commit is contained in:
Thomas Hounsell 2016-07-25 22:45:12 +01:00
parent 97b98f6549
commit 98b7e393ea
6 changed files with 142 additions and 134 deletions

View File

@ -19,13 +19,9 @@ else
<div class="form-horizontal">
<div class="form-group">
<label for="quickpaste" class="control-label col-sm-2">@VariantTerms.Front_QuickPaste</label>
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
<input id="quickpaste" type="text" class="form-control" />
</div>
</div>
<label for="quickpaste" class="control-label">@VariantTerms.Front_QuickPaste</label>
<div>
<input id="quickpaste" type="text" class="form-control" />
</div>
</div>
</div>
@ -40,17 +36,10 @@ else
<div class="form-group">
@Html.LabelFor(model => model.MajorVersion, new
{
@class = "control-label col-sm-2"
@class = "control-label"
})
<div class="col-sm-10">
<div class="row">
<div class="col-sm-2">
@Html.TextBoxFor(model => model.MajorVersion, new
{
@class = "form-control"
})
</div>
</div>
<div>
@Html.TextBoxFor(model => model.MajorVersion)
@Html.ValidationMessageFor(model => model.MajorVersion)
</div>
</div>
@ -58,17 +47,10 @@ else
<div class="form-group">
@Html.LabelFor(model => model.MinorVersion, new
{
@class = "control-label col-sm-2"
@class = "control-label"
})
<div class="col-sm-10">
<div class="row">
<div class="col-sm-2">
@Html.TextBoxFor(model => model.MinorVersion, new
{
@class = "form-control"
})
</div>
</div>
<div>
@Html.TextBoxFor(model => model.MinorVersion)
@Html.ValidationMessageFor(model => model.MinorVersion)
</div>
</div>
@ -76,17 +58,10 @@ else
<div class="form-group">
@Html.LabelFor(model => model.Number, new
{
@class = "control-label col-sm-2"
@class = "control-label"
})
<div class="col-sm-10">
<div class="row">
<div class="col-sm-3">
@Html.TextBoxFor(model => model.Number, new
{
@class = "form-control"
})
</div>
</div>
<div>
@Html.TextBoxFor(model => model.Number)
@Html.ValidationMessageFor(model => model.Number)
</div>
</div>
@ -94,17 +69,10 @@ else
<div class="form-group">
@Html.LabelFor(model => model.Revision, new
{
@class = "control-label col-sm-2"
@class = "control-label"
})
<div class="col-sm-10">
<div class="row">
<div class="col-sm-3">
@Html.TextBoxFor(model => model.Revision, new
{
@class = "form-control"
})
</div>
</div>
<div>
@Html.TextBoxFor(model => model.Revision)
@Html.ValidationMessageFor(model => model.Revision)
</div>
</div>
@ -112,17 +80,10 @@ else
<div class="form-group">
@Html.LabelFor(model => model.Lab, new
{
@class = "control-label col-sm-2"
@class = "control-label"
})
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
@Html.TextBoxFor(model => model.Lab, new
{
@class = "form-control"
})
</div>
</div>
<div>
@Html.TextBoxFor(model => model.Lab)
@Html.ValidationMessageFor(model => model.Lab)
</div>
</div>
@ -130,17 +91,10 @@ else
<div class="form-group">
@Html.LabelFor(model => model.BuildTime, new
{
@class = "control-label col-sm-2"
@class = "control-label"
})
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
@Html.TextBoxFor(model => model.BuildTime, "{0:yyMMdd-HHmm}", new
{
@class = "form-control"
})
</div>
</div>
<div>
@Html.TextBoxFor(model => model.BuildTime, "{0:yyMMdd-HHmm}")
@Html.ValidationMessageFor(model => model.BuildTime)
</div>
</div>
@ -148,17 +102,13 @@ else
<div class="form-group">
@Html.LabelFor(model => model.SourceType, new
{
@class = "control-label col-sm-2"
@class = "control-label"
})
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
@Html.DropDownListFor(model => model.SourceType, EnumHelper.GetSelectList(typeof(TypeOfSource)), new
{
@class = "form-control"
})
</div>
</div>
<div>
@Html.DropDownListFor(model => model.SourceType, EnumHelper.GetSelectList(typeof(TypeOfSource)), new
{
@class = "form-control"
})
@Html.ValidationMessageFor(model => model.SourceType)
</div>
</div>
@ -166,20 +116,14 @@ else
<div class="form-group">
@Html.LabelFor(model => model.LeakDate, new
{
@class = "control-label col-sm-2"
@class = "control-label"
})
<div class="col-sm-10">
<div class="row">
<div class="col-sm-4">
@Html.TextBoxFor(model => model.LeakDate, "{0:dd/MM/yyyy}", new
{
@class = "form-control"
})
</div>
<div class="col-sm-2">
<button onclick="$('#@Html.IdFor(model => model.LeakDate)').val('@DateTime.Now.ToString("dd/MM/yyyy")');return false;" class="btn btn-success btn-block btn-reset">@VariantTerms.Front_Today</button>
</div>
</div>
<div>
@Html.TextBoxFor(model => model.LeakDate, "{0:dd/MM/yyyy}", new
{
@class = "form-control"
})
<button onclick="$('#@Html.IdFor(model => model.LeakDate)').val('@DateTime.Now.ToString("dd/MM/yyyy")');return false;" class="btn btn-success btn-block btn-reset">@VariantTerms.Front_Today</button>
@Html.ValidationMessageFor(model => model.LeakDate)
</div>
</div>
@ -187,25 +131,24 @@ else
<div class="form-group">
@Html.LabelFor(model => model.SourceDetails, new
{
@class = "control-label col-sm-2"
@class = "control-label"
})
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
@Html.TextAreaFor(model => model.SourceDetails, new
{
@class = "form-control",
rows = "5"
})
</div>
</div>
<div class="wide-group">
@Html.TextAreaFor(model => model.SourceDetails, new
{
@class = "form-control",
rows = "5"
})
@Html.ValidationMessageFor(model => model.SourceDetails)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Submit Build" class="btn btn-primary" />
<div>
<input type="submit" value="@((string)ViewContext.RouteData.Values["action"] == "addBuild"
? VariantTerms.Common_AddBuild
: VariantTerms.Front_EditBuild)" class="btn btn-primary" />
&ensp;
<a href="/" onclick="window.history
.back(); return false;" class="btn btn-default">
@VariantTerms.Front_ReturnToListing</a>

View File

@ -25,15 +25,11 @@
{
@class = "control-label col-md-2"
})
<div class="col-md-10">
<div class="row">
<div class="col-sm-6">
@Html.TextBoxFor(model => model.UserName, new
{
@class = "form-control"
})
</div>
</div>
<div>
@Html.TextBoxFor(model => model.UserName, new
{
@class = "form-control"
})
@Html.ValidationMessageFor(model => model.UserName)
</div>
</div>
@ -43,32 +39,24 @@
{
@class = "control-label col-md-2"
})
<div class="col-md-10">
<div class="row">
<div class="col-sm-6">
@Html.PasswordFor(model => model.Password, new
{
@class = "form-control"
})
</div>
</div>
<div>
@Html.PasswordFor(model => model.Password, new
{
@class = "form-control"
})
@Html.ValidationMessageFor(model => model.Password)
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<div class="row">
<div class="col-sm-6">
<label for="@Html.IdFor(model => model.RememberMe)" class="checkbox checkbox-inline">@Html.CheckBoxFor(model => model.RememberMe) @Html.DisplayNameFor(model => model.RememberMe)</label>
</div>
</div>
<div>
<label for="@Html.IdFor(model => model.RememberMe)" class="checkbox checkbox-inline">@Html.CheckBoxFor(model => model.RememberMe) @Html.DisplayNameFor(model => model.RememberMe)</label>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="@VariantTerms.Support_Login" class="btn btn-primary" />
<div>
<input type="submit" value="@VariantTerms.Support_Login" class="btn btn-primary" /> &ensp;
@Html.ActionLink(VariantTerms.Support_Register, "register", new
{
controller = "Support"

View File

@ -7,8 +7,8 @@
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
<add key="data:MongoDB" value="BuildFeed" />
<add key="site:OSGLab" value="rs1_release" />
<add key="site:InsiderLab" value="rs1_release" />
<add key="site:OSGLab" value="rs1_release;rs1_release_inmarket" />
<add key="site:InsiderLab" value="rs1_release;rs1_release_inmarket" />
<add key="site:ReleaseLab" value="th2_release;th2_release_sec" />
</appSettings>
<system.web>

View File

@ -46,6 +46,11 @@ table {
-ms-word-wrap: break-word;
word-wrap: break-word; }
.field-validation-error {
display: block;
margin: 0.33333em 0;
color: #FF2626; }
header#page-header h1 {
font-weight: 300;
margin: .33em 0; }
@ -248,17 +253,45 @@ article {
font-weight: bold;
margin-right: 1em;
display: inline-block;
vertical-align: top; }
vertical-align: top;
margin-top: 0.25em; }
.form-group > div {
margin-left: calc(20% + 1em);
width: 30%;
display: inline-block;
vertical-align: top; }
.form-group > div input, .form-group > div textarea, .form-group > div select {
width: 100%; }
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid;
padding: 0.33333em 0.5em;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
line-height: 1em; }
.form-group > div input[type=submit],
.form-group > div input[type=checkbox] {
width: auto; }
.form-group > div input[type=submit],
.form-group > div button {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid;
padding: 0.33333em 0.5em;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #1274B2;
color: #fff;
line-height: 1; }
.form-group > div.wide-group {
width: 40%; }
.form-group > div.wide-group > .trumbowyg-box {
width: 100%;
margin: 0; }
.form-group > label + div {
margin-left: 0; }

File diff suppressed because one or more lines are too long

View File

@ -73,6 +73,13 @@ table
word-wrap: break-word;
}
.field-validation-error
{
display: block;
margin: #{(1em / 3)} 0;
color: #FF2626;
}
header#page-header
{
h1
@ -428,6 +435,7 @@ article
margin-right: 1em;
display: inline-block;
vertical-align: top;
margin-top: #{(1em / 4)};
}
> div
@ -440,6 +448,15 @@ article
input, textarea, select
{
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid;
padding: #{(1em / 3)} #{(1em / 2)};
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
line-height: 1em;
}
input[type=submit],
@ -447,6 +464,33 @@ article
{
width: auto;
}
input[type=submit],
button
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid;
padding: #{(1em / 3)} #{(1em / 2)};
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #1274B2;
color: #fff;
line-height: 1;
}
&.wide-group
{
width: 40%;
> .trumbowyg-box
{
width: 100%;
margin: 0;
}
}
}
> label + div