Device Details Compatibility Layer

accordion.js

// Create a new YUI instance and populate it with the required modules.
YUI().use('node', 'event', function (Y) {
  // Node is available and ready for use. Add implementation
	// code here.
	var allPanels = Y.all('.accordeonContainer > .accordeonContent').hide();

	var panelHeaders = Y.all('.accordeonContainer > h2');
	panelHeaders.on('click', function(e) {

		//Get the parent node:
		var parent = e.target.ancestor(".accordeonContainer");
		//Get the content:
		var child = parent.one(".accordeonContent");

		if(child.getStyle('display') === "none"){
			child.show();
		}else{
			child.hide();
		}

		// Stop the event's default behavior
		e.preventDefault();

		// Stop the event from bubbling up the DOM tree
		e.stopPropagation();
	});
});

style.css

.oneThirdWidth {
    padding-right: 20px;
    display: inline;
    width: 33%;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.twoThirdsWidth {
  padding-right: 20px;
	width: 67%;
	display: inline !important;
	-moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Liferay provides these classes, but they're both floating left, so we need to override: */
.left {
	float: left !important;
}
.right {
	float: right !important;
}

.deviceDetails dl {
	margin: 0;
	padding: 0;
}

.deviceDetails dt {
	margin: 0;
	padding: 0 0 8px 0;
	float: left;
	clear: both;
	width: 45%;
	line-height: 120%;
	color: #666;
	-moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.deviceDetails dd {
	margin: 0;
	padding: 0 0 8px 0;
	float: left;
	width: 55%;
	-moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Accordian: */

#fncontent h2.accordeonTitle,#fncontent .accordeonContainer h2.title{
	padding:0 0 0 14px;
	background: #0368cd;
	margin:10px;
	border-top:0 none;
	height:30px;
	overflow:hidden;
}

#fncontent .accordeonContainer h2.title span{
	background:0;
	margin:0;
	border-top: 0;
}

#fncontent h2.accordeonTitle span,#fncontent .accordeonContainer h2.title span{
	padding:0 14px 0 0;
	font-size:14px;
	vertical-align:middle;
	margin:0;
	cursor:pointer;
	letter-spacing:-0.05em;
	display:block;
	color:#fff;
	line-height:30px;
	background:url("http://www.developer.nokia.com/images/l/arrow_down_blue.gif") no-repeat scroll right center #0368cd;
}



/*
 Inclue standard clearfix:
 */

.clearfix:after {
	content: "."
;	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

transition.md

Moving Content

Not all of the content from the old system matches the wireframes of the new system.

• The div with the class "deviceName" must be moved into the div with the class "deviceDetails".
• The div with the class "deviceInfoBlock" and one h4 that says "Device Description" must be partially relocated. The h4 and paragraph tags must be moved to the div with the class "deviceDetails", but the ul and li tags must remain.
• Other migrations of content also need to be moved. At this point, I would recommend visual inspection.

JavaScript

Two JavaScript files are included at the bottom of each device page. These should be removed. The following regular expression should find the two JavaScript tags.

<script[\s]*type="text/javascript"[\s]*src="[\s\S]*"><\/script>

Includes

The includes are now meaningless. The following regular expression will find all template tags that need to be replaced.

<!--#include[\s\S]*-->

Metadata

The entire first half of the device files are loaded with all sorts of random metadata. Liferay interperets most of it as line breaks, which is not good. This could be fixed by creating some css selectors that change them to display: none, but I'd recommend deleting the metadata entirely. From what I can tell, this can all be stripped out during the import to Liferay. The following regular expression will find a majority of this metadata.

<!--\?RDFA-START\?-->[\s\S]*<!--\?RDFA-END\?-->

That still leaves a pretty significant portion of the metadata on top, which can mostly be found with the following regular expression.

<p>[\s]*<meta[\s\S]* \/>[\s]*<\/p>

Another way to remove all of the metadata would be to strip all content before the first <div id="fncontainer">, which should also work.