Since we're working to add SCSS to the staff client (Bug 19474), we can convert the OPAC to use SCSS too and use the same build process for both.
Created attachment 73002 [details] [review] Bug 20427: Convert OPAC LESS to SCSS This patch converts the OPAC LESS files to SCSS. In the process of converting opac.less (and other .less files) to .scss, I have improved the completeness of the nesting, reordered properties, and in general done cleanup based on rules in .scss-lint.yml. All of these changes should have no impact on the style of the OPAC. This patch modifies the commands used to compile CSS so that OPAC and staff assets can be processed separately: 'yarn build' <-- Builds the staff client assets by default 'yarn build --view opac' <-- Builds OPAC assets To test, apply the patch and compile the CSS by running the command above (or apply the follow-up patch with compiled CSS). Do a thorough review of the OPAC, taking care to cover as many pages as possible and checking responsive behavior at the same time. There should be no visual differences in the OPAC before and after applying the patch.
Created attachment 73003 [details] [review] Bug 20427 (follow-up) Compiled CSS This patch contains the compiled CSS.
Created attachment 73033 [details] [review] Bug 20427: Convert OPAC LESS to SCSS This patch converts the OPAC LESS files to SCSS. In the process of converting opac.less (and other .less files) to .scss, I have improved the completeness of the nesting, reordered properties, and in general done cleanup based on rules in .scss-lint.yml. All of these changes should have no impact on the style of the OPAC. This patch modifies the commands used to compile CSS so that OPAC and staff assets can be processed separately: 'yarn build' <-- Builds the staff client assets by default 'yarn build --view opac' <-- Builds OPAC assets To test, apply the patch and compile the CSS by running the command above (or apply the follow-up patch with compiled CSS). Do a thorough review of the OPAC, taking care to cover as many pages as possible and checking responsive behavior at the same time. There should be no visual differences in the OPAC before and after applying the patch.
Created attachment 73034 [details] [review] Bug 20427 (follow-up) Compiled CSS This patch contains the compiled CSS.
Created attachment 73099 [details] [review] Bug 20427: Convert OPAC LESS to SCSS This patch converts the OPAC LESS files to SCSS. In the process of converting opac.less (and other .less files) to .scss, I have improved the completeness of the nesting, reordered properties, and in general done cleanup based on rules in .scss-lint.yml. All of these changes should have no impact on the style of the OPAC. This patch modifies the commands used to compile CSS so that OPAC and staff assets can be processed separately: 'yarn build' <-- Builds the staff client assets by default 'yarn build --view opac' <-- Builds OPAC assets To test, apply the patch and compile the CSS by running the command above (or apply the follow-up patch with compiled CSS). Do a thorough review of the OPAC, taking care to cover as many pages as possible and checking responsive behavior at the same time. There should be no visual differences in the OPAC before and after applying the patch. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Created attachment 73100 [details] [review] Bug 20427 (follow-up) Compiled CSS This patch contains the compiled CSS. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Hi Owen, can you please rebase 19474 and this on top so I can test? Thx!
Created attachment 73473 [details] [review] Bug 20427: Convert OPAC LESS to SCSS This patch converts the OPAC LESS files to SCSS. In the process of converting opac.less (and other .less files) to .scss, I have improved the completeness of the nesting, reordered properties, and in general done cleanup based on rules in .scss-lint.yml. All of these changes should have no impact on the style of the OPAC. This patch modifies the commands used to compile CSS so that OPAC and staff assets can be processed separately: 'yarn build' <-- Builds the staff client assets by default 'yarn build --view opac' <-- Builds OPAC assets To test, apply the patch and compile the CSS by running the command above (or apply the follow-up patch with compiled CSS). Do a thorough review of the OPAC, taking care to cover as many pages as possible and checking responsive behavior at the same time. There should be no visual differences in the OPAC before and after applying the patch. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Created attachment 73474 [details] [review] Bug 20427 (follow-up) Compiled CSS This patch contains the compiled CSS.
Created attachment 73477 [details] [review] Bug 20427: Convert OPAC LESS to SCSS This patch converts the OPAC LESS files to SCSS. In the process of converting opac.less (and other .less files) to .scss, I have improved the completeness of the nesting, reordered properties, and in general done cleanup based on rules in .scss-lint.yml. All of these changes should have no impact on the style of the OPAC. This patch modifies the commands used to compile CSS so that OPAC and staff assets can be processed separately: 'yarn build' <-- Builds the staff client assets by default 'yarn build --view opac' <-- Builds OPAC assets To test, apply the patch and compile the CSS by running the command above (or apply the follow-up patch with compiled CSS). Do a thorough review of the OPAC, taking care to cover as many pages as possible and checking responsive behavior at the same time. There should be no visual differences in the OPAC before and after applying the patch. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Created attachment 73478 [details] [review] Bug 20427: Convert OPAC LESS to SCSS This patch converts the OPAC LESS files to SCSS. In the process of converting opac.less (and other .less files) to .scss, I have improved the completeness of the nesting, reordered properties, and in general done cleanup based on rules in .scss-lint.yml. All of these changes should have no impact on the style of the OPAC. This patch modifies the commands used to compile CSS so that OPAC and staff assets can be processed separately: 'yarn build' <-- Builds the staff client assets by default 'yarn build --view opac' <-- Builds OPAC assets To test, apply the patch and compile the CSS by running the command above (or apply the follow-up patch with compiled CSS). Do a thorough review of the OPAC, taking care to cover as many pages as possible and checking responsive behavior at the same time. There should be no visual differences in the OPAC before and after applying the patch. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Created attachment 77192 [details] [review] Bug 20427: Convert OPAC LESS to SCSS This patch converts the OPAC LESS files to SCSS. In the process of converting opac.less (and other .less files) to .scss, I have improved the completeness of the nesting, reordered properties, and in general done cleanup based on rules in .scss-lint.yml. All of these changes should have no impact on the style of the OPAC. This patch modifies the commands used to compile CSS so that OPAC and staff assets can be processed separately: 'yarn build' <-- Builds the staff client assets by default 'yarn build --view opac' <-- Builds OPAC assets To test, apply the patch and compile the CSS by running the command above (or apply the follow-up patch with compiled CSS). Do a thorough review of the OPAC, taking care to cover as many pages as possible and checking responsive behavior at the same time. There should be no visual differences in the OPAC before and after applying the patch. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Created attachment 77193 [details] [review] Bug 20427: Convert OPAC LESS to SCSS This patch converts the OPAC LESS files to SCSS. In the process of converting opac.less (and other .less files) to .scss, I have improved the completeness of the nesting, reordered properties, and in general done cleanup based on rules in .scss-lint.yml. All of these changes should have no impact on the style of the OPAC. This patch modifies the commands used to compile CSS so that OPAC and staff assets can be processed separately: 'yarn build' <-- Builds the staff client assets by default 'yarn build --view opac' <-- Builds OPAC assets To test, apply the patch and compile the CSS by running the command above (or apply the follow-up patch with compiled CSS). Do a thorough review of the OPAC, taking care to cover as many pages as possible and checking responsive behavior at the same time. There should be no visual differences in the OPAC before and after applying the patch. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Created attachment 77628 [details] [review] Bug 20427: (follow-up) Bring SCSS up to date with latest LESS changes This patch catches the SCSS up to the latest changes in master: Changes to opac.less: Bug 20756 Bug 20559 Bug 7547 Changes to print.less: Bug 16575
Awesome work all! Pushed to master for 18.11
Enhancement, this will not be backported for the 18.05.x series.