Jelajahi Sumber

Increase logout button size (#89)

Joel Waldock 9 tahun lalu
induk
melakukan
a43b2ff94f
2 mengubah file dengan 26 tambahan dan 2 penghapusan
  1. 2 2
      views/layouts/main.php
  2. 24 0
      web/css/site.css

+ 2 - 2
views/layouts/main.php

@@ -43,10 +43,10 @@ AppAsset::register($this);
                 ['label' => 'Login', 'url' => ['/site/login']]
             ) : (
                 '<li>'
-                . Html::beginForm(['/site/logout'], 'post', ['class' => 'navbar-form'])
+                . Html::beginForm(['/site/logout'], 'post')
                 . Html::submitButton(
                     'Logout (' . Yii::$app->user->identity->username . ')',
-                    ['class' => 'btn btn-link']
+                    ['class' => 'btn btn-link logout']
                 )
                 . Html::endForm()
                 . '</li>'

+ 24 - 0
web/css/site.css

@@ -89,3 +89,27 @@ a.desc:after {
     padding: 10px 20px;
     margin: 0 0 15px 0;
 }
+
+/* align the logout "link" (button in form) of the navbar */
+.nav li > form > button.logout {
+    padding: 15px;
+    border: none;
+}
+
+@media(max-width:767px) {
+    .nav li > form > button.logout {
+        display:block;
+        text-align: left;
+        width: 100%;
+        padding: 10px 15px;
+    }
+}
+
+.nav > li > form > button.logout:focus,
+.nav > li > form > button.logout:hover {
+    text-decoration: none;
+}
+
+.nav > li > form > button.logout:focus {
+    outline: none;
+}