Commit c28ba2af authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Merge branch '332072-update-policy-editor-styling' into 'master'

Update styling on policy editor page

See merge request gitlab-org/gitlab!62970
parents 5b3203f7 6afd8ac9
......@@ -97,7 +97,7 @@ export default {
<section>
<div class="gl-mb-5 gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base">
<gl-form-group
class="gl-px-5 gl-py-3 gl-mb-0 gl-bg-gray-10 gl-border-b-solid gl-border-b-gray-100 gl-border-b-1"
class="gl-px-5 gl-py-3 gl-mb-0 gl-bg-gray-10 gl-border-b-solid gl-border-b-gray-100 gl-border-b-1 gl-rounded-top-base"
>
<gl-segmented-control
:options="editorModes"
......@@ -106,7 +106,7 @@ export default {
/>
</gl-form-group>
<div class="gl-display-flex gl-sm-flex-direction-column">
<section class="gl-w-full gl-p-5 gl-flex-fill-4 policy-table-left">
<section class="gl-w-full gl-p-5">
<div v-if="shouldShowRuleEditor" data-testid="rule-editor">
<slot name="rule-editor"></slot>
</div>
......@@ -120,7 +120,7 @@ export default {
</section>
<section
v-if="shouldShowRuleEditor"
class="gl-w-30p gl-p-5 gl-border-l-gray-100 gl-border-l-1 gl-border-l-solid gl-flex-fill-2"
class="gl-md-w-50p gl-md-max-w-30p gl-p-5 gl-border-l-gray-100 gl-border-l-1 gl-md-border-l-solid"
data-testid="rule-editor-preview"
>
<slot name="rule-editor-preview"></slot>
......
......@@ -43,18 +43,18 @@ export default {
<div
v-if="policyDescription"
v-safe-html:[$options.safeHtmlConfig]="policyDescription"
class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-py-3 gl-px-4 gl-border-1 gl-border-solid gl-border-gray-100"
class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-py-3 gl-px-4 gl-border-1 gl-border-solid gl-border-gray-100 gl-border-t-none!"
></div>
<div v-else>
<gl-alert variant="info" :dismissible="false"
>{{ $options.i18n.PARSING_ERROR_MESSAGE }}
<gl-alert variant="info" :dismissible="false">
{{ $options.i18n.PARSING_ERROR_MESSAGE }}
</gl-alert>
</div>
</gl-tab>
<gl-tab :title="s__('NetworkPolicies|.yaml')">
<pre class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none">{{
policyYaml
}}</pre>
<pre class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-border-t-none"
>{{ policyYaml }}
</pre>
</gl-tab>
</gl-tabs>
</template>
......@@ -10,6 +10,14 @@
align-items: flex-start;
}
.policy-editor .policy-table-left {
flex: 4;
.gl-md-max-w-30p {
@media (min-width: $breakpoint-md) {
max-width: 30%;
}
}
.gl-md-w-50p {
@media (min-width: $breakpoint-md) {
width: 50%;
}
}
......@@ -12,7 +12,7 @@ exports[`PolicyPreview component with policy description renders policy preview
titlelinkclass=""
>
<div
class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-py-3 gl-px-4 gl-border-1 gl-border-solid gl-border-gray-100"
class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-py-3 gl-px-4 gl-border-1 gl-border-solid gl-border-gray-100 gl-border-t-none!"
>
<strong>
bar
......@@ -27,9 +27,10 @@ exports[`PolicyPreview component with policy description renders policy preview
titlelinkclass=""
>
<pre
class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none"
class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-border-t-none"
>
foo
</pre>
</gl-tab-stub>
</gl-tabs-stub>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment