Skip to content

Donation after-actions makeover CSS #304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sjwmoveon wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Donation after-actions makeover CSS #304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
946916c
Custom styles for donation after-action survey page
sjwmoveon Feb 22, 2022
4aacf47
Merge branch 'main' into sophie-dev-2
sjwmoveon Feb 23, 2022
cdec8e5
Further custom css for donation after-action page
sjwmoveon Feb 24, 2022
e5f9d05
Use correct and
sjwmoveon Feb 28, 2022
5bdd10f
Remove underline from links
sjwmoveon Mar 2, 2022
49dc29c
Fix margin on errors
sjwmoveon Mar 2, 2022
547c7f5
Mobile button style
sjwmoveon Mar 7, 2022
cadcf36
Font tweaks
sjwmoveon Mar 16, 2022
023b436
Reduce font sizes
sjwmoveon Mar 17, 2022
5e03e58
Respect header when scrolling
sjwmoveon Mar 17, 2022
cb80831
Include header height when using anchor tags
sjwmoveon Mar 18, 2022
df32a5c
Update H2 style
sjwmoveon Mar 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/images/icons/arrow-down.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

html {
width: 100vw;
scroll-padding-top: 57px;
Copy link
Contributor

@technicalex technicalex Mar 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't familiar with this style, so I looked it up. I think it only applies when we are using scroll snap, which I can't find either in existing styling or in these changes. Maybe I'm missing something; can you please explain? Thank you!

Copy link
Contributor Author

@sjwmoveon sjwmoveon Apr 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On mobile, there's a button that lets you jump to the form, but because the header floats above everything else on the page, the form gets cut off. Adding the padding here makes the anchor tag jump to the right place to display the entire form.

Copy link
Contributor

@technicalex technicalex Dec 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI @sjwmoveon, new scroll-padding-top values should be used for compatibility with the new header if this pull request is merged. I've copied the correct values below. (I suppose only the first one applies, if the button to jump will only ever appear on mobile.) Thank you!

  html {
    scroll-padding-top: 145px;
  }
  @media (min-width: 768px) {
    html {
      scroll-padding-top: 149px;
    }
  }
  @media (min-width: 1025px) {
    html {
      scroll-padding-top: 102px;
    }
  }

}

body {
Expand Down Expand Up @@ -85,5 +86,6 @@ body {
@import "pages/survey_thanks";
@import 'pages/user_view';
@import "pages/unsubscribe_thanks";
@import "pages/after_actions_survey";
@import "mo-components/fixes";
@import "trumps/flickity";
@import "trumps/flickity";
84 changes: 84 additions & 0 deletions src/styles/pages/_after_actions_survey.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
body.survey-page
{
.aa_makeover {
h1 {
font-size: 2.25rem;
text-transform: uppercase;
}
h2 {
font-size: 28px;
@include font(roboto);
font-weight:bold;
}
a {
color: $dark-blue;
display: inline;
}
label {
font-weight:normal;
}
#known_user {
text-align:center;
h3 {
@include font(roboto);
font-size: 16px;
}
}

#survey-questions {
// Placeholder
::placeholder {
color: $placeholder-gray;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
}

.known_user_firstname {
font-weight: 700;
}
.btn.cta {
display: inline-flex;
justify-content: center;
align-items: center;
@include btn--azure;
padding: 10px 20px;
color: $white;
padding: 13px 19px;
@include font(roboto-condensed);
font-size: 1.8rem;
font-weight: 700;
text-transform: uppercase;
width: 100%;
background-color:$azure;
}

// RADIO
.radio-input {
//font-size:20px;

input[type=radio] {
border: 1px solid #000000;
margin-right:0.25em;

&:checked {
border: 0px;
background-color: $azure;
opacity: 1;
box-shadow: none;
}
}
}

label {
color:inherit;
@include respond((
line-height: 1,
));
}

ul#ak-errors {
margin-left: 0px;
}
}
}
4 changes: 3 additions & 1 deletion src/styles/settings/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ $thin-air: #caf4ff;
$white: #ffffff;
$off-white: #f3f3f3;
$gray: #cacaca;
$placeholder-gray: #c2c2c2;
$light-gray: #a7a7a7;
$slate-gray: #696a6a;
$dark-gray: #222222;
Expand All @@ -19,6 +20,7 @@ $azure: #00abff;
$logo-blue: #1298FE;
$light-blue: #99ddff;
$ice-blue: #e5f5ff;
$dark-blue: #006394;
$red: #ea1c24;
$muted-red: #c3645c;
$orange: #dbad54;
Expand All @@ -34,4 +36,4 @@ $moriginal-green-medium: #37b34a;
$moriginal-blue-dark: #193f92;
$moriginal-blue-medium: #296ecb;
$c-facebook: #3B5998;
$c-twitter: #1DA8E2;
$c-twitter: #1DA8E2;
Copy link
Contributor

@technicalex technicalex Mar 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This color doesn't appear to be used. Furthermore, it looks like it's a different color from the color specified on Figma (#5AA5EB) and also (confusingly!) different from both the button and hover color I was asked to use for the Twitter button on my page (#1DA1F2 and #3FB6FF). If it's not being used, I would recommend removing it, unless we expect to use it in the future. But maybe more importantly, should we ask for clarification on the correct Twitter color?

Copy link
Contributor Author

@sjwmoveon sjwmoveon Apr 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't actually add this, just a newline at the end of the file. But yes, that's very confusing and we should ask for clarification. (Maybe it's used on existing main-giraffe template pages?)

2 changes: 1 addition & 1 deletion src/styles/settings/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ $weights: (
);

@mixin font( $name) {
@if ( map-has-key($fonts, $name) && map-has-key($weights, $name)) {
@if ( map-has-key($fonts, $name) and map-has-key($weights, $name)) {
font-family: map-get($fonts, $name);
font-weight: map-get($weights, $name);
}
Expand Down