Acknowledgments and improvements

[nono74]

Hello,

I'm a Symfony web developer and I use forma 2.3 for the school in my village during the confinement period in France.

We use it, with a team of 3 teachers, for students between 6 and 7 years old and the platform is really easy to use.

Many features are not useful but the platform lends itself very well to this use. So thanks to the team for developing this wonderful tool!

I wanted to share with you improvements that I have made, including a button to return to the list of courses when a course is open (more user-friendly than a return to the previous page of the browser) and notifications from private messages in the menu bar.

Here are the improvements:

1) The return button


In file templates/standard/layout/coursemenu_lat.html.twig

At line 25, replace the complete <div class="col-sm-9"> by :

Code: Select all

<div class="col-sm-9">
            	<div class="row">
            		<div class="col-sm-12">
                		<h1 class="section-coourse__title">{{ course_name }}</h1>
                	</div>
                </div>
                <div class="row">
                	<div class="col-sm-6">
		                <div class="section-coourse__progress-container">
		                    <div class="progress section-coourse__progress">
		                        <div class="progress-bar progress-bar-warning{% if stats.perc_completed < 25 %} progress-bar-warning--black{% endif %}" role="progressbar" aria-valuenow="{{ stats.perc_completed }}"
		                             aria-valuemin="0" aria-valuemax="100" style="width: {{ stats.perc_completed }}%;">
		                            <span>{{ stats.perc_completed }}%</span>
		                        </div>
		                        <span class="glyphicon glyphicon-signal pull-right" aria-hidden="true" data-toggle="modal" data-target="#myModal"></span>
		                    </div>
		                </div>
		            </div>
		            <div class="col-sm-6">
		            	<div class="section-coourse__progress-container">
		            		<a href="/../appLms/index.php?r=lms/mycourses/show&mycourses_tab=tb_elearning&sop=unregistercourse" title="Return to courses list" class="btn btn-primary" style="width:100%"><span class="glyphicon glyphicon-home"></span> Return to courses list</a>	
		            	</div>
		            </div>
		        </div>
            </div>

It's all ! Thanks to Twitter Bootstrap !

2) For notifications, there are several files to modify:

In file appLms/lib/lib.user_profile.php :

Line 627, add :

Code: Select all

function notifMsg()
	{
		$this->setViewer($viewer);
		return $this->_up_viewer->notifMsg();
	}

Line 1880, replace the "if ($unread_num > 0 && $perm_message)" condition by :

Code: Select all

 if ($unread_num > 0 && $perm_message) {
            $this->user_info['NOTIF'] = $unread_num;
            $html .= '<div class="col-xs-4"><a class="btn btn-default" href="/?r=message/show&sop=unregistercourse">' . Lang::t('_MESSAGES', 'standard') . '<b class="num_notify"><i style="font-size:.78em">' . $this->user_info['NOTIF'] . '</i></b></a></div>';
         }

Line 1967, add this new function :

Code: Select all

function notifMsg() { 
 
      	if (isset($this->user_info['NOTIF'])) {
      		$html = '<b class="num_notify_menu"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <i style="font-size:.78em">' . $this->user_info['NOTIF'] . '</i></b>';
       	} else {
       		$html = '';
       	}
       	
       	return $html;
}

In appLms/modules/course/course.php, after line 62, add :

Code: Select all

$GLOBALS['page']->addStart($profile->notifMsg(), 'content');

In templates/standard/layout/appLms/profile.html.twig, at the start, after <li class="green_menu">, add :

Code: Select all

{% if profile %}
         {% set profil, notif = profile.homeUserProfile('normal', false, false), profile.notifMsg() %}
      {% endif %}    
      {{ notif|raw }}

In widget/lms_block/lib.lms_block_menu.php, after line 311 :

Code: Select all

echo $profile->notifMsg();

And for the style, add this to templates/standard/style/lms.css, line 45 :

Code: Select all

