Skip to content

GitLab

Commit 704788e6 authored by Naomi Guyer's avatar Naomi Guyer Committed by Aaron Wells
Browse files
Options

Cookie consent (bootstrap) 

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: I0a77c4ed4bd9bf39fd05421b3dc77799881b2544
parent 5ba34184
Hide whitespace changes
Inline Side-by-side
Showing with 181 additions and 84 deletions
htdocs/admin/site/cookieconsent.php
View file @ 704788e6
......@@ -28,8 +28,9 @@ $configdata = unserialize(get_config('cookieconsent_settings'));
$cookietypes = (!empty($configdata['cookietypes']) ? $configdata['cookietypes'] : array());
$form = pieform(array(
'class' => 'collapsible-group',
'name' => 'cookieconsent',
'renderer' => 'table',
'renderer' => 'div',
'plugintype' => 'core',
'pluginname' => 'admin',
'elements' => array(
......@@ -39,6 +40,8 @@ $form = pieform(array(
'defaultvalue' => $enabled,
),
'generaloptions' => array(
'iconclass' => 'fa fa-cog',
'class' => 'first',
'type' => 'fieldset',
'collapsible' => true,
'collapsed' => ($enabled ? false : true),
......@@ -89,6 +92,7 @@ $form = pieform(array(
),
),
'stylingoptions' => array(
'iconclass' => 'fa fa-paint-brush',
'type' => 'fieldset',
'collapsible' => true,
'collapsed' => ($enabled ? false : true),
......@@ -136,6 +140,8 @@ $form = pieform(array(
),
),
'featureoptions' => array(
'iconclass' => 'fa fa-star',
'class' => 'last',
'type' => 'fieldset',
'collapsible' => true,
'collapsed' => ($enabled ? false : true),
......@@ -162,6 +168,7 @@ $form = pieform(array(
),
),
'submit' => array(
'class' => 'mtl btn btn-success',
'type' => 'submit',
'value' => get_string('savechanges', 'admin')
),
......@@ -193,23 +200,6 @@ function cookieconsent_submit(Pieform $form, $values) {
}
}
$js = <<<EOF
jQuery(document).ready(function() {
var j = jQuery.noConflict();
j('#cookieconsent input[name=enabled]').click(function() {
if (this.checked) {
// Expand collapsible fieldsets
j('#cookieconsent fieldset').attr('class', 'pieform-fieldset collapsible');
j('#cookieconsent_cookietypes').focus();
}
else {
// Collapse collapsible fieldsets
j('#cookieconsent fieldset').attr('class', 'pieform-fieldset collapsible collapsed');
}
});
});
EOF;
$smarty = smarty(array('expandable'));
$smarty->assign('form', $form);
......@@ -221,5 +211,6 @@ $smarty->assign('introtext5', get_string('cookieconsentintro51', 'cookieconsent'
// Official EU languages
$smarty->assign('languages', array('BG','CS','DA','DE','EL','EN','ES','ET','FI','FR','HU','IT','LT','LV','MT','NL','PL','PT','RO','SK','SL','SV'));
$smarty->assign('PAGEHEADING', TITLE);
$smarty->assign('PAGEICON', 'fa fa-shield');
$smarty->assign('INLINEJAVASCRIPT', $js);
$smarty->display('admin/site/cookieconsent.tpl');
htdocs/lib/pieforms/pieform/elements/fieldset.php
View file @ 704788e6
......@@ -51,9 +51,7 @@ function pieform_element_fieldset(Pieform $form, $element) {
$classes[] = Pieform::hsc($element['class']);
}
// if fieldset is collapsible, we need to adjust the legend html
// if fieldset is collapsible, we need to adjust the legend html and add a class to the fieldset
if ($iscollapsible) {
$classes[] = 'collapsible';
......@@ -81,6 +79,7 @@ function pieform_element_fieldset(Pieform $form, $element) {
$legendcontent .= '</a>';
}
$fieldset = '<fieldset class="' . implode(' ', $classes) . '">';
// Render legend and associated objects
......@@ -123,6 +122,7 @@ function pieform_element_fieldset(Pieform $form, $element) {
$fieldset .= '</div>';
$fieldset .= "</fieldset>\n";
return $fieldset;
}
......
htdocs/theme/bootstrap/static/sass/components/_pieform-fieldset.scss → htdocs/theme/bootstrap/static/sass/components/_collapse.scss
View file @ 704788e6
.pieform-fieldset{
.collapse-indicator {
color: $brand-success;
font-size: 13px;
display: block;
.collapsed & {
color: #aaa;
}
a:hover &,
a:focus & {
color: $brand-success;
}
}
.pieform-fieldset,
.panel-collapse {
@include box-shadow(none);
&.collapsible {
&.last {
legend,
.panel-heading {
@include border-bottom-radius(3px);
a {
&.collapsed {
@include border-bottom-radius(3px);
}
}
}
legend {
a {
border-bottom: 1px solid #ddd;
}
}
.fieldset-body {
border-top:0;
@include border-bottom-radius(3px);
}
}
legend {
margin-bottom: 0;
border:0;
h4 {
margin: 0;
font-size: 16px;
}
.type-icon {
display:inline-block;
width: 32px;
}
.panel-heading,
legend h4 {
margin: 0;
font-size: 16px;
padding: 0;
.pieform > .collapsible-group:first-child &,
.first & {
@include border-top-radius(3px);
}
a {
@include text-shadow(1px 0 0 #fff);
background-color: darken(#f5f5f5, 1%);
border: 1px solid #ddd;
border-bottom: 0;
display: block;
color: #333;
padding: 10px 15px;
&.collapsed {
background-color: #f9f9f9;
font-weight: normal;
color: #333;
.collapse-indicator {
color: #aaa;
}
}
&:hover, &:focus {
background-color: darken(#f5f5f5, 1%);
text-decoration: none;
.collapse-indicator {
color: $brand-success;
}
}
.pieform > .collapsible-group:first-child & {
@include border-radius(3px 3px 0 0);
}
.type-icon {
display:inline-block;
width: 32px;
}
.collapse-indicator {
color: $brand-success;
font-size: 13px;
.pieform > .collapsible-group:first-child &,
.first & {
@include border-top-radius(3px);
}
}
}
&.last {
legend {
a {
border-bottom: 1px solid #ddd;
&.collapsed {
@include border-radius(0 0 3px 3px);
}
}
}
.fieldset-body {
border-top:0;
legend h4 {
a {
@include text-shadow(1px 0 0 #fff);
border: 1px solid #ddd;
border-bottom: 0;
}
}
.panel-heading {
border-bottom: 0;
}
.panel-body {
border-top-width: 1px;
border-top-color: inherit;
border-top-style: solid;
}
.fieldset-body {
border: 1px solid #ddd;
padding: 10px 15px;
......
htdocs/theme/bootstrap/static/sass/components/_link-thumb.scss 0 → 100644
View file @ 704788e6
.link-thumb {
text-align: center;
min-width: 62px;
position: relative;
display: block;
padding: 7px 15px 15px;
font-size: 20px;
margin-bottom: 4px;
background-color: darken(#f5f5f5, 1%);
&.thumbnail {
&:hover,
&.focus,
&.active {
background-color: darken(#f5f5f5, 7%);
color: #333;
text-decoration: none;
border-color: #ccc;
}
}
.metadata {
font-size: 10px;
position: absolute;
bottom: 3px;
right: 3px;
}
}
\ No newline at end of file
htdocs/theme/bootstrap/static/sass/components/_typography.scss
View file @ 704788e6
......@@ -32,6 +32,11 @@ a:focus {
}
}
.metadata{
font-size: 0.8em;
color: #888;
}
.page-header,
h1 {
margin-top:0;
......@@ -81,3 +86,24 @@ img {
}
}
}
ul {
&.inline {
li {
display:inline-block;
}
}
&.unstyled.unstyled { //increase the importance
padding: 0;
margin: 0;
list-style-type: none;
}
}
blockquote {
margin-top: 20px;
margin-bottom: 30px;
&.small {
font-size: $font-size-base;
}
}
\ No newline at end of file
htdocs/theme/bootstrap/static/sass/style.scss
View file @ 704788e6
......@@ -84,6 +84,7 @@
@import "utilities/whitespace"; // Custom utility classes
@import "components/typography";
@import "components/forms";
@import "components/collapse";
@import "components/js";
@import "components/layout";
@import "components/header";
......@@ -108,12 +109,12 @@
@import "components/post";
@import "components/attachments";
@import "components/panel";
@import "components/pieform-fieldset";
@import "components/input-as-icon";
@import "components/ui-draggable";
@import "components/plan";
@import "components/message-thread";
@import "components/notification";
@import "components/link-thumb";
// Keep these files last to override all other style sheets
@import "components/custom";
......
htdocs/theme/bootstrap/static/sass/utilities/var/_bootstrap-variables.scss
View file @ 704788e6
......@@ -90,7 +90,7 @@ $font-size-h5: $font-size-base !default;
$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
//** Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.428571429 !default; // 20/14
$line-height-base: 1.5 !default; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
......@@ -861,7 +861,7 @@ $blockquote-small-color: $gray-light !default;
//** Blockquote font size
$blockquote-font-size: ($font-size-base * 1.25) !default;
//** Blockquote border color
$blockquote-border-color: $gray-lighter !default;
$blockquote-border-color: $mahara-green-bright !default;
//** Page header border color
$page-header-border-color: $gray-lighter !default;
//** Width of horizontal description list titles
......
htdocs/theme/bootstrap/static/style/style.css
View file @ 704788e6
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/theme/bootstrap/templates/admin/site/cookieconsent.tpl
View file @ 704788e6
{include file="header.tpl"}
<p>{$introtext1|safe}</p>
<p>{$introtext2|safe}</p>
<p><em>{$introtext3|safe}</em></p>
<table class="cb fullwidth">
<thead class="expandable-head">
<tr>
<td colspan="2">
<a class="toggle" href="#">{str tag=readfulltext1 section=cookieconsent}</a>
</td>
</tr>
</thead>
<tbody class="expandable-body">
<tr class="r0" id="directive_2009136_container">
<th>{str tag=directive2009136 section=cookieconsent}</th>
<td>
{foreach from=$languages item=lang name=languages}
<a href="http://eur-lex.europa.eu/LexUriServ/LexUriServ.do?uri=OJ:L:2009:337:0011:0036:{$lang}:PDF" target="_blank" title="{str tag=readdirective$lang section=cookieconsent}">{$lang}</a>{if not $dwoo.foreach.languages.last} | {/if}
{/foreach}
</td>
</tr>
</tbody>
</table>
<p>{$introtext4|safe}</p>
<p>{$introtext5|safe}</p>
{$form|safe}
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<h3 class="panel-heading">
{str tag=directive2009136 section=cookieconsent}
</h3>
<div class="panel-body">
<p class="lead">{$introtext1|safe}</p>
<p>{$introtext2|safe}</p>
<blockquote class="small"><p>{$introtext3|safe}</p></blockquote>
<p>{$introtext4|safe}</p>
<p>{$introtext5|safe}</p>
</div>
</div>
{$form|safe}
</div>
<div class="col-md-4">
<div class="panel panel-default last">
<h3 class="panel-heading">
<span class="fa-language fa prl type-icon"></span>
{str tag=readfulltext1 section=cookieconsent}
</h3>
<div class="panel-body" id="cookietext">
<p>{str tag=directive2009136 section=cookieconsent}</p>
<ul class="inline unstyled">
{foreach from=$languages item=lang name=languages}
<li class="">
<a href="http://eur-lex.europa.eu/LexUriServ/LexUriServ.do?uri=OJ:L:2009:337:0011:0036:{$lang}:PDF" target="_blank" title="{str tag=readdirective$lang section=cookieconsent}" class="link-thumb thumbnail">{$lang} <span class="metadata">.pdf</span></a>
</li>
{/foreach}
</ul>
</div>
</div>
</div>
</div>
{include file="footer.tpl"}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment