FIX: Devel warning formatting

+ shaking poop

frontend/src/App.vue

@@ -12,7 +12,7 @@
             <div class="container">
               <b-alert v-if="$sysinfo.host_oper_mode.is_devel" show variant="warning">
                 <b-row>
-                  <b-col cols="1" style="margin-top: auto; margin-bottom: auto" class="vertical-center">
+                  <b-col cols="auto" style="margin-top: auto; margin-bottom: auto" class="vertical-center">
                     <font-awesome-icon :icon="['fas', 'dumpster-fire']" size="3x"></font-awesome-icon>
                   </b-col>
                   <b-col style="margin-top: auto; margin-bottom: auto">
@@ -24,7 +24,7 @@
               </b-alert>
               <b-alert v-if="$sysinfo.host_oper_mode.is_test" show variant="info">
                 <b-row>
-                  <b-col cols="1" style="margin-top: auto; margin-bottom: auto" class="vertical-center">
+                  <b-col cols="auto" style="margin-top: auto; margin-bottom: auto" class="vertical-center">
                     <font-awesome-icon :icon="['fas', 'vial']" size="3x"></font-awesome-icon>
                   </b-col>
                   <b-col style="margin-top: auto; margin-bottom: auto">
@@ -44,7 +44,7 @@
         </div>
         <b-modal content-class="text-center" centered id="net-suite-error" hide-footer hide-header size="lg">
           <h1>
-            <font-awesome-icon icon="poo-storm" size="3x"></font-awesome-icon>
+            <font-awesome-icon class="shake" icon="poo-storm" size="3x"></font-awesome-icon>
           </h1>
           <h3>Etwas ist schief gelaufen...</h3>
           <p>...und es ist nicht Ihr Fehler!</p>
@@ -65,7 +65,7 @@
     <template v-else>
       <b-alert variant="danger" fade show>
         <div class="text-center">
-          <font-awesome-icon icon="poo-storm" size="6x"></font-awesome-icon>
+          <font-awesome-icon class="shake-1s" icon="poo-storm" size="6x"></font-awesome-icon>
           <h3>Etwas ist schief gelaufen...</h3>
           <p>Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.</p>
         </div>
@@ -176,7 +176,7 @@ export default {
 @import 'assets/css/netvs.scss';
 @import '../node_modules/bootstrap/scss/bootstrap.scss';
 @import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
-@import '../node_modules/vis-network/dist/vis-network.css';
+@import '../node_modules/vis-network/dist/vis-network.min.css';
 
 #wrapper {
   transition: padding-right .2s, padding-left .2s;

frontend/src/assets/css/netvs.scss

@@ -248,3 +248,27 @@ table.collapse.in {
         transform:rotate(360deg);
     }
 }
+
+.shake {
+    animation: shake 0.5s;
+    animation-iteration-count: infinite;
+}
+
+.shake-1s {
+    animation: shake 0.5s;
+    animation-iteration-count: 2;
+}
+
+@keyframes shake {
+    0% { transform: translate(1px, 1px) rotate(0deg); }
+    10% { transform: translate(-1px, -2px) rotate(-1deg); }
+    20% { transform: translate(-3px, 0px) rotate(1deg); }
+    30% { transform: translate(3px, 2px) rotate(0deg); }
+    40% { transform: translate(1px, -1px) rotate(1deg); }
+    50% { transform: translate(-1px, 2px) rotate(-1deg); }
+    60% { transform: translate(-3px, 1px) rotate(0deg); }
+    70% { transform: translate(3px, 1px) rotate(-1deg); }
+    80% { transform: translate(-1px, -1px) rotate(1deg); }
+    90% { transform: translate(1px, 2px) rotate(0deg); }
+    100% { transform: translate(1px, -2px) rotate(-1deg); }
+}
\ No newline at end of file