Skip to content

Y
Yii Bootstrap 3
Commit 9c7c9584 by Crisu83
Options

added BootBadge and BootLabel widgets

parent 5333077b
Showing with 230 additions and 70 deletions
demo/css/styles.css
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.hide-text{overflow:hidden;text-indent:100%;white-space:nowrap;}
.input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.php-hl-default{color:Black;}
......@@ -129,12 +127,7 @@ p{font-size:14px;margin-bottom:1.6em;}
.navbar .add-this{margin:6px 0 6px 10px;padding:6px 0;}
.subnav{border:1px solid #E5E5E5;font-size:12px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;width:100%;height:36px;background-color:#f2f2f2;background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);}.subnav.subnav-fixed{border-color:#D5D5D5;border-width:1px 0 0;bottom:0;left:0;position:fixed;right:0;z-index:1030;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}
.subnav .nav{margin:0 auto;max-width:1170px;}.subnav .nav >li>a{margin:0;padding:11px;border-left:1px solid whiteSmoke;border-right:1px solid #E5E5E5;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.subnav .nav >li:first-child>a{border-left:0;}
.subnav .nav >li:last-child>a{border-right:0;}
.subnav .nav >.active>a,.subnav .nav .action>a:hover{background-color:#E9E9E9;border-right-color:#DDD;color:#777;-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.05);}
.subnav{font-size:12px;padding:9px 0;position:fixed;right:20px;top:60px;width:160px;z-index:1030;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.subnav .label{font-size:0.8em;line-height:16px;vertical-align:top;}
footer .powered{color:#888;margin-bottom:20px;}
footer .copy{color:#666;}
......@@ -145,7 +138,8 @@ section{padding-top:40px;}section a.top{display:block;text-align:right;}
#bootNavbar .navbar-inner>.container{width:auto;}
#bootMenu .menuCol{min-height:140px;}
#bootTabbable .tabbable{margin-bottom:20px;}#bootTabbable .tabbable.tabbable-placed{width:340px;}
#bootTabbable .tabbable{margin-bottom:20px;}#bootTabbable .tabbable .tab-content{width:auto;}
#bootTabbable .tabbable.tabbable-placed{width:340px;}
#bootThumbnails .list-view{padding-top:30px;}
#bootActiveForm .form-vertical .control-group>label{font-weight:bold;}
......
demo/less/styles.less
......@@ -38,50 +38,19 @@ p {
}
.subnav {
border: 1px solid #E5E5E5;
font-size: 12px;
padding: 9px 0;
position: fixed;
right: 20px;
top: 60px;
width: 160px;
z-index: 1030;
.border-radius(4px);
.size(36px, 100%);
#gradient > .vertical(#F5F5F5, #EEE);
&.subnav-fixed {
border-color: #D5D5D5;
border-width: 1px 0 0;
bottom: 0;
left: 0;
position: fixed;
right: 0;
z-index: 1030;
.border-radius(0);
.box-shadow(inset 0 1px 0 #FFF, 0 1px 5px rgba(0, 0, 0, .1));
}
.nav {
margin: 0 auto;
max-width: 1170px;
& > li > a {
margin: 0;
padding: 11px;
border-left: 1px solid whiteSmoke;
border-right: 1px solid #E5E5E5;
.border-radius(0);
}
& > li:first-child > a {
border-left: 0;
}
& > li:last-child > a {
border-right: 0;
}
& > .active >a, & .action > a:hover {
background-color: #E9E9E9;
border-right-color: #DDD;
color: #777;
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .05));
}
.label {
font-size: 0.8em;
line-height: 16px;
vertical-align: top;
}
}
......@@ -124,6 +93,10 @@ section {
#bootTabbable .tabbable {
margin-bottom: 20px;
.tab-content {
width: auto;
}
&.tabbable-placed {
width: 340px;
}
......
demo/protected/views/site/index.php
......@@ -299,6 +299,11 @@ Yii::app()->user->setFlash('error', '<strong>Oh snap!</strong> Change a few thin
)); ?>
~~~"); ?>
<div class="alert alert-block alert-warning">
<strong>Note!</strong>
Because of a bug in the current version of Bootstrap tab-content fall below the tabs even when it shouldn't. This can be fixed by setting tab-content width to auto.
</div>
<div class="row">
<div class="span6">
......@@ -1373,6 +1378,60 @@ $('#buttonStateful').click(function() {
</section>
<section id="bootLabel">
<h2>Labels</h2>
<p>
<?php $this->widget('bootstrap.widgets.BootLabel', array('label'=>'Default')); ?>
<?php $this->widget('bootstrap.widgets.BootLabel', array('type'=>'success', 'label'=>'Success')); ?>
<?php $this->widget('bootstrap.widgets.BootLabel', array('type'=>'warning', 'label'=>'Warning')); ?>
<?php $this->widget('bootstrap.widgets.BootLabel', array('type'=>'important', 'label'=>'Important')); ?>
<?php $this->widget('bootstrap.widgets.BootLabel', array('type'=>'info', 'label'=>'Info')); ?>
<?php $this->widget('bootstrap.widgets.BootLabel', array('type'=>'inverse', 'label'=>'Inverse')); ?>
</p>
<h4>Source code</h4>
<?php echo $parser->safeTransform("~~~
[php]
<?php \$this->widget('bootstrap.widgets.BootLabel', array(
'type'=>'success', // '', 'success', 'warning', 'important', 'info' or 'inverse'
'label'=>'Success',
)); ?>
~~~"); ?>
<a class="top" href="#top">Back to top &uarr;</a>
</section>
<section id="bootBadge">
<h2>Badges</h2>
<p>
<?php $this->widget('bootstrap.widgets.BootBadge', array('label'=>'1')); ?>
<?php $this->widget('bootstrap.widgets.BootBadge', array('type'=>'success', 'label'=>'2')); ?>
<?php $this->widget('bootstrap.widgets.BootBadge', array('type'=>'warning', 'label'=>'4')); ?>
<?php $this->widget('bootstrap.widgets.BootBadge', array('type'=>'error', 'label'=>'6')); ?>
<?php $this->widget('bootstrap.widgets.BootBadge', array('type'=>'info', 'label'=>'8')); ?>
<?php $this->widget('bootstrap.widgets.BootBadge', array('type'=>'inverse', 'label'=>'10')); ?>
</p>
<h4>Source code</h4>
<?php echo $parser->safeTransform("~~~
[php]
<?php \$this->widget('bootstrap.widgets.BootBadge', array(
'type'=>'success', // '', 'success', 'warning', 'error', 'info' or 'inverse'
'label'=>'2',
)); ?>
~~~"); ?>
<a class="top" href="#top">Back to top &uarr;</a>
</section>
<section id="comments">
<h2>Comments</h2>
......@@ -1383,12 +1442,13 @@ $('#buttonStateful').click(function() {
</section>
<div class="subnav subnav-fixed">
<div class="subnav well">
<?php $this->widget('BootMenu', array(
'type'=>'pills',
'type'=>'list',
'scrollspy'=>array('spy'=>'.subnav', 'offset'=>50),
'items'=>array(
array('label'=>'WIDGETS'),
array('label'=>'Alert', 'url'=>'#bootAlert'),
array('label'=>'Breadcrumb', 'url'=>'#bootBreadcrumbs'),
array('label'=>'Navbar', 'url'=>'#bootNavbar'),
......@@ -1406,6 +1466,8 @@ $('#buttonStateful').click(function() {
array('label'=>'Carousel', 'url'=>'#bootCarousel'),
array('label'=>'Progress', 'url'=>'#bootProgress'),
array('label'=>'Typeahead', 'url'=>'#bootTypeahead'),
array('label'=>'Labels <span class="label label-inverse">New</span>', 'encodeLabel'=>false, 'url'=>'#bootLabel'),
array('label'=>'Badges <span class="label label-inverse">New</span>', 'encodeLabel'=>false, 'url'=>'#bootBadge'),
),
)); ?>
......
demo/protected/views/site/setup.php
......@@ -43,22 +43,6 @@ $this->addMetaProperty('fb:app_id', Yii::app()->fb->appID);
.....
'bootstrap'=>array(
'class'=>'ext.bootstrap.components.Bootstrap', // assuming you extracted bootstrap under extensions
'coreCss'=>true, // whether to register the Bootstrap core CSS (bootstrap.min.css), defaults to true
'responsiveCss'=>false, // whether to register the Bootstrap responsive CSS (bootstrap-responsive.min.css), default to false
'plugins'=>array(
// Optionally you can configure the \"global\" plugins (button, popover, tooltip and transition)
// To prevent a plugin from being loaded set it to false as demonstrated below
'transition'=>false, // disable CSS transitions
'tooltip'=>array(
'selector'=>'a.tooltip', // bind the plugin tooltip to anchor tags with the 'tooltip' class
'options'=>array(
'placement'=>'bottom', // place the tooltips below instead
),
),
.....
// If you need help with configuring the plugins, please refer to Bootstrap's own documentation:
// http://twitter.github.com/bootstrap/javascript.html
),
),
),
~~~"); ?>
......@@ -70,6 +54,14 @@ $this->addMetaProperty('fb:app_id', Yii::app()->fb->appID);
</section>
<section id="config">
<h2>Configuration</h2>
<p>@todo</p>
</section>
<section id="less">
<h2>Using LESS</h2>
......@@ -184,6 +176,7 @@ Yii::app()->bootstrap->registerTypeahead('.typeahead', array(
'scrollspy'=>array('spy'=>'.subnav', 'offset'=>50),
'items'=>array(
array('label'=>'Setup', 'url'=>'#setup'),
array('label'=>'Configuration', 'url'=>'#config'),
array('label'=>'Using LESS', 'url'=>'#less'),
array('label'=>'Plugin API', 'url'=>'#api')
),
......
widgets/BootBadge.php 0 → 100644
<?php
/**
* BootBadge class file.
* @author Christoffer Niska <ChristofferNiska@gmail.com>
* @copyright Copyright &copy; Christoffer Niska 2011-
* @license http://www.opensource.org/licenses/bsd-license.php New BSD License
* @package bootstrap.widgets
*/
Yii::import('bootstrap.widgets.BootWidget');
/**
* Bootstrap badge widget.
*/
class BootBadge extends BootWidget
{
// Badge types.
const TYPE_DEFAULT = '';
const TYPE_SUCCESS = 'success';
const TYPE_WARNING = 'warning';
const TYPE_ERROR = 'error';
const TYPE_INFO = 'info';
const TYPE_INVERSE = 'inverse';
/**
* @var string the badge type (defaults to '').
* Valid types are '', 'success', 'warning', 'error', 'info' and 'inverse'.
*/
public $type = self::TYPE_DEFAULT;
/**
* @var string the badge text.
*/
public $label;
/**
* @var boolean whether to encode the label.
*/
public $encodeLabel = true;
/**
* Initializes the widget.
*/
public function init()
{
$classes = array('badge');
$validTypes = array(self::TYPE_SUCCESS, self::TYPE_WARNING,
self::TYPE_ERROR, self::TYPE_INFO, self::TYPE_INVERSE);
if (in_array($this->type, $validTypes))
$classes[] = 'badge-'.$this->type;
$cssClass = implode(' ', $classes);
if (isset($this->htmlOptions['class']))
$this->htmlOptions['class'] .= ' '.$cssClass;
else
$this->htmlOptions['class'] = $cssClass;
if ($this->encodeLabel === true)
$this->label = CHtml::encode($this->label);
}
/**
* Runs the widget.
*/
public function run()
{
echo CHtml::tag('span', $this->htmlOptions, $this->label);
}
}
widgets/BootLabel.php 0 → 100644
<?php
/**
* BootLabel class file.
* @author Christoffer Niska <ChristofferNiska@gmail.com>
* @copyright Copyright &copy; Christoffer Niska 2011-
* @license http://www.opensource.org/licenses/bsd-license.php New BSD License
* @package bootstrap.widgets
*/
Yii::import('bootstrap.widgets.BootWidget');
/**
* Bootstrap label widget.
*/
class BootLabel extends BootWidget
{
// Label types.
const TYPE_DEFAULT = '';
const TYPE_SUCCESS = 'success';
const TYPE_WARNING = 'warning';
const TYPE_IMPORTANT = 'important';
const TYPE_INFO = 'info';
const TYPE_INVERSE = 'inverse';
/**
* @var string the label type (defaults to '').
* Valid types are '', 'success', 'warning', 'important', 'info' and 'inverse'.
*/
public $type = self::TYPE_DEFAULT;
/**
* @var string the label text.
*/
public $label;
/**
* @var boolean whether to encode the label.
*/
public $encodeLabel = true;
/**
* Initializes the widget.
*/
public function init()
{
$classes = array('label');
$validTypes = array(self::TYPE_SUCCESS, self::TYPE_WARNING,
self::TYPE_IMPORTANT, self::TYPE_INFO, self::TYPE_INVERSE);
if (in_array($this->type, $validTypes))
$classes[] = 'label-'.$this->type;
$cssClass = implode(' ', $classes);
if (isset($this->htmlOptions['class']))
$this->htmlOptions['class'] .= ' '.$cssClass;
else
$this->htmlOptions['class'] = $cssClass;
if ($this->encodeLabel === true)
$this->label = CHtml::encode($this->label);
}
/**
* Runs the widget.
*/
public function run()
{
echo CHtml::tag('span', $this->htmlOptions, $this->label);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment