Skip to content

Commit 76bb36c

Browse files
jathaydecarlosantoniodasilva
jathayde
and
carlosantoniodasilva
authored
Add print styles to Rails guides (rails#51458)
This updates print CSS to be more inline with the overall style. The sidebar is inlined (same as mobile), and content is 100%. Previous code in the launch from boilerplate has been struck or integrated better. * Links show in text after the original link text * Border line around code and copy button are removed * Print is now generated from SCSS to CSS via the generator that builds the other CSS files Co-authored-by: Carlos Antonio da Silva <[email protected]>
1 parent f179539 commit 76bb36c

File tree

4 files changed

+202
-119
lines changed

4 files changed

+202
-119
lines changed

‎guides/assets/stylesheets/print.css

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎guides/assets/stylesrc/print.scss

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
/* ----------------------------------------------------------------------------
2+
// Rails Guides Redesign - Print Styles
3+
//
4+
// Created: 29 March 2024
5+
// Modified: 29 March 2024
6+
// ---------------------------------------------------------------------------- */
7+
8+
@import 'vendor/include-media';
9+
10+
@media print {
11+
// remove screen UI stuff
12+
*,
13+
*::before,
14+
*::after {
15+
background: #fff !important;
16+
color: #000 !important;
17+
/* Black prints faster */
18+
box-shadow: none !important;
19+
text-shadow: none !important;
20+
}
21+
22+
// Set Page layout
23+
@page {
24+
margin: 0.75in 0.25in;
25+
}
26+
27+
@page:left{
28+
@bottom-left {
29+
content: "Page " counter(page) " of " counter(pages);
30+
}
31+
}
32+
33+
// Include link address with linked text
34+
a,
35+
a:visited {
36+
text-decoration: underline;
37+
}
38+
39+
a[href]::after {
40+
content: " (" attr(href) ")";
41+
}
42+
43+
a:link, a:visited {
44+
background: transparent;
45+
font-weight: bold;
46+
text-decoration: underline;
47+
48+
pre, code {
49+
font-weight: normal !important;
50+
}
51+
}
52+
53+
abbr[title]::after {
54+
content: " (" attr(title) ")";
55+
}
56+
57+
/*
58+
* Don't show links that are fragment identifiers,
59+
* or use the `javascript:` pseudo protocol
60+
*/
61+
a[href^="#"]::after,
62+
a[href^="javascript:"]::after {
63+
content: "";
64+
}
65+
66+
pre {
67+
white-space: pre-wrap !important;
68+
}
69+
70+
pre,
71+
blockquote {
72+
page-break-inside: avoid;
73+
}
74+
75+
tr,
76+
img {
77+
page-break-inside: avoid;
78+
}
79+
80+
p,
81+
h2,
82+
h3 {
83+
orphans: 3;
84+
widows: 3;
85+
}
86+
87+
h2,h3,h4,h5,h6 {
88+
page-break-after: avoid;
89+
}
90+
91+
body.guide,
92+
.wrapper,
93+
header,
94+
footer,
95+
main,
96+
#feature,
97+
#subCol {
98+
background: #fff;
99+
color: #000;
100+
position: static;
101+
display: block;
102+
float: none;
103+
height: auto;
104+
min-height: 0;
105+
margin: 0;
106+
padding: 0;
107+
text-align: left;
108+
text-indent: 0;
109+
width: auto;
110+
}
111+
112+
body.guide {
113+
// Force backgrounds to print
114+
-webkit-print-color-adjust:exact !important;
115+
print-color-adjust:exact !important;
116+
font-size: 10pt !important;
117+
line-height: 1.4;
118+
padding: 0 3%;
119+
120+
.wrapper {
121+
max-width: unset !important;
122+
padding-right: unset !important;
123+
}
124+
125+
.hide,
126+
nav {
127+
display: none !important;
128+
}
129+
130+
#feature #subCol {
131+
display: block !important;
132+
133+
@include media('>desktop') {
134+
display: block !important;
135+
height: auto;
136+
max-height: unset;
137+
position: unset;
138+
width: 100%;
139+
}
140+
141+
ol.chapters {
142+
height: auto;
143+
max-height: unset;
144+
overflow: hidden;
145+
}
146+
}
147+
148+
.interstitial {
149+
150+
background-repeat: no-repeat !important;
151+
background-size: 36px 36px !important;
152+
background-position: 10px 10px !important;
153+
154+
&.note {
155+
background-image: url("../images/icon_task-list-pin.svg") !important;
156+
}
157+
158+
&.work-in-progress,
159+
&.todo {
160+
background-image: url("../images/icon_construction-sign.svg") !important;
161+
}
162+
163+
&.info {
164+
background-image: url("../images/icon_bulb-1.svg") !important;
165+
}
166+
167+
&.warning {
168+
background-image: url("../images/icon_hand-stop.svg") !important;
169+
}
170+
171+
&.question {
172+
background-image: url("../images/icon_question-bubble.svg") !important;
173+
}
174+
}
175+
176+
.code {
177+
background-color: #FAF9F8 !important;
178+
179+
pre, span {
180+
background-color: transparent !important;
181+
border: none;
182+
font-size: 9.5pt !important;
183+
}
184+
185+
button {
186+
display: none;
187+
}
188+
}
189+
190+
hr {
191+
height: 1.5em;
192+
background: url("../images/hr_rails.svg") center no-repeat !important;
193+
}
194+
195+
code, pre {
196+
font-size: 9.5pt !important;
197+
}
198+
199+
} // body.guide
200+
}
201+

