External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-23 08:37:48 -02:30
Code Issues Packages Projects Releases Wiki Activity

Implement new design for setup menu

Browse Source
This commit is contained in:
Joe Fiorini
2015-04-27 12:17:30 -04:00
parent b649887e61
commit f862527d2c
6 changed files with 116 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
awx/ui/static/js/setup-menu/setup-extra.block.less Normal file
View File

@@ -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;
}
}

66
awx/ui/static/js/setup-menu/setup-item.block.less
View File

@@ -3,51 +3,59 @@
@import 'shared/branding/colors.less'; @import 'shared/branding/colors.less';
.SetupItem { .SetupItem {
@vertical-basis: 3rem;
&--aside {
padding-bottom: @vertical-basis / 2;
}
@vertical-basis: 1.4rem;
padding: 0; padding: 0;
padding-bottom: @vertical-basis; padding-bottom: @vertical-basis;
&:nth-child(2n) { color: black !important;
.SetupItem-icon { flex: 1 0 100%;
background-color: @blue; transition: background-color 0.25s ease-in-out;
} background-color: white !important;
} &:hover, &:focus, &:active {
color: black;
@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;
}
}
} }
.SetupItem-icon { .SetupItem-icon {
display: flex; max-width: 2.8rem;
padding: 1.5rem; align-self: center;
background-color: @ansible-red;
justify-content: center;
align-items: center;
img { img {
height: 26px; width: 2.3rem;
} }
} }
&--button { &--button {
border: 0;
text-align: left;
outline: none;
.SetupItem-icon { .SetupItem-icon {
width: 100%; // width: 100%;
} }
} }
.SetupItem-title { &-title {
font-size: 3rem; &--aside {
text-align: center; font-size: 1.4rem;
padding: @vertical-basis; font-weight: bold;
}
font-size: 2.8rem;
padding-bottom: 0.4rem;
margin: 0; margin: 0;
} }
&-description {
&--aside {
font-size: 1rem;
font-style: italic;
}
font-family: merriweather;
font-weight: lighter;
color: black;
font-size: 1.4rem;
margin: 0;
}
} }

4
awx/ui/static/js/setup-menu/setup-menu.block.less
View File

@@ -4,9 +4,11 @@
.SetupMenu { .SetupMenu {
display: flex; display: flex;
width: 100%;
flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
background-color: #EDEDED;
flex-wrap: wrap; flex-wrap: wrap;
@media screen and (min-width: 571px) { @media screen and (min-width: 571px) {
margin-top: -2.8rem; margin-top: -2.8rem;
} }

93
awx/ui/static/js/setup-menu/setup-menu.partial.html
View File

@@ -1,56 +1,57 @@
<section id="htmlTemplate" class="Container" page-name="SetupMenu"> <section id="htmlTemplate" class="Container">
<nav class="SetupMenu Container-main"> <nav class="SetupMenu Container-main">
<a href="#/credentials" class="SetupItem SetupMenu-block"> <a href="#/credentials" class="SetupItem Media">
<i class="SetupItem-icon"><img src="/static/img/Credentials.svg"></i> <i class="SetupItem-icon Media-figure"><img src="/static/img/Credentials.svg"></i>
<h4 class="SetupItem-title">Credentials</h4> <div class="Media-body">
<p class="SetupItem-description"> <h4 class="SetupItem-title">Credentials</h4>
Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or syncing inventories or projects. <p class="SetupItem-description">Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or syncing inventories or projects.</p>
</p> </div>
</a> </a>
<a href="#/users" class="SetupItem SetupMenu-block"> <a href="#/users" class="SetupItem Media">
<i class="SetupItem-icon"><img src="/static/img/Users.svg"></i> <i class="SetupItem-icon Media-figure"><img src="/static/img/Users.svg"></i>
<h4 class="SetupItem-title">Users</h4> <div class="Media-body">
<p class="SetupItem-description"> <h4 class="SetupItem-title">Users</h4>
Allow others to sign into Tower and own content they create. <p class="SetupItem-description">
</p> Allow others to sign into Tower and own content they create.
</p>
</div>
</a> </a>
<a href="#/teams" class="SetupItem SetupMenu-block"> <a href="#/teams" class="SetupItem Media">
<i class="SetupItem-icon"><img src="/static/img/Teams.svg"></i> <i class="SetupItem-icon Media-figure"><img src="/static/img/Teams.svg"></i>
<h4 class="SetupItem-title">Teams</h4> <div class="Media-block">
<p class="SetupItem-description"> <h4 class="SetupItem-title">Teams</h4>
Divide up your organization to associate content and control permissions for groups. <p class="SetupItem-description">
</p> Divide up your organization to associate content and control permissions for groups.
</p>
</div>
</a> </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> </nav>
<aside class="Container-aside"> <aside class="Container-aside">
<nav class="DetailNav Menu Menu--vertical"> <nav class="SetupMenu Menu Menu--vertical">
<button href="#/license" ng-click="showLicenseModal()" class="Button--pseudo"> <a href="#/organizations" class="SetupItem SetupItem--aside">
<h4 class="DetailNav-title">View your License</h4> <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>
<button ng-click="showAboutModal()" class="DetailNav--extra Button--pseudo"> <button class="SetupItem SetupItem--button SetupItem--aside" ng-click="showInventoryScriptsModal()" ng-if="user_is_superuser">
<h4 class="DetailNav-title">About Tower</h4> <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> </button>
</nav> </nav>
</aside> </aside>

2
awx/ui/static/js/shared/container/container.block.less
View File

@@ -4,7 +4,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
&-main { &-main {
flex: 9; flex: 6;
margin-right: 2.28rem; margin-right: 2.28rem;
} }
&-aside { &-aside {

14
awx/ui/static/js/shared/media-object.block.less Normal file
View File

@@ -0,0 +1,14 @@
/** @define Media */
.Media {
display: flex;
align-items: flex-start;
&-figure {
margin-right: 1.4rem;
}
&-body {
flex: 1;
}
}