From 92891c011b185bf8a990e731e230abeb87f0c2da Mon Sep 17 00:00:00 2001 From: philli Date: Thu, 21 Jan 2021 16:21:32 +0100 Subject: [PATCH] apps/userdashboard: add carousel to UD and adjust styling and small style clean fixes #31 --- adhocracy-plus/assets/js/app.js | 16 ++++++++++- .../components/_project_tile_carousel.scss | 16 +---------- .../assets/scss/components/_status-bar.scss | 15 +++-------- .../assets/scss/components/_tile.scss | 27 +++++++++---------- .../includes/userdashboard_mobile_toggle.html | 2 +- .../a4_candy_contrib/component_library.html | 2 +- .../includes/project_list_tile.html | 4 +-- .../includes/project_module_tile.html | 4 +-- .../includes/project_tile_userprofile.html | 20 +++++++++----- .../a4_candy_projects/project_detail.html | 2 +- .../base_userdashboard.html | 15 +++++------ .../userdashboard_overview.html | 2 +- 12 files changed, 59 insertions(+), 66 deletions(-) diff --git a/adhocracy-plus/assets/js/app.js b/adhocracy-plus/assets/js/app.js index 2bb669f51..a82936445 100644 --- a/adhocracy-plus/assets/js/app.js +++ b/adhocracy-plus/assets/js/app.js @@ -65,7 +65,21 @@ function init () { mobileFirst: true, infinite: false, variableWidth: false, - slidesToShow: 3, + slidesToShow: 1, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3 + } + }, + { + breakpoint: 600, + settings: { + slidesToShow: 2 + } + } + ], slidesToScroll: 1 }) diff --git a/adhocracy-plus/assets/scss/components/_project_tile_carousel.scss b/adhocracy-plus/assets/scss/components/_project_tile_carousel.scss index afc174d36..ec1b3ec70 100644 --- a/adhocracy-plus/assets/scss/components/_project_tile_carousel.scss +++ b/adhocracy-plus/assets/scss/components/_project_tile_carousel.scss @@ -24,10 +24,7 @@ border-radius: 100%; border: 1px solid $border-color; background-color: $body-bg; - - @media screen and (min-width: $breakpoint) { - z-index: 1; //for when tile links overlap - on mobile people swipe - } + z-index: 1; //for when tile links overlap - on mobile people swipe &:hover, :focus { @@ -53,17 +50,6 @@ } } -//mobile slick overwrites -@media screen and (max-width: $breakpoint-xl-down) { - .slick-next { - right: 0 !important; - } - - .slick-prev { - left: 0 !important; - } -} - @media screen and (min-width: $breakpoint-md) { .project-tile-carousel__wrapper { margin-top: 4*$r-spacer; diff --git a/adhocracy-plus/assets/scss/components/_status-bar.scss b/adhocracy-plus/assets/scss/components/_status-bar.scss index e1a73ca8c..f7a177aef 100644 --- a/adhocracy-plus/assets/scss/components/_status-bar.scss +++ b/adhocracy-plus/assets/scss/components/_status-bar.scss @@ -6,14 +6,9 @@ text-align: left; } -.status-item__position-storefront.status-bar__past { - bottom: 0; - right: 0; - left: 0; -} - -.status-item_spacer { - height: 3*$r-spacer; +.status-item--baseline { + position: absolute; + bottom: 0.5*$spacer; } .status-bar__active { @@ -41,10 +36,6 @@ left: 0; } -.status-bar__past--sm { - padding: 0.5*$padding; -} - .status-bar__status { color: $text-color-gray; diff --git a/adhocracy-plus/assets/scss/components/_tile.scss b/adhocracy-plus/assets/scss/components/_tile.scss index 3e6bb63a2..9c260f369 100644 --- a/adhocracy-plus/assets/scss/components/_tile.scss +++ b/adhocracy-plus/assets/scss/components/_tile.scss @@ -19,6 +19,10 @@ $svg-colour: #2a3cd4; width: 100%; } +.userdashboard__tile { + height: 320px; +} + .tile__head { position: relative; @@ -51,6 +55,10 @@ $svg-colour: #2a3cd4; background-color: $brand-info; } +.tile__image--sm { + min-height: 10rem; +} + .tile__image__copyright { position: absolute; bottom: 0; @@ -108,7 +116,7 @@ $svg-colour: #2a3cd4; } .tile__title { - margin-top: 0; + margin: 0; line-height: 1.3; a { @@ -117,15 +125,6 @@ $svg-colour: #2a3cd4; } } -.tile__title, -.tile__date { - margin: 0; -} - -.tile__date { - color: $text-color-gray; -} - @media (min-width: $breakpoint-xs) { .tile--vertical { margin: $r-spacer; @@ -149,13 +148,13 @@ $svg-colour: #2a3cd4; min-height: 20rem; } - .tile__image--sm { - min-height: 8rem; - } - .tile__image--contained { min-height: 13rem; } + + .tile__image--sm { + min-height: 8rem; + } } .blueprint__tile { diff --git a/adhocracy-plus/templates/includes/userdashboard_mobile_toggle.html b/adhocracy-plus/templates/includes/userdashboard_mobile_toggle.html index a2895e920..f087b84ab 100644 --- a/adhocracy-plus/templates/includes/userdashboard_mobile_toggle.html +++ b/adhocracy-plus/templates/includes/userdashboard_mobile_toggle.html @@ -1,6 +1,6 @@ {% load i18n %} -