Show warning in browsers that don't support needed features

doshitan · doshitan · commit b4d330cbd482 · 2017-05-04T16:11:28.000-05:00
Summary: Use modernizr to detect needed features and display the warning if any are missing. Test Plan: - Build assets - Open a page in Madison - If you have a crappy browser around use it - Otherwise edit one of the classes on the `<html>` element to be be `no-<name>` - Ensure the warning pops up Reviewers: sethetter Reviewed By: sethetter Maniphest Tasks: T277 Differential Revision: https://phabricator.opengovfoundation.org/D172
diff --git a/gulpfile.js b/gulpfile.js
@@ -22,6 +22,7 @@ elixir((mix) => {
           'node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
           'node_modules/select2/dist/js/select2.min.js',
           'resources/assets/vendor/js/annotator-full.min.js',
+          'resources/assets/vendor/js/modernizr-custom.js',
          ],
          'public/js/vendor.js'
        )
diff --git a/resources/assets/sass/global.scss b/resources/assets/sass/global.scss
@@ -92,6 +92,14 @@ footer.nav {
   box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
 }
 
+.no-flexbox,
+.no-cssvhunit,
+.no-cssvwunit {
+  .alert.browser-support {
+    display: block !important;
+  }
+}
+
 #content {
   background-color: white;
   position: relative;
diff --git a/resources/assets/vendor/js/modernizr-custom.js b/resources/assets/vendor/js/modernizr-custom.js
diff --git a/resources/lang/en/messages.php b/resources/lang/en/messages.php
@@ -47,6 +47,8 @@
     'relevance_ordering_warning' => 'Ordering by relevance only works with a search query, default order has been used.',
     'manage' => 'Manage',
 
+    'browser_support_banner' => 'Your browser does not support needed features for Madison to function properly. Please upgrade to a modern browser.',
+
     // Authentication Stuff
     'password' => 'Password',
     'confirm_password' => 'Confirm Password',
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -164,6 +164,10 @@
 
         <div id="content">
             <div class="container">
+                <div class="alert alert-warning alert-important browser-support hidden" role="alert">
+                    @lang('messages.browser_support_banner')
+                </div>
+
                 @if (Auth::check() && Auth::user()->token)
                     <div class="alert alert-info alert-important" role="alert">
                         @php ($resendLink = route('users.resend_email_verification', Auth::user()))
diff --git a/tests/Browser/SponsorTest.php b/tests/Browser/SponsorTest.php
@@ -327,7 +327,7 @@ public function testEnsuresAtLeastOneOwner()
                 ->with('tr#user-' . $owner->id, function ($userRow) use ($originalRole, $newRole) {
                     $userRow->select('role', $newRole);
                 })
-                ->assertSeeIn('.alert', trans('messages.sponsor_member.need_owner'))
+                ->assertSeeIn('.alert:not(.browser-support)', trans('messages.sponsor_member.need_owner'))
                 ->assertSeeIn('tr#user-' . $owner->id, trans('messages.sponsor_member.roles.' . $originalRole))
                 ;
         });

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@ elixir((mix) => {`
`22`	`22`	`'node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',`
`23`	`23`	`'node_modules/select2/dist/js/select2.min.js',`
`24`	`24`	`'resources/assets/vendor/js/annotator-full.min.js',`
	`25`	`+ 'resources/assets/vendor/js/modernizr-custom.js',`
`25`	`26`	`],`
`26`	`27`	`'public/js/vendor.js'`
`27`	`28`	`)`
Original file line number	Diff line number	Diff line change
`@@ -327,7 +327,7 @@ public function testEnsuresAtLeastOneOwner()`
`327`	`327`	`->with('tr#user-' . $owner->id, function ($userRow) use ($originalRole, $newRole) {`
`328`	`328`	`$userRow->select('role', $newRole);`
`329`	`329`	`})`
`330`		`- ->assertSeeIn('.alert', trans('messages.sponsor_member.need_owner'))`
	`330`	`+ ->assertSeeIn('.alert:not(.browser-support)', trans('messages.sponsor_member.need_owner'))`
`331`	`331`	`->assertSeeIn('tr#user-' . $owner->id, trans('messages.sponsor_member.roles.' . $originalRole))`
`332`	`332`	`;`
`333`	`333`	`});`