Improve layout
This commit is contained in:
Eike Foken
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,3 +1,4 @@
|
||||
.buildpath
|
||||
.project
|
||||
.settings/
|
||||
*.xcf
|
||||
|
||||
@@ -21,3 +21,11 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<?=img(array('src' => 'assets/images/logo.png', 'style' => 'margin-left: 5px'));?>
|
||||
<div style="float: right; margin-top: 15px; margin-right: 10px; color: #ccc;">
|
||||
<?=anchor('auth/settings', "Einstellungen", array('style' => 'padding: 5px;'));?> |
|
||||
<?=anchor('auth/logout', "Logout", array('style' => 'padding: 5px;'));?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,45 +1,46 @@
|
||||
<?php $this->load->view('header'); ?>
|
||||
|
||||
<script type="text/javascript">
|
||||
var layoutLeft1 = new Ext.tree.TreePanel({
|
||||
region: 'north',
|
||||
var projectPanel = new Ext.tree.TreePanel({
|
||||
id: 'project-tree',
|
||||
region: 'west',
|
||||
title: "Projekte",
|
||||
height: 250,
|
||||
height: 400,
|
||||
bodyStyle: 'margin-bottom: 6px;',
|
||||
autoScroll: true,
|
||||
enableDD: false,
|
||||
rootVisible: false,
|
||||
id: 'treePanel',
|
||||
rootVisible: true,
|
||||
lines: false,
|
||||
tbar: [{
|
||||
icon: BASE_PATH + 'assets/images/icons/box--plus.png',
|
||||
text: "Neues Projekt",
|
||||
scope: this
|
||||
},{
|
||||
id: 'delete',
|
||||
icon: BASE_PATH + 'assets/images/icons/box--minus.png',
|
||||
text: "Entfernen",
|
||||
scope: this
|
||||
}],
|
||||
root: {
|
||||
text: "Projekte",
|
||||
text: "Meine Projekte",
|
||||
expanded: true,
|
||||
nodeType: 'async',
|
||||
children: [{
|
||||
text: 'Projekt 1',
|
||||
expanded: false
|
||||
leaf: true
|
||||
}, {
|
||||
text: 'Projekt 2',
|
||||
expanded: false,
|
||||
leaf: true
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
var layoutLeft2 = new Ext.Panel({
|
||||
region: 'center',
|
||||
region: 'west',
|
||||
margin: '10 0 0 0',
|
||||
autoScroll: true,
|
||||
bodyStyle: 'padding: 10px; background: #eee;',
|
||||
html: 'Test'
|
||||
});
|
||||
|
||||
var toolbarCenter = new Ext.Toolbar({
|
||||
items: ['->', {
|
||||
icon: BASE_PATH + 'assets/images/icons/minus-circle.png',
|
||||
text: 'Logout',
|
||||
handler: logout
|
||||
}]
|
||||
});
|
||||
|
||||
var panelCenter = new Ext.TabPanel({
|
||||
xtype: 'tabpanel',
|
||||
resizeTabs: false,
|
||||
@@ -65,36 +66,34 @@ var layoutCenter = new Ext.Panel({
|
||||
margins: '0 5 5 0',
|
||||
activeItem: 0,
|
||||
border: true,
|
||||
tbar: toolbarCenter,
|
||||
items: [panelCenter]
|
||||
});
|
||||
|
||||
var layoutMain = new Ext.Viewport({
|
||||
layout: 'border',
|
||||
renderTo: Ext.getBody(),
|
||||
items: [{
|
||||
height: 46,
|
||||
region: 'north',
|
||||
xtype: 'box',
|
||||
el: 'header',
|
||||
border: false
|
||||
}, {
|
||||
region: 'west',
|
||||
baseCls: 'x-plain',
|
||||
xtype: 'panel',
|
||||
autoHeight: true,
|
||||
height: 100,
|
||||
width: 190,
|
||||
minWidth: 190,
|
||||
maxWidth: 300,
|
||||
border: false,
|
||||
html: '<div id="header">Scattport</div>',
|
||||
margins: '0 0 5 0',
|
||||
style: 'margin-bottom: 4px;'
|
||||
}, {
|
||||
region: 'west',
|
||||
baseCls: 'x-plain',
|
||||
xtype: 'panel',
|
||||
autoHeight: true,
|
||||
width: 180,
|
||||
border: false,
|
||||
split: true,
|
||||
margins: '0 0 0 5',
|
||||
items: [layoutLeft1, layoutLeft2]
|
||||
}, layoutCenter]
|
||||
split: true,
|
||||
margins: '0 0 0 5',
|
||||
items: [projectPanel, layoutLeft2]
|
||||
}, layoutCenter]
|
||||
});
|
||||
|
||||
function logout() {
|
||||
Ext.Ajax.request({
|
||||
$.ajax({
|
||||
url: BASE_URL + 'auth/do_logout',
|
||||
method: 'post',
|
||||
success: function(xhr) {
|
||||
@@ -102,8 +101,8 @@ function logout() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
layoutMain.show();
|
||||
</script>
|
||||
|
||||
<div id="main"></div>
|
||||
|
||||
<?php $this->load->view('footer'); ?>
|
||||
@@ -1,13 +1,30 @@
|
||||
body {
|
||||
background: #7f99be;
|
||||
font: normal 12px "Trebuchet MS", Arial, sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4b6b94;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #999;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#header {
|
||||
border-bottom: 1px solid #666;
|
||||
background: #1e4176;
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.x-viewport body {
|
||||
background: #ededed url('../images/back.png') repeat-x !important;
|
||||
}
|
||||
|
||||
BIN
assets/images/back.png
Normal file
BIN
assets/images/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 219 B |
BIN
assets/images/logo.png
Normal file
BIN
assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Reference in New Issue
Block a user