External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-28 22:35:08 -02:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #672 from jaredevantabor/settings

Browse Source 
Setup Menu cards styling
This commit is contained in:
jaredevantabor
2016-01-21 07:48:27 -08:00
parent 380cf51f02 6ba646aa72
commit edb807f6c3
9 changed files with 107 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/client/legacy-styles/forms.less
View File

@@ -1,9 +1,9 @@
/********************************************* /*********************************************
* Copyright (c) 2016 Ansible, Inc. * Copyright (c) 2016 Ansible, Inc.
* *
* lists.less * Forms.less
* *
* custom styles for generated lists * custom styles for generated forms
* *
*/ */

3
awx/ui/client/src/forms/LicenseForm.js
View File

@@ -17,8 +17,9 @@ export default
name: 'license', name: 'license',
well: false, well: false,
editTitle: "License",
licensetabs: [{ licenseTabs: [{
name: 'license', name: 'license',
label: 'License' label: 'License'
}, { }, {

2
awx/ui/client/src/management-jobs/list/list.partial.html
View File

@@ -1,3 +1,3 @@
<div class="tab-pane" id="management_jobs"> <div class="tab-pane" id="management_jobs">
<div ng-cloak id="htmlTemplate"></div> <div ng-cloak id="htmlTemplate" class="Panel"></div>
</div> </div>

1
awx/ui/client/src/management-jobs/management-jobs.list.js
View File

@@ -10,6 +10,7 @@ export default function(){
iterator: 'configure_job', iterator: 'configure_job',
index: false, index: false,
hover: true, hover: true,
listTitle: 'Management Jobs',
fields: { fields: {
name: { name: {

4
awx/ui/client/src/partials/license.html
View File

@@ -1,4 +1,4 @@
<div class="tab-pane" id="license-partial"> <div class="tab-pane" id="license-partial">
<div ng-cloak id="htmlTemplate"></div> <div ng-cloak id="htmlTemplate" class="Panel"></div>
<div id="license-modal-dialog"></div> <div id="license-modal-dialog"></div>
</div> </div>

154
awx/ui/client/src/setup-menu/setup-item.block.less
View File

@@ -1,103 +1,73 @@
/** @define SetupItem */ /** @define SetupItem */
@import '../shared/branding/colors.less'; @import '../shared/branding/colors.less';
@import '../shared/branding/colors.default.less';
.SetupItem { .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; .SetupItem:hover {
@icon-large-size: 3.4rem; background-color: @btn-bg-hov;
}
&--aside { .SetupItem-title{
padding-bottom: @vertical-basis / 2; 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; .SetupItem :nth-child(4n+4) {
margin-right: 0px;
padding: @vertical-basis 0; }
}
display: block;
@media (min-width: 901px) and (max-width: 1178px) {
color: black; .SetupItem {
transition: background-color 0.15s ease-in-out; width: ~"calc(33% - 11px)";
background-color: white; margin-right: 20px;
}
&:hover, &:focus, &:active {
color: black; .SetupItem:nth-child(3n+3) {
margin-right: 0px;
.SetupItem-title { }
text-decoration: underline; }
}
} @media (min-width: 616px) and (max-width: 900px) {
.SetupItem {
&--hoverable { width: ~"calc(50% - 10px)";
&:hover { margin-right: 20px;
background-color: lighten(@ansible-red, 28%); }
}
} .SetupItem:nth-child(2n+2) {
margin-right: 0px;
&-icon { }
}
&--aside {
align-self: flex-start; @media (max-width: 615px) {
margin-top: 3px; .SetupItem {
} width: 100%;
margin-right: 0px;
// 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;
} }
} }

5
awx/ui/client/src/setup-menu/setup-menu.block.less
View File

@@ -6,8 +6,9 @@
.SetupMenu { .SetupMenu {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
display: flex;
flex-wrap: wrap;
@media screen and (max-width: @menu-breakpoint) { @media screen and (max-width: @menu-breakpoint) {
margin-left: -1rem; margin-left: 0px;
} }
} }

90
awx/ui/client/src/setup-menu/setup-menu.partial.html
View File

@@ -1,84 +1,52 @@
<section id="htmlTemplate" class="Container"> <section id="htmlTemplate" class="Container">
<nav class="SetupMenu Container-main"> <div class="SetupMenu">
<a ui-sref="credentials" class="SetupItem HoverIcon"> <a ui-sref="credentials" class="SetupItem">
<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">
<h4 class="SetupItem-title">Credentials</h4> <h4 class="SetupItem-title">Credentials</h4>
<p class="SetupItem-description"> <p class="SetupItem-description">
Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or when syncing inventories or projects. Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or when syncing inventories or projects.
</p> </p>
</div> </a>
</div> <a ui-sref="users" class="SetupItem">
</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">
<h4 class="SetupItem-title">Users</h4> <h4 class="SetupItem-title">Users</h4>
<p class="SetupItem-description"> <p class="SetupItem-description">
Allow others to sign into Tower and own the content they create. Allow others to sign into Tower and own the content they create.
</p> </p>
</div> </a>
</div> <a ui-sref="teams" class="SetupItem">
</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">
<h4 class="SetupItem-title">Teams</h4> <h4 class="SetupItem-title">Teams</h4>
<p class="SetupItem-description"> <p class="SetupItem-description">
Split up your organization to associate content and control permissions for groups. Split up your organization to associate content and control permissions for groups.
</p> </p>
</div> </a>
</div> <a ui-sref="organizations" class="SetupItem">
</a> <h4 class="SetupItem-title ">Organizations</h4>
</nav> <p class="SetupItem-description">
<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">
Group all of your content to manage permissions across departments in your company. Group all of your content to manage permissions across departments in your company.
</p> </p>
</div>
</a> </a>
<a ui-sref="managementJobsList" class="SetupItem SetupItem--aside HoverIcon Media" ng-if="user_is_superuser"> <a ui-sref="managementJobsList" class="SetupItem" ng-if="user_is_superuser">
<i class="HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--color Media-figure SetupItem-icon SetupItem-icon--aside"> <h4 class="SetupItem-title">Management Jobs</h4>
<aw-icon name="ManagementJobs"></aw-icon> <p class="SetupItem-description">
</i>
<div class="Media-block">
<h4 class="SetupItem-title SetupItem-title--aside">Management Jobs</h4>
<p class="SetupItem-description SetupItem-description--aside">
Manage the cleanup of old job history, activity streams, data marked for deletion, and system tracking info. Manage the cleanup of old job history, activity streams, data marked for deletion, and system tracking info.
</div> </p>
</a> </a>
<a ui-sref="inventoryScripts" class="SetupItem SetupItem--aside HoverIcon Media"> <a ui-sref="inventoryScripts" class="SetupItem">
<i class="HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--color Media-figure SetupItem-icon SetupItem-icon--aside "> <h4 class="SetupItem-title">Inventory Scripts</h4>
<aw-icon name="InventoryScripts"></aw-icon> <p class="SetupItem-description">
</i>
<div class="Media-block">
<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 source. Create and edit scripts to dynamically load hosts from any source.
</div> </p>
</a> </a>
<a ui-sref="license" class="SetupItem SetupItem--button SetupItem--aside SetupItem--noIcon"> <a ui-sref="license" class="SetupItem">
<h4 class="SetupItem-title SetupItem-title--aside">View Your License</h4> <h4 class="SetupItem-title">View Your License</h4>
<p class="SetupItem-description">
View and edit your license information.
</p>
</a> </a>
<button ng-click="showAboutModal()" class="SetupItem SetupItem--button SetupItem--aside SetupItem--noIcon"> <button ng-click="showAboutModal()" class="SetupItem">
<h4 class="SetupItem-title SetupItem-title--aside">About Tower</h4> <h4 class="SetupItem-title">About Tower</h4>
<p class="SetupItem-description">
View information about this version of Ansible Tower.
</p>
</button> </button>
</nav> </div>
</aside>
</section> </section>

8
awx/ui/client/src/shared/form-generator.js
View File

@@ -1487,8 +1487,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
if (this.form.licenseTabs) { if (this.form.licenseTabs) {
html += "<ul id=\"" + this.form.name + "_tabs\" class=\"nav nav-tabs\">\n"; html += "<ul id=\"" + this.form.name + "_tabs\" class=\"nav nav-tabs\">\n";
for (i = 0; i < this.form.tabs.length; i++) { for (i = 0; i < this.form.licenseTabs.length; i++) {
tab = this.form.tabs[i]; tab = this.form.licenseTabs[i];
html += "<li"; html += "<li";
if (i === 0) { if (i === 0) {
html += " class=\"active\""; html += " class=\"active\"";
@@ -1498,8 +1498,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
} }
html += "</ul>\n"; html += "</ul>\n";
html += "<div class=\"tab-content\">\n"; html += "<div class=\"tab-content\">\n";
for (i = 0; i < this.form.tabs.length; i++) { for (i = 0; i < this.form.licenseTabs.length; i++) {
tab = this.form.tabs[i]; tab = this.form.licenseTabs[i];
html += "<div class=\"tab-pane"; html += "<div class=\"tab-pane";
if (i === 0) { if (i === 0) {
html += " active"; html += " active";