forms made beautiful

Sevomin.WebFrontend/Content/forms.css

@@ -15,4 +15,8 @@ label{
 .field-validation-error{
     font-family: Koodak;
     font-size: 1.2em;
+}
+.form-help{
+    color: #3c72e1;
+    cursor: pointer;
 }

Sevomin.WebFrontend/Scripts/sevomin-ui.js

@@ -1,5 +1,5 @@
-// This file depends heavily on jquery and jquery validation. So be nice and include them on the page.
+// This file depends heavily on jquery, jquery validation and jquery ui. So be nice and include them on the page.
 $(function () {
     $('form').validate();
-    $('input.datepickerify').datepicker('option', $.datepicker.regional['fa'] );
+    $('input.datepickerify').datepicker($.datepicker.regional["fa"]);
 });

Sevomin.WebFrontend/Views/Job/JobEditor.cshtml

@@ -1,35 +1,45 @@
 @using (Html.BeginForm("", "", FormMethod.Post, new { role = "form" }))
 {
     <div class="row rtl">
-        <div class="col-md-6">
-            <div class="form-group">
-                <label for="exampleInputEmail1">نوع رزومه</label>
-                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
-            </div>
-            <div class="form-group">
-                <label for="exampleInputEmail1">نماینده</label>
-                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
-            </div>
-        </div>
-        <div class="col-md-6">
-            <div class="form-group">
-                <label for="exampleInputEmail1">تاریخ انقضا</label>
-                <input type="text" class="form-control datepickerify" id="exampleInputEmail1" placeholder="Enter email">
-            </div>
-            <div class="form-group">
-                <label for="exampleInputEmail1">محیط کاری</label>
-                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
-            </div>
-            <div class="form-group">
-                <label for="exampleInputEmail1">محل کار</label>
-                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+        <div class="panel panel-default">
+            <div class="panel-heading">مشخصات اصلی آگهی</div>
+            <div class="panel-body">
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label for="exampleInputEmail1">نوع رزومه</label>
+                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+                    </div>
+                    <div class="form-group">
+                        <label for="exampleInputEmail1">نماینده</label>
+                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label for="exampleInputEmail1">تاریخ انقضا</label> <span class="glyphicon glyphicon-exclamation-sign form-help" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"></span>
+                        <input type="text" class="form-control datepickerify" id="exampleInputEmail1" placeholder="Enter email" data-hint="سلام چطوری؟">
+                    </div>
+                    <div class="form-group">
+                        <label for="exampleInputEmail1">محیط کاری</label>
+                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+                    </div>
+                    <div class="form-group">
+                        <label for="exampleInputEmail1">محل کار</label>
+                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+                    </div>
+                </div>
             </div>
         </div>
     </div>
     <div class="row rtl">
-        <div class="col-md-6">
-        </div>
-        <div class="col-md-6">
+        <div class="panel panel-default">
+            <div class="panel-heading">مشخصات اضافه آگهی</div>
+            <div class="panel-body">
+                <div class="col-md-6">
+                </div>
+                <div class="col-md-6">
+                </div>
+            </div>
         </div>
     </div>
 }

Sevomin.WebFrontend/Views/Job/NewJob.cshtml

@@ -3,6 +3,8 @@
     ViewBag.Title = "NewJob";
 }
 
-<h2>NewJob</h2>
+<div class="page-header rtl">
+  <h1>انتشار آگهی استخدام <small>لورم ایپسوم</small></h1>
+</div>
 
 @Html.Partial("JobEditor")

Sevomin.WebFrontend/Views/Shared/Intro.cshtml

@@ -17,6 +17,8 @@
         @Html.Partial("IntroSignup")
     </div>
     <script src="@Url.Content("~/scripts/jquery-2.1.0.min.js")"></script>
+    <script src="@Url.Content("~/scripts/jquery-ui-1.10.4.js")"></script>    
+    <script src="@Url.Content("~/scripts/jquery-ui-i18n.min.js")"></script>    
     <script src="@Url.Content("~/scripts/jquery.validate.min.js")"></script>
     <script src="@Url.Content("~/scripts/jquery.validate.unobtrusive.min.js")"></script>
     <script src="@Url.Content("~/scripts/bootstrap.min.js")"></script>

Sevomin.WebFrontend/Views/Shared/_Layout.cshtml

@@ -6,6 +6,7 @@
     <title>سومین: مرکز کاریابی برنامه‌ریزی و کنترل پروژه - @ViewBag.Title</title>
     <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/bootstrap.min.css")" />
     <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/bootstrap-theme.min.css")" />
+    <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/themes/base/minified/jquery-ui.min.css")" />
     <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/common.css")" />
     <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/forms.css")" />
 </head>
@@ -14,7 +15,7 @@
         @RenderBody()
     </div>
     <script src="@Url.Content("~/scripts/jquery-2.1.0.min.js")"></script>
-    <script src="@Url.Content("~/scripts/jquery-ui-1.10.4.min.js")"></script>    
+    <script src="@Url.Content("~/scripts/jquery-ui-1.10.4.js")"></script>    
     <script src="@Url.Content("~/scripts/jquery-ui-i18n.min.js")"></script>    
     <script src="@Url.Content("~/scripts/jquery.validate.min.js")"></script>
     <script src="@Url.Content("~/scripts/jquery.validate.unobtrusive.min.js")"></script>