Your new release notes section is nice

[TSP]

I noted that you had it in category view for a few days, and I didn't like that. So **in secret** I wanted you to change back to how it was with the "plain text document"-style.

I see that you've refreshed the look now, and I really really like it on desktop. Nice job, @Rikki (I assume he did it). I'm still not quite fond of what seems to be your default mobile look in circumstances where you have such menu styles; where you'll get this huge menu list at the top before you then have to scroll down to the actual contents. I think it should collapse into a dropdown then or just show the selected menu item at the top and then have a "Expand"-button to display all the others. 

But on desktop it's really nice! And I assume that it once again is a display of the powers of custom pages in Pages.

https://community.invisionpower.com/release-notes/

[Vikestart]

Agreed.

Now if only they could release a few example pages like this for people to play around with, that'd be awesome.

[Charles]

We are going to release some of these templates for people to download and/or include them by default.

None are really that fancy. Just some custom Pages templates

[querschlaeger]

Uff, I can see a big menu and have to scroll up and down and up and down to read the content (and again up to change to release and again down to read the release notes). Not very user friendly...

It took some time to realize that I have to scroll down to read the notes. The first time I clicked the release version and nothing happend (only the item I clicked was highlighted)

[Rikki]

I'm still not quite fond of what seems to be your default mobile look in circumstances where you have such menu styles; where you'll get this huge menu list at the top before you then have to scroll down to the actual contents.

It was something knocked up relatively quickly, so there's no special mobile styles beyond our normal responsiveness, but I agree. I'll see what I can do

[opentype]

It was something knocked up relatively quickly, so there's no special mobile styles beyond our normal responsiveness, but I agree. 

Would love to see a tutorial for the release notes section, especially the Ajax functionality. I guess the main page is just a record listing template(?), but somehow it loads one record in automatically and all others with one click. How is that done? All custom or is that something built into the system?

[Rikki]

I added a javascript controller to the page (Pages > Templates > Add JS file, and then choose it under the Page Includes tab when editing the page) that handles loading a record URL with ajax. The contents of it is below. There's a little trick here - calling a record URL via ajax will normally only return the reviews/comments section, but by passing rating_submitted I can bypass that and get the whole page. That's a quirk I've noted internally and we can hopefully improve that in future so this undocumented trick isn't needed.

/**
 * IPS Social Suite 4
 * (c) 2013 Invision Power Services - http://www.invisionpower.com
 *
 * ips.releaseNotes.main.js - Release notes controller
 *
 * Author: Rikki Tissier
 */
;( function($, _, undefined){
	"use strict";

	ips.controller.register('pages.front.releaseNotes.main', {

		_ajaxObj: null,

		initialize: function () {
			this.on( 'click', '[data-releaseID]', this.showRelease );
			this.setup();
		},

		setup: function () {
			// Find the current release if available
			var showFirst = this.scope.find('[data-role="releases"] [data-currentRelease]');

			if( !showFirst.length ) {
				showFirst = this.scope.find('[data-role="releases"] [data-releaseID]').first();
			}

			if( showFirst.length ){
				showFirst.click();
			}
		},

		showRelease: function (e) {
			e.preventDefault();
			
			var self = this;
			var link = $( e.currentTarget ).attr('href');
			var infoPanel = this.scope.find('[data-role="releaseInfo"]');

			// Cancel any current requests
			if( this._ajaxObj && _.isFunction( this._ajaxObj.abort ) ){
				this._ajaxObj.abort();
			}

			// Set panel to loading
			infoPanel
				.css({
					height: infoPanel.height() + 'px'
				})
				.html( $('<div/>').addClass('ipsLoading').css({ height: '100px' }) );

			// Unhighlight all others, then highlight this one
			this.scope.find('[data-releaseID]').removeClass('cRelease_active');
			$( e.currentTarget ).addClass('cRelease_active');

			this._ajaxObj = ips.getAjax()( link, {
				data: {
					rating_submitted: 1
				}
			})
				.done( function (response) {
					var responseContent = $("<div>" + response + "</div>");
					var content = responseContent.find('#elCmsPageWrap');

					infoPanel.html( content ).css({ height: 'auto' });

					$( document ).trigger( 'contentChange', [ infoPanel ] );
				});
		}
	});
}(jQuery, _));

 

[AtariAge]

We are going to release some of these templates for people to download and/or include them by default.

None are really that fancy. Just some custom Pages templates

This would be great!  I have need to create various custom pages on forums, and I'd like to learn how to use Pages to do this.  Before I saw your post I was looking at the Release Notes and thinking, "It would be nice if Invision could share how this page was done..." 

[NoGi]

We are going to release some of these templates for people to download and/or include them by default.

None are really that fancy. Just some custom Pages templates

Please also include the feature plan page as a template too.

[Joel R]

@Chikki nice job on the release notes.  

[chilihead]

Great that this is a feature here... but on mobile I clicked the versions and nothing happened. Didn't know I had to scroll down to see the text. Perhaps when you select a version you can have a target link on the page so it scrolls down for you. Or you somehow let the user know the results are at the bottom. Otherwise it looks like the links don't work, nothing on the visible page happens. Just ideas. Looking good.