1
0
mirror of /repos/Prototyper.git synced 2025-12-30 06:31:32 +01:00

bootstrap css in use

This commit is contained in:
Aiko Mastboom 2013-04-21 14:48:25 +02:00
parent 77d70a9d22
commit 869752f575
2 changed files with 41 additions and 75 deletions

View File

@ -15,13 +15,13 @@
<!-- @@_end_remove --><html>
<head>
<title>app/main/index</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>-->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css">
<!--<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" type="text/css">-->
<!-- @@style__app_main_style -->
<!-- @@remove_ -->
<link href="/style.css" rel="stylesheet" type="text/css">
<!-- @@_end_remove -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" type="text/css">
<!-- @@style__app_main_style -->
</head>
<body>
@ -32,18 +32,30 @@
Editing <b>index</b>
<strong data-bind="text: _keys().length"></strong>
<div data-bind="visible: _getMode()">
mode: <strong data-bind="text: _getMode()"></strong>
mode: <strong data-bind="text: _getMode()"></strong>
</div>
<select data-bind="options: _availableModes(), optionsText: 'name', value: _selectedMode"></select>
<div id="main">
<ul class="folders">
<!-- ko foreach: _keys() -->
<li data-bind="text: $data,
css: { selected: $data == $root._chosenFolderId() },
click: $root._goToFolder"></li>
<!-- /ko -->
<li><input data-bind="value: $root._newAttribute" /></li>
</ul>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Currently open</a>
<div class="nav btn-toolbar">
<!-- ko foreach: _keys() -->
<div class="btn-group">
<a class="btn" data-bind="text: $data,
click: $root._goToFolder,
css: { active: $data == $root._chosenFolderId() }" ></a>
<button class="btn" data-bind="enable: false, click: $root._closeDoc">&times;</button>
</div>
<!-- /ko -->
</div>
<!--<ul class="nav pull-right"><li>-->
<form class="nav navbar-form pull-right">
<input type="text" class="span2" data-bind="value: $root._newAttribute" />
</form>
<!--</li></ul>-->
</div>
</div>
</div>
</div>
@ -254,7 +266,9 @@
setMode(viewModel._chosenFolderId(), newValue.ace());
}
});
viewModel._closeDoc = function(folder) {
console.log('closing ',folder);
};
ko.applyBindings(viewModel);
window.viewModel=viewModel;
console.log('viewModel', viewModel);

View File

@ -2,6 +2,9 @@ body {
overflow: hidden;
}
.container {
width: 100%
}
.ace_bold {
font-weight: bold;
}
@ -14,16 +17,13 @@ body {
position: fixed;
top: 0;
right: 0;
height: 100px;
height: 200px;
width: 100%;
background-color: black;
}
#htext {
/*line-height: 30px;*/
/*vertical-align: middle;*/
/*padding-left: 10px;*/
padding-left: 20px;
color: white;
font-family: baskerville, palatino, 'palatino linotype', georgia, serif;
}
@ -34,22 +34,22 @@ body {
#content {
position: fixed;
top:100px;
top:200px;
width: 100%;
bottom: 0px;
bottom: 0;
}
#editor {
margin: 0px;
margin: 0;
position: absolute;
top: 0px;
bottom: 0px;
top: 0;
bottom: 0;
left: 370px;
right: 0px;
right: 0;
}
#tree {
left:0px;
left:0;
right:370px;
/*bottom: 0px;*/
}
@ -58,51 +58,3 @@ body {
font-weight: bold;
}
.folders {
background-color: #bbb;
list-style-type: none;
padding: 0;
margin: 0;
border-radius: 7px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(0.4, #c0c0c0), color-stop(1, #a4a4a4));
margin: 10px 0 16px 0;
font-size: 0px;
}
.folders li:hover {
background-color: #ddd;
}
.folders li:first-child {
border-left: none;
border-radius: 7px 0 0 7px;
}
.folders li {
font-size: 16px;
font-weight: bold;
display: inline-block;
padding: 0.5em 1.5em;
cursor: pointer;
color: #444;
text-shadow: #f7f7f7 0 1px 1px;
border-left: 1px solid #ddd;
border-right: 1px solid #888;
}
.folders li {
*display: inline !important;
}
/* IE7 only */
.folders .selected {
background-color: #444 !important;
color: white;
text-shadow: none;
border-right-color: #aaa;
border-left: none;
box-shadow: inset 1px 2px 6px #070707;
}