From 648b0ee930d02316186603ed1e0e95f96611f1d3 Mon Sep 17 00:00:00 2001 From: Boris Kolpackov Date: Tue, 2 Feb 2016 14:04:06 +0200 Subject: Add support for optimizing CSS with SASS --- INSTALL | 15 ++- brep/page.cxx | 6 +- www/buildfile | 13 ++- www/package-details-body.css | 114 +++++++++++++++++++++++ www/package-details.css | 117 +----------------------- www/package-details.scss | 3 + www/package-search-body.css | 41 +++++++++ www/package-search.css | 44 +-------- www/package-search.scss | 3 + www/package-version-details-body.css | 168 ++++++++++++++++++++++++++++++++++ www/package-version-details.css | 171 +---------------------------------- www/package-version-details.scss | 3 + www/repository-details-body.css | 28 ++++++ www/repository-details.css | 31 +------ www/repository-details.scss | 3 + 15 files changed, 400 insertions(+), 360 deletions(-) create mode 100644 www/package-details-body.css create mode 100644 www/package-details.scss create mode 100644 www/package-search-body.css create mode 100644 www/package-search.scss create mode 100644 www/package-version-details-body.css create mode 100644 www/package-version-details.scss create mode 100644 www/repository-details-body.css create mode 100644 www/repository-details.scss diff --git a/INSTALL b/INSTALL index 46a94d5..4a0f45f 100644 --- a/INSTALL +++ b/INSTALL @@ -205,7 +205,16 @@ $ sudo systemctl restart apache2 To verify, visit the repository root. To troubleshoot, see Apache logs. -7. Setup Periodic Loader Execution +7. Optimize CSS + +This step is optional and involves optimizing the CSS files used by brep. For +example, using the sassc(1) command line tool: + +$ cd install/share/brep/www/ +$ for i in *.scss; do sassc -s compressed $i `basename -s .scss $i`.css; done + + +8. Setup Periodic Loader Execution In this guide we will use the systemd user session to periodically run loader as the brep user. If your installation doesn't use systemd, then a cron job @@ -243,7 +252,7 @@ If everything looks good, enable the timer to be started at boot time: $ systemctl --user enable brep-load.timer -8. Upgrade Procedure +9. Upgrade Procedure During upgrade we will stop apache for what should normally be a short period of time. To ensure that there are no surprises, for production environments it @@ -296,3 +305,5 @@ Start apache: $ sudo systemctl start apache2 To verify, visit the repository root. To troubleshoot, see Apache logs. + +You may also need to repeat the CSS optimization step above. diff --git a/brep/page.cxx b/brep/page.cxx index 322efbd..4b13bcf 100644 --- a/brep/page.cxx +++ b/brep/page.cxx @@ -35,11 +35,7 @@ namespace brep { static const path css ("@"); - s << *LINK(REL="stylesheet", TYPE="text/css", - HREF=root_ / css / path ("common.css")) - << *LINK(REL="stylesheet", TYPE="text/css", - HREF=root_ / css / path ("brep-common.css")) - << *LINK(REL="stylesheet", TYPE="text/css", HREF=root_ / css / path_); + s << *LINK(REL="stylesheet", TYPE="text/css", HREF=root_ / css / path_); } // DIV_HEADER diff --git a/www/buildfile b/www/buildfile index f600b5d..bd4d8a1 100644 --- a/www/buildfile +++ b/www/buildfile @@ -6,5 +6,14 @@ define css: file css{*}: extension = css css{*}: install = data/www -./: css{common brep-common package-details package-search \ -package-version-details repository-details} +define scss: file +scss{*}: extension = scss +scss{*}: install = data/www + +./: css{common brep-common \ + package-details package-details-body \ + package-search package-search-body \ + package-version-details package-version-details-body \ + repository-details repository-details-body} \ + scss{package-details package-search package-version-details \ + repository-details} diff --git a/www/package-details-body.css b/www/package-details-body.css new file mode 100644 index 0000000..dc09a10 --- /dev/null +++ b/www/package-details-body.css @@ -0,0 +1,114 @@ +#heading +{ + display: table; + table-layout: fixed; + width: 100%; + border: none; +} + +/* Since it is a link to itself, it will always be visited. */ +#heading a:visited {color: #006fbf;} +#heading a:hover, h1 a:active {color: #0087e7; text-decoration: none;} + +h1 +{ + font-family: monospace; + font-weight: normal; + font-size: 2.074em; + line-height: 1.4em; + + margin: .6em 0 .6em 0; + + display: table-cell; + text-align: left; +} + +#heading > a +{ + font-size: 1.32em; + line-height: 1.4em; + + display: table-cell; + text-align: right; + width: 3.2em; + vertical-align: middle; +} + +h2 +{ + font-style: italic; + font-weight: normal; + font-size: 1.32em; + line-height: 1.4em; + + margin: .4em 0 .4em 0; +} + +h1, h2 +{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Re-styling for full page variant. */ + +.full h2 +{ + white-space: normal; +} + +/* + * Package details table. + */ +#package +{ + margin-top: 1.5em; + margin-bottom: 1.5em; +} +#package th {width: 6.4em;} + +/* + * Search form (based on form-table) + */ +#search-txt, #search-txt input {width: 100%;} +#search-btn {padding-left: .4em;} + +/* + * Version count. + */ +#count +{ + font-size: 1.32em; + line-height: 1.4em; + color: #555; + + margin: 1.2em 0 0 0; +} + +/* + * Version table. + */ +table.version +{ + margin-top: .8em; + margin-bottom: .8em; + + padding-top: .4em; + padding-bottom: .4em; + +} +table.version:nth-child(even) {background-color: rgba(0, 0, 0, 0.07);} + +table.version th {width: 6.4em;} + +table.version tr.version td .value, +table.version tr.priority td .value, +table.version tr.location td .value, +table.version tr.depends td .value, +table.version tr.requires td .value +{ + /* style. */ + font-family: monospace; + font-size: 0.94em; +} diff --git a/www/package-details.css b/www/package-details.css index dc09a10..2ef19e0 100644 --- a/www/package-details.css +++ b/www/package-details.css @@ -1,114 +1,3 @@ -#heading -{ - display: table; - table-layout: fixed; - width: 100%; - border: none; -} - -/* Since it is a link to itself, it will always be visited. */ -#heading a:visited {color: #006fbf;} -#heading a:hover, h1 a:active {color: #0087e7; text-decoration: none;} - -h1 -{ - font-family: monospace; - font-weight: normal; - font-size: 2.074em; - line-height: 1.4em; - - margin: .6em 0 .6em 0; - - display: table-cell; - text-align: left; -} - -#heading > a -{ - font-size: 1.32em; - line-height: 1.4em; - - display: table-cell; - text-align: right; - width: 3.2em; - vertical-align: middle; -} - -h2 -{ - font-style: italic; - font-weight: normal; - font-size: 1.32em; - line-height: 1.4em; - - margin: .4em 0 .4em 0; -} - -h1, h2 -{ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* Re-styling for full page variant. */ - -.full h2 -{ - white-space: normal; -} - -/* - * Package details table. - */ -#package -{ - margin-top: 1.5em; - margin-bottom: 1.5em; -} -#package th {width: 6.4em;} - -/* - * Search form (based on form-table) - */ -#search-txt, #search-txt input {width: 100%;} -#search-btn {padding-left: .4em;} - -/* - * Version count. - */ -#count -{ - font-size: 1.32em; - line-height: 1.4em; - color: #555; - - margin: 1.2em 0 0 0; -} - -/* - * Version table. - */ -table.version -{ - margin-top: .8em; - margin-bottom: .8em; - - padding-top: .4em; - padding-bottom: .4em; - -} -table.version:nth-child(even) {background-color: rgba(0, 0, 0, 0.07);} - -table.version th {width: 6.4em;} - -table.version tr.version td .value, -table.version tr.priority td .value, -table.version tr.location td .value, -table.version tr.depends td .value, -table.version tr.requires td .value -{ - /* style. */ - font-family: monospace; - font-size: 0.94em; -} +@import url(common.css); +@import url(brep-common.css); +@import url(package-details-body.css); diff --git a/www/package-details.scss b/www/package-details.scss new file mode 100644 index 0000000..836479f --- /dev/null +++ b/www/package-details.scss @@ -0,0 +1,3 @@ +@import "common"; +@import "brep-common"; +@import "package-details-body"; diff --git a/www/package-search-body.css b/www/package-search-body.css new file mode 100644 index 0000000..ef8b59c --- /dev/null +++ b/www/package-search-body.css @@ -0,0 +1,41 @@ +/* + * Search form (based on form-table) + */ +#search-txt, #search-txt input {width: 100%;} +#search-btn {padding-left: .4em;} + +/* + * Package count. + */ +#count +{ + font-size: 1.32em; + line-height: 1.4em; + color: #555; + + margin: 1.2em 0 0 0; +} + +/* + * Version table. + */ +.package +{ + margin-top: .8em; + margin-bottom: .8em; + + padding-top: .4em; + padding-bottom: .4em; +} +.package:nth-child(even) {background-color: rgba(0, 0, 0, 0.07);} + +.package th {width: 6.4em;} + +.package tr.name td .value, +.package tr.depends td .value, +.package tr.requires td .value +{ + /* style. */ + font-family: monospace; + font-size: 0.94em; +} diff --git a/www/package-search.css b/www/package-search.css index ef8b59c..88e0be9 100644 --- a/www/package-search.css +++ b/www/package-search.css @@ -1,41 +1,3 @@ -/* - * Search form (based on form-table) - */ -#search-txt, #search-txt input {width: 100%;} -#search-btn {padding-left: .4em;} - -/* - * Package count. - */ -#count -{ - font-size: 1.32em; - line-height: 1.4em; - color: #555; - - margin: 1.2em 0 0 0; -} - -/* - * Version table. - */ -.package -{ - margin-top: .8em; - margin-bottom: .8em; - - padding-top: .4em; - padding-bottom: .4em; -} -.package:nth-child(even) {background-color: rgba(0, 0, 0, 0.07);} - -.package th {width: 6.4em;} - -.package tr.name td .value, -.package tr.depends td .value, -.package tr.requires td .value -{ - /* style. */ - font-family: monospace; - font-size: 0.94em; -} +@import url(common.css); +@import url(brep-common.css); +@import url(package-search-body.css); diff --git a/www/package-search.scss b/www/package-search.scss new file mode 100644 index 0000000..ae2689e --- /dev/null +++ b/www/package-search.scss @@ -0,0 +1,3 @@ +@import "common"; +@import "brep-common"; +@import "package-search-body"; diff --git a/www/package-version-details-body.css b/www/package-version-details-body.css new file mode 100644 index 0000000..9d08a42 --- /dev/null +++ b/www/package-version-details-body.css @@ -0,0 +1,168 @@ +#heading +{ + display: table; + table-layout: fixed; + width: 100%; + border: none; +} + +/* Since it is a link to itself, it will always be visited. */ +#heading a:visited {color: #006fbf;} +#heading a:hover, h1 a:active {color: #0087e7; text-decoration: none;} + +h1 +{ + font-family: monospace; + font-weight: normal; + font-size: 2.074em; + line-height: 1.4em; + color: #444; + + margin: .6em 0 .6em 0; + + display: table-cell; + text-align: left; +} + +#heading > a +{ + font-size: 1.32em; + line-height: 1.4em; + + display: table-cell; + text-align: right; + width: 3.2em; + vertical-align: middle; +} + +h1 a:first-child {margin-right: .14em;} +h1 a:last-child {margin-left: .14em;} + +h2 +{ + font-style: italic; + font-weight: normal; + font-size: 1.32em; + line-height: 1.4em; + + margin: .4em 0 .4em 0; +} + +h3 +{ + font-family: monospace; + font-weight: normal; + font-size: 1.26em; + line-height: 1.4em; + + margin: 1.8em 0 0 0; +} +h3:after{content: ":";} + +h1, h2, h3 +{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Re-styling for full page variant. */ + +.full h2 +{ + white-space: normal; +} + +/* + * Version details table. + */ +#version +{ + margin-top: .5em; + margin-bottom: 1em; + + padding-top: .4em; + padding-bottom: .4em; + + background-color: rgba(0, 0, 0, 0.07); /* Emphasize. */ + + /* + background: #eee; + border-radius: 6px; + border: 1px outset rgba(230,230,230,.24); + */ +} +#version th {width: 6.4em;} + +#version tr.version td .value, +#version tr.priority td .value, +#version tr.location td .value +{ + /* style. */ + font-family: monospace; + font-size: 0.94em; +} + +/* + * Package details table. + */ +#package +{ + margin-top: 1.2em; + margin-bottom: 1em; +} +#package th {width: 6.4em;} + +/* + * Dependencies and requirements tables. + */ +#depends {margin-top: .4em; margin-bottom: 1em;} +#depends th {width: 2.8em; text-align: center;} +#depends th:after{content: "";} + +/* Striping. For some reason (related to flexbox), this works exactly as + we want, that is, the background extends all the way to the browser's + right frame. */ +#depends tr:nth-child(even) td {background-color: rgba(0, 0, 0, 0.07);} +#depends td {padding-left: .4em;} +#depends td .comment {padding-right: .4em;} + +/* +#depends td .value {padding-left: .4em;} +#depends td .comment {padding-right: .4em;} +*/ + +#depends tr.depends td .value +{ + /* style. */ + font-family: monospace; + font-size: 0.94em; +} + +#requires {margin-top: .4em; margin-bottom: 1em;} +#requires th {width: 2.8em; text-align: center;} +#requires th:after{content: "";} + +#requires tr:nth-child(even) td {background-color: rgba(0, 0, 0, 0.07);} +#requires td {padding-left: .4em;} +#requires td .comment {padding-right: .4em;} + +#requires tr.requires td .value +{ + /* style. */ + font-family: monospace; + font-size: 0.94em; +} + +/* + * Changes. + * + * This is a 
 block that fits lines up to 80 characters long and
