Merge pull request #16 from mendix/device-previews

Added phone/tablet preview & small bug fixes
mendix · Oct 12, 2018 · 7d8ef67 · 7d8ef67
2 parents 720abd0 + 4ac2f16
commit 7d8ef67
Show file tree

Hide file tree

Showing 15 changed files with 195 additions and 53 deletions.
diff --git a/index-phone-preview.html b/index-phone-preview.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Mendix - Phone preview</title>
+    <link rel="stylesheet" type="text/css" href="styles/css/lib/lib.css?{{cachebust}}">
+</head>
+
+<body>
+    <div class="content">
+        <div class="devicephone">
+            <div class="deviceshadowwrapper">
+                <iframe id="frame" class="deviceframe"></iframe>
+                <div class="deviceshadow"></div>
+            </div>
+            <div class="devicedisclaimer">
+                This is not a simulator but just a resized view surrounded with an image to give an impression of what the app might look like on a phone.
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        // Firefox does not add a history item if the page is not loaded
+        // from the cache, and the src is set as attribute on the iframe
+        document.getElementById("frame").src = "index.html" + window.location.search + window.location.hash;
+    </script>
+</body>
+
+</html>
diff --git a/index-tablet-preview.html b/index-tablet-preview.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Mendix - Tablet preview</title>
+    <link rel="stylesheet" type="text/css" href="styles/css/lib/lib.css?{{cachebust}}">
+</head>
+
+<body>
+    <div class="content">
+        <div class="devicetablet">
+            <iframe id="frame" class="deviceframe"></iframe>
+            <div class="devicedisclaimer">
+                This is not a simulator but just a resized view surrounded with an image to give an impression of what the app might look like on a tablet.
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        // Firefox does not add a history item if the page is not loaded
+        // from the cache, and the src is set as attribute on the iframe
+        document.getElementById("frame").src = "index.html" + window.location.search + window.location.hash;
+    </script>
+</body>
+
+</html>
diff --git a/login-with-sso.html b/login-with-sso.html
@@ -7,52 +7,52 @@
     <title>Login</title>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css?{{cachebust}}">
-    <link rel="stylesheet" href="styles/css/lib/lib.css?{{cachebust}}">
+    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css?{{cachebust}}">
+    <link rel="stylesheet" type="text/css" href="styles/css/lib/lib.css?{{cachebust}}">
 </head>
 
 <body>
-    <div class="wrapper">
-        <div class="design-wrapper">
-            <div class="bg-image"></div>
+    <div class="loginpage">
+        <div class="loginpage-left">
+            <div class="loginpage-image"></div>
         </div>
-        <div class="login-wrapper">
-            <div class="login-container">
+        <div class="loginpage-right">
+            <div class="loginpage-formwrapper">
                 <h2>Sign in</h2>
-                <form id="loginForm" class="login-form">
-                    <div class="login-form-inputs">
-                        <div id="loginMessage" class="alert alert-danger login-message"></div>
+                <form id="loginForm" class="loginpage-form">
+                    <div>
+                        <div id="loginMessage" class="alert alert-danger"></div>
                         <div class="form-group">
                             <label id="usernameLabel" for="usernameInput">User name</label>
-                            <div class="inputWrapper">
+                            <div class="inputwrapper">
                                 <input id="usernameInput" class="form-control" type="text" placeholder="User name" autocorrect="off" autocapitalize="none">
                                 <span class="glyphicon glyphicon-user"></span>
                             </div>
                         </div>
                         <div class="form-group">
                             <label id="passwordLabel" for="passwordInput">Password</label>
-                            <div class="inputWrapper">
+                            <div class="inputwrapper">
                                 <input id="passwordInput" class="form-control" type="password" placeholder="Password" autocorrect="off" autocapitalize="none">
                                 <span class="glyphicon glyphicon-eye-close"></span>
                             </div>
                         </div>
                         <button id="loginButton" type="submit" class="btn btn-success btn-lg">Sign in</button>
                     </div>
 
-                    <div class="alternative-label">
+                    <div class="loginpage-alternativelabel">
                         <div>Or sign in with</div>
                         <hr>
                     </div>
 
