From 941ca26829c2b54d0728ecaa463fd406233bc621 Mon Sep 17 00:00:00 2001 From: Max Larkin Date: Wed, 8 Dec 2021 11:42:23 +0000 Subject: [PATCH] MDL-73331 tool_brickfield: Update advanced tab display --- .../classes/local/tool/advanced.php | 26 +++ .../brickfield/lang/en/tool_brickfield.php | 6 + admin/tool/brickfield/styles.css | 119 +++++----- .../brickfield/templates/advanced.mustache | 204 +++--------------- 4 files changed, 111 insertions(+), 244 deletions(-) diff --git a/admin/tool/brickfield/classes/local/tool/advanced.php b/admin/tool/brickfield/classes/local/tool/advanced.php index 7d6a43fb907..177f0f4d921 100644 --- a/admin/tool/brickfield/classes/local/tool/advanced.php +++ b/admin/tool/brickfield/classes/local/tool/advanced.php @@ -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' => '', ]; diff --git a/admin/tool/brickfield/lang/en/tool_brickfield.php b/admin/tool/brickfield/lang/en/tool_brickfield.php index 98c401d8b52..aafe0c19dcb 100644 --- a/admin/tool/brickfield/lang/en/tool_brickfield.php +++ b/admin/tool/brickfield/lang/en/tool_brickfield.php @@ -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'; diff --git a/admin/tool/brickfield/styles.css b/admin/tool/brickfield/styles.css index c9c9cd8a21c..9910a794240 100644 --- a/admin/tool/brickfield/styles.css +++ b/admin/tool/brickfield/styles.css @@ -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; } diff --git a/admin/tool/brickfield/templates/advanced.mustache b/admin/tool/brickfield/templates/advanced.mustache index 55529bbb7e9..4960679d1c3 100644 --- a/admin/tool/brickfield/templates/advanced.mustache +++ b/admin/tool/brickfield/templates/advanced.mustache @@ -21,184 +21,42 @@ Example context (json): { - "pagetitle": "Advanced" + "griditems": [ + { + "icon": "some-icon-name", + "iconalt": "some-icon-alt", + "heading": "some-heading", + "content": "some-content" + } + ] } }} - - - -

{{{pagetitle}}}

- -
-
- Brickfield Logo -

{{# str }}bannerheadingone, tool_brickfield{{/ str }}

+
+
+
+

{{#str}} bannerheadingone, tool_brickfield{{/str}}

+ Brickfield Logo +
+

{{#str}} bannercontentone, tool_brickfield, https://www.brickfield.ie/moodle_talk_to_sales/{{/str}}

-

- {{# str }}bannercontentone, tool_brickfield, https://www.brickfield.ie/moodle_talk_to_sales/{{/ str }} -

-
- -
-
- +
+ {{#griditems}}
-
-
-
-
- - Analytics icon - -
-
-
-

- - {{# str }}headingone, tool_brickfield{{/ str }} - -

-

- {{# str }}contentone, tool_brickfield{{/ str }} -

-
-
+
+ {{iconalt}} +

{{heading}}

+
+
+

{{content}}

- -
-
-
-
-
- - Tools icon - -
-
-
-

- - {{# str }}headingtwo, tool_brickfield{{/ str }} - -

-

- {{# str }}contenttwo, tool_brickfield{{/ str }} -

-
-
-
-
- -
-
-
-
-
- - Edit file icon - -
-
-
-

- - {{# str }}headingthree, tool_brickfield{{/ str }} - -

-

- {{# str }}contentthree, tool_brickfield{{/ str }} -

-
-
-
-
- -
-
-
-
-
- - Search icon - -
-
-
-

- - {{# str }}headingfour, tool_brickfield{{/ str }} - -

-

- {{# str }}contentfour, tool_brickfield{{/ str }} -

-
-
-
-
- -
-
-
-
-
- - Magic wand icon - -
-
-
-

- - {{# str }}headingfive, tool_brickfield{{/ str }} - -

-

- {{# str }}contentfive, tool_brickfield{{/ str }} -

-
-
-
-
- -
-
-
-
-
- - Helping hands icon - -
-
-
-

- - {{# str }}headingsix, tool_brickfield{{/ str }} - -

-

- {{# str }}contentsix, tool_brickfield{{/ str }} -

-
-
-
-
- + {{/griditems}} +
+
+

{{#str}} footerheading, tool_brickfield {{/str}}

+

{{#str}}bannercontenttwo, tool_brickfield{{/str}}

+ + {{#str}}buttonone, tool_brickfield{{/str}} +
- -
-

{{# str }}footerheading, tool_brickfield{{/ str }}

-

- {{# str }}bannercontenttwo, tool_brickfield{{/ str }} -

-
-
- -
-
-
\ No newline at end of file