New design

This commit is contained in:
Michael RICOIS 2015-03-27 15:58:08 +00:00
parent a6a16e8e7d
commit 8e424d754c
6 changed files with 33 additions and 118 deletions

View File

@ -7,16 +7,13 @@ class FieldsController extends Zend_Controller_Action
public function indexAction()
{
$this->view->headLink()
->appendStylesheet('/themes/default/styles/bootstrap.tabs.css')
->appendStylesheet('/libs/tree-3.0.9/themes/default/style.css', 'all')
//->appendStylesheet('/libs/slider/css/bootstrap-slider.min.css', 'all')
->appendStylesheet('/libs/nouislider/jquery.nouislider.min.css', 'all')
->appendStylesheet('/libs/daterangepicker/daterangepicker-bs3.css', 'all');
$this->view->headScript()
->appendFile('/libs/moment.min.js', 'text/javascript')
->appendFile('/libs/tree-3.0.9/jstree.min.js', 'text/javascript')
//->appendFile('/libs/slider/bootstrap-slider.min.js')
->appendFile('/libs/nouislider/jquery.nouislider.all.min.js')
->appendFile('/libs/daterangepicker/daterangepicker.js')
->appendFile('/themes/default/scripts/scripts.js', 'text/javascript')

View File

@ -1,18 +1,17 @@
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <!-- required for floating -->
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-left"><!-- 'tabs-right' for right tabs -->
<li class="active"><a href="#tabs-1" data-toggle="tab">Critères Entreprise</a></li>
<li><a href="#tabs-2" data-toggle="tab">Situation &Eacute;conomique</a></li>
<li><a href="#tabs-3" data-toggle="tab">Secteur Géographique</a></li>
<li><a href="#tabs-4" data-toggle="tab">Situation Juridique</a></li>
<li><a href="#tabs-5" data-toggle="tab">Situation Financière</a></li>
<li><a href="#tabs-6" data-toggle="tab">Chiffres clés</a></li>
<div id="tabs" class="col-sm-2 col-md-2 col-lg-2">
<ul class="list-group">
<li class="list-group-item list-group-item-info active" data-target="#tabs-1" data-toggle="tab">Critères Entreprise</li>
<li class="list-group-item list-group-item-info" data-target="#tabs-2" data-toggle="tab">Situation &Eacute;conomique</li>
<li class="list-group-item list-group-item-info" data-target="#tabs-3" data-toggle="tab">Secteur Géographique</li>
<li class="list-group-item list-group-item-info" data-target="#tabs-4" data-toggle="tab">Situation Juridique</li>
<li class="list-group-item list-group-item-info" data-target="#tabs-5" data-toggle="tab">Situation Financière</li>
<li class="list-group-item list-group-item-info" data-target="#tabs-6" data-toggle="tab">Chiffres clés</li>
</ul>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="col-sm-6 col-md-6 col-lg-6">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-content" style="max-height:500px; overflow-y:auto;">
<div class="tab-pane active" id="tabs-1">
<div id="entreprise">

View File

@ -1,5 +1,3 @@
<div class="sidebar">
<p class="alert alert-info" id="comptage">
<span class="valeur">Unités : <?=$this->dataCount?></span>
<?php if ( $this->dataInsee > 0 ) {?>
@ -8,7 +6,14 @@
</p>
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">Résumé de vos critères</h3></div>
<div class="panel-heading">
<h4 class="panel-title">Résumé de vos critères
<button href="/comptage/reset" id="reset" class="btn btn-danger btn-xs pull-right" title="Initialiser tout les critères.">
<span aria-hidden="true" class="glyphicon glyphicon-remove"></span>
Réinitialiser
</button>
</h4>
</div>
<?php if ( count($this->infos)>0 ) {?>
<?php foreach($this->infos as $critere => $item) {?>
<div class="alert alert-info">
@ -31,9 +36,6 @@
</div>
<?php }?>
<?php } else {?><div class="alert alert-warning">Aucune sélection.</div><?}?>
<a href="/comptage/reset" id="reset" class="btn btn-primary btn-block">Initialiser les critères</a>
<a href="/comptage/previsualisation" id="preview" class="btn btn-primary btn-block">Prévisualiser</a>
<a href="/comptage/savedialog" id="extract" class="saveciblage btn btn-primary btn-block">Extraire</a>
</div>
</div>

View File

@ -11,12 +11,10 @@
<div class="container-fluid">
<div id="actionMessage"></div>
<div class="row">
<div id="tabs" class="col-sm-8 col-md-8 col-lg-8">
<?=$this->action('index', 'fields')?>
</div>
<div id="panel" class="col-sm-4 col-md-4 col-lg-4">
<?=$this->action('criteres', 'index')?>
</div>
<?=$this->action('index', 'fields')?>
<div id="panel" class="col-sm-4 col-md-4 col-lg-4">
<?=$this->action('criteres', 'index')?>
</div>
</div>
</div>

View File

@ -1,10 +1,15 @@
$(document).ready(function(){
resizeTabContent();
$('div#dialog').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
$(this).find('div.modal-dialog').remove();
});
$(window).resize(function() {
resizeTabContent();
});
$('body').on('click', 'a.itemlist', function(e){
e.preventDefault();
var title = $(this).attr('title');
@ -77,3 +82,9 @@ $(document).ready(function(){
});
function resizeTabContent(){
var height = $(window).height()-200;
$('div.tab-content').css('max-height', height);
}

View File

@ -1,92 +0,0 @@
/*!
* bootstrap-vertical-tabs - v1.2.1
* https://dbtek.github.io/bootstrap-vertical-tabs
* 2014-11-07
* Copyright (c) 2014 İsmail Demirbilek
* License: MIT
*/
.tabs-left, .tabs-right {
border-bottom: none;
padding-top: 2px;
}
.tabs-left {
border-right: 1px solid #ddd;
}
.tabs-right {
border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
float: none;
margin-bottom: 2px;
}
.tabs-left>li {
margin-right: -1px;
}
.tabs-right>li {
margin-left: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
border-bottom-color: #ddd;
border-right-color: transparent;
}
.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
border-bottom: 1px solid #ddd;
border-left-color: transparent;
}
.tabs-left>li>a {
border-radius: 4px 0 0 4px;
margin-right: 0;
display:block;
}
.tabs-right>li>a {
border-radius: 0 4px 4px 0;
margin-right: 0;
}
.sideways {
margin-top:50px;
border: none;
position: relative;
}
.sideways>li {
height: 20px;
width: 120px;
margin-bottom: 100px;
}
.sideways>li>a {
border-bottom: 1px solid #ddd;
border-right-color: transparent;
text-align: center;
border-radius: 4px 4px 0px 0px;
}
.sideways>li.active>a,
.sideways>li.active>a:hover,
.sideways>li.active>a:focus {
border-bottom-color: transparent;
border-right-color: #ddd;
border-left-color: #ddd;
}
.sideways.tabs-left {
left: -50px;
}
.sideways.tabs-right {
right: -50px;
}
.sideways.tabs-right>li {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.sideways.tabs-left>li {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}