Fixed user statistics on profile page fixes #120

digirati-co-uk · Sep 13, 2019 · 7e6d58b · 7e6d58b
1 parent ca4ef62
commit 7e6d58b
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -56,7 +56,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed unhandled exception in top contributor page block
 - Fixed bug with checking if canvas inside of manifest
 - Fixes contrast issue when marking page as complete (Fixes #111)
-- Fixes mark page as incomplete behaviour
+- Fixed mark page as incomplete behaviour
+- Fixed user statistics on profile page
 
 ## [1.1.3](https://github.com/digirati-co-uk/madoc-platform/compare/v1.1.2...v1.1.3) - 2019-06-03
 

diff --git a/repos/public-user/asset/css/statistics.css b/repos/public-user/asset/css/statistics.css
@@ -0,0 +1,110 @@
+.c-statistics {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: row;
+    flex-direction: row;
+}
+
+.c-statistics--center {
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.c-statistic {
+    font-size: 14px;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-pack: top;
+    justify-content: top;
+    -ms-flex-align: center;
+    align-items: center;
+    margin: 0;
+    text-align: center;
+    padding: 15px 20px;
+    min-width: 0;
+}
+
+.c-statistic:after {
+    clear: both;
+    content: "";
+    display: table;
+}
+
+.c-statistic:hover {
+    background-color: #f2f3f4;
+}
+
+.c-statistic dd {
+    color: inherit;
+    font-family: "Lato", Arial, "Helvetica Neue", Helvetica, sans-serif;
+    font-weight: 600;
+    line-height: 1.3;
+    margin: 0.6em 0;
+    padding: 0;
+    margin: 0;
+    font-size: 1.2em;
+    -ms-flex-order: 0;
+    order: 0;
+    margin: 0;
+}
+
+.c-statistic dt {
+    -ms-flex-order: 1;
+    order: 1;
+}
+
+.c-statistic--inline {
+    -ms-flex-direction: row;
+    flex-direction: row;
+    padding: 0 15px;
+}
+
+.c-statistic--inline dd {
+    padding-right: 7px;
+}
+
+.c-statistic--sm dd {
+    font-size: 2em;
+}
+
+@media (max-width: 1024px) {
+    .c-statistic--sm dd {
+        font-size: 1.4em;
+    }
+}
+
+.c-statistic--md dd {
+    font-size: 3em;
+}
+
+@media (max-width: 1024px) {
+    .c-statistic--md dd {
+        font-size: 2em;
+    }
+}
+
+.c-statistic--lg dd {
+    font-size: 4em;
+}
+
+@media (max-width: 1024px) {
+    .c-statistic--lg dd {
+        font-size: 3em;
+    }
+}
+
+.c-statistic--xl {
+    padding: 15px 40px;
+}
+
+.c-statistic--xl dd {
+    font-size: 6em;
+}
+
+@media (max-width: 1024px) {
+    .c-statistic--xl dd {
+        font-size: 4em;
+    }
+}
diff --git a/repos/public-user/src/Controller/AccountController.php b/repos/public-user/src/Controller/AccountController.php
@@ -65,20 +65,18 @@ public function profileAction()
                 'include_key' => false,
             ];
 
-        $manifest = [
-            'statistics' => [
-                [
-                    'label' => 'Bookmarked images', // @translate
-                    'value' => $stats->getBookmarks(),
-                ],
-                [
-                    'label' => 'Images annotated', // @translate
-                    'value' => $stats->getIncompleteImages(),
-                ],
-                [
-                    'label' => 'Total annotations', // @translate
-                    'value' => $stats->getIncompleteAnnotations() + $stats->getCompleteAnnotations(),
-                ],
+        $statistics = [
+            [
+                'label' => 'Bookmarked images', // @translate
+                'value' => $stats->getBookmarks(),
+            ],
+            [
+                'label' => 'Images annotated', // @translate
+                'value' => $stats->getIncompleteImages(),
+            ],
+            [
+                'label' => 'Total annotations', // @translate
+                'value' => $stats->getIncompleteAnnotations() + $stats->getCompleteAnnotations(),
             ],
         ];
 
@@ -96,14 +94,14 @@ public function profileAction()
 
         $form->setData($formData);
 
-        $returnError = function() use ($view, $form, $manifest, $user) {
+        $returnError = function () use ($view, $form, $statistics, $user) {
             $view->setVariable('form', $form);
 
             $this->messenger()->addFormErrors($form);
 
             $view->setVariable('form', $form);
             $view->setVariable('user', $user);
-            $view->setVariable('manifest', $manifest);
+            $view->setVariable('statistics', $statistics);
 
             return $view;
         };
@@ -152,7 +150,7 @@ public function profileAction()
 
         $view->setVariable('form', $form);
         $view->setVariable('user', $user);
-        $view->setVariable('manifest', $manifest);
+        $view->setVariable('statistics', $statistics);
 
         return $view;
     }

diff --git a/repos/public-user/view/public-user/account/profile.twig b/repos/public-user/view/public-user/account/profile.twig
@@ -1,20 +1,37 @@
+{% do headLink().prependStylesheet(assetUrl('css/statistics.css', 'PublicUser')) %}
 {% set theForm = form.prepare() %}
 {% set sectionNavs = {'user-information': translate('User information'), 'change-password': translate('Password')} %}
 
+
+
 {{ pageTitle(translate('Edit User: {user}')|replace({'{user}': user.getName()})) | raw }}
 {{ trigger('view.edit.before') }}
 {{ form().openTag(form) | raw }}
     {{ sectionNav(sectionNavs, 'view.edit.section_nav' ) }}
 
     {{ trigger('view.edit.form.before', {'form': form }) }}
 
+{% if statistics %}
+    <div class="c-collection__statistics">
+        <div class="c-statistics">
+            {% for statistic in statistics %}
+                <dl class="c-statistic c-statistic--sm">
+                    <dt>{{ statistic.label }}</dt>
+                    <dd>{{ statistic.value }}</dd>
+                </dl>
+            {% endfor %}
+        </div>
+    </div>
+{% endif %}
+
 <fieldset id="user-information" class="section active">
     {{ formCollection(form.get('user-information'), false) }}
 </fieldset>
 <fieldset id="change-password" class="section">
     {{ formCollection(form.get('change-password'), false) }}
 </fieldset>
 
+
 {{ trigger('view.edit.form.after', {'form': form }) }}
 <div id="page-actions">
     <button type="submit">{{ translate('Save') }}</button>
@@ -23,17 +40,3 @@
 {{ formElement(form.get('csrf')) }}
 {{ form().closeTag()| raw }}
 {{ trigger('view.edit.after') }}
-
-
-{% if(manifest.statistics) %}
-    <div class="c-collection__statistics">
-        <div class="c-statistics ">
-            {% for statistic in manifest.statistics %}
-                <dl class="c-statistic c-statistic--sm c-statistic--inline">
-                    <dt>{{ manifest.statistics.label }}</dt>
-                    <dd>{{ manifest.statistics.value }}</dd>
-                </dl>
-            {% endfor %}
-        </div>
-    </div>
-{% endif %}