Refactor responsive table styles to support nested error block
- Split layout from the styles of the row
- Move command `.append-` `.prepend-` styles to bottom of source order
- Actually applies styles over others in more situations which is
probably what is expected when you add it to an element
- Also allows us to get rid of some styles that were trying to get
around this fact
See https://i.imgur.com/IE50PK6.png
Which is used in
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15064
Design from https://gitlab.com/gitlab-org/gitlab-ce/issues/38464
This commit is contained in:
Eric Eastwood
parent
bba020a56c
commit
83200405b2
7 changed files with 116 additions and 90 deletions
|
|
@ -421,7 +421,11 @@ export default {
|
|||
</script>
|
||||
<template>
|
||||
<div
|
||||
:class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }"
|
||||
class="gl-responsive-table-row"
|
||||
:class="{
|
||||
'js-child-row environment-child-row': model.isChildren,
|
||||
'folder-row': model.isFolder,
|
||||
}"
|
||||
role="row">
|
||||
<div class="table-section section-10" role="gridcell">
|
||||
<div
|
||||
|
|
@ -495,15 +499,16 @@ export default {
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="table-section section-25" role="gridcell">
|
||||
<div
|
||||
v-if="!model.isFolder"
|
||||
class="table-section section-25" role="gridcell">
|
||||
<div
|
||||
v-if="!model.isFolder"
|
||||
role="rowheader"
|
||||
class="table-mobile-header">
|
||||
Commit
|
||||
</div>
|
||||
<div
|
||||
v-if="!model.isFolder && hasLastDeploymentKey"
|
||||
v-if="hasLastDeploymentKey"
|
||||
class="js-commit-component table-mobile-content">
|
||||
<commit-component
|
||||
:tag="commitTag"
|
||||
|
|
@ -514,21 +519,22 @@ export default {
|
|||
:author="commitAuthor"/>
|
||||
</div>
|
||||
<div
|
||||
v-if="!model.isFolder && !hasLastDeploymentKey"
|
||||
v-if="!hasLastDeploymentKey"
|
||||
class="commit-title table-mobile-content">
|
||||
No deployments yet
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-section section-10" role="gridcell">
|
||||
<div
|
||||
v-if="!model.isFolder"
|
||||
class="table-section section-10" role="gridcell">
|
||||
<div
|
||||
v-if="!model.isFolder"
|
||||
role="rowheader"
|
||||
class="table-mobile-header">
|
||||
Updated
|
||||
</div>
|
||||
<span
|
||||
v-if="!model.isFolder && canShowDate"
|
||||
v-if="canShowDate"
|
||||
class="environment-created-date-timeago table-mobile-content">
|
||||
{{createdDate}}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -56,4 +56,4 @@
|
|||
@import "framework/icons";
|
||||
@import "framework/snippets";
|
||||
@import "framework/memory_graph";
|
||||
@import "framework/responsive-tables";
|
||||
@import "framework/responsive_tables";
|
||||
|
|
|
|||
|
|
@ -8,32 +8,6 @@
|
|||
color: $gl-text-color-secondary;
|
||||
}
|
||||
|
||||
/** COMMON CLASSES **/
|
||||
.prepend-top-0 { margin-top: 0; }
|
||||
.prepend-top-5 { margin-top: 5px; }
|
||||
.prepend-top-10 { margin-top: 10px; }
|
||||
.prepend-top-default { margin-top: $gl-padding !important; }
|
||||
.prepend-top-20 { margin-top: 20px; }
|
||||
.prepend-left-4 { margin-left: 4px; }
|
||||
.prepend-left-5 { margin-left: 5px; }
|
||||
.prepend-left-10 { margin-left: 10px; }
|
||||
.prepend-left-default { margin-left: $gl-padding; }
|
||||
.prepend-left-20 { margin-left: 20px; }
|
||||
.append-right-5 { margin-right: 5px; }
|
||||
.append-right-8 { margin-right: 8px; }
|
||||
.append-right-10 { margin-right: 10px; }
|
||||
.append-right-default { margin-right: $gl-padding; }
|
||||
.append-right-20 { margin-right: 20px; }
|
||||
.append-bottom-0 { margin-bottom: 0; }
|
||||
.append-bottom-5 { margin-bottom: 5px; }
|
||||
.append-bottom-10 { margin-bottom: 10px; }
|
||||
.append-bottom-15 { margin-bottom: 15px; }
|
||||
.append-bottom-20 { margin-bottom: 20px; }
|
||||
.append-bottom-default { margin-bottom: $gl-padding; }
|
||||
.inline { display: inline-block; }
|
||||
.center { text-align: center; }
|
||||
.vertical-align-middle { vertical-align: middle; }
|
||||
|
||||
.underlined-link { text-decoration: underline; }
|
||||
.hint { font-style: italic; color: $hint-color; }
|
||||
.light { color: $common-gray; }
|
||||
|
|
@ -451,3 +425,30 @@ table {
|
|||
pointer-events: none;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/** COMMON CLASSES **/
|
||||
.prepend-top-0 { margin-top: 0; }
|
||||
.prepend-top-5 { margin-top: 5px; }
|
||||
.prepend-top-10 { margin-top: 10px; }
|
||||
.prepend-top-15 { margin-top: 15px; }
|
||||
.prepend-top-default { margin-top: $gl-padding !important; }
|
||||
.prepend-top-20 { margin-top: 20px; }
|
||||
.prepend-left-4 { margin-left: 4px; }
|
||||
.prepend-left-5 { margin-left: 5px; }
|
||||
.prepend-left-10 { margin-left: 10px; }
|
||||
.prepend-left-default { margin-left: $gl-padding; }
|
||||
.prepend-left-20 { margin-left: 20px; }
|
||||
.append-right-5 { margin-right: 5px; }
|
||||
.append-right-8 { margin-right: 8px; }
|
||||
.append-right-10 { margin-right: 10px; }
|
||||
.append-right-default { margin-right: $gl-padding; }
|
||||
.append-right-20 { margin-right: 20px; }
|
||||
.append-bottom-0 { margin-bottom: 0; }
|
||||
.append-bottom-5 { margin-bottom: 5px; }
|
||||
.append-bottom-10 { margin-bottom: 10px; }
|
||||
.append-bottom-15 { margin-bottom: 15px; }
|
||||
.append-bottom-20 { margin-bottom: 20px; }
|
||||
.append-bottom-default { margin-bottom: $gl-padding; }
|
||||
.inline { display: inline-block; }
|
||||
.center { text-align: center; }
|
||||
.vertical-align-middle { vertical-align: middle; }
|
||||
|
|
|
|||
|
|
@ -3,57 +3,74 @@
|
|||
max-width: #{$max + '%'};
|
||||
}
|
||||
|
||||
.gl-responsive-table-row {
|
||||
margin-top: 10px;
|
||||
border: 1px solid $border-color;
|
||||
.gl-responsive-table-row-layout {
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
padding: 15px 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-bottom: 1px solid $white-normal;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
white-space: nowrap;
|
||||
|
||||
$section-widths: 10 15 20 25 30 40;
|
||||
@each $width in $section-widths {
|
||||
&.section-#{$width} {
|
||||
flex: 0 0 #{$width + '%'};
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
max-width: #{$width + '%'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.table-button-footer) {
|
||||
@media (max-width: $screen-sm-max) {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
padding: 10px;
|
||||
align-items: center;
|
||||
min-height: 62px;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-top: 1px solid $white-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.section-wrap {
|
||||
white-space: normal;
|
||||
|
||||
@media (max-width: $screen-sm-max) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
& > &:not(:first-child) {
|
||||
margin-top: $gl-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gl-responsive-table-row {
|
||||
@extend .gl-responsive-table-row-layout;
|
||||
margin-top: 10px;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
margin: 0;
|
||||
padding: $gl-padding 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid $white-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-responsive-table-row-col-span {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
white-space: nowrap;
|
||||
|
||||
$section-widths: 10 15 20 25 30 40 100;
|
||||
@each $width in $section-widths {
|
||||
&.section-#{$width} {
|
||||
flex: 0 0 #{$width + '%'};
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
max-width: #{$width + '%'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $screen-sm-max) {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
padding: 10px;
|
||||
align-items: center;
|
||||
min-height: 62px;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $white-normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.section-wrap {
|
||||
white-space: normal;
|
||||
|
||||
@media (max-width: $screen-sm-max) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.section-align-top {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.table-button-footer {
|
||||
@media (min-width: $screen-md-min) {
|
||||
|
|
@ -61,12 +78,13 @@
|
|||
}
|
||||
|
||||
@media (max-width: $screen-sm-max) {
|
||||
background-color: $gray-normal;
|
||||
display: block;
|
||||
align-self: stretch;
|
||||
min-height: 0;
|
||||
background-color: $gray-normal;
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
.table-action-buttons {
|
||||
padding: 10px 5px;
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
|
|
@ -77,7 +95,14 @@
|
|||
> .external-url,
|
||||
> .btn {
|
||||
flex: 1 1 28px;
|
||||
margin: 0 5px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-new {
|
||||
|
|
@ -2,8 +2,4 @@
|
|||
.clipboard-addon {
|
||||
background-color: $white-light;
|
||||
}
|
||||
|
||||
.alert-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,12 +133,11 @@
|
|||
}
|
||||
|
||||
.folder-row {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid $white-normal;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
||||
@media (max-width: $screen-sm-max) {
|
||||
border-top: 1px solid $white-normal;
|
||||
margin-top: 10px;
|
||||
@media (min-width: $screen-sm-max) {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
}
|
||||
|
||||
.pipeline-actions {
|
||||
padding-right: 0;
|
||||
min-width: 170px; //Guarantees buttons don't break in several lines.
|
||||
|
||||
.btn-default {
|
||||
|
|
|
|||
Loading…
Reference in a new issue