Merge branch 'MDL-73331_master_toolbrickfieldadvancedtab' of https://github.com/brickfield/moodle

This commit is contained in:
Paul Holden 2023-04-25 11:54:16 +01:00
commit ba547f55c8
No known key found for this signature in database
GPG Key ID: A81A96D6045F6164
4 changed files with 111 additions and 244 deletions

View File

@ -16,6 +16,8 @@
namespace tool_brickfield\local\tool;
use tool_brickfield\manager;
/**
* Class advanced.
*
@ -51,12 +53,36 @@ class advanced extends tool {
return 'advanced';
}
/**
* Builds context data used to render a single grid item on the advanced page.
* @param string $icon
* @param string $heading
* @param string $content
* @return array
*/
protected function get_grid_item_context(string $icon, string $heading, string $content): array {
return [
"icon" => "pix/i/$icon.png",
"iconalt" => get_string("icon:$icon", manager::PLUGINNAME),
"heading" => get_string($heading, manager::PLUGINNAME),
"content" => get_string($content, manager::PLUGINNAME)
];
}
/**
* Return the data for renderer / template display.
* @return \stdClass
*/
protected function fetch_data(): \stdClass {
$data = (object)[
'griditems' => [
$this->get_grid_item_context("analytics-custom", "headingone", "contentone"),
$this->get_grid_item_context("tools-custom", "headingtwo", "contenttwo"),
$this->get_grid_item_context("file-edit-custom", "headingthree", "contentthree"),
$this->get_grid_item_context("search-plus-custom", "headingfour", "contentfour"),
$this->get_grid_item_context("wand-magic-custom", "headingfive", "contentfive"),
$this->get_grid_item_context("hands-helping-custom", "headingsix", "contentsix"),
],
'valid' => true,
'error' => '',
];

View File

@ -270,3 +270,9 @@ $string['headingthree'] = 'Accessible file formats';
$string['headingfour'] = 'Focus effort';
$string['headingfive'] = 'HTML fixes';
$string['headingsix'] = 'Performance support';
$string['icon:analytics-custom'] = 'Analytics icon';
$string['icon:tools-custom'] = 'Tools icon';
$string['icon:file-edit-custom'] = 'Edit file icon';
$string['icon:search-plus-custom'] = 'Search icon';
$string['icon:wand-magic-custom'] = 'Magic wand icon';
$string['icon:hands-helping-custom'] = 'Helping hands icon';

View File

@ -10,49 +10,22 @@
/* Advanced Page CSS */
@media only screen and (min-width: 768px) {
.tool_brickfield_grid_item {
width: 33.333333333333336%;
}
#tool_brickifeld_advanced_page {
margin: 20px 20px 20px 10px;
}
@media only screen and (max-width: 767px) {
.tool_brickfield_grid_item {
width: 100%;
}
}
.tool_brickfield_grid {
max-width: 1140px;
margin-right: auto;
margin-left: auto;
}
.tool_brickfield_grid_inner {
width: 100%;
.tool_brickfield_banner_heading {
display: flex;
flex-wrap: wrap;
}
.tool_brickfield_grid_item_shape {
height: 96%;
background-color: #fff;
padding: 10% 10% 10% 10%;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
margin: 1% 1% 1% 1%;
border-radius: 15px 15px 15px 70px;
}
.tool_brickfield_grid_display {
display: grid;
grid-template-columns: 0.6fr 1.4fr 1fr;
grid-template-rows: 1fr 1fr;
}
.tool_brickfield_grid_spacing {
justify-content: space-between;
margin-bottom: 20px;
margin-left: auto;
margin-right: 1em;
}
.tool_brickfield_banner_heading > img {
height: 50px;
}
.tool_brickfield_banner > p {
text-align: center;
}
.tool_brickfield_grid_heading {
@ -60,59 +33,63 @@
font-size: 20px;
font-weight: 400;
color: #040d29;
padding-bottom: 4px;
}
.tool_brickfield_grid_content {
color: #040d29;
font-size: 16px;
line-height: 1.4em;
margin: 0;
padding: 0;
}
.tool_brickfield_logo_height {
height: 3em;
}
.tool_brickfield_logo_position {
padding-bottom: 2em;
}
.tool_brickfield_icon_position {
line-height: 1;
font-size: 50px;
}
.tool_brickfield_icon_height {
.tool_brickfield_grid_heading > img {
height: 30px;
padding-right: 16px;
}
.tool_brickfield_center_button {
text-align: center;
.tool_brickfield_grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px 20px 30px;
}
.tool_brickfield_advanced_button {
.tool_brickfield_grid > div {
margin: 10px;
padding: 20px;
flex-basis: 30%;
border: 1px solid grey;
max-width: 500px;
min-width: 250px;
flex-grow: 4;
border-radius: 15px 15px 15px 50px;
}
.tool_brickfield_grid_heading {
display: flex;
}
.tool_brickfield_footer > a {
font-size: 18px;
letter-spacing: 1px;
color: #fff;
background-color: #4054b2;
border-style: solid;
border-color: #fff;
border-radius: 5px 5px 5px 5px;
padding: 15px 50px 15px 50px;
border-radius: 5px;
padding: 15px 50px;
transition: 0.3s;
margin-bottom: 20px;
}
.tool_brickfield_advanced_button:hover {
.tool_brickfield_footer {
text-align: center;
}
.tool_brickfield_footer > a:hover {
color: #fff;
background-color: #253687;
text-decoration: none;
}
.tool_brickfield_banner_heading {
margin-bottom: 1.5em;
}
.tool_brickfield_banner {
height: 10em;
padding: 2.5em;
margin-bottom: 2em;
.tool_brickfield_footer > p {
margin-bottom: 25px;
}

View File

@ -21,184 +21,42 @@
Example context (json):
{
"pagetitle": "Advanced"
"griditems": [
{
"icon": "some-icon-name",
"iconalt": "some-icon-alt",
"heading": "some-heading",
"content": "some-content"
}
]
}
}}
<link rel="stylesheet" href="styles.css">
<h3>{{{pagetitle}}}</h3>
<section class="tool_brickfield_banner">
<div class="tool_brickfield_banner_heading">
<img src="pix/i/Brickfield-logo-black.png" alt="Brickfield Logo" class="pull-right tool_brickfield_logo_height">
<h2>{{# str }}bannerheadingone, tool_brickfield{{/ str }}</h2>
<div id="tool_brickifeld_advanced_page">
<div class="tool_brickfield_banner">
<div class="tool_brickfield_banner_heading">
<h2>{{#str}} bannerheadingone, tool_brickfield{{/str}}</h2>
<img src="pix/i/Brickfield-logo-black.png" alt="Brickfield Logo">
</div>
<p>{{#str}} bannercontentone, tool_brickfield, https://www.brickfield.ie/moodle_talk_to_sales/{{/str}}</p>
</div>
<p>
{{# str }}bannercontentone, tool_brickfield, https://www.brickfield.ie/moodle_talk_to_sales/{{/ str }}
</p>
</section>
<div class="tool_brickfield_grid">
<div class="tool_brickfield_grid_inner">
<div class="tool_brickfield_grid">
{{#griditems}}
<div class="tool_brickfield_grid_item">
<div class="tool_brickfield_grid_item_shape">
<div class="tool_brickfield_grid_display" style="grid-template-areas: 'al ar ar' 'al ar ar'; grid-area: a;">
<div style="grid-area: al;">
<div class="tool_brickfield_grid_spacing">
<span class="tool_brickfield_icon_position">
<img src="pix/i/analytics-custom.png" alt="Analytics icon" class="tool_brickfield_icon_height">
</span>
</div>
</div>
<div style="grid-area: ar;">
<h3>
<span class="tool_brickfield_grid_heading">
{{# str }}headingone, tool_brickfield{{/ str }}
</span>
</h3>
<p class="tool_brickfield_grid_content">
{{# str }}contentone, tool_brickfield{{/ str }}
</p>
</div>
</div>
<div class="tool_brickfield_grid_heading">
<img src="{{icon}}" alt="{{iconalt}}">
<h3>{{heading}}</h3>
</div>
<div class="tool_brickfield_grid_content">
<p>{{content}}</p>
</div>
</div>
<div class="tool_brickfield_grid_item">
<div class="tool_brickfield_grid_item_shape">
<div class="tool_brickfield_grid_display" style="grid-template-areas: 'bl br br' 'bl br br'; grid-area: b;">
<div style="grid-area: bl;">
<div class="tool_brickfield_grid_spacing">
<span class="tool_brickfield_icon_position">
<img src="pix/i/tools-custom.png" alt="Tools icon" class="tool_brickfield_icon_height">
</span>
</div>
</div>
<div style="grid-area: br;">
<h3>
<span class="tool_brickfield_grid_heading">
{{# str }}headingtwo, tool_brickfield{{/ str }}
</span>
</h3>
<p class="tool_brickfield_grid_content">
{{# str }}contenttwo, tool_brickfield{{/ str }}
</p>
</div>
</div>
</div>
</div>
<div class="tool_brickfield_grid_item">
<div class="tool_brickfield_grid_item_shape">
<div class="tool_brickfield_grid_display" style="grid-template-areas: 'cl cr cr' 'cl cr cr'; grid-area: c;">
<div style="grid-area: cl;">
<div class="tool_brickfield_grid_spacing">
<span class="tool_brickfield_icon_position">
<img src="pix/i/file-edit-custom.png" alt="Edit file icon" class="tool_brickfield_icon_height">
</span>
</div>
</div>
<div style="grid-area: cr;">
<h3>
<span class="tool_brickfield_grid_heading">
{{# str }}headingthree, tool_brickfield{{/ str }}
</span>
</h3>
<p class="tool_brickfield_grid_content">
{{# str }}contentthree, tool_brickfield{{/ str }}
</p>
</div>
</div>
</div>
</div>
<div class="tool_brickfield_grid_item">
<div class="tool_brickfield_grid_item_shape">
<div class="tool_brickfield_grid_display" style="grid-template-areas: 'dl dr dr' 'dl dr dr'; grid-area: d;">
<div style="grid-area: dl;">
<div class="tool_brickfield_grid_spacing">
<span class="tool_brickfield_icon_position">
<img src="pix/i/search-plus-custom.png" alt="Search icon" class="tool_brickfield_icon_height">
</span>
</div>
</div>
<div style="grid-area: dr;">
<h3>
<span class="tool_brickfield_grid_heading">
{{# str }}headingfour, tool_brickfield{{/ str }}
</span>
</h3>
<p class="tool_brickfield_grid_content">
{{# str }}contentfour, tool_brickfield{{/ str }}
</p>
</div>
</div>
</div>
</div>
<div class="tool_brickfield_grid_item">
<div class="tool_brickfield_grid_item_shape">
<div class="tool_brickfield_grid_display" style="grid-template-areas: 'el er er' 'el er er'; grid-area: e;">
<div style="grid-area: el;">
<div class="tool_brickfield_grid_spacing">
<span class="tool_brickfield_icon_position">
<img src="pix/i/wand-magic-custom.png" alt="Magic wand icon" class="tool_brickfield_icon_height">
</span>
</div>
</div>
<div style="grid-area: er;">
<h3>
<span class="tool_brickfield_grid_heading">
{{# str }}headingfive, tool_brickfield{{/ str }}
</span>
</h3>
<p class="tool_brickfield_grid_content">
{{# str }}contentfive, tool_brickfield{{/ str }}
</p>
</div>
</div>
</div>
</div>
<div class="tool_brickfield_grid_item">
<div class="tool_brickfield_grid_item_shape">
<div class="tool_brickfield_grid_display" style="grid-template-areas: 'fl fr fr' 'fl fr fr'; grid-area: f;">
<div style="grid-area: fl;">
<div class="tool_brickfield_grid_spacing">
<span class="tool_brickfield_icon_position">
<img src="pix/i/hands-helping-custom.png" alt="Helping hands icon" class="tool_brickfield_icon_height">
</span>
</div>
</div>
<div style="grid-area: fr;">
<h3>
<span class="tool_brickfield_grid_heading">
{{# str }}headingsix, tool_brickfield{{/ str }}
</span>
</h3>
<p class="tool_brickfield_grid_content">
{{# str }}contentsix, tool_brickfield{{/ str }}
</p>
</div>
</div>
</div>
</div>
{{/griditems}}
</div>
<div class="tool_brickfield_footer">
<h2 class="accesshide">{{#str}} footerheading, tool_brickfield {{/str}}</h2>
<p>{{#str}}bannercontenttwo, tool_brickfield{{/str}}</p>
<a href="https://www.brickfield.ie/moodle_free_demo/">
{{#str}}buttonone, tool_brickfield{{/str}}
</a>
</div>
</div>
<section class="tool_brickfield_banner">
<h2 class="accesshide">{{# str }}footerheading, tool_brickfield{{/ str }}</h2>
<p>
{{# str }}bannercontenttwo, tool_brickfield{{/ str }}
</p>
<div class="tool_brickfield_center_button">
<form action="https://www.brickfield.ie/moodle_free_demo/">
<button class="tool_brickfield_advanced_button">
{{# str }}buttonone, tool_brickfield{{/ str }}
</button>
</form>
</div>
</section>