fix main demo shell loading mobile view

This commit is contained in:
Eugenio Romano
2016-06-20 11:13:10 +01:00
parent 1f49a8b053
commit c89b3a4c83
2 changed files with 33 additions and 18 deletions

View File

@@ -1,4 +1,8 @@
/* Utils */ /* Utils */
body, html {
height: 100%;
}
.p-10 { .p-10 {
padding: 10px; padding: 10px;
@@ -7,3 +11,27 @@
.m-10 { .m-10 {
margin: 10px; margin: 10px;
} }
.loader-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
height:100%;
}
.loader-item {
margin: auto;
max-height:100px;
max-width:300px;
}
.loader-text{
white-space: nowrap;
text-align: center;
position: relative;
}

View File

@@ -38,25 +38,12 @@
</head> </head>
<!-- 3. Display the application --> <!-- 3. Display the application -->
<body> <body>
<style>
#loader{
margin-top :25%;
margin-left :40%;
width:300px;
}
#loader-text{
width:300px;
white-space: nowrap;
text-align: center;
position: relative;
}
</style>
<alfresco-app> <alfresco-app>
<div id="loader"> <div id="loader-container" class="loader-container">
<div> <div class="loader-item">
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div> <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div> <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
<div id="loader-text">Loading Demo Shell..</div> </div >
</div> </div>
</alfresco-app> </alfresco-app>
</body> </body>