tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-07-06 02:45:43 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

My Pledges: Update styles and format to match design

Browse source 
- Add a single-pledge view so we can separate out the pending from published
- Update layout and styles of my pledges list
- Adds link and danger button styles
This commit is contained in:
Kelly Dwan 2019-10-30 13:14:42 -05:00
parent 2b7fb6cd21
commit 0b26fad482
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
7 changed files with 310 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

177
themes/wporg-5ftf/css/components/_my-pledges.scss
View file

@ -1,67 +1,158 @@
body.page-my-pledges .entry-content {
// move avatar and "pledge x hours" into place, align, etc
body.page.page-my-pledges {
.avatar {
// Expand archive content area to full-width of header.
.site-content .site-main {
padding: 0 10px;
max-width: $size__site-main;
}
.entry-header {
display: none;
@include breakpoint($breakpoint-tablet) {
display: block;
// round corners
}
}
}
.fftf_pledge {
text-align: center;
margin-bottom: 25px;
.my-pledges__header {
.pledge-logo-container {
display: block;
background-color: #FAFAFA; // todo make var
max-width: 80%;
margin: 0 auto;
.attachment-pledge-logo {
max-height: 100px;
width: auto;
// todo needs tweaking
}
.entry-content & {
margin-top: ms(10);
margin-bottom: ms(10);
border-bottom: 1px solid $color-gray-light-500;
padding-bottom: ms(2);
}
.pledge-title a {
text-decoration: underline;
// font size etc
.my-pledges__title {
font-size: ms(8);
}
.pledge-actions {
input {
display: block;
margin: 1em auto;
&[name="decline_invitation"],
&[name="leave_organization"] {
color: #bf2b2b; // todo var
}
}
.my-pledges__dedication {
color: $color-gray-300;
font-size: ms(-1);
}
.my-pledges__avatar {
display: none;
}
@include breakpoint($breakpoint-tablet) {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "logo name actions";
text-align: left;
grid-template-columns: auto 1fr;
grid-template-areas:
"avatar name"
"avatar dedication";
.pledge-logo-container {
grid-area: logo;
.my-pledges__avatar {
display: block;
margin-right: ms(2);
grid-area: avatar;
img {
border-radius: 100%;
}
}
.pledge-title {
.my-pledges__title {
margin: 0;
grid-area: name;
}
.pledge-actions {
grid-area: actions;
.my-pledges__dedication {
margin: 0;
grid-area: dedication;
}
}
}
.my-pledges__notice.notice {
margin-bottom: ms(4);
}
.my-pledges__list {
&.is-pending-list {
margin-top: ms(8);
border-top: 1px solid $color-gray-light-500;
padding-top: ms(8);
> h2 {
margin-top: 0;
margin-bottom: ms(5);
}
}
}
.my-pledges__pledge {
margin-bottom: ms(6);
.entry-image {
margin-bottom: ms(2);
}
.my-pledges__pledge-meta {
margin-bottom: ms(2);
}
.my-pledges__pledge-title {
display: inline-block;
margin-bottom: ms(-4);
font-size: ms(2);
text-decoration: underline;
}
.my-pledges__pledge-date {
margin: 0;
font-size: ms(-1);
}
.my-pledges__pledge-actions {
.button {
display: inline-block;
font-size: ms(-3);
}
.button + .button {
margin-left: 1em;
}
.button-link {
text-align: right;
}
}
@include breakpoint($breakpoint-tablet) {
display: grid;
grid-template-columns: 300px 1fr auto;
grid-template-areas: "logo name actions";
align-items: center;
text-align: left;
.entry-image {
grid-area: logo;
margin-bottom: 0;
margin-right: ms(2);
}
.my-pledges__pledge-meta {
grid-area: name;
margin-bottom: 0;
margin-right: ms(2);
}
.my-pledges__pledge-actions {
grid-area: actions;
.button {
display: block;
}
.button + .button {
margin-top: 0.5em;
margin-left: 0;
}
.button-link {
width: 100%;
}
}
}
}