From 1fc58e939e5a8276fd562a0023b055763ff789ef Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Sun, 10 Apr 2022 13:10:00 +0200 Subject: [PATCH] Added code for responsive tables --- slt/css/abstract/_responsive.scss | 6 +++ slt/css/components/_contact-list.scss | 13 +++++++ slt/css/components/_index.scss | 5 +++ slt/css/components/_presseberichte.scss | 49 +++++++++++++++++++++++++ slt/css/components/_result-table.scss | 15 ++++++++ slt/css/components/_verbandstag.scss | 11 ++++++ slt/css/components/_vereine.scss | 39 ++++++++++++++++++++ slt/css/core/_default-classes.scss | 2 +- slt/css/layout/_blog.scss | 11 ++++-- slt/css/layout/_index.scss | 1 + slt/css/layout/_mobile-table.scss | 45 +++++++++++++++++++++++ 11 files changed, 193 insertions(+), 4 deletions(-) create mode 100644 slt/css/components/_contact-list.scss create mode 100644 slt/css/components/_presseberichte.scss create mode 100644 slt/css/components/_result-table.scss create mode 100644 slt/css/components/_verbandstag.scss create mode 100644 slt/css/components/_vereine.scss create mode 100644 slt/css/layout/_mobile-table.scss diff --git a/slt/css/abstract/_responsive.scss b/slt/css/abstract/_responsive.scss index 817f5d0..edf6d89 100644 --- a/slt/css/abstract/_responsive.scss +++ b/slt/css/abstract/_responsive.scss @@ -11,3 +11,9 @@ @content; } } + +@mixin for-narrow-screen { + @media screen and (max-width: 800px) { + @content; + } +} diff --git a/slt/css/components/_contact-list.scss b/slt/css/components/_contact-list.scss new file mode 100644 index 0000000..8f7507f --- /dev/null +++ b/slt/css/components/_contact-list.scss @@ -0,0 +1,13 @@ +table.com-content-category__table { + thead { + display: none; + } + + tr { + > th, + > td { + border: none; + box-shadow: none; + } + } +} diff --git a/slt/css/components/_index.scss b/slt/css/components/_index.scss index 8ceeccf..1a956ac 100644 --- a/slt/css/components/_index.scss +++ b/slt/css/components/_index.scss @@ -1,3 +1,8 @@ @use "slideshow"; @use "article"; @use "current-page-manu"; +@use "result-table"; +@use "presseberichte"; +@use "verbandstag"; +@use "vereine"; +@use "contact-list"; diff --git a/slt/css/components/_presseberichte.scss b/slt/css/components/_presseberichte.scss new file mode 100644 index 0000000..37887f6 --- /dev/null +++ b/slt/css/components/_presseberichte.scss @@ -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; + // } +} diff --git a/slt/css/components/_result-table.scss b/slt/css/components/_result-table.scss new file mode 100644 index 0000000..b385c8c --- /dev/null +++ b/slt/css/components/_result-table.scss @@ -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; + } +} diff --git a/slt/css/components/_verbandstag.scss b/slt/css/components/_verbandstag.scss new file mode 100644 index 0000000..7944161 --- /dev/null +++ b/slt/css/components/_verbandstag.scss @@ -0,0 +1,11 @@ +@use "../abstract" as abstract; + +table.verbandstag { + @include abstract.for-narrow-screen { + tr { + &:first-child { + display: none; + } + } + } +} diff --git a/slt/css/components/_vereine.scss b/slt/css/components/_vereine.scss new file mode 100644 index 0000000..42008f9 --- /dev/null +++ b/slt/css/components/_vereine.scss @@ -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; + } + } +} diff --git a/slt/css/core/_default-classes.scss b/slt/css/core/_default-classes.scss index a20492a..4dbbf78 100644 --- a/slt/css/core/_default-classes.scss +++ b/slt/css/core/_default-classes.scss @@ -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 { diff --git a/slt/css/layout/_blog.scss b/slt/css/layout/_blog.scss index 2d39e14..3afb436 100644 --- a/slt/css/layout/_blog.scss +++ b/slt/css/layout/_blog.scss @@ -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; } diff --git a/slt/css/layout/_index.scss b/slt/css/layout/_index.scss index fb2b135..9c5045b 100644 --- a/slt/css/layout/_index.scss +++ b/slt/css/layout/_index.scss @@ -8,3 +8,4 @@ @use "side-images"; @use "main-content"; @use "blog"; +@use "mobile-table"; diff --git a/slt/css/layout/_mobile-table.scss b/slt/css/layout/_mobile-table.scss new file mode 100644 index 0000000..da61aa7 --- /dev/null +++ b/slt/css/layout/_mobile-table.scss @@ -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; + } + } +}