Orange Blue Yellow

Layout

layout_base

Layout

Layout Base

<div class="g-navbar-header"></div>
<div class="g-content-core">
	<div class="g-side-bar"> </div>
	<div class="g-context-bar"> </div>
	<div class="g-main-content"> </div>
</div>
<div class="g-footer"></div>

Navbar Header

Glinttology
Olá, Glinttology!

13 julho 2020

g-navbar-header

<div class="g-navbar-header" id="g_header">
	<div class="g-row">
		<div class="pure-u-2-24 pure-u-sm-1-24">
			<span id="g_back" class="g-icon g-icon-tools-seta-esquerda"></span>
		</div>

		<!-- Left side of the screen -->
		<div class="pure-u-4-24 pure-u-sm-2-24 g-logo">
			<img src="assets/toolkit/styles/images/Login/favicon_globalcare.png">
		</div>

		<!-- Center of the screen -->
		<div class="pure-u-12-24 pure-u-sm-18-24 g-screen-title">
			<div>
				<span class="g-application"></span>
			</div>
			<div>
				<span class="g-module">Glinttology</span>
			</div>
		</div>
		<div class="pure-u-6-24 pure-u-sm-3-24 g-caract-user">
			<div class="pull-right">
				<div class="g-align">
					<span class="g-greetings">Olá,</span>
					<span class="g-username">Glinttology!</span>
					<p class="g-date">13 julho 2020</p>
				</div>
				<div class="g-align">
					<div class="g-header-exit">
						<span class="g-icon g-icon-tools-on-off pointer" id="g_logout"></span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="progressbar"></div>
</div>

<script type="text/javascript">
	function progressBar() {

		$("#progressbar").progressbar({
			value: false
		});

	}
</script>

Layout 2

Layout Base - 2

<div class="g-navbar-header"> </div>
<div class="g-content-core">
	<div class="g-side-bar"> </div>
	<div class="g-context-bar"> </div>
	<div class="g-option-back"> <span class="g-icon g-icon-tools-seta-esquerda"></span> </div>
	<div class="g-side-bar-left"> </div>
	<div class="g-main-content"> </div>
</div>
<div class="g-footer"></div>

Layout 3

Indicators

Search

Filtro 1
Filtro 2
Filtro 3
Filtro 1
Filtro 2
Filtro 3
Filtro 1
Filtro 2
Filtro 3
Filtro 1
Filtro 2
Filtro 3
Filtro 1
Filtro 2
Filtro 3
Filtro 1
Filtro 2
Filtro 3

Body

Layout Base - 3

<div class="g-navbar-header"> </div>
<div class="g-content-core">
	<div class="g-side-bar"> </div>
	<div class="g-context-bar"> </div>
	<div class="g-side-bar-left"></div>
	<div class="g-option-back"></div>
	<div class="g-main-content">
		<div class="g-layout-indicators">
			<p>Indicators</p>
		</div>
		<div class="g-layout-search">
			<p>Search</p>
		</div>
		<div class="g-layout-filters">
			<div class="g-filter-left pure-u-6-24">
				<div class="filter">Filtro 1</div>
				<div class="filter">Filtro 2</div>
				<div class="filter">Filtro 3</div>
				<div class="filter">Filtro 1</div>
				<div class="filter">Filtro 2</div>
				<div class="filter">Filtro 3</div>
				<div class="filter">Filtro 1</div>
				<div class="filter">Filtro 2</div>
				<div class="filter">Filtro 3</div>
				<div class="filter">Filtro 1</div>
				<div class="filter">Filtro 2</div>
				<div class="filter">Filtro 3</div>
				<div class="filter">Filtro 1</div>
				<div class="filter">Filtro 2</div>
				<div class="filter">Filtro 3</div>
			</div>
			<div class="g-filter-right pure-u-18-24">
				<div class="filter">Filtro 1</div>
				<div class="filter">Filtro 2</div>
				<div class="filter">Filtro 3</div>
			</div>
		</div>
		<div class="g-layout-body">
			<p>Body</p>
		</div>
	</div>
</div>
<div class="g-footer"></div>

Layout Filters

Filtro 1
Filtro 2
Filtro 3
Filtro 1
Filtro 2
Filtro 3

Layout Filters

