From f862527d2c34ba664c6519b92ea08dde3cad2143 Mon Sep 17 00:00:00 2001
From: Joe Fiorini <joe@joefiorini.com>
Date: Mon, 27 Apr 2015 12:17:30 -0400
Subject: [PATCH] Implement new design for setup menu

---
 .../js/setup-menu/setup-extra.block.less      | 14 +++
 .../js/setup-menu/setup-item.block.less       | 66 +++++++------
 .../js/setup-menu/setup-menu.block.less       |  4 +-
 .../js/setup-menu/setup-menu.partial.html     | 93 ++++++++++---------
 .../js/shared/container/container.block.less  |  2 +-
 .../static/js/shared/media-object.block.less  | 14 +++
 6 files changed, 116 insertions(+), 77 deletions(-)
 create mode 100644 awx/ui/static/js/setup-menu/setup-extra.block.less
 create mode 100644 awx/ui/static/js/shared/media-object.block.less

diff --git a/awx/ui/static/js/setup-menu/setup-extra.block.less b/awx/ui/static/js/setup-menu/setup-extra.block.less
new file mode 100644
index 0000000000..c61a5e5c5d
--- /dev/null
+++ b/awx/ui/static/js/setup-menu/setup-extra.block.less
@@ -0,0 +1,14 @@
+/** @define SetupExtra */
+
+.SetupExtra {
+  &-itemTitle {
+    font-size: 1.4rem;
+    font-weight: bold;
+  }
+  &-itemDescription {
+    font-family: merriweather;
+    font-size: 1rem;
+    font-weight: lighter;
+    font-style: italic;
+  }
+}
diff --git a/awx/ui/static/js/setup-menu/setup-item.block.less b/awx/ui/static/js/setup-menu/setup-item.block.less
index 15f1955425..ac55c31bb1 100644
--- a/awx/ui/static/js/setup-menu/setup-item.block.less
+++ b/awx/ui/static/js/setup-menu/setup-item.block.less
@@ -3,51 +3,59 @@
 @import 'shared/branding/colors.less';
 
 .SetupItem {
-    @vertical-basis: 3rem;
+
+  &--aside {
+    padding-bottom: @vertical-basis / 2;
+  }
+    @vertical-basis: 1.4rem;
 
     padding: 0;
     padding-bottom: @vertical-basis;
 
-    &:nth-child(2n) {
-        .SetupItem-icon {
-            background-color: @blue;
-        }
-    }
-
-    @media screen and (min-width: 931px) and (max-width: 1251px) {
-        &:nth-child(2n) {
-            .SetupItem-icon {
-                background-color: @ansible-red;
-            }
-        }
-        &:nth-child(4n+3), &:nth-child(4n+4) {
-            .SetupItem-icon {
-                background-color: @blue;
-            }
-        }
+    color: black !important;
+    flex: 1 0 100%;
+    transition: background-color 0.25s ease-in-out;
+    background-color: white !important;
+    &:hover, &:focus, &:active {
+        color: black;
     }
 
     .SetupItem-icon {
-        display: flex;
-        padding: 1.5rem;
-        background-color: @ansible-red;
-        justify-content: center;
-        align-items: center;
+        max-width: 2.8rem;
+        align-self: center;
         img {
-            height: 26px;
+            width: 2.3rem;
         }
     }
 
     &--button {
+      border: 0;
+      text-align: left;
+      outline: none;
         .SetupItem-icon {
-            width: 100%;
+            // width: 100%;
         }
     }
 
-    .SetupItem-title {
-        font-size: 3rem;
-        text-align: center;
-        padding: @vertical-basis;
+    &-title {
+        &--aside {
+          font-size: 1.4rem;
+          font-weight: bold;
+        }
+        font-size: 2.8rem;
+        padding-bottom: 0.4rem;
         margin: 0;
     }
+
+    &-description {
+      &--aside {
+        font-size: 1rem;
+        font-style: italic;
+      }
+      font-family: merriweather;
+      font-weight: lighter;
+      color: black;
+      font-size: 1.4rem;
+      margin: 0;
+    }
 }
diff --git a/awx/ui/static/js/setup-menu/setup-menu.block.less b/awx/ui/static/js/setup-menu/setup-menu.block.less
index d70a888d78..c67431db59 100644
--- a/awx/ui/static/js/setup-menu/setup-menu.block.less
+++ b/awx/ui/static/js/setup-menu/setup-menu.block.less
@@ -4,9 +4,11 @@
 
 .SetupMenu {
     display: flex;
+    width: 100%;
+    flex-direction: row;
     justify-content: flex-start;
-    background-color: #EDEDED;
     flex-wrap: wrap;
+
     @media screen and (min-width: 571px) {
         margin-top: -2.8rem;
     }
diff --git a/awx/ui/static/js/setup-menu/setup-menu.partial.html b/awx/ui/static/js/setup-menu/setup-menu.partial.html
index ce45176f4d..921491a5e2 100644
--- a/awx/ui/static/js/setup-menu/setup-menu.partial.html
+++ b/awx/ui/static/js/setup-menu/setup-menu.partial.html
@@ -1,56 +1,57 @@
-<section id="htmlTemplate" class="Container" page-name="SetupMenu">
+<section id="htmlTemplate" class="Container">
   <nav class="SetupMenu Container-main">
-      <a href="#/credentials" class="SetupItem SetupMenu-block">
-        <i class="SetupItem-icon"><img src="/static/img/Credentials.svg"></i>
-        <h4 class="SetupItem-title">Credentials</h4>
-        <p class="SetupItem-description">
-          Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or syncing inventories or projects.
-        </p>
+      <a href="#/credentials" class="SetupItem Media">
+        <i class="SetupItem-icon Media-figure"><img src="/static/img/Credentials.svg"></i>
+        <div class="Media-body">
+          <h4 class="SetupItem-title">Credentials</h4>
+          <p class="SetupItem-description">Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or syncing inventories or projects.</p>
+        </div>
       </a>
-      <a href="#/users" class="SetupItem SetupMenu-block">
-        <i class="SetupItem-icon"><img src="/static/img/Users.svg"></i>
-        <h4 class="SetupItem-title">Users</h4>
-        <p class="SetupItem-description">
-          Allow others to sign into Tower and own content they create.
-        </p>
+      <a href="#/users" class="SetupItem Media">
+        <i class="SetupItem-icon Media-figure"><img src="/static/img/Users.svg"></i>
+        <div class="Media-body">
+          <h4 class="SetupItem-title">Users</h4>
+          <p class="SetupItem-description">
+            Allow others to sign into Tower and own content they create.
+          </p>
+        </div>
       </a>
-      <a href="#/teams" class="SetupItem SetupMenu-block">
-        <i class="SetupItem-icon"><img src="/static/img/Teams.svg"></i>
-        <h4 class="SetupItem-title">Teams</h4>
-        <p class="SetupItem-description">
-          Divide up your organization to associate content and control permissions for groups.
-        </p>
+      <a href="#/teams" class="SetupItem Media">
+        <i class="SetupItem-icon Media-figure"><img src="/static/img/Teams.svg"></i>
+        <div class="Media-block">
+          <h4 class="SetupItem-title">Teams</h4>
+          <p class="SetupItem-description">
+            Divide up your organization to associate content and control permissions for groups.
+          </p>
+        </div>
       </a>
-      <a href="#/organizations" class="SetupItem SetupMenu-block">
-        <i class="SetupItem-icon"><img src="/static/img/Organizations.svg"></i>
-        <h4 class="SetupItem-title">Organizations</h4>
-        <p class="SetupItem-description">
-          Group all of your content to manage permissions across departments in your company
-        </p>
-
-      </a>
-      <button class="SetupMenu-block SetupItem SetupItem--button Button--pseudo" ng-click="showManagementJobsModal()" ng-if="user_is_superuser">
-        <i class="SetupItem-icon"><img src="/static/img/ManagementJobs.svg"></i>
-        <h4 class="SetupItem-title">Management Jobs</h4>
-        <p class="SetupItem-description">
-          Schedule jobs to periodically cleanup job history
-        </p>
-      </button>
-      <button class="SetupMenu-block SetupItem SetupItem--button Button--pseudo" ng-click="showInventoryScriptsModal()" ng-if="user_is_superuser">
-        <i class="SetupItem-icon"><img src="/static/img/InventoryScripts.svg"></i>
-        <h4 class="SetupItem-title">Inventory Scripts</h4>
-        <p class="SetupItem-description">
-          Create and edit scripts to dynamically load hosts from any sources
-        </p>
-      </button>
   </nav>
   <aside class="Container-aside">
-      <nav class="DetailNav Menu Menu--vertical">
-        <button href="#/license" ng-click="showLicenseModal()" class="Button--pseudo">
-          <h4 class="DetailNav-title">View your License</h4>
+      <nav class="SetupMenu Menu Menu--vertical">
+        <a href="#/organizations" class="SetupItem SetupItem--aside">
+            <h4 class="SetupItem-title SetupItem-title--aside">Organizations</h4>
+            <p class="SetupItem-description SetupItem-description--aside">
+              Group all of your content to manage permissions across departments in your company
+            </p>
+          </div>
+        </a>
+        <button class="SetupItem SetupItem--button SetupItem--aside" ng-click="showManagementJobsModal()" ng-if="user_is_superuser">
+          <h4 class="SetupItem-title SetupItem-title--aside">Management Jobs</h4>
+          <p class="SetupItem-description SetupItem-description--aside">
+            Schedule jobs to periodically cleanup job history
+          </p>
         </button>
-        <button ng-click="showAboutModal()" class="DetailNav--extra Button--pseudo">
-          <h4 class="DetailNav-title">About Tower</h4>
+        <button class="SetupItem SetupItem--button SetupItem--aside" ng-click="showInventoryScriptsModal()" ng-if="user_is_superuser">
+          <h4 class="SetupItem-title SetupItem-title--aside">Inventory Scripts</h4>
+          <p class="SetupItem-description SetupItem-description--aside">
+            Create and edit scripts to dynamically load hosts from any sources
+          </p>
+        </button>
+        <button href="#/license" ng-click="showLicenseModal()" class="SetupItem SetupItem--button SetupItem--aside">
+          <h4 class="SetupItem-title SetupItem-title--aside">View your License</h4>
+        </button>
+        <button ng-click="showAboutModal()" class="SetupItem SetupItem--button SetupItem--aside">
+          <h4 class="SetupItem-title SetupItem-title--aside">About Tower</h4>
         </button>
       </nav>
   </aside>
diff --git a/awx/ui/static/js/shared/container/container.block.less b/awx/ui/static/js/shared/container/container.block.less
index 332675b721..6b710a4ec4 100644
--- a/awx/ui/static/js/shared/container/container.block.less
+++ b/awx/ui/static/js/shared/container/container.block.less
@@ -4,7 +4,7 @@
     display: flex;
     flex-wrap: wrap;
     &-main {
-        flex: 9;
+        flex: 6;
         margin-right: 2.28rem;
     }
     &-aside {
diff --git a/awx/ui/static/js/shared/media-object.block.less b/awx/ui/static/js/shared/media-object.block.less
new file mode 100644
index 0000000000..085999154f
--- /dev/null
+++ b/awx/ui/static/js/shared/media-object.block.less
@@ -0,0 +1,14 @@
+/** @define Media */
+
+.Media {
+  display: flex;
+  align-items: flex-start;
+
+  &-figure {
+    margin-right: 1.4rem;
+  }
+
+  &-body {
+    flex: 1;
+  }
+}