Bug #1765276: changed more panels to cards and card-heading to card-headers.

Lots of changes to cards, list-group-items, and buttons

behatnotneeded

Change-Id: I779967169fc0fffd61c0430f1c145e196bc87abd

htdocs/admin/users/add.php

@@ -146,7 +146,7 @@ unset($prefs);
 
 $form = pieform(array(
     'name'       => 'adduser',
-    'class'      => 'panel panel-default panel-body',
+    'class'      => 'card card-body',
     'autofocus'  => false,
     'template'   => 'adduser.php',
     'templatedir' => pieform_template_dir('adduser.php'),

htdocs/artefact/file/blocktype/internalmedia/lib.php

@@ -55,7 +55,7 @@ class PluginBlocktypeInternalmedia extends MaharaCoreBlocktype {
             return get_string('typeremoved', 'blocktype.file/internalmedia');
         }
 
-        $result = '<div class="mediaplayer-container panel-body flush"><div class="mediaplayer">';
+        $result = '<div class="mediaplayer-container card-body flush"><div class="mediaplayer">';
         $result .= call_static_method($playerclass, 'get_html', $artefact, $instance, $width, $height);
 
         // File download link

htdocs/auth/saml/index.php

@@ -423,7 +423,7 @@ function saml_auth_generate_login_form() {
                 'value' => get_string('login')
             ),
             'register' => array(
-                'value' => '<div id="login-helplinks" class="panel-footer"><small>' . $registerlink
+                'value' => '<div id="login-helplinks" class="card-footer"><small>' . $registerlink
                     . '<a href="' . get_config('wwwroot') . 'forgotpass.php">' . get_string('lostusernamepassword') . '</a></small></div>'
             ),
             'loginsaml' => array(

htdocs/js/ajaxblocks.js

@@ -19,7 +19,7 @@ jQuery(function($) {
 
                $(blocks[i]).load(baseurl + "blocktype/blocktype.ajax.php?blockid="+ id, function(){
                     if ($(this).is(':empty')){
-                        $(this).closest('.panel').addClass('d-none');
+                        $(this).closest('.card').addClass('d-none');
                     }
                     if (config.mathjax && MathJax !== undefined) {
                         MathJax.Hub.Queue(["Typeset", MathJax.Hub, blocks.get(i)]);

htdocs/module/framework/frameworkmanager.php

@@ -30,7 +30,7 @@ $classname = 'Framework';
 
 $form = $framework->get_framework_config_options();
 if (!array_key_exists('class', $form)) {
-    $form['class'] = 'panel panel-body';
+    $form['class'] = 'card card-body';
 }
 
 $form['name'] = 'frameworkconfig';

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

 .card.collapsible {
-    > .card-header, .card-heading-nested {
+    > .card-header, .card-header-nested {
         border-bottom: 0;
 
         > a.outer-link {

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

@@ -40,7 +40,7 @@
 
 
 .card.collapsible {
-    .card-heading-nested,
+    .card-header-nested,
     .card-header {
         > a.outer-link {
             border-color: #ddd;

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

@@ -5,7 +5,7 @@
     background-color: transparent;
 
     &.card-warning {
-         > .card-header, .card-heading-nested {
+         > .card-header, .card-header-nested {
             border-left: 0;
         }
     }
@@ -25,7 +25,7 @@
     }
 
     // removing left/right padding in card headings
-    .card-heading-nested,
+    .card-header-nested,
     > .card-header {
         padding-left: 0;
         padding-right: 0;

htdocs/theme/default/sass/utilities/_custom-variables.scss

@@ -108,6 +108,6 @@ $card-footer-bg:             #f0f5ea;
 $card-header-bg:    #fff;
 
 $card-border:        #d9d9d9;
-$card-heading-bg:    #FFFFFF;
+$card-header-bg:    #FFFFFF;
 
-$card-secondary-heading-bg:   darken($card-heading-bg, 2%);
+$card-secondary-heading-bg:   darken($card-header-bg, 2%);

htdocs/theme/modern/sass/utilities/_custom-variables.scss

@@ -131,7 +131,7 @@ $card-footer-bg:             #f5f5f5;
 
 $card-text:          $gray-700;
 $card-border:        #ddd;
-$card-heading-bg:    #f9f9f9;
+$card-header-bg:    #f9f9f9;
 
 $card-primary-text:          $gray-700;
 $card-primary-border:        #ddd;
@@ -139,7 +139,7 @@ $card-primary-heading-bg:    #fff;
 
 $card-secondary-text:         $primary;
 $card-secondary-border:       $primary;
-$card-secondary-heading-bg:   darken($card-heading-bg, 2%);
+$card-secondary-heading-bg:   darken($card-header-bg, 2%);
 
 $card-success-text:          $state-success-text;
 $card-success-border:        $state-success-border;

htdocs/theme/raw/js/notification.js

@@ -171,7 +171,7 @@ jQuery(function($) {
             notificationList.html(data.data.html);
         }
         else if (self) {
-            $(self).removeClass('panel-primary js-panel-unread').addClass('panel-default');
+            $(self).removeClass('panel-primary js-panel-unread').addClass('card');
             $(self).find('.control').removeClass('control');
         }
         $('#selectall').attr('checked', false); // Need to uncheck bulk checkbox
@@ -194,12 +194,12 @@ jQuery(function($) {
     function attachNotificationEvents() {
 
         // Add warning class to all selected notifications
-        $('.panel .control input').on('change', function() {
+        $('.card .control input').on('change', function() {
             if ($(this).prop('checked')) {
-                $(this).closest('.panel').addClass('panel-warning');
+                $(this).closest('.card').addClass('card-warning');
             }
             else {
-                $(this).closest('.panel').removeClass('panel-warning');
+                $(this).closest('.card').removeClass('card-warning');
             }
         });
 

htdocs/theme/raw/pieforms/adduser.php

@@ -3,7 +3,7 @@ echo $form_tag;
 ?>
 
     <div class="card-items card-items-no-margin">
-        <div class="step step1 card card first" id="step1">
+        <div class="step step1 card first" id="step1">
             <h3 class="card-header"><?php echo get_string('usercreationmethod', 'admin'); ?></h3>
             <div class="card-body">
                 <div class="choice">
@@ -37,7 +37,7 @@ echo $form_tag;
         </div>
 
 
-        <div class="step step2 card card">
+        <div class="step step2 card">
             <h3 class="card-header"><?php echo get_string('basicdetails', 'admin'); ?></h3>
             <div class="card-body">
                 <?php foreach (array('username', 'password', 'staff', 'admin', 'authinstance', 'quota', 'institutionadmin') as $field) { ?>
@@ -60,7 +60,7 @@ echo $form_tag;
             </div>
         </div>
 
-        <div class="step step3 card card">
+        <div class="step step3 card">
             <h3 class="card-header"><?php echo get_string('create', 'admin'); ?></h3>
             <div class="card-body">
                 <!-- Button trigger modal -->

htdocs/theme/raw/plugintype/artefact/blog/templates/posts.tpl

@@ -69,7 +69,7 @@
         </p>
 
         {if $post->files}
-        <div class="has-attachment card card collapsible" id="postfiles_{$post->id}">
+        <div class="has-attachment card collapsible" id="postfiles_{$post->id}">
             <h5 class="card-header has-link">
                 <a class="text-left collapsed" data-toggle="collapse" href="#attach_{$post->id}" aria-expanded="false">
                     <span class="icon left icon-paperclip" role="presentation" aria-hidden="true"></span>

htdocs/theme/raw/plugintype/artefact/blog/templates/render/blogpost_renderattachments.tpl

-        <div class="has-attachment card card collapsible">
-            <h3 class="card-heading">
+        <div class="has-attachment card collapsible">
+            <h3 class="card-header">
                 <a class="text-left collapsed" aria-expanded="false" href="#blog-attach-{$postid}" data-toggle="collapse">
                     <span class="icon left icon-paperclip" role="presentation" aria-hidden="true"></span>
 
@@ -40,4 +40,3 @@
                 </ul>
             </div>
         </div>
-

htdocs/theme/raw/plugintype/artefact/blog/templates/viewposts.tpl

@@ -27,8 +27,8 @@
         </div>
 
         {if $post->files}
-        <div class="has-attachment card card collapsible" id="blockpostfiles-{$post->id}">
-            <h5 class="card-heading">
+        <div class="has-attachment card collapsible" id="blockpostfiles-{$post->id}">
+            <h5 class="card-header">
                 <a class="text-left collapsed" data-toggle="collapse" href="#post-attach-{$post->id}" aria-expanded="false">
                     <span class="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
                     <span class="text-small"> {str tag=attachedfiles section=artefact.blog} </span>

htdocs/theme/raw/plugintype/artefact/comment/templates/commentlist.tpl

@@ -94,8 +94,8 @@
 
         {if !$item->deletedmessage && $item->attachments}
         <div class="comment-attachment">
-            <div class="card card has-attachment collapsible">
-                <h4 class="card-heading">
+            <div class="card has-attachment collapsible">
+                <h4 class="card-header">
                     <a class="collapsible collapsed" aria-expanded="false" href="#attachments_{$item->id}" data-toggle="collapse">
                         <span class="icon left icon-paperclip" role="presentation" aria-hidden="true"></span>
                         <span class="text-small">{str tag=Attachments section=artefact.comment} ({$item->filescount})</span>

htdocs/theme/raw/plugintype/artefact/file/templates/form/filebrowser.tpl

@@ -54,7 +54,7 @@
         {/if}
 
         {if $config.upload}
-        <div id="{$prefix}_upload_container" class="clearfix {if $config.selectone || $config.selectmodal} card-fake{else} card card fileupload {/if} {if ($tabs && !$tabs.upload) || $uploaddisabled} d-none{/if}">
+        <div id="{$prefix}_upload_container" class="clearfix {if $config.selectone || $config.selectmodal} card-fake{else} card fileupload {/if} {if ($tabs && !$tabs.upload) || $uploaddisabled} d-none{/if}">
             {* config.uploadagreement: disable the file chooser unless the agreement is checked *}
             {* config.simpleupload: the form only contains a file chooser *}
             {* config.submitbutton: add submit button even if js is enabled & don't start uploading as soon as a file is chosen *}

htdocs/theme/raw/plugintype/artefact/internal/blocktype/textbox/templates/content.tpl

@@ -10,8 +10,8 @@
 
 {if $attachments}
 {* @TODO: this could probably be a reusable template *}
-<div class="has-attachment card card collapsible">
-    <h4 class="card-heading">
+<div class="has-attachment card collapsible">
+    <h4 class="card-header">
         <a class="text-left collapsed" aria-expanded="false" href="#note-attach-{$blockid}" data-toggle="collapse">
             <span class="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
 

htdocs/theme/raw/plugintype/artefact/plans/templates/delete.tpl

 {include file="header.tpl"}
-<div class="card card bg-danger view-description">
+<div class="card bg-danger view-description">
     <h2 class="card-header">{$subheading}</h2>
     <div class="card-body">
         <p>{$message}</p>

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/book.tpl

 {if $controls}
-<div class="card card">
+<div class="card">
     {if !$hidetitle}
     <h3 class="resumeh3 card-header">
         {str tag='book' section='artefact.resume'}

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/certification.tpl

 {if $controls}
-<div class="card card">
+<div class="card">
     {if !$hidetitle}
     <h3 class="resumeh3 card-header">
         {str tag='certification' section='artefact.resume'}

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/educationhistory.tpl

 {if $controls}
-<div class="card card">
+<div class="card">
     {if !$hidetitle}
     <h3 class="resumeh3 card-header">
         {str tag='educationhistory' section='artefact.resume'}

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/employmenthistory.tpl

 {if $controls}
-<div class="card card">
+<div class="card">
     {if !$hidetitle}
     <h3 class="resumeh3 card-header">
         {str tag='employmenthistory' section='artefact.resume'}

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/goals.tpl

@@ -8,7 +8,7 @@
     </h3>{/if}
     <div id="goalslist{$suffix}" class="card-items card-items-no-margin js-masonry" data-masonry-options='{ "itemSelector": ".card" }'>
         {foreach from=$goals item=n, name='default'}
-        <div class="card card">
+        <div class="card">
             <h4 class="card-header has-link">
                 {if $n->exists}
                     <a id="goals_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}">

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/goalsandskills.tpl

@@ -2,8 +2,8 @@
 {$description|clean_html|safe}
 
 {if isset($attachments)}
-<div class="has-attachment card card collapsible">
-    <h4 class="card-heading">
+<div class="has-attachment card collapsible">
+    <h4 class="card-header">
         <a class="text-left collapsed" aria-expanded="false" href="#cv-attach-{$id}{if $artefactid}-{$artefactid}{/if}" data-toggle="collapse">
             <span class="icon left icon-paperclip" role="presentation" aria-hidden="true"></span>
 

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/membership.tpl

 {if $controls}
-<div class="card card">
+<div class="card">
     {if !$hidetitle}
     <h3 class="resumeh3 card-header">
         {str tag='membership' section='artefact.resume'}

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/skills.tpl

@@ -9,7 +9,7 @@
 
     <div id="skillslist{$suffix}" class="card-items card-items-no-margin js-masonry" data-masonry-options='{ "itemSelector": ".card" }'>
         {foreach from=$skills item=n}
-        <div class="card card">
+        <div class="card">
             <h3 class="card-header has-link">
                 {if $n->exists}
                 <a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}">

htdocs/theme/raw/plugintype/auth/webservice/templates/addconnection.tpl

 {include file="header.tpl"}
-<div class="card card">
-    <h3 class="card-heading">{str tag="clientconnections" section="auth.webservice"}</h3>
+<div class="card">
+    <h3 class="card-header">{str tag="clientconnections" section="auth.webservice"}</h3>
     <div class="card-body">
     {$form|safe}
     </div>

htdocs/theme/raw/plugintype/auth/webservice/templates/configform.tpl

@@ -4,7 +4,7 @@
 <div class="collapsible-group" id="accordion" aria-multiselectable="true" role="tablist" >
 {foreach from=$form.elements item=element name=elements}
     {if $element.type == 'fieldset'}
-    <div class="pseudofieldset card card collapsible collapsible-group{if $.foreach.elements.last} last{/if}">
+    <div class="pseudofieldset card collapsible collapsible-group{if $.foreach.elements.last} last{/if}">
         <h2 class="pseudolegend card-header has-link">
         <a class="{if !$.foreach.elements.first}collapsed{/if}" href="#{$element.name}_pseudofieldset" data-toggle="collapse" aria-expanded="{if $.foreach.elements.first}true{else}false{/if}" aria-controls="{$element.name}_pseudofieldset" data-parent="#accordion">
         {$element.legend}

htdocs/theme/raw/plugintype/auth/webservice/templates/testclient.tpl

@@ -9,7 +9,7 @@
 {elseif $disabledprotocols}
     <div class="error alert alert-warning">{str tag=nowsprotocolsenabled section='auth.webservice' arg1=$disabledprotocols}</div>
 {else}
-    <div class="card card card-body">
+    <div class="card card-body">
     {$form|safe}
     </div>
 {/if}

htdocs/theme/raw/plugintype/auth/webservice/templates/webservicelogs.tpl

 {include file="header.tpl"}
 
-<div id="logsearchformcontainer" class="card card card-body">
+<div id="logsearchformcontainer" class="card card-body">
 {$form|safe}
 </div>
-<div id="results" class="section card card">
+<div id="results" class="section card">
     <h2 class="card-header" id="resultsheading">{str tag="Results"}</h2>
     {if $results}
     <div class="table-responsive">

htdocs/theme/raw/plugintype/blocktype/recentforumposts/templates/latestforumposts.tpl

@@ -25,8 +25,8 @@
                     {$postinfo->body|str_shorten_html:100:true:true:false|safe}
                 </div>
                 {if $postinfo->filecount}
-                <div class="has-attachment panel panel-default collapsible collapsible-group" id="blockpostfiles-{$postinfo->id}">
-                    <h5 class="panel-heading">
+                <div class="has-attachment card collapsible collapsible-group" id="blockpostfiles-{$postinfo->id}">
+                    <h5 class="card-header">
                         <a class="text-left collapsed" data-toggle="collapse" href="#post-attach-{$postinfo->id}" aria-expanded="false">
                             <span class="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
                             <span class="text-small"> {str tag=attachedfiles section=artefact.blog} </span>

htdocs/theme/raw/plugintype/blocktype/recentforumposts/templates/recentforumposts.tpl

@@ -22,8 +22,8 @@
                 </div>
                 <p class="content-text">{$postinfo->body|str_shorten_html:100:true:true:false|safe}</p>
                 {if $postinfo->filecount}
-                <div class="has-attachment panel panel-default collapsible collapsible-group" id="blockpostfiles-{$postinfo->id}">
-                    <h5 class="panel-heading">
+                <div class="has-attachment card collapsible collapsible-group" id="blockpostfiles-{$postinfo->id}">
+                    <h5 class="card-header">
                         <a class="text-left collapsed" data-toggle="collapse" href="#post-attach-{$postinfo->id}" aria-expanded="false">
                             <span class="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
                             <span class="text-small"> {str tag=attachedfiles section=artefact.blog} </span>

htdocs/theme/raw/plugintype/interaction/forum/templates/deletepost.tpl

 {include file="header.tpl"}
 
-<div class="card card bg-danger view-container">
+<div class="card bg-danger view-container">
     <h2 class="card-header">{$subheading}</h2>
     <div class="card-body">
         {$deleteform|safe}

htdocs/theme/raw/plugintype/interaction/forum/templates/deletetopic.tpl

 {include file="header.tpl"}
 
-<div class="card card bg-danger view-container">
+<div class="card bg-danger view-container">
     <h2 class="card-header">{$subheading}</h2>
     <div class="card-body">
         {$deleteform|safe}

htdocs/theme/raw/plugintype/module/multirecipientnotification/templates/activitylistout.tpl

 <div class="collapsible-group">
 {foreach from=$data item=item name='notification'}
-    <div class="card card collapsible notification collapsible-group {if $dwoo.foreach.notification.first}first{/if} {if $dwoo.foreach.notification.last}last{/if}">
+    <div class="card collapsible notification collapsible-group {if $dwoo.foreach.notification.first}first{/if} {if $dwoo.foreach.notification.last}last{/if}">
         <h4 class="card-header">
             <label class="card-control">
                 {if $item->table === 'module_multirecipient_notification'}

htdocs/theme/raw/plugintype/module/multirecipientnotification/templates/sendmessage.tpl

@@ -4,8 +4,8 @@
 <p class="lead">{str tag='labelsubject' section='module.multirecipientnotification'} {$messages.[0]->subject}</p>
 <div id="messagethread" class="collapsible-group">
 {foreach from=$messages item=message name='message'}
-    <div class="message-item card card collapsible collapsible-group {if $dwoo.foreach.message.first}first{/if}">
-        <h2 class="message-preview card-heading">
+    <div class="message-item card collapsible collapsible-group {if $dwoo.foreach.message.first}first{/if}">
+        <h2 class="message-preview card-header">
             <span class="user-icon left" role="presentation" aria-hidden="true">
                 <img src="{profile_icon_url user=$message->fromid maxwidth=60 maxheight=60}" alt="{$message->fromusrname}">
             </span>
@@ -78,7 +78,7 @@
     </div>
 {/foreach}
 </div>
-<div class="form-sendmessage card card collapsible">
+<div class="form-sendmessage card collapsible">
     <div class="card-footer">
         {$form|safe}
     </div>

htdocs/theme/raw/plugintype/search/elasticsearch/templates/searchresults.tpl

 {include file="search:elasticsearch:facets.tpl" facets=$facets}
-<div class="subpage universalsearch card card">
+<div class="subpage universalsearch card">
     <div id="resultswrap" class="{if $selected eq 'Text' || $selected eq 'Media' || $selected eq 'Portfolio'}filter{else}nofilter{/if}">
         {if $totalresults > 0}
             <div class="elasticsearch-filters clearfix">

htdocs/theme/raw/sass/_custom.scss

@@ -709,6 +709,9 @@ a[type="submit"],
 .form-inline {
     input {
         @extend .form-control;
+        &.btn-primary {
+            @extend .btn-primary;
+        }
     }
 }
 .notification-parent {

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

@@ -161,6 +161,8 @@
 
 // list-group-item with btn-group
 .list-group-item {
+    border-left-width: 0;
+    border-right-width: 0;
     &.draft,
     &.list-group-item-warning {
         @extend .list-group-item-warning;

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

@@ -9,7 +9,8 @@
     ~ .no-label.submit {
         margin-top: 9px;
         .no-label.submit {
-            margin-top: 9px;
+            margin-top: 12px;
+            width: auto;
         }
         .btn {
             // Custom style for button that is positioned after dropdown-group

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

@@ -17,6 +17,7 @@
       .input-group-append {
         display: inline-block;
         height: $input-height;
+        width: auto;
       }
     }
     .pieform-fieldset > .form-group {

htdocs/theme/raw/sass/layout/_profile-block.scss

@@ -23,6 +23,7 @@
         }
     }
     a {
+        border-width: 0;
         &:after {
             @include transition(opacity 0.5s);
             @include fa-icon();

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

@@ -10,12 +10,16 @@
         margin: 0;
     }
 
-    &.has-link {
+    &.has-link,
+    &.profile-block {
         padding: 0;
         h4 {
             padding: 0;
             margin: 0;
         }
+        a:not(.secondary-link) {
+            border-width: 0;
+        }
     }
 
     .secondary-link {
@@ -27,7 +31,7 @@
         display: block;
         color: inherit;
         padding: 10px 15px;
-        border: 0 solid $card-border-color;
+        border: 1px solid $card-border-color;
         border-bottom: 0;
         font-size: $font-size-base * 1.14285;
         .card-secondary > & {

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

@@ -979,7 +979,7 @@ $progress-bar-transition:           width .6s ease !default;
 
 $list-group-bg:                             #fff !default;
 $list-group-border-color:           rgba($black, .125) !default;
-$list-group-border-width:           0 !default;
+$list-group-border-width:           1px !default;
 $list-group-border-radius:                  $border-radius !default;