properly sized database cards

resources/frontend_client/app/css/core/grid.css

@@ -20,3 +20,22 @@
 .Grid--1of4 > .Grid-cell {
     flex: 0 0 25%;
 }
+
+
+/* TODO - use breakpoint md and add responsive grid classes */
+@media screen and (--breakpoint-max-lg) {
+    .Grid--1of4 > .Grid-cell {
+        flex: 50%;
+    }
+}
+
+@media screen and (--breakpoint-max-sm) {
+    .Grid--1of4 > .Grid-cell {
+        flex: 100%;
+    }
+}
+
+/* a simple utility to make sure an item fills its height */
+.fill-height: {
+    flex: 1;
+}

resources/frontend_client/app/css/core/hide.css

@@ -39,3 +39,7 @@
 @media screen and (--breakpoint-min-xl) {
   .show-xl { display: block !important; }
 }
+
+.invisible {
+    opacity: 0;
+}

resources/frontend_client/app/css/setup.css

@@ -4,7 +4,9 @@
 }
 
 .SetupNav {
-    font-size: 0.85em;
+    font-size: 1em;
+    background: #fff;
+    color: #686868;
 }
 
 .SetupWrapper {
@@ -12,6 +14,11 @@
     margin: 0 auto;
 }
 
+.SetupIntro-heading {
+    margin: 2.5em 0 1em;
+    color: var(--brand-color);
+}
+
 .SetupOffset {
     margin-top: -2em;
 }
@@ -56,11 +63,6 @@
     border-bottom: 1px solid #ddd;
 }
 
-.SetupNav {
-    background: #fff;
-    color: #686868;
-}
-
 @media screen and (--breakpoint-min-xl) {
     .SetupWrapper {
         max-width: 100em;
@@ -71,40 +73,50 @@
     margin-top: 2em;
 }
 
-
-.Connection-engine {
-    padding: 1em 0;
-    border-bottom: 1px solid red;
-    display: inline-block;
-}
-
 .Connection-type {
     border: 1px solid #ddd;
-    padding: 1em;
+    padding: 4em;
     border-radius: 2px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
     background: #fff;
-    display: block;
+    display: flex;
+    flex-direction: column;
     text-decoration: none;
 }
 
+.Connection-icon {
+    text-align: center;
+}
+
+.Connection-type .Connection-engine {
+    text-align: center;
+}
+
 .Connection-typeNew {
     border-style: dashed;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
 }
 
 .Connection-name {
-    padding: 4em;
+    font-size: 1.2em;
     text-align: center;
-    display: block;
+    color: var(--brand-color);
+}
+
+.Connection-typeNew .Connection-name {
+    padding: 0;
 }
 
 .Connection-type:hover {
-    border-color: var(--brand-color);
+    background-color: var(--brand-color);
     cursor: pointer;
+    color: #fff;
+    border-color: var(--brand-color);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .32);
+    transition: background .2s linear, border .2s linear, color .2s linear;
+}
+
+.Connection-type:hover .Connection-name {
+    color: #fff;
 }
 
 .Connection-typeDisabled {
@@ -138,7 +150,7 @@
 
 .Connection-input:focus {
     outline: none;
-    border-bottom-color: red;
+    border-bottom-color: var(--brand-color);
 }
 
 .AdminContent {

resources/frontend_client/app/setup/setup.controllers.js

@@ -119,11 +119,10 @@ SetupControllers.controller('SetupConnection', ['$scope', '$routeParams', '$loca
                     database.id = $scope.database.id
                     Metabase.db_update(database, success, error);
                 }
-                
+
             }, function(error){
                 console.log(error);
-                alert("Invalid Connection String - " + error.data.message);
-
+                $scope.error = "Invalid Connection String - " + error.data.message;
             })
 
         }
@@ -165,6 +164,9 @@ SetupControllers.controller('SetupProfile', ['$scope', '$location', 'Organizatio
 
 }]);
 
