Fix #245: Use Bootstrap 4 (#248)

This commit is contained in:
Bizley 2021-05-19 14:01:06 +02:00 committed by GitHub
parent e028d053c0
commit 0f2ec24968
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 61 additions and 90 deletions

View File

@ -27,6 +27,7 @@ jobs:
- "7.2" - "7.2"
- "7.3" - "7.3"
- "7.4" - "7.4"
- "8.0"
steps: steps:
- name: Checkout - name: Checkout
@ -72,7 +73,7 @@ jobs:
restore-keys: | restore-keys: |
php${{ matrix.php }}-composer-${{ matrix.dependencies }}- php${{ matrix.php }}-composer-${{ matrix.dependencies }}-
- name: Install dependencies with composer php PHP [5.6 - 7.4] - name: Install dependencies with composer php PHP [5.6 - 8.0]
run: composer update --prefer-dist --no-interaction --no-progress --optimize-autoloader --ansi run: composer update --prefer-dist --no-interaction --no-progress --optimize-autoloader --ansi
- name: Run tests with codeception - name: Run tests with codeception

View File

@ -26,6 +26,6 @@ class AppAsset extends AssetBundle
]; ];
public $depends = [ public $depends = [
'yii\web\YiiAsset', 'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset', 'yii\bootstrap4\BootstrapAsset',
]; ];
} }

View File

