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);
$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'),
......
......@@ -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
......
......@@ -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(
......
......@@ -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)]);
......
......@@ -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';
......
.card.collapsible {
> .card-header, .card-heading-nested {
> .card-header, .card-header-nested {
border-bottom: 0;
> a.outer-link {
......
......@@ -40,7 +40,7 @@
.card.collapsible {
.card-heading-nested,
.card-header-nested,
.card-header {
> a.outer-link {
border-color: #ddd;
......
......@@ -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;
......
......@@ -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%);
......@@ -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;
......
......@@ -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');
}
});
......
......@@ -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 -->
......
......@@ -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>
......
<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>
......@@ -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>
......
......@@ -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>
......
......@@ -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 *}
......
......@@ -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>
......
{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>
......
{if $controls}
<div class="card card">
<div class="card">
{if !$hidetitle}
<h3 class="resumeh3 card-header">
{str tag='book' section='artefact.resume'}
......
{if $controls}
<div class="card card">
<div class="card">
{if !$hidetitle}
<h3 class="resumeh3 card-header">
{str tag='certification' section='artefact.resume'}
......
{if $controls}
<div class="card card">
<div class="card">
{if !$hidetitle}
<h3 class="resumeh3 card-header">
{str tag='educationhistory' section='artefact.resume'}
......
{if $controls}
<div class="card card">
<div class="card">
{if !$hidetitle}
<h3 class="resumeh3 card-header">
{str tag='employmenthistory' section='artefact.resume'}
......
......@@ -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}">
......
......@@ -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>
......
{if $controls}
<div class="card card">
<div class="card">
{if !$hidetitle}
<h3 class="resumeh3 card-header">
{str tag='membership' section='artefact.resume'}
......
......@@ -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}">
......
{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>
......
......@@ -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}
......
......@@ -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}
......
{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">
......
......@@ -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>
......
......@@ -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>
......
{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}
......
{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}
......
<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'}
......
......@@ -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>
......
{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">
......
......@@ -709,6 +709,9 @@ a[type="submit"],
.form-inline {
input {
@extend .form-control;
&.btn-primary {
@extend .btn-primary;
}
}
}
.notification-parent {
......
......@@ -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;
......
......@@ -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
......
......@@ -17,6 +17,7 @@
.input-group-append {
display: inline-block;
height: $input-height;
width: auto;
}
}
.pieform-fieldset > .form-group {
......
......@@ -23,6 +23,7 @@
}
}
a {
border-width: 0;
&:after {
@include transition(opacity 0.5s);
@include fa-icon();
......
......@@ -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 > & {
......
......@@ -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;
$list-group-item-padding-y: .75rem !default;
......
{include file="header.tpl"}
<div id="cancelrequest" class="card card bg-danger view-container">
<div id="cancelrequest" class="card bg-danger view-container">
<h2 class="card-header">{str tag=canceldeletionrequest section=account}</h2>
<div class="card-body">
<p>{str tag=canceldeletionrequestconfirmation section=account arg1=$userdisplayname}</p>
......
{include file="header.tpl"}
<div id="deleteaccount" class="card card bg-danger view-container">
<div id="deleteaccount" class="card bg-danger view-container">
<h2 class="card-header">{str tag=deleteaccount1}</h2>
<div class="card-body">
{if $requiresapproval}
......
{include file="header.tpl"}
<div id="resendnotification" class="card card bg-danger view-container">
<div id="resendnotification" class="card bg-danger view-container">
<h2 class="card-header">{str tag=resenddeletionnotification section=account}</h2>
<div class="card-body">
<p>{str tag=sendnotificationdescription section=account}</p>
......
......@@ -2,15 +2,15 @@
<div class="row">
<div class="col-lg-9">
<div class="card card">
<div class="card">
<div class="card-body">
{str tag=cleanurlsdescription section=admin}
</div>
</div>
{if $cleanurls}
<div class="card card">
<h3 class="card-heading">{str tag=cleanurlsettings section=admin}</h3>
<div class="card">
<h3 class="card-header">{str tag=cleanurlsettings section=admin}</h3>