MDL-73331 tool_brickfield: Update advanced tab display

moodle · Apr 25, 2023 · c675170 · c675170
1 parent 0c74bbf
commit c675170
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 236 deletions.
diff --git 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 @@ public function pluginname() {
         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
@@ -270,3 +270,9 @@
 $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
@@ -10,109 +10,86 @@
 
 /* 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;
+    justify-content: space-between;
+    margin-bottom: 20px;
 }
 
-.tool_brickfield_grid_display {
-    display: grid;
-    grid-template-columns: 0.6fr 1.4fr 1fr;
-    grid-template-rows: 1fr 1fr;
+.tool_brickfield_banner_heading > img {
+    height: 50px;
 }
 
-.tool_brickfield_grid_spacing {
-    margin-bottom: 20px;
-    margin-left: auto;
-    margin-right: 1em;
+.tool_brickfield_banner > p {
+    text-align: center;
 }
 
 .tool_brickfield_grid_heading {
     font-family: 'Varela Round', Sans-serif;
     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_grid_heading > img {
+    height: 30px;
+    padding-right: 16px;
 }
 
-.tool_brickfield_icon_position {
-    line-height: 1;
-    font-size: 50px;
+.tool_brickfield_grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 20px 20px 30px;
 }
 
-.tool_brickfield_icon_height {
-    height: 30px;
+.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_center_button {
-    text-align: center;
+.tool_brickfield_grid_heading {
+    display: flex;
 }
 
-.tool_brickfield_advanced_button {
+.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 {
-    background-color: #253687;
+.tool_brickfield_footer {
+    text-align: center;
 }
 
-.tool_brickfield_banner_heading {
-    margin-bottom: 1.5em;
+.tool_brickfield_footer > a:hover {
+    color: #fff;
+    background-color: #253687;
+    text-decoration: none;
 }
 
-.tool_brickfield_banner {
-    height: 10em;
-    padding: 2.5em;
-    margin-bottom: 2em;
+.tool_brickfield_footer > p {
+    margin-bottom: 25px;
 }