From 4228a737ecff8fc10bd71317b668494c5e234aa0 Mon Sep 17 00:00:00 2001 From: Marcel Kalveram Date: Tue, 8 Oct 2019 22:56:02 +0300 Subject: [PATCH 1/5] make event list more compact on mobile --- data/assets/css/components/_event-summary.scss | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/data/assets/css/components/_event-summary.scss b/data/assets/css/components/_event-summary.scss index d9287403c69096..20b5d3beb06331 100644 --- a/data/assets/css/components/_event-summary.scss +++ b/data/assets/css/components/_event-summary.scss @@ -15,10 +15,13 @@ .event-summary { position: relative; justify-self: left; - margin-bottom: $space-large; - max-width: 300px; + width: 100%; + margin-bottom: $space-medium; @include size-medium { + width: auto; + max-width: 300px; + margin-bottom: $space-large; justify-self: center; } @@ -56,7 +59,8 @@ } img { - width: 100%; + width: 33%; + min-width: 50px; max-width: 300px; outline: 4px solid $black; @@ -84,6 +88,9 @@ height: 2px; color: black; background-color: black; - margin: $space-large auto $space-larger auto; + margin: $space-medium auto $space-medium auto; + @include size-medium { + margin: $space-large auto $space-larger auto; + } } } From 3bf8d311d353853d4f69b6430b2a1bb2dd08d331 Mon Sep 17 00:00:00 2001 From: Marcel Kalveram Date: Thu, 10 Oct 2019 14:15:46 +0300 Subject: [PATCH 2/5] use $space-medium for margins on mobile --- data/assets/css/components/_event-summary.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/assets/css/components/_event-summary.scss b/data/assets/css/components/_event-summary.scss index 20b5d3beb06331..8751df1485d875 100644 --- a/data/assets/css/components/_event-summary.scss +++ b/data/assets/css/components/_event-summary.scss @@ -88,7 +88,7 @@ height: 2px; color: black; background-color: black; - margin: $space-medium auto $space-medium auto; + margin: $space-medium auto $space-large auto; @include size-medium { margin: $space-large auto $space-larger auto; } From 134d7b294d64e8389c590bdfaa4250ea9b77902f Mon Sep 17 00:00:00 2001 From: Marcel Kalveram Date: Tue, 15 Oct 2019 13:56:02 +0200 Subject: [PATCH 3/5] change to thumbnail-based mobile layout --- .../assets/css/components/_event-summary.scss | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/data/assets/css/components/_event-summary.scss b/data/assets/css/components/_event-summary.scss index 8751df1485d875..6aea5d77235a4e 100644 --- a/data/assets/css/components/_event-summary.scss +++ b/data/assets/css/components/_event-summary.scss @@ -1,3 +1,5 @@ +$thumbnailSizeMobile: 75px; + .next-events-summary, .past-events-summary { display: grid; @@ -50,7 +52,15 @@ .reset-link { margin-bottom: $space-small; + margin-right: $space-medium; background-image: none; + float: left; + max-width: $thumbnailSizeMobile; + + @include size-medium { + float: none; + max-width: auto; + } &:hover { background-image: none; @@ -59,15 +69,16 @@ } img { - width: 33%; min-width: 50px; - max-width: 300px; outline: 4px solid $black; + width: 100%; + border-radius: 50%; background-color: whitesmoke; transition: outline 120ms ease-in-out; @include size-medium { + max-width: 300px; width: 300px; height: 300px; } @@ -81,6 +92,12 @@ text-align: left; color: $text-color-secondary; font-size: 0.9rem; + margin-left: $thumbnailSizeMobile; + padding-left: $space-medium; + @include size-medium { + margin-left: 0; + padding-left: 0; + } } hr { From 880af6ecf3bf2932b6d1a3aef8083a63727f164c Mon Sep 17 00:00:00 2001 From: Marcel Kalveram Date: Tue, 15 Oct 2019 14:12:23 +0200 Subject: [PATCH 4/5] fine-tune changes --- data/assets/css/components/_event-summary.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/data/assets/css/components/_event-summary.scss b/data/assets/css/components/_event-summary.scss index 6aea5d77235a4e..c139ef5ffd51de 100644 --- a/data/assets/css/components/_event-summary.scss +++ b/data/assets/css/components/_event-summary.scss @@ -17,8 +17,8 @@ $thumbnailSizeMobile: 75px; .event-summary { position: relative; justify-self: left; - width: 100%; margin-bottom: $space-medium; + width: 100%; @include size-medium { width: auto; @@ -52,13 +52,14 @@ $thumbnailSizeMobile: 75px; .reset-link { margin-bottom: $space-small; - margin-right: $space-medium; background-image: none; float: left; + margin-right: $space-medium; max-width: $thumbnailSizeMobile; @include size-medium { float: none; + margin-right: 0; max-width: auto; } @@ -69,9 +70,9 @@ $thumbnailSizeMobile: 75px; } img { + width: 100%; min-width: 50px; outline: 4px solid $black; - width: 100%; border-radius: 50%; background-color: whitesmoke; From f37adecbf220a640cc3d51b6a2c4fe99ec936bb5 Mon Sep 17 00:00:00 2001 From: Marcel Kalveram Date: Wed, 16 Oct 2019 10:23:53 +0200 Subject: [PATCH 5/5] remove date badge on mobile viewports --- .../assets/css/components/_event-summary.scss | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/data/assets/css/components/_event-summary.scss b/data/assets/css/components/_event-summary.scss index c139ef5ffd51de..d4dba75086b5ac 100644 --- a/data/assets/css/components/_event-summary.scss +++ b/data/assets/css/components/_event-summary.scss @@ -37,16 +37,21 @@ $thumbnailSizeMobile: 75px; text-transform: uppercase; .date-badge { - position: absolute; - top: 20px; - right: -10px; - background-color: $brand-color; - padding: 0 5px; - z-index: 1; - - &.invert { - color: $brand-color; - background-color: $black; + display: none; + + @include size-medium { + display: block; + position: absolute; + top: 20px; + right: -10px; + background-color: $brand-color; + padding: 0 5px; + z-index: 1; + + &.invert { + color: $brand-color; + background-color: $black; + } } }