‎guides/assets/stylesrc/vendor/_boilerplate.scss

Lines changed: 0 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -178,69 +178,3 @@
178178
/* Style adjustments for high resolution devices */
179179
}
180180

181-
/* ==========================================================================
182-
Print styles.
183-
Inlined to avoid the additional HTTP request:
184-
https://www.phpied.com/delay-loading-your-print-css/
185-
========================================================================== */
186-
187-
@media print {
188-
*,
189-
*::before,
190-
*::after {
191-
background: #fff !important;
192-
color: #000 !important;
193-
/* Black prints faster */
194-
box-shadow: none !important;
195-
text-shadow: none !important;
196-
}
197-
198-
a,
199-
a:visited {
200-
text-decoration: underline;
201-
}
202-
203-
a[href]::after {
204-
content: " (" attr(href) ")";
205-
}
206-
207-
abbr[title]::after {
208-
content: " (" attr(title) ")";
209-
}
210-
211-
/*
212-
* Don't show links that are fragment identifiers,
213-
* or use the `javascript:` pseudo protocol
214-
*/
215-
a[href^="#"]::after,
216-
a[href^="javascript:"]::after {
217-
content: "";
218-
}
219-
220-
pre {
221-
white-space: pre-wrap !important;
222-
}
223-
224-
pre,
225-
blockquote {
226-
border: 1px solid #999;
227-
page-break-inside: avoid;
228-
}
229-
230-
tr,
231-
img {
232-
page-break-inside: avoid;
233-
}
234-
235-
p,
236-
h2,
237-
h3 {
238-
orphans: 3;
239-
widows: 3;
240-
}
241-
242-
h2,
243-
h3 {
244-
page-break-after: avoid;
245-
}
246-
}

‎guides/rails_guides/generator.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ def select_only(guides)
107107
end
108108

109109
def process_scss
110-
system "bundle exec dartsass ./assets/stylesrc/style.scss:#{@output_dir}/stylesheets/style.css ./assets/stylesrc/highlight.scss:#{@output_dir}/stylesheets/highlight.css"
110+
system "bundle exec dartsass ./assets/stylesrc/style.scss:#{@output_dir}/stylesheets/style.css ./assets/stylesrc/highlight.scss:#{@output_dir}/stylesheets/highlight.css ./assets/stylesrc/print.scss:#{@output_dir}/stylesheets/print.css"
111111
end
112112

113113
def copy_assets

0 commit comments

Comments
 (0)