From d11fd424180f0b4681be375899c03a6997219cc8 Mon Sep 17 00:00:00 2001 From: Joxit Date: Wed, 30 Nov 2022 21:57:01 +0100 Subject: [PATCH 01/12] feat(riot-mui): upgrade home page with navbar and footer --- src/components/dialogs/dialogs-menu.riot | 16 +++++++---- src/components/docker-registry-ui.riot | 36 ++++++++++++++++-------- src/components/search-bar.riot | 7 ++--- src/style.scss | 17 ++++------- 4 files changed, 44 insertions(+), 32 deletions(-) diff --git a/src/components/dialogs/dialogs-menu.riot b/src/components/dialogs/dialogs-menu.riot index c0ad257..14a2454 100644 --- a/src/components/dialogs/dialogs-menu.riot +++ b/src/components/dialogs/dialogs-menu.riot @@ -36,14 +36,22 @@ on-server-change="{ props.onServerChange }" >
- + more_vert + >
+ diff --git a/src/components/search-bar.riot b/src/components/search-bar.riot index 77fffd1..06e546b 100644 --- a/src/components/search-bar.riot +++ b/src/components/search-bar.riot @@ -1,5 +1,5 @@ - + diff --git a/src/style.scss b/src/style.scss index 1cdb507..66d3dd7 100644 --- a/src/style.scss +++ b/src/style.scss @@ -60,27 +60,20 @@ html, body { font-weight: inherit; } -material-card, material-tabs, pagination .conatianer { +material-card, +material-tabs, +pagination .container { max-width: 95%; margin: auto; margin-top: 20px; margin-bottom: 20px; } -pagination .conatianer { - display: flex; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flexbox; -} - -pagination .conatianer .pagination-centered { - margin: auto; -} - /* 1515px * 0.95 = 1440px */ @media screen and (min-width: 1515px){ - material-card, material-tabs, pagination .conatianer { + material-card, + material-tabs, + pagination .container { max-width: 1440px; } } @@ -256,14 +249,14 @@ material-card table th { material-card .material-card-title-action material-button:hover a, material-card .material-card-title-action material-button:hover button, material-card table tbody tr:hover, -pagination material-button:hover { +pagination material-button:hover > :first-child { background-color: #eee !important; } material-card material-button a, material-card material-button button, material-card table tbody tr, -pagination material-button { +pagination material-button > :first-child { transition-duration: .28s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-property: background-color; @@ -324,8 +317,7 @@ material-snackbar .toast { height: auto; } -material-popup material-button, -pagination material-button { +material-popup material-button { background-color: #fff; color: #000; } @@ -410,8 +402,7 @@ tag-history-button button { border: none; } -material-card material-button, -pagination material-button { +material-card material-button { max-height: 30px; max-width: 30px; } @@ -420,8 +411,7 @@ material-button:hover material-waves { background: none; } -material-card material-button, -pagination material-button { +material-card material-button { background-color: inherit; } @@ -484,29 +474,3 @@ material-checkbox .checkbox { material-checkbox .checkbox.checked { background-color: #777; } - -pagination material-button { - padding: 0.2em 0.75em; -} - -pagination material-button .content { - display: flex; - align-content: center; - line-height: 1.9em; -} - -pagination material-button.current { - border: 1px solid rgba(0, 0, 0, .12); -} - -pagination material-button.current.space-left { - margin-left: 85px; -} - -pagination material-button.current.space-right { - margin-right: 85px; -} - -pagination material-button .content i.material-icons { - color: #000; -} \ No newline at end of file From fe724c4d1fa69a527cb9f0e347965d37872491bf Mon Sep 17 00:00:00 2001 From: Joxit Date: Mon, 5 Dec 2022 19:46:41 +0100 Subject: [PATCH 05/12] feat(riot-mui): upgrade tag history components --- src/components/catalog/catalog-element.riot | 2 +- src/components/tag-history/tag-history.riot | 16 ++++++++++++---- src/scripts/router.js | 3 +++ src/style.scss | 15 --------------- 4 files changed, 16 insertions(+), 20 deletions(-) diff --git a/src/components/catalog/catalog-element.riot b/src/components/catalog/catalog-element.riot index 01a1c0b..43a4823 100644 --- a/src/components/catalog/catalog-element.riot +++ b/src/components/catalog/catalog-element.riot @@ -77,7 +77,7 @@ along with this program. If not, see . onClick() { const state = this.state; if (!state.repo) { - router.taglist(state.image); + router.goTaglist(state.image); } else { this.update({ expanded: !this.state.expanded, diff --git a/src/components/tag-history/tag-history.riot b/src/components/tag-history/tag-history.riot index 52a9ddd..0a8c392 100644 --- a/src/components/tag-history/tag-history.riot +++ b/src/components/tag-history/tag-history.riot @@ -15,9 +15,17 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . --> - +
- + arrow_back

History of { props.image }:{ props.tag } history

@@ -34,7 +42,7 @@ along with this program. If not, see . onTabChanged="{ onTabChanged }" > - + . }); }, toTaglist() { - router.taglist(this.props.image); + return router.taglist(this.props.image); }, }; const eltIdx = function (e) { diff --git a/src/scripts/router.js b/src/scripts/router.js index 99534ee..3134f14 100644 --- a/src/scripts/router.js +++ b/src/scripts/router.js @@ -62,6 +62,9 @@ export default { return baseUrl({ page: null }); }, taglist(image) { + return `${baseUrl({ page: null })}#!/taglist/${image}`; + }, + goTaglist(image) { router.push(`${baseUrl({ page: null })}#!/taglist/${image}`); }, getTagListImage() { diff --git a/src/style.scss b/src/style.scss index 66d3dd7..0bed72a 100644 --- a/src/style.scss +++ b/src/style.scss @@ -392,21 +392,6 @@ taglist .image-size { width: 7em; } -catalog material-card, -tag-history material-card { - min-height: auto; -} - -tag-history-button button { - background: none; - border: none; -} - -material-card material-button { - max-height: 30px; - max-width: 30px; -} - material-button:hover material-waves { background: none; } From dd251b55a0cfeb4bef4ce03ab81c7d7ee86ccfcc Mon Sep 17 00:00:00 2001 From: Joxit Date: Tue, 6 Dec 2022 23:08:23 +0100 Subject: [PATCH 06/12] fix(riot-ui): upgrade and fix dialog confirm popup --- .../dialogs/confirm-delete-image.riot | 10 ++++----- src/components/tag-list/remove-image.riot | 4 ++-- src/components/tag-list/tag-table.riot | 4 ++-- src/style.scss | 22 +++++-------------- 4 files changed, 15 insertions(+), 25 deletions(-) diff --git a/src/components/dialogs/confirm-delete-image.riot b/src/components/dialogs/confirm-delete-image.riot index 8fdbc7b..fb5728d 100644 --- a/src/components/dialogs/confirm-delete-image.riot +++ b/src/components/dialogs/confirm-delete-image.riot @@ -16,17 +16,17 @@ --> -
These images will be deleted
-
+
These images will be deleted
+
  • { image.name }:{ image.tag }
-
- +
+ Delete - + Cancel
diff --git a/src/components/tag-list/remove-image.riot b/src/components/tag-list/remove-image.riot index 8eefc65..b7a4f5c 100644 --- a/src/components/tag-list/remove-image.riot +++ b/src/components/tag-list/remove-image.riot @@ -58,8 +58,8 @@ along with this program. If not, see . deleteImage() { this.props.handleCheckboxChange(ACTION_DELETE_IMAGE, this.props.image); }, - handleCheckboxChange(checked) { - const action = checked ? ACTION_CHECK_TO_DELETE : ACTION_UNCHECK_TO_DELETE; + handleCheckboxChange(event) { + const action = event.target.checked ? ACTION_CHECK_TO_DELETE : ACTION_UNCHECK_TO_DELETE; this.props.handleCheckboxChange(action, this.props.image); }, }; diff --git a/src/components/tag-list/tag-table.riot b/src/components/tag-list/tag-table.riot index 3fa6e22..7c60194 100644 --- a/src/components/tag-list/tag-table.riot +++ b/src/components/tag-list/tag-table.riot @@ -174,7 +174,7 @@ along with this program. If not, see . confirmDeleteImage: false, }); }, - onRemoveImageHeaderChange(checked, event) { + onRemoveImageHeaderChange(event) { if (event.altKey === true) { const tags = getPage(this.props.tags, this.props.page); tags @@ -186,7 +186,7 @@ along with this program. If not, see . }); } else { this.update({ - multiDelete: checked, + multiDelete: event.target.checked, }); } }, diff --git a/src/style.scss b/src/style.scss index 0bed72a..2bfa9f9 100644 --- a/src/style.scss +++ b/src/style.scss @@ -89,8 +89,6 @@ material-tabs { material-tabs material-button, material-tabs material-button .content .text { - background-color: #fff; - color: #aaa; text-transform: none; } @@ -246,17 +244,14 @@ material-card table th { text-align: left; } -material-card .material-card-title-action material-button:hover a, +material-button:hover > :first-child[inverted='true'], material-card .material-card-title-action material-button:hover button, -material-card table tbody tr:hover, -pagination material-button:hover > :first-child { +material-card table tbody tr:hover { background-color: #eee !important; } -material-card material-button a, -material-card material-button button, -material-card table tbody tr, -pagination material-button > :first-child { +material-button > :first-child[inverted='true'], +material-card table tbody tr { transition-duration: .28s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-property: background-color; @@ -317,18 +312,13 @@ material-snackbar .toast { height: auto; } -material-popup material-button { - background-color: #fff; - color: #000; -} - material-popup material-button:hover material-waves { background-color: hsla(0, 0%, 75%, .2); } -material-popup .popup { +material-popup .popup > .content { + padding: 1em; max-width: 450px; - top: 2em; } footer { From f779f431739ef704102d1ad9dade01e872a23fd5 Mon Sep 17 00:00:00 2001 From: Joxit Date: Wed, 7 Dec 2022 09:00:33 +0100 Subject: [PATCH 07/12] fix(riot-ui): upgrade tag history --- src/components/tag-history/tag-history.riot | 7 +++++-- src/components/tag-list/tag-list.riot | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/tag-history/tag-history.riot b/src/components/tag-history/tag-history.riot index 0a8c392..52aa2d4 100644 --- a/src/components/tag-history/tag-history.riot +++ b/src/components/tag-history/tag-history.riot @@ -18,12 +18,12 @@ along with this program. If not, see .
arrow_back @@ -37,9 +37,12 @@ along with this program. If not, see . diff --git a/src/components/tag-list/tag-list.riot b/src/components/tag-list/tag-list.riot index 7c8c1c7..ec176eb 100644 --- a/src/components/tag-list/tag-list.riot +++ b/src/components/tag-list/tag-list.riot @@ -18,12 +18,12 @@ along with this program. If not, see .
arrow_back From ba2107f76500d9160f1363370bbd4de7b455681c Mon Sep 17 00:00:00 2001 From: Joxit Date: Thu, 8 Dec 2022 23:35:12 +0100 Subject: [PATCH 08/12] fix(riot-ui): upgrade tag dialogs --- src/components/dialogs/add-registry-url.riot | 15 +++++++----- .../dialogs/change-registry-url.riot | 13 ++++++----- .../dialogs/remove-registry-url.riot | 23 +++++++++++-------- 3 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/components/dialogs/add-registry-url.riot b/src/components/dialogs/add-registry-url.riot index 41df728..5094cdf 100644 --- a/src/components/dialogs/add-registry-url.riot +++ b/src/components/dialogs/add-registry-url.riot @@ -16,16 +16,16 @@ --> -
Add your Server ?
-
- +
Add your Server ?
+
+ Write your URL without /v2
-
- +
+ Add - + Cancel
@@ -55,6 +55,9 @@ this.props.onClose(); setTimeout(() => router.updateUrlQueryParam(url), 100); }, + registryUrlValidator(input) { + return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input) + } }; diff --git a/src/components/dialogs/change-registry-url.riot b/src/components/dialogs/change-registry-url.riot index bae4937..3c1b770 100644 --- a/src/components/dialogs/change-registry-url.riot +++ b/src/components/dialogs/change-registry-url.riot @@ -15,18 +15,18 @@ along with this program. If not, see . --> - -
Change your Server ?
-
+ +
Change your Server ?
+
-
- +
+ Change - + Cancel
@@ -62,6 +62,7 @@ background: 0 0; border: none; font-weight: 400; + font-size: 1em; line-height: 24px; height: 24px; border-bottom: 1px solid #2f6975; diff --git a/src/components/dialogs/remove-registry-url.riot b/src/components/dialogs/remove-registry-url.riot index 2a00241..1008ad5 100644 --- a/src/components/dialogs/remove-registry-url.riot +++ b/src/components/dialogs/remove-registry-url.riot @@ -16,17 +16,18 @@ along with this program. If not, see . --> -
Remove your Registry Server ?
-
+
Remove your Registry Server ?
+
  • delete @@ -35,8 +36,8 @@ along with this program. If not, see .
