FIX: Implement modal for mobile devices

Fixes #496

frontend/src/components/Navbar.vue

@@ -14,7 +14,7 @@
     <!-- Collect the nav links, forms, and other content for toggling -->
     <b-collapse is-nav id="navbarNavDropdown" ref="navdropdown" v-model="navbar_collapse_open">
       <Navigation class="d-lg-none" hide-popovers/>
-      <b-popover target="alerts_button" placement="bottomleft" triggers="click">
+      <b-popover v-if="!isMobile()" target="alerts_button" placement="bottomleft" triggers="click">
         <template #title>{{ $t('system.alerts') }}</template>
         <div v-if="$store.state.maint_alerts.length + $store.state.sys_alerts.length === 0" class="text-muted text-center">
           <netvs-icon icon="all_good" size="4x"></netvs-icon>
@@ -23,8 +23,16 @@
         </div>
         <SystemAlertDisplay></SystemAlertDisplay>
       </b-popover>
+      <b-modal v-if="isMobile()" id="system-alerts-modal" :title="this.$t('system.alerts')" scrollable ok-only>
+        <div v-if="$store.state.maint_alerts.length + $store.state.sys_alerts.length === 0" class="text-muted text-center">
+          <netvs-icon icon="all_good" size="4x"></netvs-icon>
+          <br/>
+          <h4>{{ $t('system.all_good') }}</h4>
+        </div>
+        <SystemAlertDisplay></SystemAlertDisplay>
+      </b-modal>
       <b-navbar-nav class="ml-auto">
-        <b-nav-item id="alerts_button">
+        <b-nav-item id="alerts_button" v-b-modal="'system-alerts-modal'">
           <netvs-icon icon="alerts" :fade="$store.state.maint_alerts.length + $store.state.sys_alerts.length > 0"></netvs-icon>
           <b-badge :variant="$store.state.maint_alerts.length + $store.state.sys_alerts.length === 0 ? 'success' : 'danger'">{{ $store.state.maint_alerts.length + $store.state.sys_alerts.length }}
           </b-badge>