<div class="g-layout-filters pure-g">
	<div class="g-filter-left pure-u-6-24">
		<div class="filter">Filtro 1</div>
		<div class="filter">Filtro 2</div>
		<div class="filter">Filtro 3</div>
	</div>
	<div class="g-filter-right pure-u-18-24">
		<div class="filter">Filtro 1</div>
		<div class="filter">Filtro 2</div>
		<div class="filter">Filtro 3</div>
	</div>
</div>

Layout Collapse Up

Indicators

Search

Filtro 1
Filtro 2
Filtro 3
Filtro 1
Filtro 2
Filtro 3
Lista de consentimentos não assinalados (13)

daskdsaksadkdas

daskdsaksadkdas

daskdsaksadkdas

daskdsaksadkdas

daskdsaksadkdas

daskdsaksadkdas

daskdsaksadkdas

Layout collapse up

<div class="g-navbar-header"> </div>
<div class="g-content-core">
	<div class="g-side-bar"> </div>
	<div class="g-context-bar"> </div>
	<div class="g-side-bar-left"></div>
	<div class="g-option-back"></div>
	<div class="g-main-content">
		<div class="g-layout-indicators">
			<p>Indicators</p>
		</div>
		<div class="g-layout-search">
			<p>Search</p>
		</div>
		<div class="g-layout-filters">
			<div class="g-filter-left">
				<div class="filter">Filtro 1</div>
				<div class="filter">Filtro 2</div>
				<div class="filter">Filtro 3</div>
			</div>
			<div class="g-filter-right">
				<div class="filter">Filtro 1</div>
				<div class="filter">Filtro 2</div>
				<div class="filter">Filtro 3</div>
			</div>
		</div>
		<div class="g-layout-body">
			<div class="g-content warnings g-data-table g-collapse-up g-collapse">
				<div data-toggle="collapse" data-target="#demo_warnings" class="g-data-table-header g-h-md">
					<div>
						<span class="g-icon g-icon-delete g-warnings"></span>
						<span class="g-text-15 g-clickable-underline"> Lista de consentimentos não assinalados (13)</span>
					</div>
				</div>
				<div id="demo_warnings" class="collapse" aria-expanded="false">
					<div class="g-data-table-body bg-light">
						<div id='g_glist_warnings' class="g-glist"></div>
					</div>
				</div>
			</div>
			<div class="g-layout-adapter">
				<p>daskdsaksadkdas</p>
				<p>daskdsaksadkdas</p>
				<p>daskdsaksadkdas</p>
				<p>daskdsaksadkdas</p>
				<p>daskdsaksadkdas</p>
				<p>daskdsaksadkdas</p>
				<p>daskdsaksadkdas</p>
			</div>
		</div>
	</div>
</div>
<div class="g-footer"></div>

<script id="glist_template_1" type="text/x-jquery-tmpl">
	<div class="g-data-table-row g-h-sm">
		<div class="g-row">
			<div class="pure-u-1-24">
				<div class="g-container"></div>
			</div>
			<div class="pure-u-23-24">
				<span class="g-text-13 g-clickable-underline"></span>
			</div>
		</div>
	</div>
</script>
<script>
	function glist() {

		function onRowSelected(element, item) {}

		$('#g_glist_warnings').GList({
			isEditable: true,
			datasource: [],
			max_height: '100%',
			scrollBarCustomization: {
				avanced: {
					updateOnBrowserResize: false,
					updateOnContentResize: false
				},
				scrollButtons: {
					enable: false
				}
			},

			templates: glist_template_1.text,
			controlsdata: [{
				controlClass: 'g-data-table-row-warnings',

				initialization: {
					onRowSelected: onRowSelected
				}
			}]
		});

		var dataSource = [{
				Id: 1,
				Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
			}
			/*, {
								Id: 2,
								Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
							}, {
								Id: 3,
								Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
							}, {
								Id: 4,
								Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
							}, {
								Id: 5,
								Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
							}, {
								Id: 6,
								Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
							}, {
								Id: 7,
								Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
							}*/
		];


		$('#g_glist_warnings').data('GList').setDataSource(dataSource);

		EventManager.addEvent($('.g-content.warnings.g-data-table .g-data-table-header'), 'click', '', CommonNS.onCollapseUpClickHandler, {
			selectorIdGlist: '#g_glist_warnings',
			selectorGCollapseUp: '.g-content.warnings.g-data-table'
		})
	}
</script>

Glintt Columns 1 1 1

<div class="glintt-columns">
	<div class="g-1-1-1 g-content dark rounded"></div>
	<div class="g-1-1-1 g-content dark rounded"></div>
	<div class="g-1-1-1 g-content dark rounded"></div>
