[2375] Add styles for the create resource form

ckan · May 23, 2012 · bfdc16f · bfdc16f
1 parent f1ca89d
commit bfdc16f
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 6 deletions.
diff --git a/ckan/public/base/images/sprite-ckan-icons.png b/ckan/public/base/images/sprite-ckan-icons.png
diff --git a/ckan/public/base/less/forms.less b/ckan/public/base/less/forms.less
@@ -3,6 +3,48 @@ label {
   font-weight: bold;
 }
 
+label {
+  font-size: 14px;
+  line-height: 2;
+}
+
+label:after {
+  content: ":";
+}
+
+input,
+textarea,
+select,
+.uneditable-input {
+  font-size: 14px;
+  padding: 8px 10px;
+}
+
+select {
+  margin-top: 6px;
+}
+
+textarea {
+  max-width: 100%;
+}
+
+.control-full input,
+.control-full select,
+.control-full textarea {
+  .box-sizing(border-box);
+  height: auto;
+  width: 100%;
+}
+
+.control-large input,
+.control-large .control-label {
+  font-size: 18px;
+  line-height: 2;
+}
+
+.control-large input {
+}
+
 .form-actions {
   background: none;
   margin-left: -@gutter-x;
@@ -11,6 +53,57 @@ label {
   text-align: right;
 }
 
+// Override the default form widths.
+.form-horizontal .control-label {
+  width: 115px;
+}
+
+.form-horizontal .controls {
+  margin-left: 125px;
+}
+
+.form-horizontal .info-block {
+  position: relative;
+  float: right;
+  width: 265px;
+  font-size: 11px;
+  color: #AEAEAE;
+  line-height: 1.3;
+  padding: 6px 0 6px 25px;
+}
+
+.form-horizontal .info-block:after {
+  .ckan-icon;
+  .ckan-icon-info-flat;
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10px;
+}
+
+.editor textarea {
+  .border-radius(@inputBorderRadius @inputBorderRadius 0 0);
+  border-bottom: none;
+  font-size: 12px;
+}
+
+.editor .info-block {
+  .border-radius(0 0 @inputBorderRadius @inputBorderRadius);
+  display: block;
+  float: none;
+  padding: 4px 10px;
+  background: #ebebeb;
+  width: auto;
+  border: 1px solid @inputBorder;
+  border-top: none;
+  font-size: 11px;
+  color: #282828;
+}
+
+.editor .info-block:after {
+  content: none;
+}
+
 .stages {
   .unstyled;
   .clearfix;

diff --git a/ckan/public/base/less/icons.less b/ckan/public/base/less/icons.less
@@ -66,3 +66,4 @@
 .ckan-icon-info      { .ckan-icon-background-position(9, "large") }
 .ckan-icon-download  { .ckan-icon-background-position(10, "large") }
 .ckan-icon-star      { .ckan-icon-background-position(11, "large") }
+.ckan-icon-info-flat { .ckan-icon-background-position(12, "large") }
diff --git a/ckan/public/base/less/main.less b/ckan/public/base/less/main.less
@@ -1,2 +1,2 @@
-@import "./vendor/bootstrap/bootstrap.less";
-@import "./ckan.less";
+@import "vendor/bootstrap/bootstrap.less";
+@import "ckan.less";
diff --git a/ckan/templates/package/new.html b/ckan/templates/package/new.html
@@ -35,26 +35,26 @@ <h2>Errors in form</h2>
                   <li py:for="key, error in error_summary.items()">${"%s: %s" % (key if not key=='Name' else 'URL', error)}</li>
                 </ul>
               </div>
-              <div class="control-group" py:with="error = errors.get('title', '')">
+              <div class="control-group control-large control-full" py:with="error = errors.get('title', '')">
                 <label class="control-label" for="field-title">Title</label>
                 <div class="controls">
                   <input id="field-title" name="title" value="${data.get('title', '')}" placeholder="${_('A descriptive title')}" />
                   <span class="error-block" py:if="error">${error}</span>
                 </div>
               </div>
 
-              <div class="control-group" py:with="error = errors.get('name', '')">
+              <div class="control-group control-full" py:with="error = errors.get('name', '')">
                 <label class="control-label" for="field-name">URL</label>
                 <div class="controls">
                   <input id="field-name" name="name" value="${data.get('name', '')}" placeholder="${_('my-dataset')}" />
                   <span class="error-block" py:if="error">${error}</span>
                 </div>
               </div>
 
-              <div class="control-group" py:with="error = errors.get('notes', '')">
+              <div class="control-group control-full" py:with="error = errors.get('notes', '')">
                 <label class="control-label" for="field-notes">Description</label>
                 <div class="controls editor">
-                  <textarea id="field-notes" name="notes" cols="20" rows="5"></textarea>
+                  <textarea id="field-notes" name="notes" cols="20" rows="5" placeholder="Some useful notes about the data">${data.get('notes', '')}</textarea>
                   <span class="info-block">You can use <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a> editing here</span>
                   <span class="error-block" py:if="error">${error}</span>
                 </div>