Skip to content

Commit

Permalink
Fix: upgraded customizer to bootstrap flatly 3
Browse files Browse the repository at this point in the history 
Fix customizer page with bootstrap 3 upgrade, because it was missed when site and ngdocs were upgraded.

fix button label
  • Loading branch information
@KiwiNiksta
KiwiNiksta committed Oct 8, 2014
1 parent 174f252 commit df1c68b
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 91 deletions.
22 changes: 21 additions & 1 deletion misc/site/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,4 +197,24 @@ body {
.hidden-phone {
display: none !important;
}
}
}

.modal {
display: block;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}
p.modal-message {
margin: 10px 0;
}
.compiled-css {
margin-bottom: 10px;
}
177 changes: 89 additions & 88 deletions misc/site/customizer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="/docs/css/bootstrap.min.css" />
<link rel="stylesheet" href="/docs/css/bootstrap-flatly.css" />
<!-- <link rel="stylesheet" href="/docs/css/bootstrap.min.css" /> -->
<link rel="stylesheet" href="/docs/css/bootstrap-flatly.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/site.css" />
<!--<link rel="stylesheet" href="/release/ui-grid-unstable.css" />-->
Expand Down Expand Up @@ -41,47 +41,45 @@
</script>
</head>
<body>
<header class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="/" class="brand">UI Grid</a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Learn
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/#/api">Docs</a>
</li>
<li>
<a href="/docs/#/tutorial">Tutorial</a>
</li>
</ul>
<div class="navbar navbar-default navbar-fixed-top">
<div class="nav navbar-header">
<a href="/" class="navbar-brand">UI Grid</a>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Learn
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="/docs/#/api">Docs</a>
</li>
<li>
<a href="/docs/#/tutorial">Tutorial</a>
</li>
</ul>
<p class="navbar-text pull-right">
<iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ng-grid&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
<iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ng-grid&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="navbar-header navbar-right">
<p class="navbar-text hidden-phone">
<iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ng-grid&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
<iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ng-grid&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
</p>
</div>
</header>
</div>

<div ng-cloak class="container" id="customizerApp" ng-controller='Main'>
<div ng-cloak class="container-fluid" id="customizerApp" ng-controller='Main'>
<br>

<h2 class="text-center">Grid Customizer</h2>

<br>

<div class="row">
<div class="span12">
<div class="col-md-12">
<button type="button" class="btn btn-success" ng-click="resetVariables()">Reset Variables</button>
&nbsp;
&nbsp;
Expand Down Expand Up @@ -112,66 +110,69 @@ <h2 class="text-center">Grid Customizer</h2>

<br>

<div class="row">
<div class="span8">
<form class="container">
<div class="span4" ng-repeat="v in variables track by $index">
<label for="{{ v.name }}" class="muted">{{ v.name }}</label> <input id="{{ v.name }}" type="text" ng-model="v.value" ng-change="updateCSS()">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-8">
<form>
<div class="col-sm-12 col-md-6 col-lg-4" ng-repeat="v in variables track by $index">
<label for="{{ v.name }}" class="muted">{{ v.name }}</label> <input id="{{ v.name }}" type="text" class="form-control" ng-model="v.value" ng-change="updateCSS()">
</div>
</form>
</div>
<div class="col-xs-6 col-md-4">
<div data-spy="affix" data-offset-top="0">
<style>
.grid {
width: 400px;
height: 300px;
}
</style>

<style ui-grid-style>
{{ css }}
</style>

<div class="grid" ui-grid="gridOptions"></div>
</div>
</form>
</div>
<div class="span4">
<div data-spy="affix" data-offset-top="0">
<style>
.grid {
width: 400px;
height: 300px;
}
</style>

<style ui-grid-style>
{{ css }}
</style>

<div class="grid" ui-grid="gridOptions"></div>
</div>
</div>
</div>

<div class="text-error">{{ cssErr }}</div>

<br>

<label for="customLess">Custom Less</label>
<textarea class="span8" id="customLess" rows="4" ng-model="customLess" ng-change="updateCSS()" ng-init="customLess = ''"></textarea>

<br>
<br>

<div class="text-error">{{ cssErr }}</div>

<br>

<label for="customLess">Custom Less</label>
<textarea class="col-xs-12" class="form-control" id="customLess" rows="4" ng-model="customLess" ng-change="updateCSS()" ng-init="customLess = ''"></textarea>

<br>
<br>
</div>

<div ng-cloak ng-show="showDownload" class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="showDownload = false">&times;</button>
<h3>Download</h3>
</div>
<div class="modal-body">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-success" ng-class="{ 'active' : !compressed }" ng-click="updateCSS(false)">Full</button>
<button type="button" class="btn btn-success" ng-class="{ 'active' : compressed }" ng-click="updateCSS(true)">Minified</button>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="showDownload = false">&times;</button>
<h3>Download CSS</h3>
</div>
<div class="modal-body">
<button class="btn btn-success" ng-click="updateCSS(!compress)">{{ compress ? "Display Full" : "Display Minified" }}</button>
&nbsp;
&nbsp;
<p class="modal-message">
<strong>Size:</strong> {{ cssSize() }}
</p>

<textarea hover-select row="20" class="compiled-css col-xs-12" readonly>{{ css }}</textarea>
<p class="modal-message">
Hover then copy and paste the CSS.
</p>
<!-- <button class="btn btn-success" data-clipboard-text="{{ css }}">Copy to Clipboard</button> -->
</div>
<div class="modal-footer">
<a href="#" class="btn" ng-click="showDownload = false">Close</a>
</div>
</div>
&nbsp;
&nbsp;
<strong>Size:</strong> {{ cssSize() }}

<br>
<br>

<textarea hover-select row="20" class="compiled-css span5" readonly>{{ css }}</textarea>
<br>
Hover then copy and paste the CSS.
<!-- <button class="btn btn-success" data-clipboard-text="{{ css }}">Copy to Clipboard</button> -->
</div>
<div class="modal-footer">
<a href="#" class="btn" ng-click="showDownload = false">Close</a>
</div>
</div>

Expand All @@ -194,11 +195,11 @@ <h3>Download</h3>
</script>
-->

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>

<script>
debugger;
var s = document.createElement('script');
if (window.location.href.match('ui-grid.info')) {
s.src = '/release/ui-grid-unstable.js';
Expand Down
3 changes: 1 addition & 2 deletions misc/site/js/customizer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,10 @@ app.controller('Main', function($log, $http, $scope, less, Theme) {

$scope.variables = angular.copy($scope.defaultVariables);
$scope.updateCSS();
}
};

$scope.updateCSS = function(compress) {
$scope.compress = compress;

var fullSrc = $scope.source + ' ' + $scope.customLess;
var src = less.replaceVariables(fullSrc, $scope.variables);
less.process(src, $scope.compress)
Expand Down

0 comments on commit df1c68b

Please sign in to comment.