mirror of
https://github.com/moodle/moodle.git
synced 2025-01-18 22:08:20 +01:00
Merge branch 'MDL-73331_master_toolbrickfieldadvancedtab' of https://github.com/brickfield/moodle
This commit is contained in:
commit
ba547f55c8
@ -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' => '',
|
||||
];
|
||||
|
@ -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';
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
Loading…
x
Reference in New Issue
Block a user