-
- +
+ Close
@@ -44,10 +45,12 @@ along with this program. If not, see . diff --git a/src/index.js b/src/index.js index 97b5af5..60ac3ac 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,7 @@ import { MaterialCheckbox, MaterialTabs, MaterialSnackbar, - MaterialDropdownList, + MaterialDropdown, MaterialPopup, MaterialInput, } from 'riot-mui'; @@ -28,7 +28,7 @@ register('material-waves', MaterialWaves); register('material-checkbox', MaterialCheckbox); register('material-snackbar', MaterialSnackbar); register('material-tabs', MaterialTabs); -register('material-dropdown-list', MaterialDropdownList); +register('material-dropdown', MaterialDropdown); register('material-popup', MaterialPopup); register('material-input', MaterialInput); diff --git a/src/style.scss b/src/style.scss index 2bfa9f9..a3b5653 100644 --- a/src/style.scss +++ b/src/style.scss @@ -23,7 +23,7 @@ @import 'riot-mui/src/material-elements/material-checkbox/material-checkbox.scss'; @import 'riot-mui/src/material-elements/material-tabs/material-tabs.scss'; @import 'riot-mui/src/material-elements/material-snackbar/material-snackbar.scss'; -@import 'riot-mui/src/material-elements/material-dropdown-list/material-dropdown-list.scss'; +@import 'riot-mui/src/material-elements/material-dropdown/material-dropdown.scss'; @import 'riot-mui/src/material-elements/material-popup/material-popup.scss'; @import 'riot-mui/src/material-elements/material-input/material-input.scss'; From 696aa39012dc88e05f02f169f85c5136b6e1e30d Mon Sep 17 00:00:00 2001 From: Joxit Date: Tue, 27 Dec 2022 00:05:29 +0100 Subject: [PATCH 10/12] fix(riot-mui): creation date from tag list was not updating on page change --- src/components/tag-list/image-date.riot | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/tag-list/image-date.riot b/src/components/tag-list/image-date.riot index 91b2c90..672dba5 100644 --- a/src/components/tag-list/image-date.riot +++ b/src/components/tag-list/image-date.riot @@ -20,13 +20,21 @@ import { dateFormat } from '../../scripts/utils'; export default { onMounted(props) { - props.image.one('creation-date', (date) => { - this.update({ - date: date, - localDate: date && date.toLocaleString(), + this.loadCreationDate(props); + }, + onUpdated(props) { + this.loadCreationDate(props); + }, + loadCreationDate(props) { + if (!props.image.creationDate && !props.image.ociImage) { + props.image.one('creation-date', (date) => { + this.update({ + date: date, + localDate: date && date.toLocaleString(), + }); }); - }); - props.image.trigger('get-date'); + props.image.trigger('get-date'); + } }, getDate(image) { return !image.ociImage ? `${dateFormat(image.creationDate)} ago` : 'Not Available'; From 228762c6415deb5a2bbf632f2cad0d8b41772549 Mon Sep 17 00:00:00 2001 From: Joxit Date: Thu, 29 Dec 2022 23:50:47 +0100 Subject: [PATCH 11/12] feat(riot-mui): now we can CTRL + click on catalog elements --- src/components/catalog/catalog-element.riot | 10 ++++++---- src/scripts/router.js | 5 +---- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/catalog/catalog-element.riot b/src/components/catalog/catalog-element.riot index 43a4823..234385a 100644 --- a/src/components/catalog/catalog-element.riot +++ b/src/components/catalog/catalog-element.riot @@ -21,7 +21,10 @@ along with this program. If not, see . if="{!props.filterResults || state.nImages > 0 || matchSearch(props.filterResults, state.image)}" > - + + + + send { state.image || state.repo } @@ -76,9 +79,7 @@ along with this program. If not, see . }, onClick() { const state = this.state; - if (!state.repo) { - router.goTaglist(state.image); - } else { + if (state.repo) { this.update({ expanded: !this.state.expanded, expanding: true, @@ -112,6 +113,7 @@ along with this program. If not, see . oReq.send(); }, matchSearch, + router, }; diff --git a/src/scripts/router.js b/src/scripts/router.js index 3134f14..58c9bfb 100644 --- a/src/scripts/router.js +++ b/src/scripts/router.js @@ -14,7 +14,7 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import { router, getCurrentRoute } from '@riotjs/route'; +import { getCurrentRoute } from '@riotjs/route'; import { encodeURI, decodeURI } from './utils'; function getQueryParams() { @@ -64,9 +64,6 @@ export default { taglist(image) { return `${baseUrl({ page: null })}#!/taglist/${image}`; }, - goTaglist(image) { - router.push(`${baseUrl({ page: null })}#!/taglist/${image}`); - }, getTagListImage() { return getCurrentRoute().replace(/^.*(#!)?\/?taglist\//, ''); }, From 1e08561b3a7b4a0a3432ee7fe8f3172a309dc4c8 Mon Sep 17 00:00:00 2001 From: Joxit Date: Sat, 31 Dec 2022 10:13:30 +0100 Subject: [PATCH 12/12] feat(riot-mui): set material-icon size to 24px globally --- src/style.scss | 63 ++++++++++++++++++++++++++++---------------------- 1 file changed, 36 insertions(+), 27 deletions(-) diff --git a/src/style.scss b/src/style.scss index a3b5653..a0b55e3 100644 --- a/src/style.scss +++ b/src/style.scss @@ -29,13 +29,14 @@ @import './roboto.scss'; @import './material-icons.scss'; - + html > body { font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important; font-size: 16px; } -html, body { +html, +body { margin: 0; height: 100%; } @@ -70,7 +71,7 @@ pagination .container { } /* 1515px * 0.95 = 1440px */ -@media screen and (min-width: 1515px){ +@media screen and (min-width: 1515px) { material-card, material-tabs, pagination .container { @@ -80,11 +81,11 @@ pagination .container { material-tabs { display: block; - -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); - -ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); - -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); - -o-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); - box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); + -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } material-tabs material-button, @@ -114,7 +115,7 @@ material-spinner { text-decoration: none; font-size: 20px; line-height: 1; - letter-spacing: .02em; + letter-spacing: 0.02em; font-weight: 400; } @@ -153,18 +154,22 @@ h2 { overflow: hidden; } +docker-registry-ui material-button > :first-child .content i.material-icons, +docker-registry-ui material-button > :first-child .content i.material-icons.material-icons { + font-size: 24px; +} + .list > span i.material-icons, .list > li i.material-icons { margin-right: 32px; height: 24px; width: 24px; - font-size: 24px; box-sizing: border-box; color: #757575; } .list > span .right i.material-icons.animated { - transition: all 350ms cubic-bezier(.4,0,.2,1); + transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1); margin-right: 10px; } @@ -221,7 +226,7 @@ material-card table { width: 100%; border: none; position: relative; - border: 1px solid rgba(0, 0, 0, .12); + border: 1px solid rgba(0, 0, 0, 0.12); border-collapse: collapse; white-space: nowrap; font-size: 13px; @@ -234,7 +239,7 @@ material-card table th { vertical-align: bottom; line-height: 24px; height: 48px; - color: rgba(0, 0, 0, .54); + color: rgba(0, 0, 0, 0.54); box-sizing: border-box; padding: 0 18px 12px 18px; text-align: right; @@ -252,8 +257,8 @@ material-card table tbody tr:hover { material-button > :first-child[inverted='true'], material-card table tbody tr { - transition-duration: .28s; - transition-timing-function: cubic-bezier(.4, 0, .2, 1); + transition-duration: 0.28s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } @@ -266,8 +271,8 @@ material-card table td { font-size: 16px; position: relative; height: 48px; - border-top: 1px solid rgba(0, 0, 0, .12); - border-bottom: 1px solid rgba(0, 0, 0, .12); + border-top: 1px solid rgba(0, 0, 0, 0.12); + border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding: 12px 18px; box-sizing: border-box; vertical-align: middle; @@ -275,27 +280,30 @@ material-card table td { } tag-history-button button:hover, -material-card table th.material-card-th-sorted-ascending:hover, material-card table th.material-card-th-sorted-descending:hover { +material-card table th.material-card-th-sorted-ascending:hover, +material-card table th.material-card-th-sorted-descending:hover { cursor: pointer; } -material-card table th.material-card-th-sorted-ascending:hover:before, material-card table th.material-card-th-sorted-descending:hover:before { - color: rgba(0, 0, 0, .26); +material-card table th.material-card-th-sorted-ascending:hover:before, +material-card table th.material-card-th-sorted-descending:hover:before { + color: rgba(0, 0, 0, 0.26); } -material-card table th.material-card-th-sorted-ascending:before, material-card table th.material-card-th-sorted-descending:before { +material-card table th.material-card-th-sorted-ascending:before, +material-card table th.material-card-th-sorted-descending:before { font-family: 'Material Icons'; font-weight: 400; font-style: normal; line-height: 1; font-size: 16px; - content: "\e5d8"; + content: '\e5d8'; margin-right: 5px; vertical-align: sub; } material-card table th.material-card-th-sorted-descending:before { - content: "\e5db"; + content: '\e5db'; } material-button .content i.material-icons, @@ -313,7 +321,7 @@ material-snackbar .toast { } material-popup material-button:hover material-waves { - background-color: hsla(0, 0%, 75%, .2); + background-color: hsla(0, 0%, 75%, 0.2); } material-popup .popup > .content { @@ -343,7 +351,8 @@ material-footer { /* 5 + 2 + 3 + 24 + 3 + 2 + 18 */ padding-right: 57px; } -image-tag, .copy-to-clipboard { +image-tag, +.copy-to-clipboard { display: inline-block; } image-content-digest { @@ -396,7 +405,7 @@ catalog-element material-card { } catalog-element catalog-element material-card { - transition: all 350ms cubic-bezier(.4,0,.2,1); + transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; position: relative; } @@ -411,7 +420,7 @@ catalog-element catalog-element > .content { margin-left: 3em; } -@media screen and (min-width: 1515px){ +@media screen and (min-width: 1515px) { catalog-element catalog-element > .content material-card { max-width: calc(1440px - 3em); }