-                    <a id="ssoButton" href="/openid/login" class="login-sso-button btn btn-default btn-lg">
-                        <img class="mendix-logo" src="logo.png" />
-                        <span class="mendix-signin">Mendix Account</span>
+                    <a id="ssoButton" href="/openid/login" class="btn btn-default btn-lg">
+                        <img src="logo.png" />
+                        <span class="loginpage-signin">Mendix Account</span>
                     </a>
 
                 </form>
             </div>
         </div>
-        <div class="logo">
+        <div class="loginpage-logo">
             <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 599 187">
                 <g>
                     <rect x="0.98" y="0.86" width="185.28" height="185.28" rx="24.72" ry="24.72" style="fill: #00aae7" />

diff --git a/login.html b/login.html
@@ -7,31 +7,31 @@
     <title>Login</title>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css?{{cachebust}}">
-    <link rel="stylesheet" href="styles/css/lib/lib.css?{{cachebust}}">
+    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css?{{cachebust}}">
+    <link rel="stylesheet" type="text/css" href="styles/css/lib/lib.css?{{cachebust}}">
 </head>
 
 <body>
-    <div class="wrapper">
-        <div class="design-wrapper">
-            <div class="bg-image"></div>
+    <div class="loginpage">
+        <div class="loginpage-left">
+            <div class="loginpage-image"></div>
         </div>
-        <div class="login-wrapper">
-            <div class="login-container">
+        <div class="loginpage-right">
+            <div class="loginpage-formwrapper">
                 <h2>Sign in</h2>
-                <form id="loginForm" class="login-form">
-                    <div class="login-form-inputs">
-                        <div id="loginMessage" class="alert alert-danger login-message"></div>
+                <form id="loginForm" class="loginpage-form">
+                    <div>
+                        <div id="loginMessage" class="alert alert-danger"></div>
                         <div class="form-group">
                             <label id="usernameLabel" for="usernameInput">User name</label>
-                            <div class="inputWrapper">
+                            <div class="inputwrapper">
                                 <input id="usernameInput" class="form-control" type="text" placeholder="User name" autocorrect="off" autocapitalize="none">
                                 <span class="glyphicon glyphicon-user"></span>
                             </div>
                         </div>
                         <div class="form-group">
                             <label id="passwordLabel" for="passwordInput">Password</label>
-                            <div class="inputWrapper">
+                            <div class="inputwrapper">
                                 <input id="passwordInput" class="form-control" type="password" placeholder="Password" autocorrect="off" autocapitalize="none">
                                 <span class="glyphicon glyphicon-eye-close"></span>
                             </div>
@@ -41,7 +41,7 @@ <h2>Sign in</h2>
                 </form>
             </div>
         </div>
-        <div class="logo">
+        <div class="loginpage-logo">
             <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 599 187">
                 <g>
                     <rect x="0.98" y="0.86" width="185.28" height="185.28" rx="24.72" ry="24.72" style="fill: #00aae7" />

diff --git a/resources/phone.png b/resources/phone.png
diff --git a/resources/tablet.png b/resources/tablet.png
diff --git a/styles/css/lib/lib.css b/styles/css/lib/lib.css
diff --git a/styles/sass/lib/base/_login.scss b/styles/sass/lib/base/_login.scss
@@ -2,33 +2,33 @@ body {
     height: 100%;
 }
 
