mirror of
https://github.com/ansible/awx.git
synced 2026-01-15 03:40:42 -03:30
Merge pull request #672 from jaredevantabor/settings
Setup Menu cards styling
This commit is contained in:
jaredevantabor
commit
edb807f6c3
@ -1,9 +1,9 @@
|
||||
/*********************************************
|
||||
* Copyright (c) 2016 Ansible, Inc.
|
||||
*
|
||||
* lists.less
|
||||
* Forms.less
|
||||
*
|
||||
* custom styles for generated lists
|
||||
* custom styles for generated forms
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
@ -17,8 +17,9 @@ export default
|
||||
|
||||
name: 'license',
|
||||
well: false,
|
||||
editTitle: "License",
|
||||
|
||||
licensetabs: [{
|
||||
licenseTabs: [{
|
||||
name: 'license',
|
||||
label: 'License'
|
||||
}, {
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="tab-pane" id="management_jobs">
|
||||
<div ng-cloak id="htmlTemplate"></div>
|
||||
<div ng-cloak id="htmlTemplate" class="Panel"></div>
|
||||
</div>
|
||||
|
||||
@ -10,6 +10,7 @@ export default function(){
|
||||
iterator: 'configure_job',
|
||||
index: false,
|
||||
hover: true,
|
||||
listTitle: 'Management Jobs',
|
||||
|
||||
fields: {
|
||||
name: {
|
||||
@ -22,7 +23,7 @@ export default function(){
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
||||
|
||||
},
|
||||
fieldActions: {
|
||||
submit: {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="tab-pane" id="license-partial">
|
||||
<div ng-cloak id="htmlTemplate"></div>
|
||||
<div class="tab-pane" id="license-partial">
|
||||
<div ng-cloak id="htmlTemplate" class="Panel"></div>
|
||||
<div id="license-modal-dialog"></div>
|
||||
</div>
|
||||
|
||||
@ -1,103 +1,73 @@
|
||||
/** @define SetupItem */
|
||||
|
||||
@import '../shared/branding/colors.less';
|
||||
@import '../shared/branding/colors.default.less';
|
||||
|
||||
.SetupItem {
|
||||
background-color: @panel-bg;
|
||||
border-radius: 5px;
|
||||
border: 1px solid @btn-bord;
|
||||
min-height: 110px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
@icon-small-size: 2.4rem;
|
||||
@icon-large-size: 3.4rem;
|
||||
.SetupItem:hover {
|
||||
background-color: @btn-bg-hov;
|
||||
}
|
||||
|
||||
&--aside {
|
||||
padding-bottom: @vertical-basis / 2;
|
||||
.SetupItem-title{
|
||||
font-size: 14px;
|
||||
color: #848992;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.SetupItem-description{
|
||||
font-size: 12px;
|
||||
color: #848992;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1179px) {
|
||||
.SetupItem {
|
||||
width: ~"calc(25% - 20px)";
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@vertical-basis: 1.4rem;
|
||||
|
||||
padding: @vertical-basis 0;
|
||||
|
||||
display: block;
|
||||
|
||||
color: black;
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
background-color: white;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
color: black;
|
||||
|
||||
.SetupItem-title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&--hoverable {
|
||||
&:hover {
|
||||
background-color: lighten(@ansible-red, 28%);
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
|
||||
&--aside {
|
||||
align-self: flex-start;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
// For some reason, credentials
|
||||
// icon is taking up more space
|
||||
// than it should; need to adjust
|
||||
// it manually to line it up with
|
||||
// others
|
||||
&--credentials {
|
||||
width: 4.3rem;
|
||||
margin-left: -0.8rem;
|
||||
}
|
||||
|
||||
// HACK: IE11 does not respect a fluid height for svg
|
||||
// elements; explicitly setting for now
|
||||
svg {
|
||||
max-height: 33px;
|
||||
}
|
||||
|
||||
flex: none; // do not let the flex container adjust this width!
|
||||
width: @icon-large-size;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&--noIcon {
|
||||
margin-left: @icon-large-size + 1.4rem; // 1.4rem comes from Media-figure margin
|
||||
}
|
||||
|
||||
&--button {
|
||||
border: 0;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
.SetupItem-icon {
|
||||
// width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// flexbox bug in firefox: you can't make a button display:flex
|
||||
// https://github.com/philipwalton/flexbugs#9-button-elements-cant-be-flex-containers
|
||||
&-firefoxFlexButtonFix {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-title {
|
||||
&--aside {
|
||||
font-size: 1.9rem;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
font-size: 2.8rem;
|
||||
padding-bottom: 0.4rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-description {
|
||||
&--aside {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
color: black;
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
.SetupItem :nth-child(4n+4) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) and (max-width: 1178px) {
|
||||
.SetupItem {
|
||||
width: ~"calc(33% - 11px)";
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.SetupItem:nth-child(3n+3) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 616px) and (max-width: 900px) {
|
||||
.SetupItem {
|
||||
width: ~"calc(50% - 10px)";
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.SetupItem:nth-child(2n+2) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 615px) {
|
||||
.SetupItem {
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,9 @@
|
||||
.SetupMenu {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@media screen and (max-width: @menu-breakpoint) {
|
||||
margin-left: -1rem;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,84 +1,52 @@
|
||||
<section id="htmlTemplate" class="Container">
|
||||
<nav class="SetupMenu Container-main">
|
||||
<a ui-sref="credentials" class="SetupItem HoverIcon">
|
||||
<div class="Media">
|
||||
<i class="SetupItem-icon SetupItem-icon--credentials HoverIcon-icon HoverIcon-icon--color Media-figure">
|
||||
<aw-icon name="Credentials"></aw-icon>
|
||||
</i>
|
||||
<div class="Media-body">
|
||||
<div class="SetupMenu">
|
||||
<a ui-sref="credentials" class="SetupItem">
|
||||
<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 when syncing inventories or projects.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a ui-sref="users" class="SetupItem HoverIcon">
|
||||
<div class="Media">
|
||||
<i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
|
||||
<aw-icon name="Users"></aw-icon>
|
||||
</i>
|
||||
<div class="Media-body">
|
||||
</a>
|
||||
<a ui-sref="users" class="SetupItem">
|
||||
<h4 class="SetupItem-title">Users</h4>
|
||||
<p class="SetupItem-description">
|
||||
Allow others to sign into Tower and own the content they create.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a ui-sref="teams" class="SetupItem HoverIcon">
|
||||
<div class="Media">
|
||||
<i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
|
||||
<aw-icon name="Teams"></aw-icon>
|
||||
</i>
|
||||
<div class="Media-block">
|
||||
</a>
|
||||
<a ui-sref="teams" class="SetupItem">
|
||||
<h4 class="SetupItem-title">Teams</h4>
|
||||
<p class="SetupItem-description">
|
||||
Split up your organization to associate content and control permissions for groups.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
<aside class="Container-aside">
|
||||
<nav class="SetupMenu Menu Menu--vertical">
|
||||
<a ui-sref="organizations" class="SetupItem SetupItem--aside HoverIcon Media">
|
||||
<i class="HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--color Media-figure SetupItem-icon SetupItem-icon--aside ">
|
||||
<aw-icon name="Organizations"></aw-icon>
|
||||
</i>
|
||||
<div class="Media-block">
|
||||
<h4 class="SetupItem-title SetupItem-title--aside">Organizations</h4>
|
||||
<p class="SetupItem-description SetupItem-description--aside">
|
||||
</a>
|
||||
<a ui-sref="organizations" class="SetupItem">
|
||||
<h4 class="SetupItem-title ">Organizations</h4>
|
||||
<p class="SetupItem-description">
|
||||
Group all of your content to manage permissions across departments in your company.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a ui-sref="managementJobsList" class="SetupItem SetupItem--aside HoverIcon Media" ng-if="user_is_superuser">
|
||||
<i class="HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--color Media-figure SetupItem-icon SetupItem-icon--aside">
|
||||
<aw-icon name="ManagementJobs"></aw-icon>
|
||||
</i>
|
||||
<div class="Media-block">
|
||||
<h4 class="SetupItem-title SetupItem-title--aside">Management Jobs</h4>
|
||||
<p class="SetupItem-description SetupItem-description--aside">
|
||||
<a ui-sref="managementJobsList" class="SetupItem" ng-if="user_is_superuser">
|
||||
<h4 class="SetupItem-title">Management Jobs</h4>
|
||||
<p class="SetupItem-description">
|
||||
Manage the cleanup of old job history, activity streams, data marked for deletion, and system tracking info.
|
||||
</div>
|
||||
</p>
|
||||
</a>
|
||||
<a ui-sref="inventoryScripts" class="SetupItem SetupItem--aside HoverIcon Media">
|
||||
<i class="HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--color Media-figure SetupItem-icon SetupItem-icon--aside ">
|
||||
<aw-icon name="InventoryScripts"></aw-icon>
|
||||
</i>
|
||||
<div class="Media-block">
|
||||
<h4 class="SetupItem-title SetupItem-title--aside">Inventory Scripts</h4>
|
||||
<p class="SetupItem-description SetupItem-description--aside">
|
||||
<a ui-sref="inventoryScripts" class="SetupItem">
|
||||
<h4 class="SetupItem-title">Inventory Scripts</h4>
|
||||
<p class="SetupItem-description">
|
||||
Create and edit scripts to dynamically load hosts from any source.
|
||||
</div>
|
||||
</p>
|
||||
</a>
|
||||
<a ui-sref="license" class="SetupItem SetupItem--button SetupItem--aside SetupItem--noIcon">
|
||||
<h4 class="SetupItem-title SetupItem-title--aside">View Your License</h4>
|
||||
<a ui-sref="license" class="SetupItem">
|
||||
<h4 class="SetupItem-title">View Your License</h4>
|
||||
<p class="SetupItem-description">
|
||||
View and edit your license information.
|
||||
</p>
|
||||
</a>
|
||||
<button ng-click="showAboutModal()" class="SetupItem SetupItem--button SetupItem--aside SetupItem--noIcon">
|
||||
<h4 class="SetupItem-title SetupItem-title--aside">About Tower</h4>
|
||||
<button ng-click="showAboutModal()" class="SetupItem">
|
||||
<h4 class="SetupItem-title">About Tower</h4>
|
||||
<p class="SetupItem-description">
|
||||
View information about this version of Ansible Tower.
|
||||
</p>
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1487,8 +1487,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
|
||||
|
||||
if (this.form.licenseTabs) {
|
||||
html += "<ul id=\"" + this.form.name + "_tabs\" class=\"nav nav-tabs\">\n";
|
||||
for (i = 0; i < this.form.tabs.length; i++) {
|
||||
tab = this.form.tabs[i];
|
||||
for (i = 0; i < this.form.licenseTabs.length; i++) {
|
||||
tab = this.form.licenseTabs[i];
|
||||
html += "<li";
|
||||
if (i === 0) {
|
||||
html += " class=\"active\"";
|
||||
@ -1498,8 +1498,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
|
||||
}
|
||||
html += "</ul>\n";
|
||||
html += "<div class=\"tab-content\">\n";
|
||||
for (i = 0; i < this.form.tabs.length; i++) {
|
||||
tab = this.form.tabs[i];
|
||||
for (i = 0; i < this.form.licenseTabs.length; i++) {
|
||||
tab = this.form.licenseTabs[i];
|
||||
html += "<div class=\"tab-pane";
|
||||
if (i === 0) {
|
||||
html += " active";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user