[2375] Styled the radios at the top of the add resource form

ckan · May 24, 2012 · bf2179b · bf2179b
1 parent 4b2e335
commit bf2179b
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 16 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/dataset.less b/ckan/public/base/less/dataset.less
@@ -113,6 +113,47 @@
   right: 0;
 }
 
+// Dataset Forms
+
+.dataset-resource-form .dataset-form-resource-types {
+  margin-bottom: 5px;
+}
+
+.dataset-form-resource-types .radio-wrapper {
+  .clearfix;
+  position: relative;
+}
+
+.dataset-form-resource-types .ckan-icon {
+  position: relative;
+  top: 3px;
+}
+
+.dataset-form-resource-types .radio {
+  font-weight: normal;
+  padding-left: 0;
+  padding-right: 18px;
+}
+
+.dataset-form-resource-types input[type=radio]:checked+label {
+  font-weight: bold;
+}
+
+.dataset-form-resource-types input[type=radio]:checked+label:after {
+  .ckan-icon;
+  .ckan-icon-callout;
+  display: block;
+  content: "";
+  position: absolute;
+  top: auto;
+  left: 20px;
+  bottom: -23px;
+}
+
+.dataset-form-resource-types input[type=radio] {
+  display: none;
+}
+
 // Tag List
 
 .tag-list {

diff --git a/ckan/public/base/less/icons.less b/ckan/public/base/less/icons.less
@@ -36,15 +36,19 @@
 
 // SMALL
 
-.ckan-icon-fb      { .ckan-icon-background-position(0, "small") }
-.ckan-icon-gplus   { .ckan-icon-background-position(1, "small") }
-.ckan-icon-twitter { .ckan-icon-background-position(2, "small") }
-.ckan-icon-email   { .ckan-icon-background-position(3, "small") }
-.ckan-icon-share   { .ckan-icon-background-position(4, "small") }
-.ckan-icon-feed    { .ckan-icon-background-position(5, "small") }
-.ckan-icon-calendar{ .ckan-icon-background-position(6, "small") }
-.ckan-icon-file    { .ckan-icon-background-position(7, "small") }
-.ckan-icon-lock    { .ckan-icon-background-position(8, "small") }
+.ckan-icon-fb          { .ckan-icon-background-position(0, "small") }
+.ckan-icon-gplus       { .ckan-icon-background-position(1, "small") }
+.ckan-icon-twitter     { .ckan-icon-background-position(2, "small") }
+.ckan-icon-email       { .ckan-icon-background-position(3, "small") }
+.ckan-icon-share       { .ckan-icon-background-position(4, "small") }
+.ckan-icon-feed        { .ckan-icon-background-position(5, "small") }
+.ckan-icon-calendar    { .ckan-icon-background-position(6, "small") }
+.ckan-icon-file        { .ckan-icon-background-position(7, "small") }
+.ckan-icon-lock        { .ckan-icon-background-position(8, "small") }
+.ckan-icon-link-file   { .ckan-icon-background-position(9, "small") }
+.ckan-icon-link-plugin { .ckan-icon-background-position(10, "small") }
+.ckan-icon-upload-file { .ckan-icon-background-position(11, "small") }
+.ckan-icon-callout     { .ckan-icon-background-position(12, "small") }
 
 // MEDIUM
 

diff --git a/ckan/templates/package/new_resource.html b/ckan/templates/package/new_resource.html
@@ -21,17 +21,19 @@
           <div class="content">
             ${h.snippet('package/new_stages.html', stage=2)}
 
-            <form class="dataset-form form-horizontal" method="post" py:with="errors = {}; data = {};">
+            <form class="dataset-form dataset-resource-form form-horizontal" method="post" py:with="errors = {}; data = {};">
               <div class="control-group dataset-form-resource-types">
                 <div class="controls">
-                  <label class="radio inline" for="field-resource-type-file">
+                  <span class="radio-wrapper">
+                    <i class="ckan-icon ckan-icon-link-file"></i>
                     <input id="field-resource-type-file" type="radio" name="resources__0__url" checked="checked" value="file" />
-                    Link to a file
-                  </label>
-                  <label class="radio inline" for="field-resource-type-api">
+                    <label class="radio inline" for="field-resource-type-file">Link to a file</label>
+                  </span>
+                  <span class="radio-wrapper">
+                    <i class="ckan-icon ckan-icon-link-plugin"></i>
                     <input id="field-resource-type-api" type="radio" name="resources__0__url" value="api" />
-                    Link to an API
-                  </label>
+                    <label class="radio inline" for="field-resource-type-api">Link to an API</label>
+                  </span>
                 </div>
               </div>