Fix login page layout (#120)

Author: egaluza

templates/react/application/src/layouts/single-card/single-card.js

@@ -3,7 +3,7 @@ import ScrollView from 'devextreme-react/scroll-view';
 import './single-card.scss';
 
 export default ({ children }) => (
-  <ScrollView height={'auto'} className={'dx-card single-card'}>
-    <div className={'content'}>{children}</div>
+  <ScrollView height={'100%'} width={'100%'} className={'with-footer single-card'}>
+    <div className={'dx-card content'}>{children}</div>
   </ScrollView>
 );

templates/react/application/src/layouts/single-card/single-card.scss

@@ -1,23 +1,19 @@
 .single-card {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.single-card.dx-card {
-  width: 330px;
-  margin: auto auto;
 
-  .screen-x-small & {
-    width: 100%;
-    height: 100%;
-    border-radius: 0;
-    box-shadow: none;
-    margin: 0;
-    border: 0;
-  }  
-  
-  .content {
+  .dx-card {
+    width: 330px;
+    margin: auto auto;
     padding: 40px;
-  }  
+    flex-grow: 0;
+
+    .screen-x-small & {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+      box-shadow: none;
+      margin: 0;
+      border: 0;
+      flex-grow: 1;
+    }
+  }
 }

templates/vue/application/src/layouts/single-card.vue

@@ -1,6 +1,6 @@
 <template>
-  <dx-scroll-view height="auto" class="dx-card single-card">
-    <slot />
+  <dx-scroll-view height="100%" width="100%" class="with-footer single-card">
+     <div class="dx-card"><slot /></div>
   </dx-scroll-view>
 </template>
 
@@ -16,26 +16,22 @@ export default {
 
 <style lang="scss">
 .single-card {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.single-card.dx-card {
-  width: 330px;
-  margin: auto auto;
-
-  .screen-x-small & {
-    width: 100%;
-    height: 100%;
-    border-radius: 0;
-    box-shadow: none;
-    margin: 0;
-    border: 0;
-  }
 
-  .content {
+  .dx-card {
+    width: 330px;
+    margin: auto auto;
     padding: 40px;
+
+    .screen-x-small & {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+      box-shadow: none;
+      margin: 0;
+      border: 0;
+      flex-grow: 1;
+    }
   }
 }
+
 </style>

testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-generic-small-login-snap.png

@@ -137,12 +137,6 @@ module.exports = (env) => {
                                 });
 
                                 it('Login page', async() => {
-                                    // TODO: Fix Angular
-                                    if(env.engine === 'angular') {
-                                        expect(true).toBe(true);
-                                        return;
-                                    }
-
                                     // NOTE: Test only once
                                     if(!isDefaultLayout) {
                                         return;