From b1082cfbaac7cd68e9362642de710bd051f733fe Mon Sep 17 00:00:00 2001 From: Nick Sweeting Date: Tue, 28 Jul 2020 06:00:09 -0400 Subject: [PATCH] ui and css improvements --- .../themes/admin/actions_as_select.html | 1 + archivebox/themes/admin/base.html | 113 ++++++++++++++++-- archivebox/themes/default/add_links.html | 13 -- archivebox/themes/default/static/admin.css | 104 +++++++++++++++- 4 files changed, 204 insertions(+), 27 deletions(-) create mode 100644 archivebox/themes/admin/actions_as_select.html diff --git a/archivebox/themes/admin/actions_as_select.html b/archivebox/themes/admin/actions_as_select.html new file mode 100644 index 00000000..86a77190 --- /dev/null +++ b/archivebox/themes/admin/actions_as_select.html @@ -0,0 +1 @@ +actions_as_select diff --git a/archivebox/themes/admin/base.html b/archivebox/themes/admin/base.html index 6b788358..22014b02 100644 --- a/archivebox/themes/admin/base.html +++ b/archivebox/themes/admin/base.html @@ -20,6 +20,54 @@ + + + + +
@@ -27,14 +75,20 @@ + diff --git a/archivebox/themes/default/add_links.html b/archivebox/themes/default/add_links.html index 84c5da58..80a4b1fc 100644 --- a/archivebox/themes/default/add_links.html +++ b/archivebox/themes/default/add_links.html @@ -49,19 +49,6 @@ border-radius: 4px; white-space: normal; } - .loader { - border: 16px solid #f3f3f3; /* Light grey */ - border-top: 16px solid #3498db; /* Blue */ - border-radius: 50%; - width: 120px; - height: 120px; - animation: spin 2s linear infinite; - } - - @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } - }


diff --git a/archivebox/themes/default/static/admin.css b/archivebox/themes/default/static/admin.css index 436a98ce..b2b58d64 100644 --- a/archivebox/themes/default/static/admin.css +++ b/archivebox/themes/default/static/admin.css @@ -1,3 +1,23 @@ +#logo { + height: 30px; + vertical-align: -6px; + padding-right: 5px; +} +#site-name:hover a { + opacity: 0.9; +} +#site-name .loader { + height: 25px; + width: 25px; + display: inline-block; + border-width: 3px; + vertical-align: -3px; + margin-right: 5px; + margin-top: 2px; +} +#branding h1, #branding h1 a:link, #branding h1 a:visited { + color: mintcream; +} #header { background: #aa1e55; padding: 6px 14px; @@ -16,6 +36,11 @@ div.breadcrumbs { padding: 6px 15px; } +body.model-snapshot.change-list div.breadcrumbs, +body.model-snapshot.change-list #content .object-tools { + display: none; +} + .module h2, .module caption, .inline-group h2 { background: #772948; } @@ -55,15 +80,51 @@ div.breadcrumbs { } -#content #changelist .actions { +/*#content #changelist .actions { position: fixed; bottom: 0px; z-index: 800; +}*/ +#content #changelist .actions { + float: right; + margin-top: -34px; + padding: 0px; + background: none; + margin-right: 0px; } #content #changelist .actions .button { - border-color: #aa1e55; + border-radius: 2px; + background-color: #f5dd5d; + color: #333; + font-size: 12px; + font-weight: 800; + margin-right: 4px; + box-shadow: 4px 4px 4px rgba(0,0,0,0.02); + border: 1px solid rgba(0,0,0,0.08); } +#content #changelist .actions .button:hover { + border: 1px solid rgba(0,0,0,0.2); + opacity: 0.9; +} +#content #changelist .actions .button[name=verify_snapshots], #content #changelist .actions .button[name=update_titles] { + background-color: #dedede; + color: #333; +} +#content #changelist .actions .button[name=update_snapshots] { + background-color:lightseagreen; + color: #333; +} +#content #changelist .actions .button[name=overwrite_snapshots] { + background-color: #ffaa31; + color: #333; +} +#content #changelist .actions .button[name=delete_snapshots] { + background-color: #f91f74; + color: rgb(255 248 252 / 64%); +} + + #content #changelist-filter h2 { border-radius: 4px 4px 0px 0px; } @@ -72,6 +133,7 @@ div.breadcrumbs { #content #changelist-filter { top: 35px; width: 110px; + margin-bottom: 35px; } .change-list .filtered .results, @@ -82,6 +144,16 @@ div.breadcrumbs { } } +@media (max-width: 1127px) { + #content #changelist .actions { + position: fixed; + bottom: 6px; + left: 10px; + float: left; + z-index: 1000; + } +} + #content a img.favicon { height: 20px; width: 20px; @@ -91,16 +163,20 @@ div.breadcrumbs { #content td, #content th { vertical-align: middle; + padding: 4px; } #content #changelist table input { vertical-align: -2px; } +#content thead th .text a { + padding: 8px 4px; +} #content th.field-added, #content td.field-updated { word-break: break-word; - min-width: 85px; + min-width: 128px; white-space: normal; } @@ -111,6 +187,13 @@ div.breadcrumbs { #content td.field-files { white-space: nowrap; } +#content td.field-files .exists-True { + opacity: 1; +} +#content td.field-files .exists-False { + opacity: 0.1; + filter: grayscale(100%); +} #content td.field-size { white-space: nowrap; } @@ -124,3 +207,18 @@ div.breadcrumbs { font-weight: 200; opacity: 0.6; } + +.loader { + border: 16px solid #f3f3f3; /* Light grey */ + border-top: 16px solid #3498db; /* Blue */ + border-radius: 50%; + width: 30px; + height: 30px; + box-sizing: border-box; + animation: spin 2s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +}