BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 64c9d780 by Annabel Dunstone Gray
Options

Merge branch 'refactor-responsive-tables-for-nested-error' into 'master'

Refactor responsive table styles to support nested error block See merge request gitlab-org/gitlab-ce!15145
parents 6a5e8f10 83200405
Showing with 103 additions and 77 deletions
app/assets/javascripts/environments/components/environment_item.vue
......@@ -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>
......
app/assets/stylesheets/framework.scss
......@@ -56,4 +56,4 @@
@import "framework/icons";
@import "framework/snippets";
@import "framework/memory_graph";
@import "framework/responsive-tables";
@import "framework/responsive_tables";
app/assets/stylesheets/framework/common.scss
......@@ -5,32 +5,6 @@
.cgreen { color: $common-green; }
.cdark { color: $common-gray-dark; }
/** 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; }
......@@ -448,3 +422,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; }
app/assets/stylesheets/framework/responsive-tables.scss → app/assets/stylesheets/framework/responsive_tables.scss
......@@ -3,57 +3,74 @@
max-width: #{$max + '%'};
}
.gl-responsive-table-row-layout {
width: 100%;
@media (min-width: $screen-md-min) {
display: flex;
align-items: center;
& > &: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) {
padding: 15px 0;
margin: 0;
display: flex;
align-items: center;
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;
.table-section {
white-space: nowrap;
$section-widths: 10 15 20 25 30 40;
@each $width in $section-widths {
&.section-#{$width} {
flex: 0 0 #{$width + '%'};
$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 (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;
@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;
}
}
&:not(:first-child) {
border-top: 1px solid $white-normal;
}
}
&.section-wrap {
white-space: normal;
&.section-wrap {
white-space: normal;
@media (max-width: $screen-sm-max) {
flex-wrap: wrap;
}
@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 {
......
app/assets/stylesheets/pages/clusters.scss
......@@ -2,8 +2,4 @@
.clipboard-addon {
background-color: $white-light;
}
.alert-block {
margin-bottom: 10px;
}
}
app/assets/stylesheets/pages/environments.scss
......@@ -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;
}
}
......
app/assets/stylesheets/pages/pipelines.scss
......@@ -31,7 +31,6 @@
}
.pipeline-actions {
padding-right: 0;
min-width: 170px; //Guarantees buttons don't break in several lines.
.btn-default {
......
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