mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 08:21:15 +03:00
Implement new design for setup menu
This commit is contained in:
Joe Fiorini
parent
b649887e61
commit
f862527d2c
14
awx/ui/static/js/setup-menu/setup-extra.block.less
Normal file
14
awx/ui/static/js/setup-menu/setup-extra.block.less
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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,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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
14
awx/ui/static/js/shared/media-object.block.less
Normal file
@ -0,0 +1,14 @@
|
||||
/** @define Media */
|
||||
|
||||
.Media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&-figure {
|
||||
margin-right: 1.4rem;
|
||||
}
|
||||
|
||||
&-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user