-
Notifications
You must be signed in to change notification settings - Fork 0
/
sidebar.php
76 lines (67 loc) · 2.25 KB
/
sidebar.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php
/**
* Called via get_sidebar()
*/
global $frenchpress;
$sidebar = !empty( $frenchpress->custom_sidebar ) ? $frenchpress->custom_sidebar : '';
$sidebar = apply_filters( 'frenchpress_custom_sidebar', $sidebar );
if ( $sidebar ) {
echo '<aside id=side class=sidebar>';
echo $sidebar;
echo '</aside>';
} else {
if ( is_active_sidebar( 1 ) ) {
echo '<aside id=side class="widget-area sidebar">';
dynamic_sidebar( 1 );
echo '</aside>';
} else {
return;
}
}
/**
* Set up custom style
*/
$style = "";
$sidebar_width = $frenchpress->sidebar_width;
$content_width = $frenchpress->content_width;
$site_width = $frenchpress->site_width;
$site_width_override = "";
if ( !empty( $frenchpress->sidebar_centered_content ) ) {
if ( $sidebar_width && $content_width ) {
$site_width = 2 * $sidebar_width + $content_width;
$site_width_override = "max-width:{$site_width}px;";
} elseif ( $sidebar_width && $site_width ) {
$content_width = $site_width - 2 * $sidebar_width;
} elseif ( $content_width && $site_width ) {
$sidebar_width = ( $site_width - $content_width ) / 2;
}
}
if ( $frenchpress->sidebar_position_mobile !== "top" ) {
$style .= "@media(min-width:783px){";
}
$style .= "#content{display:flex;{$site_width_override}";
if ( $frenchpress->sidebar_position_desktop === "left" ) {
$style .= "flex-direction:row-reverse;";
}
if ( !empty( $frenchpress->sidebar_centered_content ) ) {
$style .= "justify-content:flex-end;";
} elseif ( $content_width ) {
$style .= "justify-content:space-between;";
}
if ( $content_width ) {
$style .= "} #main { width:{$content_width}px;";
}
$style .= "} #side { flex:0 0 {$sidebar_width}px; }";
if ( $frenchpress->sidebar_position_mobile === "top" ) {
$style .= "@media(max-width:782px) {"
. "#content{ flex-direction: column-reverse;";
if ( $content_width ) {
$style .= "width:{$content_width}px;";
}
$style .= "}";
}
$style .= "}";
// Need to adjust padding for this layout... not sure if there's a more clever way of integratign above b/c of the media queries
// Also, min-width is needed to keep <pre> elements from expanding its container beyond vw. see https://stackoverflow.com/questions/36247140/#36247448
$style .= "#content{padding:0}#main,#side{padding:0 24px;min-width:0}";
frenchpress_add_inline_style( $style );