Skip to content
Snippets Groups Projects

Resolve #3471093 "Mobile css"

Resolve #3471093 "Mobile css"
issue/demo_design_system-3471093:3471093-mobile-css into 1.0.x
5 open threads
Merged
avani.bhutrequested to merge
issue/demo_design_system-3471093:3471093-mobile-css into 1.0.x
5 open threads

Closes #3471093

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
starshot_demo/components/03-organisms/starshot-case-study/starshot-case-study.scss
1 1 .ct-starshot-case-study {
2 2 position: relative;
3 3 overflow: hidden;
4 padding-bottom: 174px;
5 margin-bottom: -174px;
4 padding-bottom: 74px;
5
6 @include ct-breakpoint(xl) {
7 padding-bottom: 174px;
  • Alan Cole
    Alan Cole @alan.cole
    Developer

    Design shows the case study sitting over the component below. With these changes you've removed that feature:

    Screenshot_2024-09-06_at_9.30.44_AM

  • Alan Cole
    Alan Cole @alan.cole
    Developer

    One possible solution to this might be that each of these organisms implement additional margin / padding when placed directly below the case study:

    .ct-starshot-case-study + .ct-starshot-hero,
.ct-starshot-case-study + .starshot-listing-testimonial,
.ct-starshot-case-study + .ct-starshot-case-study,
.ct-starshot-case-study + .starshot-cta,
.ct-starshot-case-study + .starshot-feature-cards,
.ct-starshot-case-study + .ct-starshot-stats {
  margin-top: -74px;
  padding-top: 74px;
  z-index: -1;
}

    Please note this 74px would need to accommodate for the breakpoint changes.

  • avani.bhut
    avani.bhut @Bhut.Avani
    Author Contributor

    Fixed. Updated style as per above comment

  • Please register or sign in to reply
  • Alan Cole
    Alan Cole @alan.cole started a thread on the diff
    • starshot_demo/components/03-organisms/starshot-case-study/starshot-case-study.scss
    5
    6 @include ct-breakpoint(xl) {
    7 padding-bottom: 174px;
    8 }
    9
    6 10
    7 11 &__background {
    8 padding-top: 141px;
    9 padding-bottom: 387px;
    10 12 background-color: #ccbaf4;
    13 padding-top: 60px;
    14 padding-bottom: 60px;
    15
    16 @include ct-breakpoint(xxl) {
    17 padding-top: 141px;
    18 // padding-bottom: 387px;
  • Alan Cole
    Alan Cole @alan.cole started a thread on the diff
    • starshot_demo/components/03-organisms/starshot-case-study/starshot-case-study.scss
    114 @include ct-breakpoint(l) {
    115 border-radius: 25px;
    116 margin-top: 0;
    117 }
    118
    119 @include ct-breakpoint(xxl) {
    120 margin-left: -5px;
    121 }
    70 122 }
    71 123
    72 124 &__image-frame {
    73 125 position: absolute;
    74 top: -30px;
    75 left: -50px;
    126 width: calc(100% + 20px);
    127 height: calc(100% + 20px);
    • Alan Cole
      Alan Cole @alan.cole
      Developer

      There's some cases around 1486px screen width and below where the image and frame are out of alignment and the image either sits outside the frame underneath, or too far to the left:

      Screenshot_2024-09-06_at_9.36.09_AMScreenshot_2024-09-06_at_9.38.10_AM

    • Please register or sign in to reply
  • Alan Cole
    Alan Cole @alan.cole started a thread on the diff
    • starshot_demo/components/03-organisms/starshot-stats/starshot-stats.scss
    16 padding: 0 ct-spacing(3);
    17
    18 @include ct-breakpoint(xxl) {
    19 padding: 0 ct-spacing(2);
    20 }
    11 21 }
    12 22
    13 img {
    23 .stat-img {
    14 24 position: absolute;
    15 25 top: 0;
    16 26 right: 0;
    17 27 height: 100%;
    28 width: 25%;
    29 object-fit: cover;
    30 object-position: left;
  • Alan Cole
    Alan Cole @alan.cole started a thread on the diff
    • starshot_demo/components/03-organisms/starshot-case-study/starshot-case-study.scss
    1 1 .ct-starshot-case-study {
    2 2 position: relative;
    3 3 overflow: hidden;
    4 padding-bottom: 174px;
    5 margin-bottom: -174px;
    4 padding-bottom: 74px;
    5
    6 @include ct-breakpoint(xl) {
    7 padding-bottom: 174px;
    8 }
    9
    6 10
  • Alan Cole
    Alan Cole @alan.cole
    Developer

    Thanks @Bhut.Avani - please see the comments in the MR.

  • Alan Cole requested changes

    requested changes

  • Alan Cole requested changes

    requested changes

  • Kristen Pol
    Kristen Pol @kepol
    Maintainer

    @alan.cole There's a merge conflict when merging in main to here. Can you resolve?

  • Kristen Pol
    Kristen Pol @kepol
    Maintainer

    @Bhut.Avani talked with Alan and it's best if you merge 1.0.x into your MR branch and resolve the conflicts along with the things above. Thanks.

  • Alan Cole changed target branch from feature/civictheme-font-integration to 1.0.x

    changed target branch from feature/civictheme-font-integration to 1.0.x

  • Alan Cole added 27 commits

    added 27 commits

    Compare with previous version

  • Alan Cole
    Alan Cole @alan.cole
    Developer

    Hi @kepol, @Bhut.Avani - I've updated the fork 3471093-mobile-css branch to resolve the conflicts. Please git pull --rebase before continuing work, as I have force-pushed a rebase.

    Edited by Alan Cole
  • Kristen Pol bypassed reviews on this merge request

    bypassed reviews on this merge request

  • Kristen Pol
    Kristen Pol @kepol
    Maintainer

    Talked with Alan and the follow up cleanup should happen in a new MR as we need to get this code merged to unblock other things.

  • Kristen Pol merged

    merged

  • avani.bhut
    avani.bhut @Bhut.Avani
    Author Contributor

    Please find updated code in this MR !52 (closed)

    • Please register or sign in to reply