slt/template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Added code for responsive tables

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
slt/css/abstract/_responsive.scss
View File

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

13
slt/css/components/_contact-list.scss Normal file
View File

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

5
slt/css/components/_index.scss
View File

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

49
slt/css/components/_presseberichte.scss Normal file
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;
// }
}

15
slt/css/components/_result-table.scss Normal file
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;
}
}

11
slt/css/components/_verbandstag.scss Normal file
View File

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

39
slt/css/components/_vereine.scss Normal file
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;
}
}
}

2
slt/css/core/_default-classes.scss
View File

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

11
slt/css/layout/_blog.scss
View File

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

1
slt/css/layout/_index.scss
View File

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

45
slt/css/layout/_mobile-table.scss Normal file
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;
}
}
}