-.wrapper {
+.loginpage {
     display: flex;
     height: 100%;
 
-    .logo {
+    .loginpage-logo {
         position: absolute;
         top: 30px;
         right: 30px;
         width: 120px;
     }
 
-    .design-wrapper {
+    .loginpage-left {
         display: none;
     }
 
-    .login-wrapper {
+    .loginpage-right {
         display: flex;
         flex: 1;
         flex-direction: column;
         justify-content: space-around;
 
-        .login-container {
+        .loginpage-formwrapper {
             width: 300px;
             margin: 0 auto;
 
             // Form
-            .login-form {
+            .loginpage-form {
                 .alert {
                     display: none;
                 }
@@ -47,7 +47,7 @@ body {
                         font-weight: 500;
                     }
 
-                    .inputWrapper {
+                    .inputwrapper {
                         position: relative;
                         width: 100%;
 
@@ -102,7 +102,7 @@ body {
                 }
 
                 // Divider - only on login-with-sso.html
-                .alternative-label {
+                .loginpage-alternativelabel {
                     display: flex;
                     align-items: center;
                     flex-direction: row;
@@ -119,7 +119,7 @@ body {
                     }
                 }
 
-                .mendix-signin {
+                .loginpage-signin {
                     color: #555555;
                 }
             }
@@ -129,20 +129,20 @@ body {
 
 // Show only on wide screens
 @media screen and (min-width: $screen-lg) {
-    .wrapper {
-        .logo {
+    .loginpage {
+        .loginpage-logo {
             width: 150px;
         }
 
-        .design-wrapper {
+        .loginpage-left {
             position: relative;
             display: block;
             flex: 1;
             width: 100%;
             height: 100%;
 
             // Image and clipping mask
-            .bg-image {
+            .loginpage-image {
                 height: 100%;
                 animation: makePointer 1s ease-out both;
                 background: left / cover no-repeat url("../../../resources/work-do-more.jpeg"); // Microsoft EDGE
@@ -157,8 +157,8 @@ body {
             }
         }
 
-        .login-wrapper {
-            .login-container {
+        .loginpage {
+            .loginpage-formwrapper {
                 width: 400px;
             }
         }
@@ -172,3 +172,9 @@ body {
         clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
     }
 }
+@-webkit-keyframes makePointer {
+    100% {
+        -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
+        clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
+    }
+}
diff --git a/styles/sass/lib/buildingblocks/_card.scss b/styles/sass/lib/buildingblocks/_card.scss
@@ -6,7 +6,7 @@
     padding: 30px;
     border: 1px solid $border-color-default;
     border-radius: $border-radius-default;
-    background-color: #FFFFFF;;
+    background-color: #FFFFFF;
 }
 
 //== Elements
@@ -278,3 +278,22 @@
 .cardhighlight {
     border-top: 4px solid $brand-primary;
 }
+
+
+@media screen and (max-width: $screen-sm-max) {
+    .widget-charts:not([height]),
+    .widget-charts-line:not([height]) {
+        padding-bottom: 80% !important;
+    }
+}
+
+
+@media screen and (max-width: $screen-md-max) {
+    .cardprogress {
+        .cardprogress-state {
+            width: 60px;
+            height: 60px;
+            font-size: 24px;
+        }
+    }
+}
diff --git a/styles/sass/lib/components/_helpers.scss b/styles/sass/lib/components/_helpers.scss
@@ -34,10 +34,10 @@
 
 .nowrap,
 .nowrap * {
-    overflow: hidden;
+    overflow: hidden !important;
     // Star for inside an element, IE8 span > a
     white-space: nowrap !important;
-    text-overflow: ellipsis;
+    text-overflow: ellipsis !important;
 }
 
 // Render DIV as Table Cells

diff --git a/styles/sass/lib/components/_inputs.scss b/styles/sass/lib/components/_inputs.scss
@@ -129,7 +129,7 @@ select.form-control {
     }
 }
 
-// Fixes alignmcode ent bug on iPads / iPhones where datefield is not aligned vertically
+// Fixes alignment bug on iPads / iPhones where datefield is not aligned vertically
 @media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 0) {
     input[type=date],
     input[type=time],

diff --git a/styles/sass/lib/components/_navigationtree.scss b/styles/sass/lib/components/_navigationtree.scss
@@ -84,6 +84,7 @@
                     &:focus,
                     &.active {
                         color: $navigation-sub-color-hover;
+                        outline: 0;
                         background-color: $navigation-sub-bg-hover;
                     }
                     &.active {

diff --git a/styles/sass/lib/components/_typography.scss b/styles/sass/lib/components/_typography.scss
@@ -76,7 +76,7 @@ h6,
 //## Helper classes to change the look and feel of the component
 //-------------------------------------------------------------------------------------------------------------------//
 
-// Text size 
+// Text size
 .text-small {
     font-size: $font-size-small !important;
 }
@@ -85,7 +85,7 @@ h6,
     font-size: $font-size-large !important;
 }
 
-// Text Weights 
+// Text Weights
 .text-light,
 .text-light > *,
 .text-light label {
@@ -133,7 +133,7 @@ h6,
 
 .text-warning,
 .text-warning:hover {
-    color: $brand-warning!important;
+    color: $brand-warning !important;
 }
 
 .text-danger,
@@ -194,3 +194,10 @@ h6,
 .text-nowrap {
     white-space: nowrap !important;
 }
+
+.text-nowrap {
+    overflow: hidden !important;
+    max-width: 100% !important;
+    white-space: nowrap !important;
+    text-overflow: ellipsis !important;
+}