shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases 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
Show Stats 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';
.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;
}
}

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

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

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">
<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>

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

@ -4,7 +4,7 @@
display: flex;
flex-wrap: wrap;
&-main {
flex: 9;
flex: 6;
margin-right: 2.28rem;
}
&-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;
}
}