Skip to content

G
gitlab-ce
Commit 64c9d780 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray
Browse files
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
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 77 deletions
app/assets/javascripts/environments/components/environment_item.vue
View file @ 64c9d780
...@@ -421,7 +421,11 @@ export default { ...@@ -421,7 +421,11 @@ export default {
</script> </script>
<template> <template>
<div <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"> role="row">
<div class="table-section section-10" role="gridcell"> <div class="table-section section-10" role="gridcell">
<div <div
...@@ -495,15 +499,16 @@ export default { ...@@ -495,15 +499,16 @@ export default {
</a> </a>
</div> </div>
<div class="table-section section-25" role="gridcell"> <div
v-if="!model.isFolder"
class="table-section section-25" role="gridcell">
<div <div
v-if="!model.isFolder"
role="rowheader" role="rowheader"
class="table-mobile-header"> class="table-mobile-header">
Commit Commit
</div> </div>
<div <div
v-if="!model.isFolder && hasLastDeploymentKey" v-if="hasLastDeploymentKey"
class="js-commit-component table-mobile-content"> class="js-commit-component table-mobile-content">
<commit-component <commit-component
:tag="commitTag" :tag="commitTag"
...@@ -514,21 +519,22 @@ export default { ...@@ -514,21 +519,22 @@ export default {
:author="commitAuthor"/> :author="commitAuthor"/>
</div> </div>
<div <div
v-if="!model.isFolder && !hasLastDeploymentKey" v-if="!hasLastDeploymentKey"
class="commit-title table-mobile-content"> class="commit-title table-mobile-content">
No deployments yet No deployments yet
</div> </div>
</div> </div>
<div class="table-section section-10" role="gridcell"> <div
v-if="!model.isFolder"
class="table-section section-10" role="gridcell">
<div <div
v-if="!model.isFolder"
role="rowheader" role="rowheader"
class="table-mobile-header"> class="table-mobile-header">
Updated Updated
</div> </div>
<span <span
v-if="!model.isFolder && canShowDate" v-if="canShowDate"
class="environment-created-date-timeago table-mobile-content"> class="environment-created-date-timeago table-mobile-content">
{{createdDate}} {{createdDate}}
</span> </span>
......
app/assets/stylesheets/framework.scss
View file @ 64c9d780
...@@ -56,4 +56,4 @@ ...@@ -56,4 +56,4 @@
@import "framework/icons"; @import "framework/icons";
@import "framework/snippets"; @import "framework/snippets";
@import "framework/memory_graph"; @import "framework/memory_graph";
@import "framework/responsive-tables"; @import "framework/responsive_tables";
app/assets/stylesheets/framework/common.scss
View file @ 64c9d780
...@@ -5,32 +5,6 @@ ...@@ -5,32 +5,6 @@
.cgreen { color: $common-green; } .cgreen { color: $common-green; }
.cdark { color: $common-gray-dark; } .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; } .underlined-link { text-decoration: underline; }
.hint { font-style: italic; color: $hint-color; } .hint { font-style: italic; color: $hint-color; }
.light { color: $common-gray; } .light { color: $common-gray; }
...@@ -448,3 +422,30 @@ table { ...@@ -448,3 +422,30 @@ table {
pointer-events: none; pointer-events: none;
opacity: .5; 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
View file @ 64c9d780
...@@ -3,57 +3,74 @@ ...@@ -3,57 +3,74 @@
max-width: #{$max + '%'}; 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 { .gl-responsive-table-row {
@extend .gl-responsive-table-row-layout;
margin-top: 10px; margin-top: 10px;
border: 1px solid $border-color; border: 1px solid $border-color;
@media (min-width: $screen-md-min) { @media (min-width: $screen-md-min) {
padding: 15px 0;
margin: 0; margin: 0;
display: flex; padding: $gl-padding 0;
align-items: center;
border: none; border: none;
border-bottom: 1px solid $white-normal; border-bottom: 1px solid $white-normal;
} }
}
.gl-responsive-table-row-col-span {
flex-wrap: wrap;
}
.table-section { .table-section {
white-space: nowrap; white-space: nowrap;
$section-widths: 10 15 20 25 30 40; $section-widths: 10 15 20 25 30 40 100;
@each $width in $section-widths { @each $width in $section-widths {
&.section-#{$width} { &.section-#{$width} {
flex: 0 0 #{$width + '%'}; flex: 0 0 #{$width + '%'};
@media (min-width: $screen-md-min) { @media (min-width: $screen-md-min) {
max-width: #{$width + '%'}; max-width: #{$width + '%'};
}
} }
} }
}
&:not(.table-button-footer) { @media (max-width: $screen-sm-max) {
@media (max-width: $screen-sm-max) { display: flex;
display: flex; align-self: stretch;
align-self: stretch; padding: 10px;
padding: 10px; align-items: center;
align-items: center; min-height: 62px;
min-height: 62px;
&:not(:first-of-type) { &:not(:first-child) {
border-top: 1px solid $white-normal; border-top: 1px solid $white-normal;
}
}
} }
}
&.section-wrap { &.section-wrap {
white-space: normal; white-space: normal;
@media (max-width: $screen-sm-max) { @media (max-width: $screen-sm-max) {
flex-wrap: wrap; flex-wrap: wrap;
}
} }
} }
}
&.section-align-top {
align-self: flex-start;
}
}
.table-button-footer { .table-button-footer {
@media (min-width: $screen-md-min) { @media (min-width: $screen-md-min) {
...@@ -61,12 +78,13 @@ ...@@ -61,12 +78,13 @@
} }
@media (max-width: $screen-sm-max) { @media (max-width: $screen-sm-max) {
background-color: $gray-normal; display: block;
align-self: stretch; align-self: stretch;
min-height: 0;
background-color: $gray-normal;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
.table-action-buttons { .table-action-buttons {
padding: 10px 5px;
display: flex; display: flex;
.btn { .btn {
...@@ -77,7 +95,14 @@ ...@@ -77,7 +95,14 @@
> .external-url, > .external-url,
> .btn { > .btn {
flex: 1 1 28px; flex: 1 1 28px;
margin: 0 5px;
&:not(:first-child) {
margin-left: 5px;
}
&:not(:last-child) {
margin-right: 5px;
}
} }
.dropdown-new { .dropdown-new {
......
app/assets/stylesheets/pages/clusters.scss
View file @ 64c9d780
...@@ -2,8 +2,4 @@ ...@@ -2,8 +2,4 @@
.clipboard-addon { .clipboard-addon {
background-color: $white-light; background-color: $white-light;
} }
.alert-block {
margin-bottom: 10px;
}
} }
app/assets/stylesheets/pages/environments.scss
View file @ 64c9d780
...@@ -133,12 +133,11 @@ ...@@ -133,12 +133,11 @@
} }
.folder-row { .folder-row {
padding: 15px 0; border-left: none;
border-bottom: 1px solid $white-normal; border-right: none;
@media (max-width: $screen-sm-max) { @media (min-width: $screen-sm-max) {
border-top: 1px solid $white-normal; border-top: none;
margin-top: 10px;
} }
} }
......
app/assets/stylesheets/pages/pipelines.scss
View file @ 64c9d780
...@@ -31,7 +31,6 @@ ...@@ -31,7 +31,6 @@
} }
.pipeline-actions { .pipeline-actions {
padding-right: 0;
min-width: 170px; //Guarantees buttons don't break in several lines. min-width: 170px; //Guarantees buttons don't break in several lines.
.btn-default { .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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7