@ -16,7 +16,7 @@
"require": { "require": {
"php": ">=5.6.0", "php": ">=5.6.0",
"yiisoft/yii2": "~2.0.14", "yiisoft/yii2": "~2.0.14",
"yiisoft/yii2-bootstrap": "~2.0.0", "yiisoft/yii2-bootstrap4": "~2.0.0",
"yiisoft/yii2-swiftmailer": "~2.0.0 || ~2.1.0" "yiisoft/yii2-swiftmailer": "~2.0.0 || ~2.1.0"
}, },
"require-dev": { "require-dev": {

View File

@ -3,40 +3,39 @@
/* @var $this \yii\web\View */ /* @var $this \yii\web\View */
/* @var $content string */ /* @var $content string */
use app\widgets\Alert;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset; use app\assets\AppAsset;
use app\widgets\Alert;
use yii\bootstrap4\Breadcrumbs;
use yii\bootstrap4\Html;
use yii\bootstrap4\Nav;
use yii\bootstrap4\NavBar;
AppAsset::register($this); AppAsset::register($this);
?> ?>
<?php $this->beginPage() ?> <?php $this->beginPage() ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>"> <html lang="<?= Yii::$app->language ?>" class="h-100">
<head> <head>
<meta charset="<?= Yii::$app->charset ?>"> <meta charset="<?= Yii::$app->charset ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php $this->registerCsrfMetaTags() ?> <?php $this->registerCsrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title> <title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?> <?php $this->head() ?>
</head> </head>
<body> <body class="d-flex flex-column h-100">
<?php $this->beginBody() ?> <?php $this->beginBody() ?>
<div class="wrap"> <header>
<?php <?php
NavBar::begin([ NavBar::begin([
'brandLabel' => Yii::$app->name, 'brandLabel' => Yii::$app->name,
'brandUrl' => Yii::$app->homeUrl, 'brandUrl' => Yii::$app->homeUrl,
'options' => [ 'options' => [
'class' => 'navbar-inverse navbar-fixed-top', 'class' => 'navbar navbar-expand-md navbar-dark bg-dark fixed-top',
], ],
]); ]);
echo Nav::widget([ echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'], 'options' => ['class' => 'navbar-nav'],
'items' => [ 'items' => [
['label' => 'Home', 'url' => ['/site/index']], ['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']], ['label' => 'About', 'url' => ['/site/about']],
@ -45,7 +44,7 @@ AppAsset::register($this);
['label' => 'Login', 'url' => ['/site/login']] ['label' => 'Login', 'url' => ['/site/login']]
) : ( ) : (
'<li>' '<li>'
. Html::beginForm(['/site/logout'], 'post') . Html::beginForm(['/site/logout'], 'post', ['class' => 'form-inline'])
. Html::submitButton( . Html::submitButton(
'Logout (' . Yii::$app->user->identity->username . ')', 'Logout (' . Yii::$app->user->identity->username . ')',
['class' => 'btn btn-link logout'] ['class' => 'btn btn-link logout']
@ -57,7 +56,9 @@ AppAsset::register($this);
]); ]);
NavBar::end(); NavBar::end();
?> ?>
</header>
<main role="main" class="flex-shrink-0">
<div class="container"> <div class="container">
<?= Breadcrumbs::widget([ <?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [], 'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
@ -65,13 +66,12 @@ AppAsset::register($this);
<?= Alert::widget() ?> <?= Alert::widget() ?>
<?= $content ?> <?= $content ?>
</div> </div>
</div> </main>
<footer class="footer"> <footer class="footer mt-auto py-3 text-muted">
<div class="container"> <div class="container">
<p class="pull-left">&copy; My Company <?= date('Y') ?></p> <p class="float-left">&copy; My Company <?= date('Y') ?></p>
<p class="float-right"><?= Yii::powered() ?></p>
<p class="pull-right"><?= Yii::powered() ?></p>
</div> </div>
</footer> </footer>

View File

@ -1,11 +1,11 @@
<?php <?php
/* @var $this yii\web\View */ /* @var $this yii\web\View */
/* @var $form yii\bootstrap\ActiveForm */ /* @var $form yii\bootstrap4\ActiveForm */
/* @var $model app\models\ContactForm */ /* @var $model app\models\ContactForm */
use yii\helpers\Html; use yii\bootstrap4\ActiveForm;
use yii\bootstrap\ActiveForm; use yii\bootstrap4\Html;
use yii\captcha\Captcha; use yii\captcha\Captcha;
$this->title = 'Contact'; $this->title = 'Contact';

View File

@ -6,8 +6,8 @@ $this->title = 'My Yii Application';
?> ?>
<div class="site-index"> <div class="site-index">
<div class="jumbotron"> <div class="jumbotron text-center bg-transparent">
<h1>Congratulations!</h1> <h1 class="display-4">Congratulations!</h1>
<p class="lead">You have successfully created your Yii-powered application.</p> <p class="lead">You have successfully created your Yii-powered application.</p>
@ -25,7 +25,7 @@ $this->title = 'My Yii Application';
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.</p> fugiat nulla pariatur.</p>
<p><a class="btn btn-default" href="http://www.yiiframework.com/doc/">Yii Documentation &raquo;</a></p> <p><a class="btn btn-outline-secondary" href="http://www.yiiframework.com/doc/">Yii Documentation &raquo;</a></p>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
@ -35,7 +35,7 @@ $this->title = 'My Yii Application';
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.</p> fugiat nulla pariatur.</p>
<p><a class="btn btn-default" href="http://www.yiiframework.com/forum/">Yii Forum &raquo;</a></p> <p><a class="btn btn-outline-secondary" href="http://www.yiiframework.com/forum/">Yii Forum &raquo;</a></p>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
@ -45,7 +45,7 @@ $this->title = 'My Yii Application';
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.</p> fugiat nulla pariatur.</p>
<p><a class="btn btn-default" href="http://www.yiiframework.com/extensions/">Yii Extensions &raquo;</a></p> <p><a class="btn btn-outline-secondary" href="http://www.yiiframework.com/extensions/">Yii Extensions &raquo;</a></p>
</div> </div>
</div> </div>

View File

@ -1,11 +1,11 @@
<?php <?php
/* @var $this yii\web\View */ /* @var $this yii\web\View */
/* @var $form yii\bootstrap\ActiveForm */ /* @var $form yii\bootstrap4\ActiveForm */
/* @var $model app\models\LoginForm */ /* @var $model app\models\LoginForm */
use yii\helpers\Html; use yii\bootstrap4\ActiveForm;
use yii\bootstrap\ActiveForm; use yii\bootstrap4\Html;
$this->title = 'Login'; $this->title = 'Login';
$this->params['breadcrumbs'][] = $this->title; $this->params['breadcrumbs'][] = $this->title;
@ -20,7 +20,7 @@ $this->params['breadcrumbs'][] = $this->title;
'layout' => 'horizontal', 'layout' => 'horizontal',
'fieldConfig' => [ 'fieldConfig' => [
'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-8\">{error}</div>", 'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-8\">{error}</div>",
'labelOptions' => ['class' => 'col-lg-1 control-label'], 'labelOptions' => ['class' => 'col-lg-1 col-form-label'],
], ],
]); ?> ]); ?>
@ -29,18 +29,18 @@ $this->params['breadcrumbs'][] = $this->title;
<?= $form->field($model, 'password')->passwordInput() ?> <?= $form->field($model, 'password')->passwordInput() ?>
<?= $form->field($model, 'rememberMe')->checkbox([ <?= $form->field($model, 'rememberMe')->checkbox([
'template' => "<div class=\"col-lg-offset-1 col-lg-3\">{input} {label}</div>\n<div class=\"col-lg-8\">{error}</div>", 'template' => "<div class=\"offset-lg-1 col-lg-3 custom-control custom-checkbox\">{input} {label}</div>\n<div class=\"col-lg-8\">{error}</div>",
]) ?> ]) ?>
<div class="form-group"> <div class="form-group">
<div class="col-lg-offset-1 col-lg-11"> <div class="offset-lg-1 col-lg-11">
<?= Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?> <?= Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
</div> </div>
</div> </div>
<?php ActiveForm::end(); ?> <?php ActiveForm::end(); ?>
<div class="col-lg-offset-1" style="color:#999;"> <div class="offset-lg-1" style="color:#999;">
You may login with <strong>admin/admin</strong> or <strong>demo/demo</strong>.<br> You may login with <strong>admin/admin</strong> or <strong>demo/demo</strong>.<br>
To modify the username/password, please check out the code <code>app\models\User::$users</code>. To modify the username/password, please check out the code <code>app\models\User::$users</code>.
</div> </div>

View File

@ -1,34 +1,16 @@
html, main > .container {
body {
height: 100%;
}
.wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
.wrap > .container {
padding: 70px 15px 20px; padding: 70px 15px 20px;
} }
.footer { .footer {
height: 60px;
background-color: #f5f5f5; background-color: #f5f5f5;
border-top: 1px solid #ddd; font-size: .9em;
padding-top: 20px; height: 60px;
} }
.jumbotron { .footer > .container {
text-align: center; padding-right: 15px;
background-color: transparent; padding-left: 15px;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
} }
.not-set { .not-set {
@ -38,38 +20,24 @@ body {
/* add sorting icons to gridview sort links */ /* add sorting icons to gridview sort links */
a.asc:after, a.desc:after { a.asc:after, a.desc:after {
position: relative; content: '';
top: 1px; left: 3px;
display: inline-block; display: inline-block;
font-family: 'Glyphicons Halflings'; width: 0;
font-style: normal; height: 0;
font-weight: normal; border: solid 5px transparent;
line-height: 1; margin: 4px 4px 2px 4px;
padding-left: 5px; background: transparent;
} }
a.asc:after { a.asc:after {
content: /*"\e113"*/ "\e151"; border-bottom: solid 7px #212529;
border-top-width: 0;
} }
a.desc:after { a.desc:after {
content: /*"\e114"*/ "\e152"; border-top: solid 7px #212529;
} border-bottom-width: 0;
.sort-numerical a.asc:after {
content: "\e153";
}
.sort-numerical a.desc:after {
content: "\e154";
}
.sort-ordinal a.asc:after {
content: "\e155";
}
.sort-ordinal a.desc:after {
content: "\e156";
} }
.grid-view th { .grid-view th {
@ -92,8 +60,8 @@ a.desc:after {
/* align the logout "link" (button in form) of the navbar */ /* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout { .nav li > form > button.logout {
padding: 15px; padding-top: 7px;
border: none; color: rgba(255, 255, 255, 0.5);
} }
@media(max-width:767px) { @media(max-width:767px) {
@ -101,13 +69,14 @@ a.desc:after {
display:block; display:block;
text-align: left; text-align: left;
width: 100%; width: 100%;
padding: 10px 15px; padding: 10px 0;
} }
} }
.nav > li > form > button.logout:focus, .nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover { .nav > li > form > button.logout:hover {
text-decoration: none; text-decoration: none;
color: rgba(255, 255, 255, 0.75);
} }
.nav > li > form > button.logout:focus { .nav > li > form > button.logout:focus {

View File

@ -1,4 +1,5 @@
<?php <?php
namespace app\widgets; namespace app\widgets;
use Yii; use Yii;
@ -22,7 +23,7 @@ use Yii;
* @author Kartik Visweswaran <kartikv2@gmail.com> * @author Kartik Visweswaran <kartikv2@gmail.com>
* @author Alexander Makarov <sam@rmcreative.ru> * @author Alexander Makarov <sam@rmcreative.ru>
*/ */
class Alert extends \yii\bootstrap\Widget class Alert extends \yii\bootstrap4\Widget
{ {
/** /**
* @var array the alert types configuration for the flash messages. * @var array the alert types configuration for the flash messages.
@ -59,7 +60,7 @@ class Alert extends \yii\bootstrap\Widget
} }
foreach ((array) $flash as $i => $message) { foreach ((array) $flash as $i => $message) {
echo \yii\bootstrap\Alert::widget([ echo \yii\bootstrap4\Alert::widget([
'body' => $message, 'body' => $message,
'closeButton' => $this->closeButton, 'closeButton' => $this->closeButton,
'options' => array_merge($this->options, [ 'options' => array_merge($this->options, [