fixing demo elements stacked on iOS #130

Author: jadjoubran

angular/app/footer/footer.html

@@ -1,12 +1,12 @@
 <md-content class="Page-Container Footer" ng-controller="FooterController as vm" layout-align="center center">
-	<md-icon md-svg-src="/img/icons/logo-grey.svg" class="Footer-logo"></md-icon>
-	<br/>
-	<br/>
-	<div class="Footer-text">
-		An open source project by <a href="https://github.com/jadjoubran" class="Footer-link" target="_blank">Jad Joubran</a>.
-		Design by <a href="https://www.linkedin.com/in/nicolesaidy" class="Footer-link" target="_blank">Nicole Saidy</a>
-	</div>
-	<div class="Footer-text">
-		&copy; 2016 Laravel Angular Material Starter
-	</div>
+<md-icon md-svg-src="/img/icons/logo-grey.svg" class="Footer-logo"></md-icon>
+<br/>
+<br/>
+<div class="Footer-text">
+	An open source project by <a href="https://github.com/jadjoubran" class="Footer-link" target="_blank">Jad Joubran</a>.
+	Design by <a href="https://www.linkedin.com/in/nicolesaidy" class="Footer-link" target="_blank">Nicole Saidy</a>
+</div>
+<div class="Footer-text">
+	&copy; 2016 Laravel Angular Material Starter
+</div>
 </md-content>

angular/app/landing/landing.controller.js

@@ -8,6 +8,13 @@
 
 		vm.laravel_description = 'Response macros integrated with your Angular app';
 		vm.angular_description = 'Query your API without worrying about validations';
+
+		/*
+		This is a terrible temporary hack,
+		to fix layout issues with flex on iOS (chrome & safari)
+		Make sure to remove this when you modify this demo
+		*/
+		vm.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
 	}
 
 })();

angular/app/landing/landing.html

@@ -5,7 +5,7 @@ <h1 class="md-display-3 Landing-heading"><strong>laravel angular</strong> <span
 		<md-button class="md-raised md-large Landing-getStarted" href="https://laravel-angular.readme.io/docs/install" target="_blank">Get Started</md-button>
 	</div>
 
-	<div class="Landing-laravelAngular">
+	<div class="Landing-laravelAngular" ng-class="{'iOS-hack': vm.iOS}">
 		<div class="Landing-ampersand" hide show-gt-sm>&amp;</div>
 		<div layout="column" layout-gt-sm="row">
 			<div flex="50" class="Landing-laravel" layout-align="center center">

angular/app/landing/landing.less

@@ -199,3 +199,17 @@ body{
 .Landing-featuresEntry--generators md-icon{
     width: 80px;
 }
+
+/*
+This is a terrible temporary hack,
+to fix layout issues with flex on iOS (chrome & safari)
+Make sure to remove this when you modify this demo
+*/
+@media only screen and (max-width : 950px) {
+    .iOS-hack .flex-100,
+    .iOS-hack .flex-50,
+    .iOS-hack .flex-33,
+    {
+        flex: none !important;
+    }
+}