Difference between revisions of "Ccil-ui-web"

Latest revision as of 09:59, 2 July 2016

The CCIL UI artifacts are located in the /ccil/logo in the final distribution WAR file.

Maven

In order include it, you need a reference to the Maven project:

<dependency>
	<groupId>net.ccil</groupId>
	<artifactId>ccil-ui-web</artifactId>
	<version>3.2.4-SNAPSHOT</version>
	<scope>runtime</scope>
	<type>war</type>
</dependency>

Then, in the plugins section:

<plugin>
	<groupId>org.apache.maven.plugins</groupId>
	<artifactId>maven-war-plugin</artifactId>
	<configuration>
		<overlays>
			<overlay>
				<groupId>net.ccil</groupId>
				<artifactId>ccil-ui-web</artifactId>
				<type>war</type>
       				<targetPath>/</targetPath>
			</overlay>
		</overlays>
	</configuration>
</plugin>

HTML

In order to enable all functions of the interface. you should include all sections:

Icon and meta links

<!-- icon -->
<link rel="shortcut icon" href="ccil/logo/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="57x57"
	href="ccil/logo/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60"
	href="ccil/logo/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72"
	href="ccil/logo/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76"
	href="ccil/logo/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114"
	href="ccil/logo/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120"
	href="ccil/logo/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144"
	href="ccil/logo/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152"
	href="ccil/logo/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180"
	href="ccil/logo/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"
	href="ccil/logo/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32"
	href="ccil/logo/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96"
	href="ccil/logo/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16"
	href="ccil/logo/favicon-16x16.png">
<link rel="manifest" href="id/logo/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

<!--iOS -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Styles

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="ccil/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="ccil/css/bootstrap-theme.min.css">
<!-- CCIL -->
<link rel="stylesheet" href="ccil/css/ccil.css">

<!-- preloader 
<link rel="stylesheet" href="preloader/css/normalize.css">
<link rel="stylesheet" href="preloader/css/main.css">
-->

Javascripts

<!-- jQuery library -->
<script src="ccil/js/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="ccil/js/bootstrap.min.js"></script>

<!-- CCIL -->
<script type='text/javascript' src='ccil/js/ccil.js'></script>
<script type='text/javascript' src='ccil/js/ccil-ui.js'></script>
<script type='text/javascript' src='ccil/js/ccil-config.js'></script>
<script type='text/javascript' src='ccil/js/ccil-wallpaper.js'></script>


<!-- Modernizr -->
<script src="preloader/js/vendor/modernizr-2.6.2.min.js"></script>
<!-- gauge -->
<script src="ccil/js/jquery.AshAlom.gaugeMeter-2.0.0.min.js"></script>

<!-- DataTables -->
<link rel="stylesheet" type="text/css"
	href="ccil/DataTables/datatables.min.css" />
<script type="text/javascript" src="ccil/DataTables/datatables.min.js"></script>

CSS

<style>

#editor {
	width: 50%;
}

.tab-content {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-radius: 0px 0px 5px 5px;
	padding: 10px;
}

.nav-tabs {
	margin-bottom: 0;
}


.id_text {
	color: gray;
}

.fci span {
	font-size: xx-large;
	font-weight: bolder;
	position: absolute;
	color: #E1E1E1;
	margin-left: 120pt;
	margin-top: 40pt;
}

.fci div table {
	position: relative;
	left: 0px;
	top: 0px;
	font-size: x-small;
	border-left-width: thin;
	border-left-color: #E1E1E1;
	border-left-style: solid;
}

.panel-transparent {
	background: none;
}

.panel-transparent .panel-heading {
	background: rgba(122, 130, 136, 0.2) !important;
}

.panel-transparent .panel-body {
	background: rgba(46, 51, 56, 0.2) !important;
}

.lag {
	float: right;
}

.section_wiki {
	
}
</style>

Body Javascript

$(document).ready(function() {
	CCIL.ui.wallpaper.setRandom();
	console.log("document.ready");
	//			var docId = getParam("id");

	// hook pills
	CCIL.onload = function() {
		// do something
	};

	CCIL.init();
	CCIL.ui.init('interface.json');
}); // document.ready