Added code for responsive tables

This commit is contained in:
Christian Wolf 2022-04-10 13:10:00 +02:00
parent 5f904e323c
commit 1fc58e939e
11 changed files with 193 additions and 4 deletions

View File

@ -11,3 +11,9 @@
@content; @content;
} }
} }
@mixin for-narrow-screen {
@media screen and (max-width: 800px) {
@content;
}
}

View File

@ -0,0 +1,13 @@
table.com-content-category__table {
thead {
display: none;
}
tr {
> th,
> td {
border: none;
box-shadow: none;
}
}
}

View File

@ -1,3 +1,8 @@
@use "slideshow"; @use "slideshow";
@use "article"; @use "article";
@use "current-page-manu"; @use "current-page-manu";
@use "result-table";
@use "presseberichte";
@use "verbandstag";
@use "vereine";
@use "contact-list";

View File

@ -0,0 +1,49 @@
@use "../abstract" as abstract;
table.pressespiegel {
// display: block;
// width: 100%;
@include abstract.for-narrow-screen {
// > tbody {
// display: block;
// }
tr {
// display: block;
// padding: 7px 0;
// border-bottom-style: solid;
// border-width: 1px;
&:first-child {
display: none;
}
// &:nth-child(2) {
// border-top-style: solid;
// }
> td {
// display: block;
// text-align: left !important;
&:last-child::before {
content: "Rubrik: ";
}
}
}
}
// > tbody {
// display: block;
// @include abstract.for-wide-tablet {
// display: initial;
// }
// }
// tr {
// display: block;
// padding: 7px 0;
// }
}

View File

@ -0,0 +1,15 @@
@use "../abstract" as abstract;
table.result {
max-width: 800px;
margin: 0 auto;
}
div.result-links a {
display: block;
@include abstract.for-narrow-screen {
padding: 7px 0;
margin: 15px 0;
}
}

View File

@ -0,0 +1,11 @@
@use "../abstract" as abstract;
table.verbandstag {
@include abstract.for-narrow-screen {
tr {
&:first-child {
display: none;
}
}
}
}

View File

@ -0,0 +1,39 @@
@use "../abstract" as abstract;
.slt-vereine {
@include abstract.for-narrow-screen {
display: block;
line-height: 150%;
> tbody,
tr,
td {
display: block;
width: 100%;
}
tr {
padding: 7px 0;
&:first-child {
display: none;
}
> td:first-child {
display: none;
}
> td:nth-child(2) {
font-weight: bold;
}
> td:nth-child(4)::before {
content: "Ansprechpartner: ";
}
}
p {
margin: 0;
}
}
}

View File

@ -24,7 +24,7 @@ li.row-fluid {
.row-striped .row-fluid:nth-child(n), .row-striped .row-fluid:nth-child(n),
.list-striped li:nth-child(n), .list-striped li:nth-child(n),
.table-striped tbody > tr:nth-child(n) > td { .table-striped tbody > tr:nth-child(n) > td {
background-color: inherit; background-color: initial;
} }
.well { .well {

View File

@ -5,10 +5,12 @@
.columns-4, .columns-4,
.columns-5, .columns-5,
.columns-6 { .columns-6 {
display: grid; @include abstract.for-desktop {
display: grid;
> div { > div {
margin: 5px 5px 15px 5px; margin: 5px 5px 15px;
}
} }
} }
@ -19,12 +21,15 @@
.columns-3 { .columns-3 {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
.columns-4 { .columns-4 {
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
} }
.columns-5 { .columns-5 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
} }
.columns-6 { .columns-6 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
} }

View File

@ -8,3 +8,4 @@
@use "side-images"; @use "side-images";
@use "main-content"; @use "main-content";
@use "blog"; @use "blog";
@use "mobile-table";

View File

@ -0,0 +1,45 @@
@use "../abstract" as abstract;
table:not(.no-responsive-table) {
display: block;
width: 100%;
@include abstract.for-narrow-screen {
> tbody {
display: block;
}
tr {
display: block;
padding: 7px 0;
border-style: none;
border-bottom-style: solid;
border-width: 1px;
// &:first-child {
// display: none;
// }
&:nth-child(2) {
border-top-style: solid;
}
// &:nth-child(2n+1) {
// background-color: #BBB;
// }
> td {
display: block;
text-align: left !important;
}
}
}
}
table:not(.alternating) {
@include abstract.for-narrow-screen {
tr:nth-child(2n+1) {
background-color: #bbb;
}
}
}