Bug 1765276: Finished working through styleguide, pagination, js errors

Change-Id: Ia00039f12e04adbb5bc7be64a41dfb0b16653fe3

htdocs/admin/extensions/pluginconfig.php

@@ -58,7 +58,7 @@ else {
 }
 
 if (!array_key_exists('class', $form)) {
-    $form['class'] = 'panel panel-body';
+    $form['class'] = 'card card-body';
 }
 $form['plugintype'] = $plugintype;
 $form['pluginname'] = $pluginname;

htdocs/js/mahara.js

@@ -969,16 +969,6 @@ function fetch_graph_data(opts) {
             if (json.data.title) {
                 jQuery('#' + opts.id + 'title').text(json.data.title);
             }
-            if ($('.statinfoblock').length > 0) {
-                function delayResize() {
-                    var maxHeight = Math.max.apply(null, $(".statinfoblock").map(function () {
-                        return $(this).height();
-                    }).get());
-                    trueMaxHeight = Math.max(trueMaxHeight, maxHeight);
-                    $('.statinfoblock').css('height', trueMaxHeight + 'px');
-                }
-                var timeoutID = window.setTimeout(delayResize, 500);
-            }
         }
     });
 }

htdocs/js/paginator.js

@@ -67,12 +67,16 @@ return function(id, list, heading, script, extradata) {
 
     this.rewritePaginatorLinks = function() {
         $('#' + self.id + ' li').each(function() {
-          var a = $(this).find('a')[0];
+            // Add links so bootstrap knows this is a pagination item
+            $(this).addClass("page-item");
+            $(this).find("> *").addClass("page-link");
 
-          // If there is a link
-          if (a) {
-              self.rewritePaginatorLink(a);
-          }
+            var a = $(this).find('a')[0];
+
+            // If there is a link
+            if (a) {
+                self.rewritePaginatorLink(a);
+            }
         });
     };
 

htdocs/lib/form/elements/artefactchooser.php

@@ -182,7 +182,7 @@ jQuery(function($) {
                   $(browseA).removeClass('active');
                   $(searchA).find('.sr-only').html('(' + get_string_ajax('tab', 'mahara') + ' ' + get_string_ajax('selected', 'mahara') + ')');
                   $(browseA).find('.sr-only').html('(' + get_string_ajax('tab', 'mahara') + ')');
-                  $(searchA.).addClass('active');
+                  $(searchA).addClass('active');
 
                   $('#artefactchooser-searchfield').on('keypress', function(e) {
                       if (e.keycode == 13) { // enter pressed - submitting form

htdocs/lib/web.php

@@ -4219,7 +4219,7 @@ function build_pagination($params) {
     }
 
     if ($params['limit'] && ($params['limit'] < $params['count'])) {
-        $output .= '<ul class="pagination pagination-xs">';
+        $output .= '<ul class="pagination pagination-sm">';
         $pages = ceil($params['count'] / $params['limit']);
         $page = $params['offset'] / $params['limit'];
 
@@ -4320,7 +4320,7 @@ function build_pagination($params) {
              // add ellipsis if pages skipped
             $text = $i + 1;
             if ($k != 0 && $prevpagenum < $i - 1) {
-                $text = '<span class="metadata d-none d-sm-block">...</span>' . ($i + 1);
+                $text = '<span class="metadata d-none d-md-inline-block">...</span>' . ($i + 1);
             }
 
             if ($i == $page) {

htdocs/theme/raw/sass/_custom.scss

@@ -234,6 +234,7 @@
 
 .progress-bar {
     position: relative;
+    height: 100%;
     &.small-progress span {
         display: block;
         left: 100%;

htdocs/theme/raw/sass/components/_artefactchooser.scss

@@ -14,10 +14,14 @@
 
 .artefactchooser-tabs {
     margin-bottom: 20px;
+    width: 100%;
 }
 
 .artefactchooser-search {
     padding: 10px 0;
+    > input {
+        float: left;
+    }
 }
 
 .artefactchooser-subtabs-selected {

htdocs/theme/raw/sass/components/_btn.scss

@@ -378,9 +378,6 @@ td.action-list-copy {
             opacity: 1;
         }
     }
-	.icon + span {
-		padding-left: 5px;
-	}
 }
 
 .btn:disabled {

htdocs/theme/raw/sass/components/_list-group.scss

@@ -238,7 +238,7 @@
 }
 
 .list-group-item-default{
-    background-color: rgba(theme-color("secondary"), 0.5);
+    background-color: rgba(lighten(theme-color("secondary"), 12.5%), 0.5);
 }
 
 .list-group-item-text {

htdocs/theme/raw/sass/components/_modal.scss

@@ -165,6 +165,7 @@ $width-sm: 90%;
         background:  theme-color("primary");
         padding: 10px 15px;
         color: $modal-header-color;
+        border-radius: 0;
          h4, a {
             color: $modal-header-color;
         }
@@ -216,3 +217,7 @@ $width-sm: 90%;
         max-width:250px;
     }
 }
+
+.modal-title {
+    margin-top: 0;
+}

htdocs/theme/raw/sass/components/_pagination.scss

@@ -38,7 +38,7 @@
 }
 
 // Small
-.pagination-xs {
+.pagination-sm {
   @include pagination-size($pagination-padding-y-xs, $pagination-padding-x-xs, $font-size-sm, $pagination-line-height, $border-radius-sm);
 }
 

htdocs/theme/raw/sass/form/_dropdown.scss

@@ -72,6 +72,8 @@
     }
 
     .input-sm {
+        padding: 2.3px 10px;
+        font-size: 12px;
         &.picker {
             padding: 0;
         }

htdocs/theme/raw/sass/form/_form-group.scss

@@ -208,6 +208,11 @@
         &.stacked {
             .checkboxes-option {
                 margin-left: 0;
+                label {
+                    padding-left: 20px;
+                    padding-right: 10px;
+                    margin-top: 2px;
+                }
             }
         }
         .checkboxes-option {

htdocs/theme/raw/sass/form/_form.scss

@@ -115,7 +115,7 @@ label,
 .checkbox {
   position: relative;
   display: block;
-  margin-top: 10px;
+  // margin-top: 10px;
   margin-bottom: 10px;
 
   label {
@@ -190,7 +190,7 @@ textarea.resizable {
     position: relative;
     label {
         padding: 0;
-        display: block;
+        display: inline-block;
     }
     .form-group {
         padding: 0;

htdocs/theme/raw/sass/layout/card/_card-collapse.scss

@@ -132,6 +132,9 @@
 
     &.as-link {
        @include card-as-link();
+       &.link-expand-right legend h4 {
+           border-bottom: 0;
+       }
     }
 }
 

htdocs/theme/raw/sass/layout/card/_card-header.scss

@@ -27,7 +27,9 @@
         display: block;
         color: inherit;
         padding: 10px 15px;
-
+        border: 1px solid $card-border-color;
+        border-bottom: 0;
+        font-size: $font-size-base * 1.14285;
         .card-block > & {
             padding: 10px 8px;
         }

htdocs/theme/raw/sass/layout/card/_card-secondary.scss

@@ -10,6 +10,9 @@
     > .card-header {
         font-family: $font-family-sans-serif;
         margin-top: 0;
+        > a {
+            border: 0;
+        }
     }
     &.blockinstance.card {
         background-color: transparent;

htdocs/theme/raw/sass/layout/card/_card.scss

@@ -8,6 +8,7 @@
     }
     table {
         font-size: 12px;
+        margin-bottom: 0;
     }
     small {
         margin-top:5px;

htdocs/theme/raw/sass/typography/_tables.scss

@@ -134,6 +134,14 @@ td.tiny {
             }
         }
     }
+    > tbody > tr {
+        &.active td {
+            background-color: $table-active-bg;
+        }
+        > th {
+            border-top: 1px solid $table-border-color;
+        }
+    }
 }
 
 .table-hover {

htdocs/theme/raw/sass/utilities/_bootstrap-variables.scss

@@ -150,6 +150,7 @@ $table-cell-padding:                        .5rem;
 $table-bg:                                  transparent;
 $table-accent-bg:                           #f9f9f9;
 $table-hover-bg:                            #f5f5f5;
+$table-active-bg:                           #f5f5f5;
 $table-border-color:                        #ddd;
 
 $dropdown-link-color:                       $gray-900;
@@ -180,6 +181,9 @@ $nav-tabs-link-hover-border-color:          theme-color('primary');
 $navbar-padding-y:                          0;
 $navbar-padding-x:                          0;
 
+// Pagination
+$pagination-line-height:                    1.5;
+
 // Cards
 $card-spacer-y:                             0.625rem;
 $card-spacer-x:                             0.9375rem;