</div>

Glintt Columns 1 2

<div class="glintt-columns">
	<div class="g-1-2 g-content dark rounded"></div>
	<div class="g-1-2 g-content dark rounded"></div>
</div>

Glintt Columns 1 1

<div class="glintt-columns">
	<div class="g-1-1 g-content dark rounded"></div>
	<div class="g-1-1 g-content dark rounded"></div>
</div>

Glintt Columns 1 3

<div class="glintt-columns">
	<div class="g-1-3 g-content dark rounded"></div>
	<div class="g-1-3 g-content dark rounded"></div>
</div>

Fitlers Behaviour

Filtrar por: Todos Nome da mãe Internamento Falecido
Filtrar por: Serviço
Data Inicio
Fim
Data Proposta Inicio
Fim

Filters Behaviour

<script>
	function filtro() {

		$('#g_datepicker_begin_2').GlinttDatePicker({
			theme: 'medium',
			format: 'YYYY-MM-DD',
			placeholder: '<aaaa/mm/dd>',
			showIcon: true,
			iconClass: 'g-icon g-icon-tools-seta-baixo',
			showCleanIcon: false,
			includeTime: false,
			hasPrefix: false,
			isEditable: true,
			onChange: function(plug, val) {
				if (val != undefined) {}
			}
		});

		$('#g_datepicker_end_2').GlinttDatePicker({
			theme: 'medium',
			format: 'YYYY-MM-DD',
			placeholder: '<aaaa/mm/dd>',
			showIcon: true,
			iconClass: 'g-icon g-icon-tools-seta-baixo',
			showCleanIcon: false,
			includeTime: false,
			hasPrefix: false,
			isEditable: true,
			onChange: function(plug, val) {
				if (val != undefined) {}
			}
		});

		$('#g_datepicker_begin_3').GlinttDatePicker({
			theme: 'medium',
			format: 'YYYY-MM-DD',
			placeholder: '<aaaa/mm/dd>',
			showIcon: true,
			iconClass: 'g-icon g-icon-tools-seta-baixo',
			showCleanIcon: false,
			includeTime: false,
			hasPrefix: false,
			isEditable: true,
			onChange: function(plug, val) {
				if (val != undefined) {}
			}
		});

		$('#g_datepicker_end_3').GlinttDatePicker({
			theme: 'medium',
			format: 'YYYY-MM-DD',
			placeholder: '<aaaa/mm/dd>',
			showIcon: true,
			iconClass: 'g-icon g-icon-tools-seta-baixo',
			showCleanIcon: false,
			includeTime: false,
			hasPrefix: false,
			isEditable: true,
			onChange: function(plug, val) {
				if (val != undefined) {}
			}
		});

	}
</script>

<div class="g-layout-filters g-pure-g">
	<div class="g-filter-left pure-u-6-24">
		<div class="more-left g-icon-tools-filtro hidden"></div>
		<div class="g-filter inner-filters">
			<span class="g-first">
				Filtrar por:
			</span>
			<span class="g-property">
				Todos
			</span>
			<span class="g-property">
				Nome da mãe
			</span>
			<span class="g-property">
				Internamento
			</span>
			<span class="g-property">
				Falecido
			</span>
		</div>
	</div>
	<div class="g-filter-right pure-u-18-24">
		<div class="more-right g-icon-tools-filtro hidden"></div>
		<div class="inner-filters">
			<div class="filter">
				<div class="g-filter">
					<span class="g-first">
						Filtrar por:
					</span>
					<span class="g-property">
						Serviço
					</span>
				</div>
			</div>

			<div class="filter">
				<span class="g-text-13">
					Data
				</span>
				<span class="g-text-12">
					Inicio
				</span>
				<div id="g_datepicker_begin_2" class="g-datepicker filter"> </div>
				<span class="g-text-12">
					Fim
				</span>
				<div id="g_datepicker_end_2" class="g-datepicker filter"> </div>
			</div>

			<div class="filter">
				<span class="g-text-13">
					Data Proposta
				</span>
				<span class="g-text-12">
					Inicio
				</span>
				<div id="g_datepicker_begin_3" class="g-datepicker filter"> </div>
				<span class="g-text-12">
					Fim
				</span>
				<div id="g_datepicker_end_3" class="g-datepicker filter"> </div>
			</div>
		</div>
	</div>
</div>