+/*
+    not yet included in the flow but eventually
+*/
 SetupControllers.controller('SetupTeam', ['$scope', '$location', 'Organization', function ($scope, $location, Organization) {
     $scope.$watch('currentOrg', function(org) {
         Organization.members({

resources/frontend_client/app/setup/setup_connection.html

@@ -4,7 +4,7 @@
             <ul>
                 <li class="inline-block text-grey-3"><a class="Breadcrumb" href="/setup/data">Your data</a></li>
                 <li class="Breadcrumb-separator inline-block mx2"></li>
-                <li class="inline-block text-brand">{{breadcrumb}}</li>
+                <li class="inline-block text-brand"><a class="Breadcrumb">{{breadcrumb}}</a></li>
             </ul>
         </div>
     </div>
@@ -13,6 +13,9 @@
     <div class="SetupWrapper">
 <div class="AdminContent AdminContent-shallow">
     <div class="p4">
+        <div class="bg-error text-white p2 rounded mb2" ng-show="error">
+            {{error}}
+        </div>
         <div>
             <label class="Connection-label">Database name</label>
             <input class="Connection-input" type="text" placeholder="What do you want to call this data in Metabase?" ng-model="connection.dbname" autofocus>

resources/frontend_client/app/setup/setup_data.html

@@ -16,7 +16,7 @@
                     <span class="Connection-engine block">{{database.engine}}</span>
                 </a>
             </li>
-            <li class="Grid-cell" ng-hide="databases.length < 0">
+            <li class="Grid-cell relative" ng-hide="databases.length < 0">
                 <a href="/setup/data/add" class="Connection-type Connection-typeNew">
                     <div class="Connection-icon Connection-add">
                         <cv-add-icon width="16px" height="16px"></cv-add-icon>
@@ -32,8 +32,8 @@
 <div class="SetupBar">
     <div ng-show="databases.length > 0">
         <cv-step-button
-            text="Next"
-            destination="/setup/team">
+            text="Done"
+            destination="/">
         </cv-step-button>
     </div>
 </div>

resources/frontend_client/app/setup/setup_intro.html

@@ -2,16 +2,16 @@
     <div class="SetupWrapper">
         <div class="SetupBreadcrumbs hidden">
             <ul>
-                <li class="inline-block text-grey-3"><a class="Breadcrumb" href="/setup/team">Team</a></li>
+                <li class="inline-block text-grey-3 invisible"><a class="Breadcrumb" href="/setup/intro">Welcome</a></li>
             </ul>
         </div>
     </div>
 </section>
 <section class="SetupOffset">
     <div class="AdminContent AdminContent-shallow text-centered">
-        <h1>Welcome to Metabase</h1>
-        <p>Let's get you connected to your data and invite your team.</p>
-        <div>
+        <h1 class="SetupIntro-heading">Welcome to Metabase</h1>
+        <p class="SetupIntro-subHeading">Let's get you connected to your data and invite your team.</p>
+        <div class="mt1">
             <input class="Connection-input text-centered inline-block"
                 type="text"
                 placeholder="What's your company or organization called?"

resources/frontend_client/index.html

@@ -80,23 +80,10 @@
         </nav>
 
         <nav class="SetupNav" ng-show="nav == 'setup'">
-            <div class="SetupWrapper py4 clearfix">
+            <div class="SetupWrapper py4">
                 <span class="SetupOrg">
                     {{currentOrg.name}}
                 </span>
-                <ul class="SetupNav inline-block ml4" ng-show="canShowSteps">
-                    <li class="SetupNav-item">
-                        <a href="/setup">Start</a>
-                    </li>
-                    <li class="SetupNav-item">
-                        <a href="/setup/data">
-                            <span>Add data</span>
-                        </a>
-                    </li>
-                    <li class="SetupNav-item">
-                        <a href="/setup/team">Invite team</a>
-                    </li>
-                </ul>
                 <span class="SetupUser float-right Dropdown" dropdown on-toggle="toggled(open)">
                     <div dropdown-toggle>
                         {{user.email}}