diff options
| -rw-r--r-- | INSTALL | 15 | ||||
| -rw-r--r-- | brep/page.cxx | 6 | ||||
| -rw-r--r-- | www/buildfile | 13 | ||||
| -rw-r--r-- | www/package-details-body.css | 114 | ||||
| -rw-r--r-- | www/package-details.css | 117 | ||||
| -rw-r--r-- | www/package-details.scss | 3 | ||||
| -rw-r--r-- | www/package-search-body.css | 41 | ||||
| -rw-r--r-- | www/package-search.css | 44 | ||||
| -rw-r--r-- | www/package-search.scss | 3 | ||||
| -rw-r--r-- | www/package-version-details-body.css | 168 | ||||
| -rw-r--r-- | www/package-version-details.css | 171 | ||||
| -rw-r--r-- | www/package-version-details.scss | 3 | ||||
| -rw-r--r-- | www/repository-details-body.css | 28 | ||||
| -rw-r--r-- | www/repository-details.css | 31 | ||||
| -rw-r--r-- | www/repository-details.scss | 3 |
15 files changed, 400 insertions, 360 deletions
@@ -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 +{ + /* <code> 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 -{ - /* <code> 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 +{ + /* <code> 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 -{ - /* <code> 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 +{ + /* <code> 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 +{ + /* <code> 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 +{ + /* <code> style. */ + font-family: monospace; + font-size: 0.94em; +} + +/* + * Changes. + * + * This is a <pre> 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 -{ - /* <code> 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 -{ - /* <code> 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 -{ - /* <code> style. */ - font-family: monospace; - font-size: 0.94em; -} - -/* - * Changes. - * - * This is a <pre> 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"; |