Commit e9133840 authored by Liam's avatar Liam Committed by Rebecca Blundell

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
parent 74fbb297
...@@ -146,7 +146,7 @@ unset($prefs); ...@@ -146,7 +146,7 @@ unset($prefs);
$form = pieform(array( $form = pieform(array(
'name' => 'adduser', 'name' => 'adduser',
'class' => 'panel panel-default panel-body', 'class' => 'card card-body',
'autofocus' => false, 'autofocus' => false,
'template' => 'adduser.php', 'template' => 'adduser.php',
'templatedir' => pieform_template_dir('adduser.php'), 'templatedir' => pieform_template_dir('adduser.php'),
......
...@@ -55,7 +55,7 @@ class PluginBlocktypeInternalmedia extends MaharaCoreBlocktype { ...@@ -55,7 +55,7 @@ class PluginBlocktypeInternalmedia extends MaharaCoreBlocktype {
return get_string('typeremoved', 'blocktype.file/internalmedia'); 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); $result .= call_static_method($playerclass, 'get_html', $artefact, $instance, $width, $height);
// File download link // File download link
......
...@@ -423,7 +423,7 @@ function saml_auth_generate_login_form() { ...@@ -423,7 +423,7 @@ function saml_auth_generate_login_form() {
'value' => get_string('login') 'value' => get_string('login')
), ),
'register' => array( '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>' . '<a href="' . get_config('wwwroot') . 'forgotpass.php">' . get_string('lostusernamepassword') . '</a></small></div>'
), ),
'loginsaml' => array( 'loginsaml' => array(
......
...@@ -19,7 +19,7 @@ jQuery(function($) { ...@@ -19,7 +19,7 @@ jQuery(function($) {
$(blocks[i]).load(baseurl + "blocktype/blocktype.ajax.php?blockid="+ id, function(){ $(blocks[i]).load(baseurl + "blocktype/blocktype.ajax.php?blockid="+ id, function(){
if ($(this).is(':empty')){ if ($(this).is(':empty')){
$(this).closest('.panel').addClass('d-none'); $(this).closest('.card').addClass('d-none');
} }
if (config.mathjax && MathJax !== undefined) { if (config.mathjax && MathJax !== undefined) {
MathJax.Hub.Queue(["Typeset", MathJax.Hub, blocks.get(i)]); MathJax.Hub.Queue(["Typeset", MathJax.Hub, blocks.get(i)]);
......
...@@ -30,7 +30,7 @@ $classname = 'Framework'; ...@@ -30,7 +30,7 @@ $classname = 'Framework';
$form = $framework->get_framework_config_options(); $form = $framework->get_framework_config_options();
if (!array_key_exists('class', $form)) { if (!array_key_exists('class', $form)) {
$form['class'] = 'panel panel-body'; $form['class'] = 'card card-body';
} }
$form['name'] = 'frameworkconfig'; $form['name'] = 'frameworkconfig';
......
.card.collapsible { .card.collapsible {
> .card-header, .card-heading-nested { > .card-header, .card-header-nested {
border-bottom: 0; border-bottom: 0;
> a.outer-link { > a.outer-link {
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
.card.collapsible { .card.collapsible {
.card-heading-nested, .card-header-nested,
.card-header { .card-header {
> a.outer-link { > a.outer-link {
border-color: #ddd; border-color: #ddd;
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
background-color: transparent; background-color: transparent;
&.card-warning { &.card-warning {
> .card-header, .card-heading-nested { > .card-header, .card-header-nested {
border-left: 0; border-left: 0;
} }
} }
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
} }
// removing left/right padding in card headings // removing left/right padding in card headings
.card-heading-nested, .card-header-nested,
> .card-header { > .card-header {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
......
...@@ -108,6 +108,6 @@ $card-footer-bg: #f0f5ea; ...@@ -108,6 +108,6 @@ $card-footer-bg: #f0f5ea;
$card-header-bg: #fff; $card-header-bg: #fff;
$card-border: #d9d9d9; $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%);
...@@ -131,7 +131,7 @@ $card-footer-bg: #f5f5f5; ...@@ -131,7 +131,7 @@ $card-footer-bg: #f5f5f5;
$card-text: $gray-700; $card-text: $gray-700;
$card-border: #ddd; $card-border: #ddd;
$card-heading-bg: #f9f9f9; $card-header-bg: #f9f9f9;
$card-primary-text: $gray-700; $card-primary-text: $gray-700;
$card-primary-border: #ddd; $card-primary-border: #ddd;
...@@ -139,7 +139,7 @@ $card-primary-heading-bg: #fff; ...@@ -139,7 +139,7 @@ $card-primary-heading-bg: #fff;
$card-secondary-text: $primary; $card-secondary-text: $primary;
$card-secondary-border: $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-text: $state-success-text;
$card-success-border: $state-success-border; $card-success-border: $state-success-border;
......
...@@ -171,7 +171,7 @@ jQuery(function($) { ...@@ -171,7 +171,7 @@ jQuery(function($) {
notificationList.html(data.data.html); notificationList.html(data.data.html);
} }
else if (self) { 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'); $(self).find('.control').removeClass('control');
} }
$('#selectall').attr('checked', false); // Need to uncheck bulk checkbox $('#selectall').attr('checked', false); // Need to uncheck bulk checkbox
...@@ -194,12 +194,12 @@ jQuery(function($) { ...@@ -194,12 +194,12 @@ jQuery(function($) {
function attachNotificationEvents() { function attachNotificationEvents() {
// Add warning class to all selected notifications // Add warning class to all selected notifications
$('.panel .control input').on('change', function() { $('.card .control input').on('change', function() {
if ($(this).prop('checked')) { if ($(this).prop('checked')) {
$(this).closest('.panel').addClass('panel-warning'); $(this).closest('.card').addClass('card-warning');
} }
else { else {
$(this).closest('.panel').removeClass('panel-warning'); $(this).closest('.card').removeClass('card-warning');
} }
}); });
......
...@@ -3,7 +3,7 @@ echo $form_tag; ...@@ -3,7 +3,7 @@ echo $form_tag;
?> ?>
<div class="card-items card-items-no-margin"> <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> <h3 class="card-header"><?php echo get_string('usercreationmethod', 'admin'); ?></h3>
<div class="card-body"> <div class="card-body">
<div class="choice"> <div class="choice">
...@@ -37,7 +37,7 @@ echo $form_tag; ...@@ -37,7 +37,7 @@ echo $form_tag;
</div> </div>
<div class="step step2 card card"> <div class="step step2 card">
<h3 class="card-header"><?php echo get_string('basicdetails', 'admin'); ?></h3> <h3 class="card-header"><?php echo get_string('basicdetails', 'admin'); ?></h3>
<div class="card-body"> <div class="card-body">
<?php foreach (array('username', 'password', 'staff', 'admin', 'authinstance', 'quota', 'institutionadmin') as $field) { ?> <?php foreach (array('username', 'password', 'staff', 'admin', 'authinstance', 'quota', 'institutionadmin') as $field) { ?>
...@@ -60,7 +60,7 @@ echo $form_tag; ...@@ -60,7 +60,7 @@ echo $form_tag;
</div> </div>
</div> </div>
<div class="step step3 card card"> <div class="step step3 card">
<h3 class="card-header"><?php echo get_string('create', 'admin'); ?></h3> <h3 class="card-header"><?php echo get_string('create', 'admin'); ?></h3>
<div class="card-body"> <div class="card-body">
<!-- Button trigger modal --> <!-- Button trigger modal -->
......
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
</p> </p>
{if $post->files} {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"> <h5 class="card-header has-link">
<a class="text-left collapsed" data-toggle="collapse" href="#attach_{$post->id}" aria-expanded="false"> <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> <span class="icon left icon-paperclip" role="presentation" aria-hidden="true"></span>
......
<div class="has-attachment card card collapsible"> <div class="has-attachment card collapsible">
<h3 class="card-heading"> <h3 class="card-header">
<a class="text-left collapsed" aria-expanded="false" href="#blog-attach-{$postid}" data-toggle="collapse"> <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> <span class="icon left icon-paperclip" role="presentation" aria-hidden="true"></span>
...@@ -40,4 +40,3 @@ ...@@ -40,4 +40,3 @@
</ul> </ul>
</div> </div>
</div> </div>
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
</div> </div>
{if $post->files} {if $post->files}
<div class="has-attachment card card collapsible" id="blockpostfiles-{$post->id}"> <div class="has-attachment card collapsible" id="blockpostfiles-{$post->id}">
<h5 class="card-heading"> <h5 class="card-header">
<a class="text-left collapsed" data-toggle="collapse" href="#post-attach-{$post->id}" aria-expanded="false"> <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="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
<span class="text-small"> {str tag=attachedfiles section=artefact.blog} </span> <span class="text-small"> {str tag=attachedfiles section=artefact.blog} </span>
......
...@@ -94,8 +94,8 @@ ...@@ -94,8 +94,8 @@
{if !$item->deletedmessage && $item->attachments} {if !$item->deletedmessage && $item->attachments}
<div class="comment-attachment"> <div class="comment-attachment">
<div class="card card has-attachment collapsible"> <div class="card has-attachment collapsible">
<h4 class="card-heading"> <h4 class="card-header">
<a class="collapsible collapsed" aria-expanded="false" href="#attachments_{$item->id}" data-toggle="collapse"> <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="icon left icon-paperclip" role="presentation" aria-hidden="true"></span>
<span class="text-small">{str tag=Attachments section=artefact.comment} ({$item->filescount})</span> <span class="text-small">{str tag=Attachments section=artefact.comment} ({$item->filescount})</span>
......
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
{/if} {/if}
{if $config.upload} {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.uploadagreement: disable the file chooser unless the agreement is checked *}
{* config.simpleupload: the form only contains a file chooser *} {* 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 *} {* config.submitbutton: add submit button even if js is enabled & don't start uploading as soon as a file is chosen *}
......
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
{if $attachments} {if $attachments}
{* @TODO: this could probably be a reusable template *} {* @TODO: this could probably be a reusable template *}
<div class="has-attachment card card collapsible"> <div class="has-attachment card collapsible">
<h4 class="card-heading"> <h4 class="card-header">
<a class="text-left collapsed" aria-expanded="false" href="#note-attach-{$blockid}" data-toggle="collapse"> <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> <span class="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
......
{include file="header.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> <h2 class="card-header">{$subheading}</h2>
<div class="card-body"> <div class="card-body">
<p>{$message}</p> <p>{$message}</p>
......
{if $controls} {if $controls}
<div class="card card"> <div class="card">
{if !$hidetitle} {if !$hidetitle}
<h3 class="resumeh3 card-header"> <h3 class="resumeh3 card-header">
{str tag='book' section='artefact.resume'} {str tag='book' section='artefact.resume'}
......
{if $controls} {if $controls}
<div class="card card"> <div class="card">
{if !$hidetitle} {if !$hidetitle}
<h3 class="resumeh3 card-header"> <h3 class="resumeh3 card-header">
{str tag='certification' section='artefact.resume'} {str tag='certification' section='artefact.resume'}
......
{if $controls} {if $controls}
<div class="card card"> <div class="card">
{if !$hidetitle} {if !$hidetitle}
<h3 class="resumeh3 card-header"> <h3 class="resumeh3 card-header">
{str tag='educationhistory' section='artefact.resume'} {str tag='educationhistory' section='artefact.resume'}
......
{if $controls} {if $controls}
<div class="card card"> <div class="card">
{if !$hidetitle} {if !$hidetitle}
<h3 class="resumeh3 card-header"> <h3 class="resumeh3 card-header">
{str tag='employmenthistory' section='artefact.resume'} {str tag='employmenthistory' section='artefact.resume'}
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</h3>{/if} </h3>{/if}
<div id="goalslist{$suffix}" class="card-items card-items-no-margin js-masonry" data-masonry-options='{ "itemSelector": ".card" }'> <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'} {foreach from=$goals item=n, name='default'}
<div class="card card"> <div class="card">
<h4 class="card-header has-link"> <h4 class="card-header has-link">
{if $n->exists} {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}"> <a id="goals_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}">
......
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
{$description|clean_html|safe} {$description|clean_html|safe}
{if isset($attachments)} {if isset($attachments)}
<div class="has-attachment card card collapsible"> <div class="has-attachment card collapsible">
<h4 class="card-heading"> <h4 class="card-header">
<a class="text-left collapsed" aria-expanded="false" href="#cv-attach-{$id}{if $artefactid}-{$artefactid}{/if}" data-toggle="collapse"> <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> <span class="icon left icon-paperclip" role="presentation" aria-hidden="true"></span>
......
{if $controls} {if $controls}
<div class="card card"> <div class="card">
{if !$hidetitle} {if !$hidetitle}
<h3 class="resumeh3 card-header"> <h3 class="resumeh3 card-header">
{str tag='membership' section='artefact.resume'} {str tag='membership' section='artefact.resume'}
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div id="skillslist{$suffix}" class="card-items card-items-no-margin js-masonry" data-masonry-options='{ "itemSelector": ".card" }'> <div id="skillslist{$suffix}" class="card-items card-items-no-margin js-masonry" data-masonry-options='{ "itemSelector": ".card" }'>
{foreach from=$skills item=n} {foreach from=$skills item=n}
<div class="card card"> <div class="card">
<h3 class="card-header has-link"> <h3 class="card-header has-link">
{if $n->exists} {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}"> <a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}">
......
{include file="header.tpl"} {include file="header.tpl"}
<div class="card card"> <div class="card">
<h3 class="card-heading">{str tag="clientconnections" section="auth.webservice"}</h3> <h3 class="card-header">{str tag="clientconnections" section="auth.webservice"}</h3>
<div class="card-body"> <div class="card-body">
{$form|safe} {$form|safe}
</div> </div>
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="collapsible-group" id="accordion" aria-multiselectable="true" role="tablist" > <div class="collapsible-group" id="accordion" aria-multiselectable="true" role="tablist" >
{foreach from=$form.elements item=element name=elements} {foreach from=$form.elements item=element name=elements}
{if $element.type == 'fieldset'} {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"> <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"> <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} {$element.legend}
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
{elseif $disabledprotocols} {elseif $disabledprotocols}
<div class="error alert alert-warning">{str tag=nowsprotocolsenabled section='auth.webservice' arg1=$disabledprotocols}</div> <div class="error alert alert-warning">{str tag=nowsprotocolsenabled section='auth.webservice' arg1=$disabledprotocols}</div>
{else} {else}
<div class="card card card-body"> <div class="card card-body">
{$form|safe} {$form|safe}
</div> </div>
{/if} {/if}
......
{include file="header.tpl"} {include file="header.tpl"}
<div id="logsearchformcontainer" class="card card card-body"> <div id="logsearchformcontainer" class="card card-body">
{$form|safe} {$form|safe}
</div> </div>
<div id="results" class="section card card"> <div id="results" class="section card">
<h2 class="card-header" id="resultsheading">{str tag="Results"}</h2> <h2 class="card-header" id="resultsheading">{str tag="Results"}</h2>
{if $results} {if $results}
<div class="table-responsive"> <div class="table-responsive">
......
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
{$postinfo->body|str_shorten_html:100:true:true:false|safe} {$postinfo->body|str_shorten_html:100:true:true:false|safe}
</div> </div>
{if $postinfo->filecount} {if $postinfo->filecount}
<div class="has-attachment panel panel-default collapsible collapsible-group" id="blockpostfiles-{$postinfo->id}"> <div class="has-attachment card collapsible collapsible-group" id="blockpostfiles-{$postinfo->id}">
<h5 class="panel-heading"> <h5 class="card-header">
<a class="text-left collapsed" data-toggle="collapse" href="#post-attach-{$postinfo->id}" aria-expanded="false"> <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="icon icon-paperclip left" role="presentation" aria-hidden="true"></span>
<span class="text-small"> {str tag=attachedfiles section=artefact.blog} </span> <span class="text-small"> {str tag=attachedfiles section=artefact.blog} </span>
......
...@@ -22,8 +22,8 @@ ...@@ -22,8 +22,8 @@
</div> </div>
<p class="content-text">{$postinfo->body|str_shorten_html:100:true:true:false|safe}</p> <p class="content-text">{$postinfo->body|str_shorten_html:100:true:true:false|safe}</p>
{if $postinfo->filecount} {if $postinfo->filecount}
<div class="has-attachment panel panel-default collapsible collapsible-group" id="blockpostfiles-{$postinfo->id}"> <div class="has-attachment card collapsible collapsible-group" id="blockpostfiles-{$postinfo->id}">
<h5 class="panel-heading"> <h5 class="card-header">
<a class="text-left collapsed" data-toggle="collapse" href="#post-attach-{$postinfo->id}" aria-expanded="false"> <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>