#middlearea .yui-nav li b,.num_notify_menu{position: absolute;color: #fff!important;text-align: right;font-size: 0.9em;padding-top: 0px;line-height: 1.2em;text-decoration: none;top: -7px;
right: -13px;height: 15px;padding: 0 3px;background: #ee1111;border: 0px none;z-index: 2;
-webkit-border-radius: 4px 4px 4px 0;-moz-border-radius: 4px 4px 4px 0;border-radius: 4px 4px 4px 0;
-webkit-box-shadow: #666 0px 2px 3px;-moz-box-shadow: #666 0px 2px 3px;box-shadow: #666 0px 1px 3px;
_top: -11px;_right: -10px;_height: 18px;_width: 16px;
_background: url(../images/standard/updates.png) 0 0 no-repeat transparent;}

And here is the result in pictures:

I am currently looking to display an indication in the menu bar when a new message is posted since the last visit to the public forum.
I will update this topic when it's developed.

I don't think I forgot anything.

Hope you find it useful.

Regards,
Arnaud.

[max]

Hello Arnaud,
welcome on board, and thanks for your contributions! We're happy that Forma is proving useful even with very young kids and it is proving a relief in these times of lockdown!

Concerning suggestion n°1, so you added another button in the progress bar?

You are right that one should not use the "back" button in the browser, but to go back to the home page one simply needs to click on "my courses". As with many dynamic websites, there is no "return". There are navigation buttons, and you just click on the button where you want to go. The only return buttons are for example in the list of materials or in other sections. There you normally find a clickable "back" button.

Suggestion n° 2 is very nice!

[nono74]

Hello max,

I put the back button in place because it's actually a shortcut to the course list.

When I click on "my courses" in the menu bar, since I have set a default page, this page is displayed. You must then click on the e-learning tab to access the list of courses. This does an additional operation whereas with the button, I arrive directly at the list of courses.

And it's also a quick link when you're on a smartphone. It avoids scrolling down the menu, then going to the course list. I am in favor of the slightest effort, especially on mobile navigation where it has to go fast and everything has to be available quickly.

Thank you for your comment regarding suggestion n°2. I really appreciate it and I hope it will be useful to others.

[max]

Hello Arnaud,

I forgot an important issue concerning templates and upgrades.
When you upgrade the system, as you will do in the future, the upgrade procedure overwrites the standard template to ensure compatibility with potential changes in the templating structure.

So my advice is as folows:
- duplicate your template, and rename the copy into "mytemplate" or whatever you want
- set the copy as your default template

That's it, so when you will upgrade you will not lose your changes.

[nono74]

Yes of course.

And I will also add that, for the changes to take effect immediately when editing a template, you must delete the twig cache.
I prefer the method to delete the twig folder in "files/cache/" on the server which is the simplest and fastest.

Hello Arnaud,

I forgot an important issue concerning templates and upgrades.
When you upgrade the system, as you will do in the future, the upgrade procedure overwrites the standard template to ensure compatibility with potential changes in the templating structure.

So my advice is as folows:
- duplicate your template, and rename the copy into "mytemplate" or whatever you want
- set the copy as your default template

That's it, so when you will upgrade you will not lose your changes.

For those who are wondering how to do this, a simple way is :
In folder "/templates", at the root of your server, create a new folder. For example, "my_templates".
Copy the entire content of the "standard" folder into your new folder "my_templates".

After this, connect to your admin panel. Go to Parameters->Configuration->Parameters.
At the "Default template" field, choose your new folder in the select and save.

Now, if you want to modify your templates or others, verify you're in your folder and not in "standard".

It's all !

PS : The translations may not match exactly, I no longer have the exact terms in English.

[alberto]

Hi first, thanks for all your suggestions and contributes!

And I will also add that, for the changes to take effect immediately when editing a template, you must delete the twig cache.
I prefer the method to delete the twig folder in "files/cache/" on the server which is the simplest and fastest.

Note that in settings > system configuration > advanced you can find a button to delete the twig cache