diff --git a/aurweb/asgi.py b/aurweb/asgi.py index b6578f33..eb02413b 100644 --- a/aurweb/asgi.py +++ b/aurweb/asgi.py @@ -79,11 +79,7 @@ async def app_startup(): "endpoint is disabled." ) - app.mount("/static/css", StaticFiles(directory="web/html/css"), name="static_css") - app.mount("/static/js", StaticFiles(directory="web/html/js"), name="static_js") - app.mount( - "/static/images", StaticFiles(directory="web/html/images"), name="static_images" - ) + app.mount("/static", StaticFiles(directory="static"), name="static_files") # Add application routes. def add_router(module): diff --git a/static/css/archnavbar/archlogo.png b/static/css/archnavbar/archlogo.png new file mode 100644 index 00000000..3d2cd40f Binary files /dev/null and b/static/css/archnavbar/archlogo.png differ diff --git a/static/css/archnavbar/archnavbar.css b/static/css/archnavbar/archnavbar.css new file mode 100644 index 00000000..18c3aca6 --- /dev/null +++ b/static/css/archnavbar/archnavbar.css @@ -0,0 +1,26 @@ +/* + * ARCH GLOBAL NAVBAR + * We're forcing all generic selectors with !important + * to help prevent other stylesheets from interfering. + */ + +/* container for the entire bar */ +#archnavbar { min-height: 40px !important; padding: 10px 15px !important; background: #333 !important; border-bottom: 5px #08c solid !important; } +#archnavbarlogo { background: url('archlogo.png') no-repeat !important; } + +/* move the heading/paragraph text offscreen */ +#archnavbarlogo p { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; } +#archnavbarlogo h1 { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; } + +/* make the link the same size as the logo */ +#archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; } + +/* display the list inline, float it to the right and style it */ +[dir="rtl"] #archnavbar ul { text-align: left !important; } +#archnavbar ul { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: 0px !important; text-align: right !important; } +[dir="rtl"] #archnavbar ul li { padding: 14px 0px 0px 15px !important; } +#archnavbar ul li { display: inline-block !important; font-size: 14px !important; font-family: sans-serif !important; line-height: 14px !important; padding: 14px 15px 0px !important; } + +/* style the links */ +#archnavbar ul#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; } +#archnavbar ul li a:hover { color: white !important; text-decoration: underline !important; } diff --git a/static/css/archnavbar/aurlogo.png b/static/css/archnavbar/aurlogo.png new file mode 100644 index 00000000..69110d8e Binary files /dev/null and b/static/css/archnavbar/aurlogo.png differ diff --git a/static/css/archweb.css b/static/css/archweb.css new file mode 100644 index 00000000..0c0b235d --- /dev/null +++ b/static/css/archweb.css @@ -0,0 +1,1255 @@ +/* + * Font sizing based on 16px browser defaults (use em): + * 14px = 0.875em + * 13px = 0.812em + * 12px = 0.75em + * 11px = 0.6875em + */ + +/* + * ARCH GLOBAL NAVBAR + * We're forcing all generic selectors with !important + * to help prevent other stylesheets from interfering. + */ + +/* container for the entire bar */ + +[dir="rtl"] html { + direction: rtl; +} +#archnavbar { min-height: 40px !important; padding: 10px 15px !important; background: #333 !important; border-bottom: 5px #08c solid !important; } + +[dir="rtl"] #archnavbarlogo { float: right !important; } +#archnavbarlogo { float: left !important; margin: 0 !important; padding: 0 !important; height: 40px !important; width: 190px !important; background: url('archnavbar/archlogo.png') no-repeat !important; } +@media (-webkit-min-device-pixel-ratio: 1.2), (min--moz-device-pixel-ratio: 1.2), (-o-min-device-pixel-ratio: 2/1) { + [dir="rtl"] #archnavbarlogo { float: right !important;} + #archnavbarlogo { float: left !important; margin: 0 !important; padding: 0 !important; height: 40px !important; width: 190px !important; background: url(archnavbar/archlogo.svg) no-repeat !important;background-size:100% !important; + } +} + +/* move the heading text offscreen */ +#archnavbarlogo h1 { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; } + +/* make the link the same size as the logo */ +#archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; } + +/* display the list inline, float it to the right and style it */ +[dir="rtl"] #archnavbarlist {text-align: left !important;} +#archnavbarlist { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: 0px !important; text-align: right !important; } +[dir="rtl"] #archnavbarlist li { padding: 14px 0px 0px 15px; } +#archnavbarlist li { display: inline-block !important; font-size: 14px !important; font-family: sans-serif !important; line-height: 14px !important; padding: 14px 15px 0px !important; } + +/* style the links */ +#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; } +#archnavbarlist li a:hover { color: white !important; text-decoration: underline !important; } + +/* END ARCH GLOBAL NAVBAR */ + +/* simple reset */ +* { + margin: 0; + padding: 0; + line-height: 1.4; +} + +/* general styling */ +body { + min-width: 650px; + background: #f6f9fc; + color: #222; + font: normal 100% sans-serif; + text-align: center; +} + +p { + margin: .33em 0 1em; +} + +[dir="rtl"] ol, +[dir="rtl"] ul { + padding-right: 2em; +} + +ol, +ul { + margin-bottom: 1em; + padding-left: 2em; +} + + ul { + list-style: square; + } + +code { + font: 1.2em monospace; + background: #ffd; + padding: 0.15em 0.25em; +} + +pre { + font: 1.2em monospace; + border: 1px solid #bdb; + background: #dfd; + padding: 0.5em; + margin: 1em; +} + + pre code { + display: block; + background: none; + overflow: auto; + } + +blockquote { + margin: 1.5em 2em; +} + +input { + vertical-align: middle; +} + +select[multiple] { + padding: 1px 0; +} + + select[multiple] option { + padding: 0 0.5em 0 0.3em; + } + +input[type=submit] { + padding: 0 0.6em; +} + +.clear { + clear: both; +} + +.hide { + display: none; +} + +hr { + border: none; + border-top: 1px solid #888; +} + +img { + border: 0; +} + +/* scale fonts down to a sane default (16 * .812 = 13px) */ +#content { + font-size: 0.812em; +} + +/* link style */ +a { + text-decoration: none; +} + + a:link, + th a:visited { + color: #07b; + } + + a:visited { + color: #666; + } + + a:hover { + text-decoration: underline; + color: #666; + } + + a:active { + color: #e90; + } + +/* special anchor elements */ +[dir="rtl"] a.headerlink { + padding-right: 0.5em; +} + +a.headerlink { + visibility: hidden; + padding-left: 0.5em; +} + +h3:hover > a.headerlink { + visibility: visible; +} + +/* headings */ +h2 { + font-size: 1.5em; + margin-bottom: 0.5em; + border-bottom: 1px solid #888; +} + +h3 { + font-size: 1.25em; + margin-top: .5em; +} + +h4 { + font-size: 1.15em; + margin-top: 1em; +} + +h5 { + font-size: 1em; + margin-top: 1em; +} + +/* general layout */ +[dir="rtl"] #content { + text-align: right; +} + +#content { + width: 95%; + margin: 0 auto; + text-align: left; +} + +[dir="rtl"] #content-left-wrapper { + float: right; +} + +#content-left-wrapper { + float: left; + width: 100%; /* req to keep content above sidebar in source code */ +} + +[dir="rtl"] #content-left { + margin: 0 0 0 340px; +} + +#content-left { + margin: 0 340px 0 0; +} + +[dir="rtl"] #content-right { + float: right; + margin-right: -300px; +} + +#content-right { + float: left; + width: 300px; + margin-left: -300px; +} + +div.box { + margin-bottom: 1.5em; + padding: 0.65em; + background: #ecf2f5; + border: 1px solid #bcd; +} + +#footer { + clear: both; + margin: 2em 0 1em; +} + + #footer p { + margin: 0; + text-align: center; + font-size: 0.85em; + } + +/* alignment */ +div.center, +table.center, +img.center { + width: auto; + margin-left: auto; + margin-right: auto; +} + +p.center, +td.center, +th.center { + text-align: center; +} + +/* table generics */ +table { + width: 100%; + border-collapse: collapse; +} + + table .wrap { + white-space: normal; + } + +[dir="rtl"] th, +[dir="rtl"] td { + text-align: right; +} + +th, +td { + white-space: nowrap; + text-align: left; +} + + th { + vertical-align: middle; + font-weight: bold; + } + + td { + vertical-align: top; + } + +/* table pretty styles */ +table.pretty2 { + width: auto; + margin-top: 0.25em; + margin-bottom: 0.5em; + border-collapse: collapse; + border: 1px solid #bbb; +} + + .pretty2 th { + padding: 0.35em; + background: #eee; + border: 1px solid #bbb; + } + + .pretty2 td { + padding: 0.35em; + border: 1px dotted #bbb; + } + +table.compact { + width: auto; +} + + .compact td { + padding: 0.25em 0 0.25em 1.5em; + } + + +/* definition lists */ +dl { + clear: both; +} + + dl dt, + dl dd { + margin-bottom: 4px; + padding: 8px 0 4px; + font-weight: bold; + border-top: 1px dotted #bbb; + } + + [dir="rtl"] dl dt { + float: right; + padding-left: 15px; + } + dl dt { + color: #333; + float: left; + padding-right: 15px; + } + +/* forms and input styling */ +form p { + margin: 0.5em 0; +} + +fieldset { + border: 0; +} + +label { + width: 12em; + vertical-align: top; + display: inline-block; + font-weight: bold; +} + +input[type=text], +input[type=password], +input[type=email], +textarea { + padding: 0.10em; +} + +form.general-form label, +form.general-form .form-help { + width: 10em; + vertical-align: top; + display: inline-block; +} + +form.general-form input[type=text], +form.general-form textarea { + width: 45%; +} + +/* archdev navbar */ +#archdev-navbar { + margin: 1.5em 0; +} + + #archdev-navbar ul { + list-style: none; + margin: -0.5em 0; + padding: 0; + } + + #archdev-navbar li { + display: inline; + margin: 0; + padding: 0; + font-size: 0.9em; + } + + #archdev-navbar li a { + padding: 0 0.5em; + color: #07b; + } + +/* error/info messages (x pkg is already flagged out-of-date, etc) */ +#sys-message { + width: 35em; + text-align: center; + margin: 1em auto; + padding: 0.5em; + background: #fff; + border: 1px solid #f00; +} + + #sys-message p { + margin: 0; + } + +ul.errorlist { + color: red; +} + +form ul.errorlist { + margin: 0.5em 0; +} + +/* JS sorting via tablesorter */ +[dir="rtl"] table th.tablesorter-header { + padding-left: 20px; + background-position: center left ; +} +table th.tablesorter-header { + padding-right: 20px; + background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); + background-repeat: no-repeat; + background-position: center right; + cursor: pointer; +} + +table thead th.tablesorter-headerAsc { + background-color: #e4eeff; + background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); +} + +table thead th.tablesorter-headerDesc { + background-color: #e4eeff; + background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); +} + +table thead th.sorter-false { + background-image: none; + cursor: default; +} + +.tablesorter-header:focus { + outline: none; +} + +/** + * PAGE SPECIFIC STYLES + */ + +/* home: introduction */ +[dir="rtl"] #intro p.readmore { + text-align: left; +} +#intro p.readmore { + margin: -0.5em 0 0 0; + font-size: .9em; + text-align: right; +} + +/* home: news */ +#news { + margin-top: 1.5em; +} + + [dir="rtl"] #news h3 { + float: right; + } + #news h3 { + float: left; + padding-bottom: .5em + } + + #news div { + margin-bottom: 1em; + } + + #news div p { + margin-bottom: 0.5em; + } + + #news .more { + font-weight: normal; + } + [dir="rtl"] #news .rss-icon { + float: left; + } + #news .rss-icon { + float: right; + margin-top: 1em; + } + + #news h4 { + clear: both; + font-size: 1em; + margin-top: 1.5em; + border-bottom: 1px dotted #bbb; + } + [dir="rtl"] #news .timestamp { + float: left; + margin: -1.8em 0 0 0.5em; + } + #news .timestamp { + float: right; + font-size: 0.85em; + margin: -1.8em 0.5em 0 0; + } + +/* home: arrowed headings */ +#news h3 a { + display: block; + background: #1794D1; + font-size: 15px; + padding: 2px 10px; + color: white; +} + + #news a:active { + color: white; + } + +h3 span.arrow { + display: block; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid #1794D1; + margin: 0 auto; + font-size: 0; + line-height: 0px; +} + +/* home: pkgsearch box */ +#pkgsearch { + padding: 1em 0.75em; + background: #3ad; + color: #fff; + border: 1px solid #08b; +} + + #pkgsearch label { + width: auto; + padding: 0.1em 0; + } + + [dir="rtl"] #pkgsearch input { + float: left; + } + #pkgsearch input { + width: 10em; + float: right; + font-size: 1em; + color: #000; + background: #fff; + border: 1px solid #09c; + } + + [dir="rtl"] .pkgsearch-typeahead { + right: 0; + float: right; + text-align: right; + } + + .pkgsearch-typeahead { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + padding: 0.15em 0.1em; + margin: 0; + min-width: 10em; + font-size: 1em; + text-align: left; + list-style: none; + background-color: #f6f9fc; + border: 1px solid #09c; + } + + .pkgsearch-typeahead li a { + color: #000; + } + + .pkgsearch-typeahead li:hover a, + .pkgsearch-typeahead li.active a { + color: #07b; + } + +/* home: recent pkg updates */ +#pkg-updates h3 { + margin: 0 0 0.3em; +} + + #pkg-updates .more { + font-weight: normal; + } + [dir="rtl"] #pkg-updates .rss-icon { + float: left; + } + #pkg-updates .rss-icon { + float: right; + margin: -2em 0 0 0; + } + + [dir="rtl"] #pkg-updates .rss-icon.latest { + margin-left: 1em; + } + #pkg-updates .rss-icon.latest { + margin-right: 1em; + } + + #pkg-updates table { + margin: 0; + direction: ltr; + } + + #pkg-updates td.pkg-name { + white-space: normal; + text-align: left; + } + + [dir="rtl"] #pkg-updates td.pkg-arch { + text-align: left; + } + #pkg-updates td.pkg-arch { + text-align: right; + } + + #pkg-updates span.testing { + font-style: italic; + } + + #pkg-updates span.staging { + font-style: italic; + color: #ff8040; + } + +/* home: sidebar navigation */ +[dir="rtl"] #nav-sidebar ul { + margin: 0.5em 1em 0.5em 0; +} + +#nav-sidebar ul { + list-style: none; + margin: 0.5em 0 0.5em 1em; + padding: 0; +} + +/* home: sponsor banners */ +#arch-sponsors img { + padding: 0.3em 0; +} + +/* home: sidebar components (navlist, sponsors, pkgsearch, etc) */ +div.widget { + margin-bottom: 1.5em; +} + +/* feeds page */ +[dir="rtl"] #rss-feeds .rss { + padding-left: 20px; + background: url(rss.png) top left no-repeat; +} + +#rss-feeds .rss { + padding-right: 20px; + background: url(rss.png) top right no-repeat; +} + +/* artwork: logo images */ +#artwork img.inverted { + background: #333; + padding: 0; +} + +#artwork div.imagelist img { + display: inline; + margin: 0.75em; +} + +/* news: article list */ +[dir="rtl"] .news-nav { + float: left; +} +.news-nav { + float: right; + margin-top: -2.2em; +} + + .news-nav .prev, + .news-nav .next { + margin: 0 1em; + } + +/* news: article pages */ +div.news-article .article-info { + margin: 0; + color: #999; +} + +/* news: add/edit article */ +#newsform { + width: 60em; +} + + #newsform input[type=text], + #newsform textarea { + width: 75%; + } + +#news-preview { + display: none; +} + +/* todolists: list */ +[dir="rtl"] .todolist-nav { + float: left; +} +.todolist-nav { + float: right; + margin-top: -2.2em; +} + + .todolist-nav .prev, + .todolist-nav .next { + margin: 0 1em; + } + +/* donate: donor list */ +#donor-list ul { + width: 100%; +} + /* max 4 columns, but possibly fewer if screen size doesn't allow for more */ + [dir="rtl"] #donor-list li { + float: right; + } + #donor-list li { + float: left; + width: 25%; + min-width: 20em; + } + +/* download page */ +#arch-downloads h3 { + border-bottom: 1px dotted #bbb; +} + +/* pkglists/devlists */ +table.results { + font-size: 0.846em; + border-top: 1px dotted #999; + border-bottom: 1px dotted #999; + direction: ltr; +} + + [dir="rtl"] .results th {text-align: center; direction:rtl;} + .results th { + padding: 0.5em 1em 0.25em 0.25em; + border-bottom: 1px solid #999; + white-space: nowrap; + background-color:#fff; + } + + .results td { + padding: .3em 1em .3em 3px; + text-align: left; + } + + .results .flagged { + color: red; + } + + .results tr.empty td { + text-align: center; + } + +/* pkglist: layout */ +#pkglist-about { + margin-top: 1.5em; +} + +/* pkglist: results navigation */ +.pkglist-stats { + font-size: 0.85em; +} + +[dir="rtl"] #pkglist-results .pkglist-nav { + float: left; +} +#pkglist-results .pkglist-nav { + float: right; + margin-top: -2.2em; +} + +[dir="rtl"] .pkglist-nav .prev { + margin-left: 1em; +} + +.pkglist-nav .prev { + margin-right: 1em; +} + +[dir="rtl"] .pkglist-nav .next { + margin-left: 1em; +} +.pkglist-nav .next { + margin-right: 1em; +} + +/* search fields and other filter selections */ +.filter-criteria { + margin-bottom: 1em; +} + +.filter-criteria h3 { + font-size: 1em; + margin-top: 0; +} +[dir="rtl"] .filter-criteria div { + float: right; + margin-left: 1.65em; +} +.filter-criteria div { + float: left; + margin-right: 1.65em; + font-size: 0.85em; +} + +.filter-criteria legend { + display: none; +} + +.filter-criteria label { + width: auto; + display: block; + font-weight: normal; +} + +/* pkgdetails: details links that float on the right */ +[dir="rtl"] #pkgdetails #detailslinks { + float: left; +} +#pkgdetails #detailslinks { + float: right; +} + + #pkgdetails #detailslinks h4 { + margin-top: 0; + margin-bottom: 0.25em; + } + + #pkgdetails #detailslinks ul { + list-style: none; + padding: 0; + margin-bottom: 0; + font-size: 0.846em; + } + + #pkgdetails #detailslinks > div { + padding: 0.5em; + margin-bottom: 1em; + background: #eee; + border: 1px solid #bbb; + } + +#pkgdetails #actionlist .flagged { + color: red; + font-size: 0.9em; + font-style: italic; +} + +/* pkgdetails: pkg info */ +#pkgdetails #pkginfo { + width: auto; +} + +[dir="rtl"] #pkgdetails td { + padding: 0.25em 1.5em 0.25em 0; + } + + #pkgdetails #pkginfo td { + padding: 0.25em 0 0.25em 1.5em; + } + + #pkgdetails #pkginfo .userdata { + font-size: 0.85em; + padding: 0.5em; + } + +/* pkgdetails: flag package */ +#flag-pkg-form label { + width: 10em; +} + +#flag-pkg-form textarea, +#flag-pkg-form input[type=text] { + width: 45%; +} + +#flag-pkg-form #id_website { + display: none; +} + +/* pkgdetails: deps, required by and file lists */ +#pkgdetails #metadata { + clear: both; +} + +#pkgdetails #metadata h3 { + background: #555; + color: #fff; + font-size: 1em; + margin-bottom: 0.5em; + padding: 0.2em 0.35em; +} + +#pkgdetails #metadata ul { + list-style: none; + margin: 0; + padding: 0; +} + +[dir="rtl"] #pkgdetails #metadata li { + padding-right: 0.5em; +} + +#pkgdetails #metadata li { + padding-left: 0.5em; +} + +[dir="rtl"] #pkgdetails #metadata p { + padding-right: 0.5em; +} +#pkgdetails #metadata p { + padding-left: 0.5em; +} + +#pkgdetails #metadata .message { + font-style: italic; +} + +#pkgdetails #metadata br { + clear: both; +} + +[dir="rtl"] #pkgdetails #pkgdeps { + float: right; + width: 48%; + margin-left: 2%; + +} +#pkgdetails #pkgdeps { + float: left; + width: 48%; + margin-right: 2%; +} + +#pkgdetails #metadata .virtual-dep, +#pkgdetails #metadata .testing-dep, +#pkgdetails #metadata .staging-dep, +#pkgdetails #metadata .opt-dep, +#pkgdetails #metadata .make-dep, +#pkgdetails #metadata .check-dep, +#pkgdetails #metadata .dep-desc { + font-style: italic; +} + +[dir="rtl"] #pkgdetails #pkgreqs { + float: right; + width: 48%; +} + +#pkgdetails #pkgreqs { + float: left; + width: 50%; +} + +#pkgdetails #pkgfiles { + clear: both; + padding-top: 1em; +} + +#pkgfilelist li.d { + color: #666; +} + +#pkgfilelist li.f { +} + +/* mirror stuff */ +table td.country { + white-space: normal; +} + +#list-generator div ul { + list-style: none; + display: inline; + padding-left: 0; +} + + #list-generator div ul li { + display: inline; + } + +.visualize-mirror .axis path, +.visualize-mirror .axis line { + fill: none; + stroke: #000; + stroke-width: 3px; + shape-rendering: crispEdges; +} + +.visualize-mirror .url-dot { + stroke: #000; +} + +.visualize-mirror .url-line { + fill: none; + stroke-width: 1.5px; +} + +/* dev/TU biographies */ +#arch-bio-toc { + width: 75%; + margin: 0 auto; + text-align: center; +} + + #arch-bio-toc a { + white-space: nowrap; + } + +.arch-bio-entry { + width: 75%; + min-width: 640px; + margin: 0 auto; +} + .arch-bio-entry td.pic { + padding-left: 15px; + } + .arch-bio-entry td.pic { + vertical-align: top; + padding-right: 15px; + padding-top: 2.25em; + } + + .arch-bio-entry td.pic img { + padding: 4px; + border: 1px solid #ccc; + } + + .arch-bio-entry td h3 { + border-bottom: 1px dotted #ccc; + margin-bottom: 0.5em; + } + + .arch-bio-entry table.bio { + margin-bottom: 2em; + } + [dir="rtl"] .arch-bio-entry table.bio th { + text-align: left; + padding-left: 0.5em; + } + + .arch-bio-entry table.bio th { + color: #666; + font-weight: normal; + text-align: right; + padding-right: 0.5em; + vertical-align: top; + white-space: nowrap; + } + + .arch-bio-entry table.bio td { + width: 100%; + padding-bottom: 0.25em; + white-space: normal; + } + +/* dev: login/out */ +#dev-login { + width: auto; +} + +/* tables rows: highlight on mouse-vover */ +#article-list tr:hover, +#clocks-table tr:hover, +#dev-dashboard tr:hover, +#dev-todo-lists tr:hover, +#dev-todo-pkglist tr:hover, +#pkglist-results tr:hover, +#stats-area tr:hover { + background: #ffd; +} + +.results tr:nth-child(even), +#article-list tr:nth-child(even) { + background: #e4eeff; +} + +.results tr:nth-child(odd), +#article-list tr:nth-child(odd) { + background: #fff; +} + +/* dev dashboard: */ +table.dash-stats .key { + width: 50%; +} + +/* dev dashboard: admin actions (add news items, todo list, etc) */ +[dir="rtl"] ul.admin-actions { + float: left; +} +ul.admin-actions { + float: right; + list-style: none; + margin-top: -2.5em; +} + + ul.admin-actions li { + display: inline; + padding-left: 1.5em; + } + +/* colored yes/no type values */ +.todo-table .complete, +.signoff-yes, +#key-status .signed-yes, +#release-list .available-yes { + color: green; +} + +.todo-table .incomplete, +.signoff-no, +#key-status .signed-no, +#release-list .available-no { + color: red; +} + +.todo-table .inprogress, +.signoff-bad { + color: darkorange; +} + + +/* todo lists (public and private) */ +.todo-info { + color: #999; + border-bottom: 1px dotted #bbb; +} + +.todo-description { + margin-top: 1em; + padding-left: 2em; + max-width: 900px; +} + +.todo-pkgbases { + border-top: 1px dotted #bbb; +} + +.todo-list h4 { + margin-top: 0; + margin-bottom: 0.4em; +} + +/* dev: signoff page */ +#dev-signoffs tr:hover { + background: #ffd; +} + +ul.signoff-list { + list-style: none; + margin: 0; + padding: 0; +} + +.signoff-yes { + font-weight: bold; +} + +.signoff-disabled { + color: gray; +} + +/* highlight current website in the navbar */ +#archnavbar.anb-home ul li#anb-home a, +#archnavbar.anb-packages ul li#anb-packages a, +#archnavbar.anb-download ul li#anb-download a { + color: white !important; +} + +/* visualizations page */ +.visualize-buttons { + margin: 0.5em 0.33em; +} + +.visualize-chart { + position: relative; + height: 500px; + margin: 0.33em; +} + +#visualize-archrepo .treemap-cell { + border: solid 1px white; + overflow: hidden; + position: absolute; +} + + #visualize-archrepo .treemap-cell span { + padding: 3px; + font-size: 0.85em; + line-height: 1em; + } + +#visualize-keys svg { + width: 100%; + height: 100%; +} + +/* releases */ +#release-table th:first-of-type { + width: 30px; +} + +/* itemprops */ +.itemprop { + display: none; +} diff --git a/static/css/aurweb.css b/static/css/aurweb.css new file mode 100644 index 00000000..64a65742 --- /dev/null +++ b/static/css/aurweb.css @@ -0,0 +1,292 @@ +/* aurweb-specific customizations to archweb.css */ + +#archnavbar.anb-aur ul li#anb-aur a { + color: white !important; +} + +#archnavbarlogo { + background: url('archnavbar/aurlogo.png') !important; +} + +[dir="rtl"] #lang_sub { + float: left; + } +#lang_sub { + float: right; +} + +.pkglist-nav .page { + margin: 0 .25em; +} + +#pkg-stats td.stat-desc { + white-space: normal; +} + +#actionlist form { + margin: 0; + padding: 0; +} + +.arch-bio-entry ul { + list-style: none; + padding: 0; +} + +#pkg-updates table { + table-layout: fixed; + width:100%; +} + +#pkg-updates td.pkg-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +[dir="rtl"] #pkg-updates td.pkg-date { + text-align:left; +} +#pkg-updates td.pkg-date { + text-align:right; +} + +[dir="rtl"] .keyword:link, .keyword:visited { + float: right; +} + +.keyword:link, .keyword:visited { + float: left; + margin: 1px .5ex 1px 0; + padding: 0 1em; + color: white; + background-color: #36a; + border: 1px solid transparent; + border-radius: 2px; +} + +.keyword:hover { + cursor: pointer; +} + +.keyword:focus { + border: 1px dotted #000; +} + +.text-button { + background: transparent; + border: none !important; + margin: 0 !important; + padding: 0 !important; + font: normal 100% sans-serif; + text-decoration: none; + color: #07b; + cursor: pointer; +} + +.text-button:hover { + text-decoration: underline; + color: #666; +} + +.text-button::-moz-focus-inner { + padding: 0; + border: none; +} + +.comment-deleted { + color: #999; +} + +.edited { + font-size: 0.9em; + color: #999; +} + +[dir="rtl"] .delete-comment-form, .undelete-comment-form, .pin-comment-form, .edit-comment { + float: left; + margin-right: 8px; +} + +.delete-comment-form, .undelete-comment-form, .pin-comment-form, .edit-comment { + float: right; + margin-left: 8px; +} + +.edit-comment { + height: 11px; + position: relative; + top: 1px; +} + +.comment-enable-notifications { + display: inline-block; + margin-left: 1em; +} + +.rss-icon, .delete-comment, .undelete-comment, .edit-comment, .pin-comment { + filter: grayscale(100%); + opacity: 0.6; +} + +.rss-icon:hover, .delete-comment:hover, .undelete-comment:hover, .edit-comment:hover, .pin-comment:hover { + filter: none; + opacity: 1; +} + +[dir="rtl"] .ajax-loader { + float: left; +} + +.ajax-loader { + float: right; + position: relative; + top: 4px; +} + +.flagged a { + color: inherit; +} + +legend { + padding: 1em 0; +} + +p.important { + font-weight: bold; +} + +span.hover-help { + border-bottom: 1px dotted black; + cursor:help; +} + +label.confirmation { + width: auto; +} + +#pkgdepslist .broken { + color: red; + font-weight: bold; +} + +.package-comments { + margin-top: 1.5em; +} + +.comments-header { + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +/* arrowed headings */ +.comments-header h3 span.text { + display: block; + background: #1794D1; + font-size: 15px; + padding: 2px 10px; + color: white; +} + +.comments-header .comments-header-nav { + align-self: flex-end; +} + +.comments-footer { + display: flex; + justify-content: flex-end; +} + +.comment-header { + clear: both; + font-size: 1em; + margin-top: 1.5em; + border-bottom: 1px dotted #bbb; +} + +.comments div { + margin-bottom: 1em; +} + +.comments div p { + margin-bottom: 0.5em; +} + +.comments .more { + font-weight: normal; +} + +.error { + color: red; +} + +.article-content > div { + overflow: hidden; + transition: height 1s; +} + +.proposal.details { + margin: .33em 0 1em; +} + +button[type="submit"], +button[type="reset"] { + padding: 0 0.6em; +} + +.results tr td[align="left"] fieldset { + text-align: left; +} + +.results tr td[align="right"] fieldset { + text-align: right; +} + +input#search-action-submit { + width: 80px; +} + +.success { + color: green; +} + +/* Styling used to clone styles for a form.link button. */ +form.link, form.link button { + display: inline; + font-family: sans-serif; +} +form.link button { + padding: 0 0.5em; + color: #07b; + background: none; + border: none; + font-family: inherit; + font-size: inherit; +} +form.link button:hover { + cursor: pointer; + text-decoration: underline; +} + +/* Customize form.link when used inside of a page. */ +div.box form.link p { + margin: .33em 0 1em; +} +div.box form.link button { + padding: 0; +} + +pre.traceback { + /* https://css-tricks.com/snippets/css/make-pre-text-wrap/ */ + white-space: pre-wrap; + word-wrap: break-all; +} + +/* By default, tables use 100% width, which we do not always want. */ +table.no-width { + width: auto; +} +table.no-width > tbody > tr > td { + padding-right: 2px; +} diff --git a/static/css/cgit.css b/static/css/cgit.css new file mode 100644 index 00000000..429b5f54 --- /dev/null +++ b/static/css/cgit.css @@ -0,0 +1,866 @@ +/* + * ARCH GLOBAL NAVBAR + * We're forcing all generic selectors with !important + * to help prevent other stylesheets from interfering. + */ + +/* container for the entire bar */ +#archnavbar { height: 40px !important; padding: 10px 15px !important; background: #333 !important; border-bottom: 5px #08c solid !important; } +#archnavbarlogo { float: left !important; margin: 0 !important; padding: 0 !important; height: 40px !important; width: 190px !important; background: url('archnavbar/archlogo.png') no-repeat !important; } + +/* move the heading text offscreen */ +#archnavbarlogo h1 { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; } + +/* make the link the same size as the logo */ +#archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; } + +/* display the list inline, float it to the right and style it */ +#archnavbarlist { display: inline !important; float: right !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } +#archnavbarlist li { float: left !important; font-size: 14px !important; font-family: sans-serif !important; line-height: 45px !important; padding-right: 15px !important; padding-left: 15px !important; } + +/* style the links */ +#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; } +#archnavbarlist li a:hover { color: white !important; text-decoration: underline !important; } + +/* END ARCH GLOBAL NAVBAR */ + +#footer { + clear: both; + margin: 0; +} + +#footer p { + margin: 1em; +} + +#archnavbar.anb-aur ul li#anb-aur a { + color: white !important; +} + +#archnavbarlogo { + background: url('archnavbar/aurlogo.png') !important; +} + +body { + padding: 0; + margin: 0; + font-family: sans-serif; + font-size: 10pt; + color: #333; + background: white; +} + +div#cgit a { + color: blue; + text-decoration: none; +} + +div#cgit a:hover { + text-decoration: underline; +} + +div#cgit table { + border-collapse: collapse; +} + +div#cgit table#header { + width: 100%; + margin-bottom: 1em; +} + +div#cgit table#header td.logo { + width: 96px; + vertical-align: top; +} + +div#cgit table#header td.main { + font-size: 250%; + padding-left: 10px; + white-space: nowrap; +} + +div#cgit table#header td.main a { + color: #000; +} + +div#cgit table#header td.form { + text-align: right; + vertical-align: bottom; + padding-right: 1em; + padding-bottom: 2px; + white-space: nowrap; +} + +div#cgit table#header td.form form, +div#cgit table#header td.form input, +div#cgit table#header td.form select { + font-size: 90%; +} + +div#cgit table#header td.sub { + color: #777; + border-top: solid 1px #ccc; + padding-left: 10px; +} + +div#cgit table.tabs { + border-bottom: solid 3px #ccc; + border-collapse: collapse; + margin-top: 2em; + margin-bottom: 0px; + width: 100%; +} + +div#cgit table.tabs td { + padding: 0px 1em; + vertical-align: bottom; +} + +div#cgit table.tabs td a { + padding: 2px 0.75em; + color: #777; + font-size: 110%; +} + +div#cgit table.tabs td a.active { + color: #000; + background-color: #ccc; +} + +div#cgit table.tabs td.form { + text-align: right; +} + +div#cgit table.tabs td.form form { + padding-bottom: 2px; + font-size: 90%; + white-space: nowrap; +} + +div#cgit table.tabs td.form input, +div#cgit table.tabs td.form select { + font-size: 90%; +} + +div#cgit div.path { + margin: 0px; + padding: 5px 2em 2px 2em; + color: #000; + background-color: #eee; +} + +div#cgit div.content { + margin: 0px; + padding: 2em; + border-bottom: solid 3px #ccc; +} + + +div#cgit table.list { + width: 100%; + border: none; + border-collapse: collapse; +} + +div#cgit table.list tr { + background: white; +} + +div#cgit table.list tr.logheader { + background: #eee; +} + +div#cgit table.list tr:hover { + background: #eee; +} + +div#cgit table.list tr.nohover:hover { + background: white; +} + +div#cgit table.list th { + font-weight: bold; + /* color: #888; + border-top: dashed 1px #888; + border-bottom: dashed 1px #888; + */ + padding: 0.1em 0.5em 0.05em 0.5em; + vertical-align: baseline; +} + +div#cgit table.list td { + border: none; + padding: 0.1em 0.5em 0.1em 0.5em; +} + +div#cgit table.list td.commitgraph { + font-family: monospace; + white-space: pre; +} + +div#cgit table.list td.commitgraph .column1 { + color: #a00; +} + +div#cgit table.list td.commitgraph .column2 { + color: #0a0; +} + +div#cgit table.list td.commitgraph .column3 { + color: #aa0; +} + +div#cgit table.list td.commitgraph .column4 { + color: #00a; +} + +div#cgit table.list td.commitgraph .column5 { + color: #a0a; +} + +div#cgit table.list td.commitgraph .column6 { + color: #0aa; +} + +div#cgit table.list td.logsubject { + font-family: monospace; + font-weight: bold; +} + +div#cgit table.list td.logmsg { + font-family: monospace; + white-space: pre; + padding: 0 0.5em; +} + +div#cgit table.list td a { + color: black; +} + +div#cgit table.list td a.ls-dir { + font-weight: bold; + color: #00f; +} + +div#cgit table.list td a:hover { + color: #00f; +} + +div#cgit img { + border: none; +} + +div#cgit input#switch-btn { + margin: 2px 0px 0px 0px; +} + +div#cgit td#sidebar input.txt { + width: 100%; + margin: 2px 0px 0px 0px; +} + +div#cgit table#grid { + margin: 0px; +} + +div#cgit td#content { + vertical-align: top; + padding: 1em 2em 1em 1em; + border: none; +} + +div#cgit div#summary { + vertical-align: top; + margin-bottom: 1em; +} + +div#cgit table#downloads { + float: right; + border-collapse: collapse; + border: solid 1px #777; + margin-left: 0.5em; + margin-bottom: 0.5em; +} + +div#cgit table#downloads th { + background-color: #ccc; +} + +div#cgit div#blob { + border: solid 1px black; +} + +div#cgit div.error { + color: red; + font-weight: bold; + margin: 1em 2em; +} + +div#cgit a.ls-blob, div#cgit a.ls-dir, div#cgit a.ls-mod { + font-family: monospace; +} + +div#cgit td.ls-size { + text-align: right; + font-family: monospace; + width: 10em; +} + +div#cgit td.ls-mode { + font-family: monospace; + width: 10em; +} + +div#cgit table.blob { + margin-top: 0.5em; + border-top: solid 1px black; +} + +div#cgit table.blob td.lines { + margin: 0; padding: 0 0 0 0.5em; + vertical-align: top; + color: black; +} + +div#cgit table.blob td.linenumbers { + margin: 0; padding: 0 0.5em 0 0.5em; + vertical-align: top; + text-align: right; + border-right: 1px solid gray; +} + +div#cgit table.blob pre { + padding: 0; margin: 0; +} + +div#cgit table.blob a.no, div#cgit table.ssdiff a.no { + color: gray; + text-align: right; + text-decoration: none; +} + +div#cgit table.blob a.no a:hover { + color: black; +} + +div#cgit table.bin-blob { + margin-top: 0.5em; + border: solid 1px black; +} + +div#cgit table.bin-blob th { + font-family: monospace; + white-space: pre; + border: solid 1px #777; + padding: 0.5em 1em; +} + +div#cgit table.bin-blob td { + font-family: monospace; + white-space: pre; + border-left: solid 1px #777; + padding: 0em 1em; +} + +div#cgit table.nowrap td { + white-space: nowrap; +} + +div#cgit table.commit-info { + border-collapse: collapse; + margin-top: 1.5em; +} + +div#cgit div.cgit-panel { + float: right; + margin-top: 1.5em; +} + +div#cgit div.cgit-panel table { + border-collapse: collapse; + border: solid 1px #aaa; + background-color: #eee; +} + +div#cgit div.cgit-panel th { + text-align: center; +} + +div#cgit div.cgit-panel td { + padding: 0.25em 0.5em; +} + +div#cgit div.cgit-panel td.label { + padding-right: 0.5em; +} + +div#cgit div.cgit-panel td.ctrl { + padding-left: 0.5em; +} + +div#cgit table.commit-info th { + text-align: left; + font-weight: normal; + padding: 0.1em 1em 0.1em 0.1em; + vertical-align: top; +} + +div#cgit table.commit-info td { + font-weight: normal; + padding: 0.1em 1em 0.1em 0.1em; +} + +div#cgit div.commit-subject { + font-weight: bold; + font-size: 125%; + margin: 1.5em 0em 0.5em 0em; + padding: 0em; +} + +div#cgit div.commit-msg { + white-space: pre; + font-family: monospace; +} + +div#cgit div.notes-header { + font-weight: bold; + padding-top: 1.5em; +} + +div#cgit div.notes { + white-space: pre; + font-family: monospace; + border: solid 1px #ee9; + background-color: #ffd; + padding: 0.3em 2em 0.3em 1em; + float: left; +} + +div#cgit div.notes-footer { + clear: left; +} + +div#cgit div.diffstat-header { + font-weight: bold; + padding-top: 1.5em; +} + +div#cgit table.diffstat { + border-collapse: collapse; + border: solid 1px #aaa; + background-color: #eee; +} + +div#cgit table.diffstat th { + font-weight: normal; + text-align: left; + text-decoration: underline; + padding: 0.1em 1em 0.1em 0.1em; + font-size: 100%; +} + +div#cgit table.diffstat td { + padding: 0.2em 0.2em 0.1em 0.1em; + font-size: 100%; + border: none; +} + +div#cgit table.diffstat td.mode { + white-space: nowrap; +} + +div#cgit table.diffstat td span.modechange { + padding-left: 1em; + color: red; +} + +div#cgit table.diffstat td.add a { + color: green; +} + +div#cgit table.diffstat td.del a { + color: red; +} + +div#cgit table.diffstat td.upd a { + color: blue; +} + +div#cgit table.diffstat td.graph { + width: 500px; + vertical-align: middle; +} + +div#cgit table.diffstat td.graph table { + border: none; +} + +div#cgit table.diffstat td.graph td { + padding: 0px; + border: 0px; + height: 7pt; +} + +div#cgit table.diffstat td.graph td.add { + background-color: #5c5; +} + +div#cgit table.diffstat td.graph td.rem { + background-color: #c55; +} + +div#cgit div.diffstat-summary { + color: #888; + padding-top: 0.5em; +} + +div#cgit table.diff { + width: 100%; +} + +div#cgit table.diff td { + font-family: monospace; + white-space: pre; +} + +div#cgit table.diff td div.head { + font-weight: bold; + margin-top: 1em; + color: black; +} + +div#cgit table.diff td div.hunk { + color: #009; +} + +div#cgit table.diff td div.add { + color: green; +} + +div#cgit table.diff td div.del { + color: red; +} + +div#cgit .sha1 { + font-family: monospace; + font-size: 90%; +} + +div#cgit .left { + text-align: left; +} + +div#cgit .right { + text-align: right; + float: none !important; + width: auto !important; + padding: 0 !important; +} + +div#cgit table.list td.reposection { + font-style: italic; + color: #888; +} + +div#cgit a.button { + font-size: 80%; + padding: 0em 0.5em; +} + +div#cgit a.primary { + font-size: 100%; +} + +div#cgit a.secondary { + font-size: 90%; +} + +div#cgit td.toplevel-repo { + +} + +div#cgit table.list td.sublevel-repo { + padding-left: 1.5em; +} + +div#cgit ul.pager { + list-style-type: none; + text-align: center; + margin: 1em 0em 0em 0em; + padding: 0; +} + +div#cgit ul.pager li { + display: inline-block; + margin: 0.25em 0.5em; +} + +div#cgit ul.pager a { + color: #777; +} + +div#cgit ul.pager .current { + font-weight: bold; +} + +div#cgit span.age-mins { + font-weight: bold; + color: #080; +} + +div#cgit span.age-hours { + color: #080; +} + +div#cgit span.age-days { + color: #040; +} + +div#cgit span.age-weeks { + color: #444; +} + +div#cgit span.age-months { + color: #888; +} + +div#cgit span.age-years { + color: #bbb; +} +div#cgit div.footer { + margin-top: 0.5em; + text-align: center; + font-size: 80%; + color: #ccc; +} +div#cgit a.branch-deco { + color: #000; + margin: 0px 0.5em; + padding: 0px 0.25em; + background-color: #88ff88; + border: solid 1px #007700; +} +div#cgit a.tag-deco { + color: #000; + margin: 0px 0.5em; + padding: 0px 0.25em; + background-color: #ffff88; + border: solid 1px #777700; +} +div#cgit a.remote-deco { + color: #000; + margin: 0px 0.5em; + padding: 0px 0.25em; + background-color: #ccccff; + border: solid 1px #000077; +} +div#cgit a.deco { + color: #000; + margin: 0px 0.5em; + padding: 0px 0.25em; + background-color: #ff8888; + border: solid 1px #770000; +} + +div#cgit div.commit-subject a.branch-deco, +div#cgit div.commit-subject a.tag-deco, +div#cgit div.commit-subject a.remote-deco, +div#cgit div.commit-subject a.deco { + margin-left: 1em; + font-size: 75%; +} + +div#cgit table.stats { + border: solid 1px black; + border-collapse: collapse; +} + +div#cgit table.stats th { + text-align: left; + padding: 1px 0.5em; + background-color: #eee; + border: solid 1px black; +} + +div#cgit table.stats td { + text-align: right; + padding: 1px 0.5em; + border: solid 1px black; +} + +div#cgit table.stats td.total { + font-weight: bold; + text-align: left; +} + +div#cgit table.stats td.sum { + color: #c00; + font-weight: bold; +/* background-color: #eee; */ +} + +div#cgit table.stats td.left { + text-align: left; +} + +div#cgit table.vgraph { + border-collapse: separate; + border: solid 1px black; + height: 200px; +} + +div#cgit table.vgraph th { + background-color: #eee; + font-weight: bold; + border: solid 1px white; + padding: 1px 0.5em; +} + +div#cgit table.vgraph td { + vertical-align: bottom; + padding: 0px 10px; +} + +div#cgit table.vgraph div.bar { + background-color: #eee; +} + +div#cgit table.hgraph { + border: solid 1px black; + width: 800px; +} + +div#cgit table.hgraph th { + background-color: #eee; + font-weight: bold; + border: solid 1px black; + padding: 1px 0.5em; +} + +div#cgit table.hgraph td { + vertical-align: middle; + padding: 2px 2px; +} + +div#cgit table.hgraph div.bar { + background-color: #eee; + height: 1em; +} + +div#cgit table.ssdiff { + width: 100%; +} + +div#cgit table.ssdiff td { + font-size: 75%; + font-family: monospace; + white-space: pre; + padding: 1px 4px 1px 4px; + border-left: solid 1px #aaa; + border-right: solid 1px #aaa; +} + +div#cgit table.ssdiff td.add { + color: black; + background: #cfc; + min-width: 50%; +} + +div#cgit table.ssdiff td.add_dark { + color: black; + background: #aca; + min-width: 50%; +} + +div#cgit table.ssdiff span.add { + background: #cfc; + font-weight: bold; +} + +div#cgit table.ssdiff td.del { + color: black; + background: #fcc; + min-width: 50%; +} + +div#cgit table.ssdiff td.del_dark { + color: black; + background: #caa; + min-width: 50%; +} + +div#cgit table.ssdiff span.del { + background: #fcc; + font-weight: bold; +} + +div#cgit table.ssdiff td.changed { + color: black; + background: #ffc; + min-width: 50%; +} + +div#cgit table.ssdiff td.changed_dark { + color: black; + background: #cca; + min-width: 50%; +} + +div#cgit table.ssdiff td.lineno { + color: black; + background: #eee; + text-align: right; + width: 3em; + min-width: 3em; +} + +div#cgit table.ssdiff td.hunk { + color: black; + background: #ccf; + border-top: solid 1px #aaa; + border-bottom: solid 1px #aaa; +} + +div#cgit table.ssdiff td.head { + border-top: solid 1px #aaa; + border-bottom: solid 1px #aaa; +} + +div#cgit table.ssdiff td.head div.head { + font-weight: bold; + color: black; +} + +div#cgit table.ssdiff td.foot { + border-top: solid 1px #aaa; + border-left: none; + border-right: none; + border-bottom: none; +} + +div#cgit table.ssdiff td.space { + border: none; +} + +div#cgit table.ssdiff td.space div { + min-height: 3em; +} + +/* + * Style definitions generated by highlight 3.14, http://www.andre-simon.de/ + * Highlighting theme: Kwrite Editor + */ +div#cgit table.blob .num { color:#b07e00; } +div#cgit table.blob .esc { color:#ff00ff; } +div#cgit table.blob .str { color:#bf0303; } +div#cgit table.blob .pps { color:#818100; } +div#cgit table.blob .slc { color:#838183; font-style:italic; } +div#cgit table.blob .com { color:#838183; font-style:italic; } +div#cgit table.blob .ppc { color:#008200; } +div#cgit table.blob .opt { color:#000000; } +div#cgit table.blob .ipl { color:#0057ae; } +div#cgit table.blob .lin { color:#555555; } +div#cgit table.blob .kwa { color:#000000; font-weight:bold; } +div#cgit table.blob .kwb { color:#0057ae; } +div#cgit table.blob .kwc { color:#000000; font-weight:bold; } +div#cgit table.blob .kwd { color:#010181; } diff --git a/static/images/ICON-LICENSE b/static/images/ICON-LICENSE new file mode 100644 index 00000000..6b39f6fd --- /dev/null +++ b/static/images/ICON-LICENSE @@ -0,0 +1,26 @@ +The icons used in aurweb originate from the Open Iconic project and are +licensed under the following terms: + +---- +The MIT License (MIT) + +Copyright (c) 2014 Waybury + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. +---- diff --git a/static/images/action-undo.min.svg b/static/images/action-undo.min.svg new file mode 100644 index 00000000..eb47bc47 --- /dev/null +++ b/static/images/action-undo.min.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/action-undo.svg b/static/images/action-undo.svg new file mode 100644 index 00000000..b93ebb78 --- /dev/null +++ b/static/images/action-undo.svg @@ -0,0 +1,32 @@ + + + + + + image/svg+xml + + + + + + + + diff --git a/static/images/ajax-loader.gif b/static/images/ajax-loader.gif new file mode 100644 index 00000000..df07e7ec Binary files /dev/null and b/static/images/ajax-loader.gif differ diff --git a/static/images/favicon.ico b/static/images/favicon.ico new file mode 100644 index 00000000..55497b85 Binary files /dev/null and b/static/images/favicon.ico differ diff --git a/static/images/pencil.min.svg b/static/images/pencil.min.svg new file mode 100644 index 00000000..06125ae0 --- /dev/null +++ b/static/images/pencil.min.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/pencil.svg b/static/images/pencil.svg new file mode 100644 index 00000000..91f08991 --- /dev/null +++ b/static/images/pencil.svg @@ -0,0 +1,55 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/static/images/pin.min.svg b/static/images/pin.min.svg new file mode 100644 index 00000000..ac08903d --- /dev/null +++ b/static/images/pin.min.svg @@ -0,0 +1 @@ + diff --git a/static/images/pin.svg b/static/images/pin.svg new file mode 100644 index 00000000..b4ee9eb7 --- /dev/null +++ b/static/images/pin.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/rss.svg b/static/images/rss.svg new file mode 100644 index 00000000..3c7f6ba1 --- /dev/null +++ b/static/images/rss.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/unpin.min.svg b/static/images/unpin.min.svg new file mode 100644 index 00000000..3cf2413c --- /dev/null +++ b/static/images/unpin.min.svg @@ -0,0 +1 @@ + diff --git a/static/images/unpin.svg b/static/images/unpin.svg new file mode 100644 index 00000000..de897152 --- /dev/null +++ b/static/images/unpin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/x.min.svg b/static/images/x.min.svg new file mode 100644 index 00000000..833d4f22 --- /dev/null +++ b/static/images/x.min.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/x.svg b/static/images/x.svg new file mode 100644 index 00000000..e323fe19 --- /dev/null +++ b/static/images/x.svg @@ -0,0 +1,31 @@ + + + + + + image/svg+xml + + + + + + + + diff --git a/static/js/comment-edit.js b/static/js/comment-edit.js new file mode 100644 index 00000000..23ffdd34 --- /dev/null +++ b/static/js/comment-edit.js @@ -0,0 +1,61 @@ +function add_busy_indicator(sibling) { + const img = document.createElement('img'); + img.src = "/static/images/ajax-loader.gif"; + img.classList.add('ajax-loader'); + img.style.height = 11; + img.style.width = 16; + img.alt = "Busy…"; + + sibling.insertAdjacentElement('afterend', img); +} + +function remove_busy_indicator(sibling) { + const elem = sibling.nextElementSibling; + elem.parentNode.removeChild(elem); +} + +function getParentsUntil(elem, className) { + // Limit to 10 depth + for ( ; elem && elem !== document; elem = elem.parentNode) { + if (elem.matches(className)) { + break; + } + } + + return elem; +} + +function handleEditCommentClick(event, pkgbasename) { + event.preventDefault(); + const parent_element = getParentsUntil(event.target, '.comment-header'); + const parent_id = parent_element.id; + const comment_id = parent_id.substr(parent_id.indexOf('-') + 1); + // The div class="article-content" which contains the comment + const edit_form = parent_element.nextElementSibling; + + const url = "/pkgbase/" + pkgbasename + "/comments/" + comment_id + "/form?"; + + add_busy_indicator(event.target); + + fetch(url + new URLSearchParams({ next: window.location.pathname }), { + method: 'GET', + credentials: 'same-origin' + }) + .then(function(response) { + if (!response.ok) { + throw Error(response.statusText); + } + return response.json(); + }) + .then(function(data) { + remove_busy_indicator(event.target); + edit_form.innerHTML = data.form; + edit_form.querySelector('textarea').focus(); + }) + .catch(function(error) { + remove_busy_indicator(event.target); + console.error(error); + }); + + return false; +} diff --git a/static/js/copy.js b/static/js/copy.js new file mode 100644 index 00000000..3b659270 --- /dev/null +++ b/static/js/copy.js @@ -0,0 +1,9 @@ +document.addEventListener('DOMContentLoaded', function() { + let elements = document.querySelectorAll('.copy'); + elements.forEach(function(el) { + el.addEventListener('click', function(e) { + e.preventDefault(); + navigator.clipboard.writeText(e.target.text); + }); + }); +}); diff --git a/static/js/typeahead-home.js b/static/js/typeahead-home.js new file mode 100644 index 00000000..5af51c53 --- /dev/null +++ b/static/js/typeahead-home.js @@ -0,0 +1,6 @@ +document.addEventListener('DOMContentLoaded', function() { + const input = document.getElementById('pkgsearch-field'); + const form = document.getElementById('pkgsearch-form'); + const type = 'suggest'; + typeahead.init(type, input, form); +}); diff --git a/static/js/typeahead-pkgbase-merge.js b/static/js/typeahead-pkgbase-merge.js new file mode 100644 index 00000000..a8c87e4f --- /dev/null +++ b/static/js/typeahead-pkgbase-merge.js @@ -0,0 +1,6 @@ +document.addEventListener('DOMContentLoaded', function() { + const input = document.getElementById('merge_into'); + const form = document.getElementById('merge-form'); + const type = "suggest-pkgbase"; + typeahead.init(type, input, form, false); +}); diff --git a/static/js/typeahead-pkgbase-request.js b/static/js/typeahead-pkgbase-request.js new file mode 100644 index 00000000..e012d55f --- /dev/null +++ b/static/js/typeahead-pkgbase-request.js @@ -0,0 +1,36 @@ +function showHideMergeSection() { + const elem = document.getElementById('id_type'); + const merge_section = document.getElementById('merge_section'); + if (elem.value == 'merge') { + merge_section.style.display = ''; + } else { + merge_section.style.display = 'none'; + } +} + +function showHideRequestHints() { + document.getElementById('deletion_hint').style.display = 'none'; + document.getElementById('merge_hint').style.display = 'none'; + document.getElementById('orphan_hint').style.display = 'none'; + + const elem = document.getElementById('id_type'); + document.getElementById(elem.value + '_hint').style.display = ''; +} + +document.addEventListener('DOMContentLoaded', function() { + showHideMergeSection(); + showHideRequestHints(); + + const input = document.getElementById('id_merge_into'); + const form = document.getElementById('request-form'); + const type = "suggest-pkgbase"; + + typeahead.init(type, input, form, false); +}); + +// Bind the change event here, otherwise we have to inline javascript, +// which angers CSP (Content Security Policy). +document.getElementById("id_type").addEventListener("change", function() { + showHideMergeSection(); + showHideRequestHints(); +}); diff --git a/static/js/typeahead.js b/static/js/typeahead.js new file mode 100644 index 00000000..bfd3d156 --- /dev/null +++ b/static/js/typeahead.js @@ -0,0 +1,151 @@ +"use strict"; + +const typeahead = (function() { + var input; + var form; + var suggest_type; + var list; + var submit = true; + + function resetResults() { + if (!list) return; + list.style.display = "none"; + list.innerHTML = ""; + } + + function getCompleteList() { + if (!list) { + list = document.createElement("UL"); + list.setAttribute("class", "pkgsearch-typeahead"); + form.appendChild(list); + setListLocation(); + } + return list; + } + + function onListClick(e) { + let target = e.target; + while (!target.getAttribute('data-value')) { + target = target.parentNode; + } + input.value = target.getAttribute('data-value'); + if (submit) { + form.submit(); + } + } + + function setListLocation() { + if (!list) return; + const rects = input.getClientRects()[0]; + list.style.top = (rects.top + rects.height) + "px"; + list.style.left = rects.left + "px"; + } + + function loadData(letter, data) { + const pkgs = data.slice(0, 10); // Show maximum of 10 results + + resetResults(); + + if (pkgs.length === 0) { + return; + } + + const ul = getCompleteList(); + ul.style.display = "block"; + const fragment = document.createDocumentFragment(); + + for (let i = 0; i < pkgs.length; i++) { + const item = document.createElement("li"); + const text = pkgs[i].replace(letter, '' + letter + ''); + item.innerHTML = '' + text + ''; + item.setAttribute('data-value', pkgs[i]); + fragment.appendChild(item); + } + + ul.appendChild(fragment); + ul.addEventListener('click', onListClick); + } + + function fetchData(letter) { + const url = '/rpc?v=5&type=' + suggest_type + '&arg=' + letter; + fetch(url).then(function(response) { + return response.json(); + }).then(function(data) { + loadData(letter, data); + }); + } + + function onInputClick() { + if (input.value === "") { + resetResults(); + return; + } + fetchData(input.value); + } + + function onKeyDown(e) { + if (!list) return; + + const elem = document.querySelector(".pkgsearch-typeahead li.active"); + switch(e.keyCode) { + case 13: // enter + if (!submit) { + return; + } + if (elem) { + input.value = elem.getAttribute('data-value'); + form.submit(); + } else { + form.submit(); + } + e.preventDefault(); + break; + case 38: // up + if (elem && elem.previousElementSibling) { + elem.className = ""; + elem.previousElementSibling.className = "active"; + } + e.preventDefault(); + break; + case 40: // down + if (elem && elem.nextElementSibling) { + elem.className = ""; + elem.nextElementSibling.className = "active"; + } else if (!elem && list.childElementCount !== 0) { + list.children[0].className = "active"; + } + e.preventDefault(); + break; + } + } + + // debounce https://davidwalsh.name/javascript-debounce-function + function debounce(func, wait, immediate) { + var timeout; + return function() { + var context = this, args = arguments; + var later = function() { + timeout = null; + if (!immediate) func.apply(context, args); + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) func.apply(context, args); + }; + } + + return { + init: function(type, inputfield, formfield, submitdata = true) { + suggest_type = type; + input = inputfield; + form = formfield; + submit = submitdata; + + input.addEventListener("input", onInputClick); + input.addEventListener("keydown", onKeyDown); + window.addEventListener('resize', debounce(setListLocation, 150)); + document.addEventListener("click", resetResults); + } + } +}());