Skip to content

Commit 5b0d55b

Browse files
smulvih2smulvih2
authored
Issue #3219195 by smulvih2: Configure book module to support GC Subway functionality
* Add template files to support gc-subway book * Add book-related template files * Remove change to page title template (global change) * Give active menu item in book the active class * Add book navigation links * Remove prev/next buttons off book root page * Add styles and icon to book links * Fix error with preprocess_links on other pages * Wrap book prev/next buttons in div, add margin-top to book add links * Make h1 visible by default and let wet-boew control its visibility * Remove previous link on book page when previous link points to book home * Add page variable to indicate if current page is book page or not, add header section back to page--book--gcweb.html.twig * Small markup change * Add persistent nav styles from test.canada.ca/cra/tax-understanding/index.html * Add summary from book page to book outline on book home page * Make sections nav on book index page use definition list instead of unordered list * Remove persistent navigation css, replace with provisional styles * Implement persistent navigation from test.canada.ca * Fix issue with wrong buttons being styled * Fix translation issue with book index page navigation summary field * Fix targeting of book bundle in hook_preprocess_page * Move to experimental gc-nav, mark active book item in navigation hierarchy * Attach proper library to rogue book page * Adjust section classes * Make changes to book preprocess hooks to allow extending book with another content type * Override theme suggestion for book index and book pages, use new template files * Add tabs to book template files * Code cleanup and move as much book-related stuff out of theme and into module * Change to book navigation template file to support custom config * Only give wxt-specific book templates as suggestion if wxt_ext_book is enabled * Add header region back into book page template files and adjust for gc-thickline * Remove CSS and template file not being used * Fix PHPCS issue * Move book CSS into scss file * Remove book libraries from libraries.yml * Localize book template changes to wxt_ext_book
1 parent 7ce84a2 commit 5b0d55b

10 files changed

+1129
-1
lines changed

