Skip to content
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

Fix alert display and member grids on desktop #40

Merged
merged 5 commits into from
Oct 12, 2018
Merged

Fix alert display and member grids on desktop #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1ae7a1c
Add markup to alert text to hide on mobile
robinmetral Oct 10, 2018
32db4d9
Hide alert message on screens narrower than 800px
robinmetral Oct 10, 2018
6f15fdb
Fix desktop spacing on people pages
robinmetral Oct 10, 2018
f63c846
Add padding around page intro for mobile display
robinmetral Oct 10, 2018
a1cd192
Decrease 'two-column' grid min to fix mobile overflow
robinmetral Oct 10, 2018
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
2 changes: 1 addition & 1 deletion components/alert.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<img class="wt_alert-image" src="<?php echo $alert_image; ?>" alt="<?php echo $alert_title; ?>">
<article class="wt_alert-message">
<h2><?php echo $alert_title; ?></h2>
<?php echo $alert_text; ?>
<p><?php echo $alert_text; ?></p>
</article>
<button class="wt_close-module">×</button>
</aside>
17 changes: 9 additions & 8 deletions stylus/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,11 @@ body.page-template-template-donate .header a {
.wt_alert-message {
max-width: 60rem;
}
@media only screen and (max-width: 800px) {
.wt_alert-message > p {
display: none;
}
}
.wt_close-module {
margin-left: auto;
position: relative;
Expand Down Expand Up @@ -273,6 +278,7 @@ section:nth-child(even) .wt_section-message {
.wt_page-intro {
max-width: 60rem;
margin: 10% auto;
padding: 2rem;
}
#wt_full-partners-list {
list-style-type: none;
Expand All @@ -282,22 +288,17 @@ section:nth-child(even) .wt_section-message {
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
grid-gap: 10%;
}
.wt_two-column-face-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
margin: 0 10%;
grid-gap: 10%;
}
.wt_two-column-face-grid,
.wt_three-column-face-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
margin: 0 10%;
margin: 5% 10% 10% 10%;
grid-gap: 10%;
}
.wt_names-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
margin: 0 10%;
margin: 5% 10% 10% 10%;
grid-gap: 10%;
}
.wt_member {
Expand Down
18 changes: 10 additions & 8 deletions stylus/require/layouts.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,11 @@ body.home .header a, body.page-template-template-donate .header a
.wt_alert-message
max-width 60rem

@media only screen and (max-width: 800px)
.wt_alert-message > p
display none


.wt_close-module
margin-left auto
position relative
Expand Down Expand Up @@ -245,6 +250,7 @@ section:nth-child(even) .wt_section-message
.wt_page-intro
max-width 60rem
margin 10% auto
padding 2rem // Space out from browser boundaries on mobile

/*------------------------------------*\
PARTNERS LIST
Expand All @@ -265,22 +271,18 @@ section:nth-child(even) .wt_section-message
template-community.php
\*------------------------------------*/

.wt_two-column-face-grid
display grid
grid-template-columns repeat(auto-fit, minmax(40rem, 1fr))
margin 0 10%
grid-gap 10%
// Setting min at 40rem overflows on mobile

.wt_three-column-face-grid
.wt_two-column-face-grid, .wt_three-column-face-grid
display grid
grid-template-columns repeat(auto-fit, minmax(30rem, 1fr))
margin 0 10%
margin 5% 10% 10% 10%
grid-gap 10%

.wt_names-list
display grid
grid-template-columns repeat(auto-fit, minmax(15rem, 1fr))
margin 0 10%
margin 5% 10% 10% 10%
grid-gap 10%

.wt_member
Expand Down