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.3"
- "7.4"
- "8.0"
steps:
- name: Checkout
@ -72,7 +73,7 @@ jobs:
restore-keys: |
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
- name: Run tests with codeception

View File

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

View File

@ -16,7 +16,7 @@
"require": {
"php": ">=5.6.0",
"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"
},
"require-dev": {

View File

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

View File

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

View File

@ -6,8 +6,8 @@ $this->title = 'My Yii Application';
?>
<div class="site-index">
<div class="jumbotron">
<h1>Congratulations!</h1>
<div class="jumbotron text-center bg-transparent">
<h1 class="display-4">Congratulations!</h1>
<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
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 class="col-lg-4">
<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
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 class="col-lg-4">
<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
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>

View File

@ -1,11 +1,11 @@
<?php
/* @var $this yii\web\View */
/* @var $form yii\bootstrap\ActiveForm */
/* @var $form yii\bootstrap4\ActiveForm */
/* @var $model app\models\LoginForm */
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\bootstrap4\ActiveForm;
use yii\bootstrap4\Html;
$this->title = 'Login';
$this->params['breadcrumbs'][] = $this->title;
@ -20,7 +20,7 @@ $this->params['breadcrumbs'][] = $this->title;
'layout' => 'horizontal',
'fieldConfig' => [
'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, '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="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']) ?>
</div>
</div>
<?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>
To modify the username/password, please check out the code <code>app\models\User::$users</code>.
</div>

View File

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

View File

@ -1,4 +1,5 @@
<?php
namespace app\widgets;
use Yii;
@ -22,7 +23,7 @@ use Yii;
* @author Kartik Visweswaran <kartikv2@gmail.com>
* @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.
@ -59,7 +60,7 @@ class Alert extends \yii\bootstrap\Widget
}
foreach ((array) $flash as $i => $message) {
echo \yii\bootstrap\Alert::widget([
echo \yii\bootstrap4\Alert::widget([
'body' => $message,
'closeButton' => $this->closeButton,
'options' => array_merge($this->options, [