‎css/style.css

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,184 @@ html.js .form-item .input-group-addon .input-group-addon {
106106
html.js .ajax-new-content:empty {
107107
display: none !important; }
108108

109+
/**
110+
* Book styling.
111+
*/
112+
#gc-navseq-header {
113+
font-size: 1.2em;
114+
margin-top: 0px; }
115+
116+
.gc-navseq {
117+
padding-left: 0.9em; }
118+
119+
.gc-navseq .small,
120+
.gc-navseq small {
121+
line-height: 0em; }
122+
123+
.gc-navseq * {
124+
font-weight: inherit!important;
125+
line-height: inherit!important; }
126+
127+
.gc-navseq>li,
128+
ul.gc-navseq-fa>li {
129+
padding-bottom: 20px;
130+
padding-right: 20px;
131+
list-style: none;
132+
padding-left: 1.2em;
133+
border-left: 5px solid #26374a;
134+
position: relative; }
135+
136+
ul.gc-navseq-fa>li .fa-li {
137+
left: 0em;
138+
position: relative; }
139+
140+
ul.gc-navseq-fa {
141+
margin-left: 0.9em }
142+
143+
li .gc-navseq {
144+
margin-top: 16px; }
145+
146+
.gc-navseq>li>:first-child::before,
147+
ul.gc-navseq-fa li span.fa-li {
148+
border-radius: 50%;
149+
border: 3px solid #26374a;
150+
background-color: #fff;
151+
float: left;
152+
text-decoration: none;
153+
box-sizing: content-box;
154+
line-height: 1.3em;
155+
text-align: center;
156+
padding: 3px;
157+
font-size: 1.0em; }
158+
159+
ul.gc-navseq-fa li span.fa-li {
160+
height: 1.3em;
161+
width: 1.3em;
162+
margin-left: -2.3em; }
163+
164+
ul.gc-navseq>li>:first-child::before {
165+
height: 0.8em;
166+
width: 0.8em;
167+
margin-left: -2.05em;
168+
content: ""; }
169+
170+
@-moz-document url-prefix() {
171+
ul.gc-navseq>li>:first-child::before {
172+
margin-left: -2.0em; } }
173+
174+
.gc-navseq li a::before {
175+
text-decoration: underline; }
176+
177+
ul.gc-navseq.noline>li {
178+
border-left: 5px solid transparent; }
179+
180+
.gc-navseq>li:last-child,
181+
.gc-navseq>li.completed:last-child,
182+
ul.gc-navseq-fa li:last-child {
183+
border-left: 5px solid transparent;
184+
padding-bottom: 0; }
185+
186+
ul.gc-navseq.noline>li>:first-child::before {
187+
margin-top: 0.2em; }
188+
189+
.gc-navseq li.active>:first-child::before,
190+
.gc-navseq-fa li.active span.fa-li {
191+
background-color: #26374a;
192+
color: #fff; }
193+
194+
.gc-navseq li ul {
195+
margin-top: 16px!important; }
196+
197+
ul.gc-navseq>li>a[href]:hover::before {
198+
width: 0.83em;
199+
height: 0.83em;
200+
margin-top: -0.1em;
201+
font-size: 1.2em;
202+
margin-left: -1.775em;
203+
line-height: 1.55; }
204+
205+
ul.gc-navseq.noline>li>a[href]:hover::before {
206+
margin-top: 0.15em; }
207+
208+
.gc-navseq-fa>li>a[href]:hover span.fa-li {
209+
width: 1.55em;
210+
height: 1.55em;
211+
margin-top: -0.05em;
212+
margin-left: -2.45em; }
213+
214+
.gc-navseq-fa>li>a[href]:hover span.fa-li::before {
215+
margin-top: -0.1em; }
216+
217+
ul.gc-navseq > li ul.gc-navseq.noline > li.active::before {
218+
content: " ";
219+
height: 4px;
220+
width: 1.6em;
221+
background-color: #26374a;
222+
position: absolute;
223+
margin-left: -3.6em;
224+
margin-top: 0.825em; }
225+
226+
section.gc-nav h1 {
227+
font-size: 1.3em;
228+
color: #555;
229+
border-bottom: none; }
230+
231+
@media all and (min-width:992px) {
232+
section.gc-nav nav {
233+
position: relative;
234+
width: 33.33%;
235+
left: 66.66%;
236+
float: left;
237+
padding-left: 15px;
238+
margin-bottom: 30px; }
239+
240+
section.gc-nav h1 {
241+
width: 66.66%;
242+
padding-right: 15px;
243+
margin-top: 20px;
244+
margin-bottom: -5px;
245+
font-weight: 200; }
246+
247+
section.gc-nav-section {
248+
position: relative;
249+
width: 66.66%;
250+
float: left;
251+
padding-right: 15px; }
252+
253+
section.gc-nav ~ section.gc-nav-section {
254+
right: 33.33%; }
255+
256+
section.gc-nav ~ section.gc-nav-section h1 {
257+
margin-top: 0px; }
258+
259+
section.gc-nav-section + .pagedetails {
260+
clear: both; } }
261+
262+
@media screen and (max-width:991px) {
263+
section.gc-nav {
264+
margin-top: 30px;
265+
border-right: 5px solid #26374a;
266+
border-top: 5px solid #26374a;
267+
border-radius: 0 6px 6px 0; }
268+
section.gc-nav nav>.gc-navseq {
269+
padding-top: 15px;
270+
margin-top: -18px;
271+
clear: both; }
272+
section.gc-nav nav>.gc-navseq > li:last-child {
273+
border-bottom: 5px solid #26374a;
274+
border-left: 5px solid #26374a;
275+
border-bottom-left-radius: 6px;
276+
padding-bottom: 24px; }
277+
section.gc-nav h1 {
278+
margin-bottom: -18px;
279+
margin-right: 20px;
280+
background-color: white;
281+
padding: 20px 10px 10px 20px;
282+
display: inline-block;
283+
margin-left: -20px;
284+
margin-top: -40px;
285+
float: left; } }
286+
109287
/**
110288
* $file
111289
* Visual styles for fields.

‎sass/_overrides.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// specific Drupal libraries are used.
33
@import "component/alert";
44
@import "component/ajax";
5+
@import "component/book";
56
@import "component/field";
67
@import "component/file";
78
@import "component/filter";

‎sass/component/_book.scss

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
/**
2+
* Book styling.
3+
*/
4+
5+
#gc-navseq-header {
6+
font-size: 1.2em;
7+
margin-top: 0px;
8+
}
9+
.gc-navseq {
10+
padding-left: 0.9em;
11+
}
12+
.gc-navseq .small,
13+
.gc-navseq small {
14+
line-height: 0em;
15+
}
16+
.gc-navseq * {
17+
font-weight: inherit!important;
18+
line-height: inherit!important;
19+
}
20+
.gc-navseq>li,
21+
ul.gc-navseq-fa>li {
22+
padding-bottom: 20px;
23+
padding-right: 20px;
24+
list-style: none;
25+
padding-left: 1.2em;
26+
border-left: 5px solid #26374a;
27+
position: relative;
28+
}
29+
ul.gc-navseq-fa>li .fa-li {
30+
left: 0em;
31+
position: relative;
32+
}
33+
ul.gc-navseq-fa {
34+
margin-left: 0.9em
35+
}
36+
li .gc-navseq {
37+
margin-top: 16px;
38+
}
39+
.gc-navseq>li>:first-child::before,
40+
ul.gc-navseq-fa li span.fa-li {
41+
border-radius: 50%;
42+
border: 3px solid #26374a;
43+
background-color: #fff;
44+
float: left;
45+
text-decoration: none;
46+
box-sizing: content-box;
47+
line-height: 1.3em;
48+
text-align: center;
49+
padding: 3px;
50+
font-size: 1.0em;
51+
}
52+
ul.gc-navseq-fa li span.fa-li {
53+
height: 1.3em;
54+
width: 1.3em;
55+
margin-left: -2.3em;
56+
}
57+
ul.gc-navseq>li>:first-child::before {
58+
height: 0.8em;
59+
width: 0.8em;
60+
margin-left: -2.05em;
61+
content: "";
62+
}
63+
@-moz-document url-prefix() {
64+
ul.gc-navseq>li>:first-child::before {
65+
margin-left: -2.0em;
66+
}
67+
}
68+
.gc-navseq li a::before {
69+
text-decoration: underline;
70+
}
71+
ul.gc-navseq.noline>li {
72+
border-left: 5px solid transparent;
73+
}
74+
.gc-navseq>li:last-child,
75+
.gc-navseq>li.completed:last-child,
76+
ul.gc-navseq-fa li:last-child {
77+
border-left: 5px solid transparent;
78+
padding-bottom: 0;
79+
}
80+
ul.gc-navseq.noline>li>:first-child::before {
81+
margin-top: 0.2em;
82+
}
83+
/*active*/
84+
.gc-navseq li.active>:first-child::before,
85+
.gc-navseq-fa li.active span.fa-li {
86+
background-color: #26374a;
87+
color: #fff;
88+
}
89+
/*sub-steps*/
90+
.gc-navseq li ul {
91+
margin-top: 16px!important;
92+
}
93+
/*Hover animation */
94+
ul.gc-navseq>li>a[href]:hover::before {
95+
width: 0.83em;
96+
height: 0.83em;
97+
margin-top: -0.1em;
98+
font-size: 1.2em;
99+
margin-left: -1.775em;
100+
line-height: 1.55;
101+
}
102+
ul.gc-navseq.noline>li>a[href]:hover::before {
103+
margin-top: 0.15em;
104+
}
105+
.gc-navseq-fa>li>a[href]:hover span.fa-li {
106+
width: 1.55em;
107+
height: 1.55em;
108+
margin-top: -0.05em;
109+
margin-left: -2.45em;
110+
}
111+
.gc-navseq-fa>li>a[href]:hover span.fa-li::before {
112+
margin-top: -0.1em;
113+
}
114+
ul.gc-navseq > li ul.gc-navseq.noline > li.active::before {
115+
content: " ";
116+
height: 4px;
117+
width: 1.6em;
118+
background-color: #26374a;
119+
position: absolute;
120+
margin-left: -3.6em;
121+
margin-top: 0.825em;
122+
}
123+
124+
section.gc-nav h1 {
125+
font-size: 1.3em;
126+
color: #555;
127+
border-bottom: none;
128+
}
129+
130+
/*page structure desktop (new) */
131+
@media all and (min-width:992px) {
132+
section.gc-nav nav {
133+
position: relative;
134+
width: 33.33%;
135+
left: 66.66%;
136+
float: left;
137+
padding-left: 15px;
138+
margin-bottom: 30px;
139+
}
140+
section.gc-nav h1 {
141+
width: 66.66%;
142+
padding-right: 15px;
143+
margin-top: 20px;
144+
margin-bottom: -5px;
145+
font-weight: 200;
146+
}
147+
section.gc-nav-section {
148+
position: relative;
149+
width: 66.66%;
150+
float: left;
151+
padding-right: 15px;
152+
}
153+
section.gc-nav ~ section.gc-nav-section {
154+
right: 33.33%;
155+
}
156+
section.gc-nav ~ section.gc-nav-section h1 {
157+
margin-top: 0px;
158+
}
159+
section.gc-nav-section + .pagedetails {
160+
clear: both;
161+
}
162+
}
163+
164+
/*Vertical steps in mobile */
165+
@media screen and (max-width:991px) {
166+
section.gc-nav {
167+
margin-top: 30px;
168+
border-right: 5px solid #26374a;
169+
border-top: 5px solid #26374a;
170+
border-radius: 0 6px 6px 0;
171+
}
172+
section.gc-nav nav>.gc-navseq {
173+
padding-top: 15px;
174+
margin-top: -18px;
175+
clear: both;
176+
}
177+
section.gc-nav nav>.gc-navseq > li:last-child {
178+
border-bottom: 5px solid #26374a;
179+
border-left: 5px solid #26374a;
180+
border-bottom-left-radius: 6px;
181+
padding-bottom: 24px;
182+
}
183+
section.gc-nav h1 {
184+
margin-bottom: -18px;
185+
margin-right: 20px;
186+
background-color: white;
187+
padding: 20px 10px 10px 20px;
188+
display: inline-block;
189+
margin-left: -20px;
190+
margin-top: -40px;
191+
float: left;
192+
}
193+
}

0 commit comments

Comments
 (0)