rancher
/
dashboard
mirror of https://github.com/rancher/dashboard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #692 from lvuch/lh-0526 

spacing in detail top
This commit is contained in:
Vincent Fiduccia 2020-06-02 11:32:36 -07:00 committed by GitHub
parent b6880351b3 3043488514
commit 4373728030
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 190 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/base/_color.scss
View File

@ -15,6 +15,7 @@
$hover-text: get-or-def($color, "hover-text", saturate($link, 20%));
$active-text: get-or-def($color, "active-text", contrast-color($active-bg));
$border: get-or-def($color, "border", $color);
$banner-bg: get-or-def($color, "banner", rgba($default, 0.15));
--#{$name}: #{$default};
--#{$name}-text: #{$default-text};
@ -23,6 +24,7 @@
--#{$name}-active-bg: #{$active-bg};
--#{$name}-active-text: #{$active-text};
--#{$name}-border: #{$border};
--#{$name}-banner-bg: #{$banner-bg};
@if $write-classes {
.text-#{$name} {

2
assets/styles/base/_helpers.scss
View File

@ -30,7 +30,7 @@ $spacing-property-map: (
}
.spacer {
padding: 20px 0 0 0;
padding: 40px 0 0 0;
}
.pull-right {

5
assets/styles/base/_typography.scss
View File

@ -7,7 +7,7 @@ H1, H2, H3, H4, H5, H6 {
font-style: normal;
font-weight: 400;
letter-spacing: 0em;
margin: 0;
margin: 0 0 10px 0;
}
H1 {
@ -24,19 +24,16 @@ H3 {
H4 {
font-size: 16px;
font-weight: 300;
}
H5 {
font-size: 14px;
font-weight: 300;
}
H6 {
font-size: 12px;
letter-spacing: .25em;
text-transform: uppercase;
font-weight: 300;
}
P {

7
assets/styles/global/_form.scss
View File

@ -36,6 +36,7 @@ TEXTAREA,
&.view {
border: none;
background-color: transparent;
padding: 0;
}
&::placeholder {
@ -57,9 +58,9 @@ TEXTAREA,
margin: $spacing 0 $spacing 0;
}
&.no-resize::placeholder {
padding-top: 8px;
}
// &.no-resize::placeholder {
// padding-top: 8px;
// }
}
TEXTAREA {

16
assets/styles/themes/_light.scss
View File

@ -20,14 +20,14 @@ $lighter : #F4F5FA;
//light body bg
$lightest : #FFFFFF;
$primary : #3D98D3;
$secondary : $darker;
$link : $primary;
$disabled : $dark;
$success : #5D995D;
$warning : #DAC342;
$error : #F64747;
$info : #213444;
$primary : #3D98D3;
$secondary : $darker;
$link : $primary;
$disabled : $dark;
$success : #5D995D;
$warning : #DAC342;
$error : #F64747;
$info : #213444;
$contrasted-dark: $darkest !default;
$contrasted-light: $lightest !default;

74
components/Banner.vue Normal file
View File

@ -0,0 +1,74 @@
<script>
export default {
props: {
color: {
type: String,
default: 'secondary'
},
label: {
type: String,
default: null,
},
labelKey: {
type: String,
default: null,
},
}
};
</script>
<template>
<div class="banner" :class="{[color]: true}">
<slot>
<t v-if="labelKey" :k="labelKey" />
<template v-else>
{{ label }}
</template>
</slot>
</div>
</template>
<style lang="scss" scoped>
.banner {
padding: 10px;
margin: 15px 0;
width: 100%;
border-radius: var(--border-radius);
transition: all 0.2s ease;
&.primary {
background: var(--primary);
border: solid 1px var(--primary);
color: var(--body-text);
}
&.secondary {
background: var(--secondary-banner-bg);
border: solid 1px var(--secondary);
color: var(--body-text);
}
&.success {
background: var(--success-banner-bg);
border: solid 1px var(--success);
color: var(--body-text);
}
&.info {
background: var(--info-banner-bg);
border: solid 1px var(--info);
color: var(--body-text);
}
&.warning {
background: var(--warning-banner-bg);
border: solid 1px var(--warning);
color: var(--body-text);
}
&.error {
background: var(--error-banner-bg);
border: solid 1px (--error);
color: var(--error);
}
}
</style>

8
components/ContainerResourceLimit.vue
View File

@ -102,11 +102,9 @@ export default {
<template>
<div>
<div class="row mb-5 pl-10">
<div class="col span-12">
<p class="helper-text mb-10">
<t v-if="mode === viewMode" k="containerResourceLimit.helpTextDetail" />
<t v-else k="containerResourceLimit.helpText" />
</p>
<div class="banner secondary">
<t v-if="mode === viewMode" k="containerResourceLimit.helpTextDetail" />
<t v-else k="containerResourceLimit.helpText" />
</div>
</div>
<div class="row">

4
components/InfoBoxCluster.vue
View File

@ -169,7 +169,7 @@ export default {
</label>
<PercentageBar :value="nodeUsageReserved.percentage" />
</div>
<div class="info-column-data mb-10">
<div class="info-column-data">
<label>
<t
k="infoBoxCluster.used"
@ -196,7 +196,7 @@ export default {
</label>
<PercentageBar :value="nodeUsageMemReserved.percentage" />
</div>
<div class="info-column-data mb-10">
<div class="info-column-data">
<label>
<t
k="infoBoxCluster.used"

1
components/PercentageBar.vue
View File

@ -64,6 +64,7 @@ export default {
.percentage {
vertical-align: middle;
width: 32px;
display: inline-block;
}
.bar {
vertical-align: -5px; // this will align percentage-text in the center without having to change the line height

2
components/RbacPermissions.vue
View File

@ -160,7 +160,7 @@ export default {
<template>
<div>
<div class="title clearfix">
<div class="clearfix">
<h4>{{ label }}</h4>
</div>

1
components/Tabbed/index.vue
View File

@ -126,7 +126,6 @@ export default {
<template>
<div>
<div class="spacer"></div>
<ul
ref="tablist"
role="tablist"

1
components/TabbedLinks/index.vue
View File

@ -32,7 +32,6 @@ export default {
<template>
<div>
<div class="spacer"></div>
<ul
v-if="tabs !== null && tabs.length > 0"
role="tablist"

2
components/form/ArrayList.vue
View File

@ -181,7 +181,7 @@ export default {
<template>
<div>
<div v-if="title" class="title clearfix">
<div v-if="title" class="clearfix">
<h4>{{ title }} <i v-if="protip" v-tooltip="protip" class="icon icon-info" style="font-size: 12px" /></h4>
</div>

4
components/form/KeyValue.vue
View File

@ -352,7 +352,7 @@ export default {
<template>
<div class="key-value" :class="mode">
<div v-if="title" class="title clearfix">
<div v-if="title" class="clearfix">
<h4 :style="{'display':'flex'}">
{{ title }} <i v-if="protip" v-tooltip="protip" class="icon icon-info" style="font-size: 12px" />
</h4>
@ -493,7 +493,6 @@ export default {
TD, TH {
padding-right: $spacing;
padding-bottom: $spacing;
&:last-of-type {
padding-right: 0;
@ -526,6 +525,7 @@ export default {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline;
}
label {

2
components/form/Ports.vue
View File

@ -107,7 +107,7 @@ export default {
<template>
<div>
<div class="spacer"></div>
<div class="title clearfix">
<div class="clearfix">
<h4>Ports</h4>
</div>

2
components/form/Probe.vue
View File

@ -153,7 +153,7 @@ export default {
<template>
<div>
<div class="title clearfix">
<div class="clearfix">
<h4 :style="{'display':'flex'}">
{{ label }}
<i v-if="description" v-tooltip="description" class="icon icon-info" style="font-size: 12px" />

2
components/form/ServicePorts.vue
View File

@ -108,7 +108,7 @@ export default {
<template>
<div>
<div class="title clearfix">
<div class="clearfix">
<h4>
<t k="servicePorts.header.label" />
</h4>

2
components/form/Target.vue
View File

@ -180,7 +180,7 @@ export default {
<div class="spacer"></div>
<div>
<div class="title clearfix">
<div class="clearfix">
<h4>Target</h4>
</div>
<div v-if="mode === 'view'">

2
components/form/TextAreaAutoGrow.vue
View File

@ -8,7 +8,7 @@ export default {
props: {
minHeight: {
type: Number,
default: 44,
default: 55,
},
maxHeight: {
type: Number,

2
components/nav/WindowManager/Window.vue
View File

@ -55,7 +55,7 @@ export default {
<template>
<div class="window">
<div class="title clearfix">
<div class="clearfix">
<slot name="title" />
</div>
<div class="body clearfix">

2
edit/rio.cattle.io.service/Permissions.vue
View File

@ -122,7 +122,7 @@ export default {
<template>
<div>
<div class="title clearfix">
<div class="clearfix">
<h4>{{ label }}</h4>
</div>

2
edit/service.vue
View File

@ -167,7 +167,7 @@ export default {
<div class="spacer"></div>
<div v-if="checkTypeIs('ExternalName')">
<div class="title clearfix">
<div class="clearfix">
<h4>
<t k="servicesPage.externalName.label" />
</h4>

2
edit/workload/WorkloadPorts.vue
View File

@ -104,7 +104,7 @@ export default {
<template>
<div>
<div class="spacer"></div>
<div class="title clearfix">
<div class="clearfix">
<h4>Ports</h4>
</div>

9
shared/gatekeeper-constraint.vue
View File

@ -212,11 +212,10 @@ export default {
</template>
</NameNsDescription>
</div>
<br />
<div class="spacer"></div>
<div v-if="isView">
<h2>{{ t('gatekeeperConstraint.violations.title') }}</h2>
<GatekeeperViolationsTable :constraint="value" />
<br />
</div>
<div>
<h2 class="parameters">
@ -243,7 +242,7 @@ export default {
:protip="false"
/>
</div>
<br />
<div class="spacer"></div>
<div>
<h2>{{ t('gatekeeperConstraint.enforcementAction.title') }}</h2>
<RadioGroup
@ -255,11 +254,9 @@ export default {
@input="e=>value.spec.enforcementAction = e"
/>
</div>
<br />
<br />
<div class="spacer"></div>
<div class="match">
<h2>{{ t('gatekeeperConstraint.match.title') }}</h2>
<ResourceTabs v-model="value" :mode="mode" default-tab="labels">
<template #before>
<Tab name="namespaces" :label="t('gatekeeperConstraint.tab.namespaces.title')">

9
shared/networking.k8s.io.ingress/DefaultBackend.vue
View File

@ -2,9 +2,12 @@
import LabeledInput from '@/components/form/LabeledInput';
import LabeledSelect from '@/components/form/LabeledSelect';
import { _VIEW } from '@/config/query-params';
import Banner from '@/components/Banner';
export default {
components: { LabeledInput, LabeledSelect },
components: {
LabeledInput, LabeledSelect, Banner
},
props: {
value: {
@ -48,9 +51,7 @@ export default {
<template>
<div>
<div class="row text-warning" :class="{'pl-10': isView}">
Warning: Default backend is used globally for the entire cluster.
</div>
<Banner color="warning" label="Warning: Default backend is used globally for the entire cluster." />
<div class="row">
<div class="col span-4">
<LabeledSelect v-model="serviceName" :mode="mode" label="Target Service" :options="targets" @input="update" />

29
stories/DesignSystemsAlertBanners.stories.mdx Normal file
View File

@ -0,0 +1,29 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
<Meta title='Design Systems' />
# Alerts: Banners
<Preview>
<Story name="Alerts: Banners">
{{
components: {},
template: `
<div class="banner primary">
This is a banner
</div>
<div class="banner secondary">
This is a banner
</div>
<div class="banner success">
This is a banner
</div>
<div class="banner warning">
This is a banner
</div>
<div class="banner error">
This is a banner
</div>`
}}
</Story>
</Preview>

44
stories/DesignSystemsGrid.stories.mdx Normal file
View File

@ -0,0 +1,44 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
<Meta title='Design Systems' />
# Grid System
<Preview>
<Story name="Grid System">
{{
components: {},
template: `
<div class="row">
<div class="col span-2">
This is a column
</div>
</div>
<div class="row">
<div class="col span-2">
This is a column
</div>
</div>
<div class="row">
<div class="col span-2">
This is a column
</div>
</div>
<div class="row">
<div class="col span-2">
This is a column
</div>
</div>
<div class="row">
<div class="col span-2">
This is a column
</div>
</div>
<div class="row">
<div class="col span-2">
This is a column
</div>
</div>`
}}
</Story>
</Preview>