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 */
body, html {
height: 100%;
}
.p-10 {
padding: 10px;
@@ -7,3 +11,27 @@
.m-10 {
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>
<!-- 3. Display the application -->
<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>
<div id="loader">
<div>
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
<div id="loader-text">Loading Demo Shell..</div>
<div id="loader-container" class="loader-container">
<div class="loader-item">
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<div id="loader-text" class="loader-text">Loading Demo Shell..</div>
</div >
</div>
</alfresco-app>
</body>