+ * wraps longer ones.
+ */
+#changes 
+{     
+  font-size: 0.78em;
+  white-space: pre-wrap;
+  margin: .5em 0 .5em 0;
+}
diff --git a/www/package-version-details.css b/www/package-version-details.css
index 9d08a42..022a173 100644
--- a/www/package-version-details.css
+++ b/www/package-version-details.css
@@ -1,168 +1,3 @@
-#heading
-{ 
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-  border: none;
-}
-
-/* Since it is a link to itself, it will always be visited. */
-#heading a:visited {color: #006fbf;}
-#heading a:hover, h1 a:active {color: #0087e7; text-decoration: none;}
-
-h1
-{
-  font-family: monospace;
-  font-weight: normal;
-  font-size: 2.074em;
-  line-height: 1.4em;
-  color: #444;
-
-  margin: .6em 0 .6em 0;
-
-  display: table-cell;
-  text-align: left; 
-}
-
-#heading > a 
-{
-  font-size: 1.32em;
-  line-height: 1.4em;
-
-  display: table-cell;   
-  text-align: right;
-  width: 3.2em;
-  vertical-align: middle;
-}
-
-h1 a:first-child {margin-right: .14em;}
-h1 a:last-child {margin-left: .14em;}
-
-h2
-{
-  font-style: italic;
-  font-weight: normal;
-  font-size: 1.32em;
-  line-height: 1.4em;
-
-  margin: .4em 0 .4em 0;
-}
-
-h3
-{
-  font-family: monospace;  
-  font-weight: normal;
-  font-size: 1.26em;
-  line-height: 1.4em;
-
-  margin: 1.8em 0 0 0;
-}
-h3:after{content: ":";}
-
-h1, h2, h3
-{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Re-styling for full page variant. */
-
-.full h2
-{
-  white-space: normal;
-}
-
-/* 
- * Version details table. 
- */
-#version 
-{
-  margin-top: .5em;
-  margin-bottom: 1em;
-
-  padding-top: .4em;
-  padding-bottom: .4em;
-
-  background-color: rgba(0, 0, 0, 0.07);  /* Emphasize. */
-
-  /*
-  background: #eee;
-  border-radius: 6px;
-  border: 1px outset rgba(230,230,230,.24);
-  */
-}
-#version th {width: 6.4em;}
-
-#version tr.version td .value,
-#version tr.priority td .value,
-#version tr.location td .value
-{
-  /*  style. */
-  font-family: monospace;
-  font-size: 0.94em;
-}
-
-/* 
- * Package details table. 
- */
-#package 
-{
-  margin-top: 1.2em;
-  margin-bottom: 1em;
-}
-#package th {width: 6.4em;}
-
-/* 
- * Dependencies and requirements tables. 
- */
-#depends {margin-top: .4em; margin-bottom: 1em;}
-#depends th {width: 2.8em; text-align: center;}
-#depends th:after{content: "";}
-
-/* Striping. For some reason (related to flexbox), this works exactly as
-   we want, that is, the background extends all the way to the browser's
-   right frame. */
-#depends tr:nth-child(even) td {background-color: rgba(0, 0, 0, 0.07);}
-#depends td {padding-left: .4em;}
-#depends td .comment {padding-right: .4em;}
-
-/*
-#depends td .value {padding-left: .4em;}
-#depends td .comment {padding-right: .4em;}
-*/
-
-#depends tr.depends td .value
-{
-  /*  style. */
-  font-family: monospace;
-  font-size: 0.94em;
-}
-
-#requires {margin-top: .4em; margin-bottom: 1em;}
-#requires th {width: 2.8em; text-align: center;}
-#requires th:after{content: "";}
-
-#requires tr:nth-child(even) td {background-color: rgba(0, 0, 0, 0.07);}
-#requires td {padding-left: .4em;}
-#requires td .comment {padding-right: .4em;}
-
-#requires tr.requires td .value
-{
-  /*  style. */
-  font-family: monospace;
-  font-size: 0.94em;
-}
-
-/* 
- * Changes.
- *
- * This is a 
 block that fits lines up to 80 characters long and
- * wraps longer ones.
- */
-#changes 
-{     
-  font-size: 0.78em;
-  white-space: pre-wrap;
-  margin: .5em 0 .5em 0;
-}
+@import url(common.css);
+@import url(brep-common.css);
+@import url(package-version-details-body.css);
diff --git a/www/package-version-details.scss b/www/package-version-details.scss
new file mode 100644
index 0000000..e205076
--- /dev/null
+++ b/www/package-version-details.scss
@@ -0,0 +1,3 @@
+@import "common";
+@import "brep-common";
+@import "package-version-details-body";
diff --git a/www/repository-details-body.css b/www/repository-details-body.css
new file mode 100644
index 0000000..29d62f6
--- /dev/null
+++ b/www/repository-details-body.css
@@ -0,0 +1,28 @@
+h1
+{
+  font-family: monospace;  
+  font-weight: normal;
+  font-size: 2.074em;
+  line-height: 1.4em;
+
+  margin: 1.6em 0 .4em 0;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+h1:first-child {margin-top: .6em;}
+
+/* Since it is a link to itself, it will always be visited. */
+h1 a:visited {color: #006fbf;}
+h1 a:hover, h1 a:active {color: #0087e7; text-decoration: none;}
+
+h2
+{
+  font-style: italic;
+  font-weight: normal;
+  font-size: 1.32em;
+  line-height: 1.4em;
+
+  margin: .4em 0 .4em 0;
+}
diff --git a/www/repository-details.css b/www/repository-details.css
index 29d62f6..0e73198 100644
--- a/www/repository-details.css
+++ b/www/repository-details.css
@@ -1,28 +1,3 @@
-h1
-{
-  font-family: monospace;  
-  font-weight: normal;
-  font-size: 2.074em;
-  line-height: 1.4em;
-
-  margin: 1.6em 0 .4em 0;
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-h1:first-child {margin-top: .6em;}
-
-/* Since it is a link to itself, it will always be visited. */
-h1 a:visited {color: #006fbf;}
-h1 a:hover, h1 a:active {color: #0087e7; text-decoration: none;}
-
-h2
-{
-  font-style: italic;
-  font-weight: normal;
-  font-size: 1.32em;
-  line-height: 1.4em;
-
-  margin: .4em 0 .4em 0;
-}
+@import url(common.css);
+@import url(brep-common.css);
+@import url(repository-details-body.css);
diff --git a/www/repository-details.scss b/www/repository-details.scss
new file mode 100644
index 0000000..3755a72
--- /dev/null
+++ b/www/repository-details.scss
@@ -0,0 +1,3 @@
+@import "common";
+@import "brep-common";
+@import "repository-details-body";
-- 
cgit v1.1