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{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;} .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;} .php-hl-default{color:Black;}
...@@ -129,12 +127,7 @@ p{font-size:14px;margin-bottom:1.6em;} ...@@ -129,12 +127,7 @@ p{font-size:14px;margin-bottom:1.6em;}
.navbar .add-this{margin:6px 0 6px 10px;padding:6px 0;} .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{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;}
.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);}
footer .powered{color:#888;margin-bottom:20px;} footer .powered{color:#888;margin-bottom:20px;}
footer .copy{color:#666;} footer .copy{color:#666;}
...@@ -145,7 +138,8 @@ section{padding-top:40px;}section a.top{display:block;text-align:right;} ...@@ -145,7 +138,8 @@ section{padding-top:40px;}section a.top{display:block;text-align:right;}
#bootNavbar .navbar-inner>.container{width:auto;} #bootNavbar .navbar-inner>.container{width:auto;}
#bootMenu .menuCol{min-height:140px;} #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;} #bootThumbnails .list-view{padding-top:30px;}
#bootActiveForm .form-vertical .control-group>label{font-weight:bold;} #bootActiveForm .form-vertical .control-group>label{font-weight:bold;}
......
demo/less/styles.less
...@@ -38,50 +38,19 @@ p { ...@@ -38,50 +38,19 @@ p {
} }
.subnav { .subnav {
border: 1px solid #E5E5E5;
font-size: 12px; font-size: 12px;
padding: 9px 0;
position: fixed;
right: 20px;
top: 60px;
width: 160px;
z-index: 1030;
.border-radius(4px); .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 { .label {
background-color: #E9E9E9; font-size: 0.8em;
border-right-color: #DDD; line-height: 16px;
color: #777; vertical-align: top;
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .05));
}
} }
} }
...@@ -124,6 +93,10 @@ section { ...@@ -124,6 +93,10 @@ section {
#bootTabbable .tabbable { #bootTabbable .tabbable {
margin-bottom: 20px; margin-bottom: 20px;
.tab-content {
width: auto;
}
&.tabbable-placed { &.tabbable-placed {
width: 340px; 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 ...@@ -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="row">
<div class="span6"> <div class="span6">
...@@ -1373,6 +1378,60 @@ $('#buttonStateful').click(function() { ...@@ -1373,6 +1378,60 @@ $('#buttonStateful').click(function() {
</section> </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"> <section id="comments">
<h2>Comments</h2> <h2>Comments</h2>
...@@ -1383,12 +1442,13 @@ $('#buttonStateful').click(function() { ...@@ -1383,12 +1442,13 @@ $('#buttonStateful').click(function() {
</section> </section>
<div class="subnav subnav-fixed"> <div class="subnav well">
<?php $this->widget('BootMenu', array( <?php $this->widget('BootMenu', array(
'type'=>'pills', 'type'=>'list',
'scrollspy'=>array('spy'=>'.subnav', 'offset'=>50), 'scrollspy'=>array('spy'=>'.subnav', 'offset'=>50),
'items'=>array( 'items'=>array(
array('label'=>'WIDGETS'),
array('label'=>'Alert', 'url'=>'#bootAlert'), array('label'=>'Alert', 'url'=>'#bootAlert'),
array('label'=>'Breadcrumb', 'url'=>'#bootBreadcrumbs'), array('label'=>'Breadcrumb', 'url'=>'#bootBreadcrumbs'),
array('label'=>'Navbar', 'url'=>'#bootNavbar'), array('label'=>'Navbar', 'url'=>'#bootNavbar'),
...@@ -1406,6 +1466,8 @@ $('#buttonStateful').click(function() { ...@@ -1406,6 +1466,8 @@ $('#buttonStateful').click(function() {
array('label'=>'Carousel', 'url'=>'#bootCarousel'), array('label'=>'Carousel', 'url'=>'#bootCarousel'),
array('label'=>'Progress', 'url'=>'#bootProgress'), array('label'=>'Progress', 'url'=>'#bootProgress'),
array('label'=>'Typeahead', 'url'=>'#bootTypeahead'), 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); ...@@ -43,22 +43,6 @@ $this->addMetaProperty('fb:app_id', Yii::app()->fb->appID);
..... .....
'bootstrap'=>array( 'bootstrap'=>array(
'class'=>'ext.bootstrap.components.Bootstrap', // assuming you extracted bootstrap under extensions '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); ...@@ -70,6 +54,14 @@ $this->addMetaProperty('fb:app_id', Yii::app()->fb->appID);
</section> </section>
<section id="config">
<h2>Configuration</h2>
<p>@todo</p>
</section>
<section id="less"> <section id="less">
<h2>Using LESS</h2> <h2>Using LESS</h2>
...@@ -184,6 +176,7 @@ Yii::app()->bootstrap->registerTypeahead('.typeahead', array( ...@@ -184,6 +176,7 @@ Yii::app()->bootstrap->registerTypeahead('.typeahead', array(
'scrollspy'=>array('spy'=>'.subnav', 'offset'=>50), 'scrollspy'=>array('spy'=>'.subnav', 'offset'=>50),
'items'=>array( 'items'=>array(
array('label'=>'Setup', 'url'=>'#setup'), array('label'=>'Setup', 'url'=>'#setup'),
array('label'=>'Configuration', 'url'=>'#config'),
array('label'=>'Using LESS', 'url'=>'#less'), array('label'=>'Using LESS', 'url'=>'#less'),
array('label'=>'Plugin API', 'url'=>'#api') 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