[#1828,css][s]: change to bootstrap v2.0 alert html and styling and a…

…dd bootstrap v2.0 pagination.
ckan · Feb 29, 2012 · 1a7db35 · 1a7db35
1 parent e8a9fa8
commit 1a7db35
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 86 deletions.
diff --git a/ckan/public/css/bootstrap.css b/ckan/public/css/bootstrap.css
@@ -120,111 +120,126 @@ button.pretty-button::-moz-focus-inner, input.pretty-button::-moz-focus-inner {
   border: 0;
 }
 
-/* ================================== */
-/* = Twitter.Bootstrap Alert Msgs   = */
-/* ================================== */
+/* ================== */
+/* :: Bootstrap v2.0  :: */
+/* ================== */
 
-.alert-message {
-  position: relative;
-  padding: 7px 15px;
+.alert {
+  padding: 8px 35px 8px 14px;
   margin-bottom: 18px;
-  color: #404040;
-  background-color: #eedc94;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
-  background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
-  background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
-  background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
-  background-image: -o-linear-gradient(top, #fceec1, #eedc94);
-  background-image: linear-gradient(top, #fceec1, #eedc94);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  border-color: #eedc94 #eedc94 #e4c652;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  border-width: 1px;
-  border-style: solid;
+  background-color: #fcf8e3;
+  border: 1px solid #fbeed5;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
-.alert-message .close {
-  margin-top: 1px;
-  *margin-top: 0;
+.alert, .alert-heading {
+  color: #c09853;
 }
-.alert-message a {
-  font-weight: bold;
-  color: #404040;
+.alert .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  line-height: 18px;
 }
-.alert-message.danger p a,
-.alert-message.error p a,
-.alert-message.success p a,
-.alert-message.info p a {
-  color: #ffffff;
+.alert-success {
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
 }
-.alert-message h5 {
-  line-height: 18px;
+.alert-success, .alert-success .alert-heading {
+  color: #468847;
+}
+.alert-danger, .alert-error {
+  background-color: #f2dede;
+  border-color: #eed3d7;
+}
+.alert-danger,
+.alert-error,
+.alert-danger .alert-heading,
+.alert-error .alert-heading {
+  color: #b94a48;
+}
+.alert-info {
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+.alert-info, .alert-info .alert-heading {
+  color: #3a87ad;
 }
-.alert-message p {
+.alert-block {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+.alert-block > p, .alert-block > ul {
   margin-bottom: 0;
 }
-.alert-message div {
+.alert-block p + p {
   margin-top: 5px;
-  margin-bottom: 2px;
-  line-height: 28px;
 }
-.alert-message .btn {
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+
+/* ================================== */
+/* = Twitter.Bootstrap Pagination   = */
+/* ================================== */
+
+.pagination {
+  height: 36px;
+  margin: 18px 0;
 }
-.alert-message.block-message {
-  background-image: none;
-  background-color: #fdf5d9;
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  padding: 14px;
-  border-color: #fceec1;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.alert-message.block-message ul, .alert-message.block-message p {
-  margin-right: 30px;
-}
-.alert-message.block-message ul {
+.pagination ul {
+  display: inline-block;
+  *display: inline;
+  /* IE7 inline-block hack */
+
+  *zoom: 1;
+  margin-left: 0;
   margin-bottom: 0;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.pagination li {
+  display: inline;
+}
+.pagination a {
+  float: left;
+  padding: 0 14px;
+  line-height: 34px;
+  text-decoration: none;
+  border: 1px solid #ddd;
+  border-left-width: 0;
 }
-.alert-message.block-message li {
-  color: #404040;
+.pagination a:hover, .pagination .active a {
+  background-color: #f5f5f5;
 }
-.alert-message.block-message .alert-actions {
-  margin-top: 5px;
+.pagination .active a {
+  color: #999999;
+  cursor: default;
 }
-.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
-  color: #404040;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+.pagination .disabled a, .pagination .disabled a:hover {
+  color: #999999;
+  background-color: transparent;
+  cursor: default;
 }
-.alert-message.block-message.error {
-  background-color: #fddfde;
-  border-color: #fbc7c6;
+.pagination li:first-child a {
+  border-left-width: 1px;
+  -webkit-border-radius: 3px 0 0 3px;
+  -moz-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
 }
-.alert-message.block-message.success {
-  background-color: #d1eed1;
-  border-color: #bfe7bf;
+.pagination li:last-child a {
+  -webkit-border-radius: 0 3px 3px 0;
+  -moz-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
 }
-.alert-message.block-message.info {
-  background-color: #ddf4fb;
-  border-color: #c6edf9;
+.pagination-centered {
+  text-align: center;
 }
-.alert-message.block-message.danger p a,
-.alert-message.block-message.error p a,
-.alert-message.block-message.success p a,
-.alert-message.block-message.info p a {
-  color: #404040;
+.pagination-right {
+  text-align: right;
 }
 
 
diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
@@ -1010,7 +1010,7 @@ CKAN.View.ResourceAddLink = Backbone.View.extend({
 
   my.showError = function (error) {
     var _html = _.template(
-        '<div class="alert-message warning"><strong><%= title %></strong><br /><%= message %></div>'
+        '<div class="alert alert-error"><strong><%= title %></strong><br /><%= message %></div>'
         , error
         );
     my.$dialog.html(_html);

diff --git a/ckan/public/scripts/templates.js b/ckan/public/scripts/templates.js
@@ -57,7 +57,7 @@ CKAN.Templates.resourceUpload = ' \
       </dd> \
     </dl> \
   </form> \
-  <div class="alert-message block-message" style="display: none;"></div> \
+  <div class="alert alert-block" style="display: none;"></div> \
   </div> \
 </div> \
 ';

diff --git a/ckan/public/scripts/vendor/ckanjs/1.0.0/ckanjs.js b/ckan/public/scripts/vendor/ckanjs/1.0.0/ckanjs.js
@@ -1614,7 +1614,7 @@ this.CKAN.View || (this.CKAN.View = {});
       }
       var tmpl = $.tmpl(CKAN.Templates.resourceUpload, tmplData);
       this.el.html(tmpl);
-      this.$messages = this.el.find('.alert-message');
+      this.$messages = this.el.find('.alert');
       this.setupFileUpload();
       return this;
     },
@@ -1743,8 +1743,8 @@ this.CKAN.View || (this.CKAN.View = {});
     },
 
     setMessage: function(msg, category) {
-      var category = category || 'info';
-      this.$messages.removeClass('info success error');
+      var category = category || 'alert-info';
+      this.$messages.removeClass('alert-info alert-success alert-error');
       this.$messages.addClass(category);
       this.$messages.show();
       this.$messages.html(msg);