Skip to content

Commit

Permalink
Update rapid_view_manage_datasets to a class UiRapidCatalog
Browse files Browse the repository at this point in the history 
This also makes it reentrant and localizable
  • Loading branch information
@bhousel
bhousel committed Dec 4, 2024
1 parent 1cd00ef commit 7910c61
Show file tree
Hide file tree
Showing 6 changed files with 715 additions and 568 deletions.
91 changes: 52 additions & 39 deletions css/80_app_fb.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,6 +413,11 @@ button.rapid-features.layer-off use {
height: 40px;
border-radius: 0;
}
.ideditor[dir='rtl'] .modal.rapid-modal button.close {
right: unset;
left: 0;
}

.modal.rapid-modal button.close svg {
color: #da26d3;
}
Expand Down Expand Up @@ -736,11 +741,11 @@ hide this one and style something on top of it. */
}

/* Add/Manage Datasets modal */
/* view-manage-wrap is an absolutely positioned div to create a new stacking context,
/* catalog-wrap is an absolutely positioned div to create a new stacking context,
so we can put a modal on top of the other modal.
(it functions like .shaded for layout but without adding any shading)
*/
.view-manage-wrap {
.catalog-wrap {
position: absolute;
top: 0;
bottom: 0;
Expand All @@ -749,73 +754,78 @@ hide this one and style something on top of it. */
overflow: auto;
z-index: 51; /* above existing modal */
}
.modal.rapid-modal.modal-view-manage {
.modal.rapid-modal.modal-catalog {
width: 80%;
min-width: 600px;
max-width: 1000px;
min-height: 85%;
}
.modal.rapid-modal.modal-view-manage p {
.modal.rapid-modal.modal-catalog p {
font-size: 12px;
}

.modal-view-manage .modal-section {
.modal-catalog .modal-section {
display: flex;
flex-flow: row nowrap;
align-items: center;
width: 100%;
padding: 0;
}

.modal-view-manage .modal-section.rapid-view-manage-header {
.modal-catalog .modal-section.rapid-catalog-header {
display: flex;
flex-flow: column nowrap;
padding: 10px 20px;
border-bottom: 1px solid #aaaa;
color: #fff;
}
.modal-view-manage .modal-section.rapid-view-manage-header > div {
.modal-catalog .modal-section.rapid-catalog-header > div {
display: flex;
flex: 1;
width: 100%;
align-items: center;
}

.rapid-view-manage-header-icon {
.rapid-catalog-header-icon {
flex: 0 0 40px;
}
.rapid-view-manage-header-text {
.rapid-catalog-header-text {
flex: 1 1 auto;
font-size: 24px;
padding: 0 5px;
}
.rapid-view-manage-header-about {
.rapid-catalog-header-about {
color: #ddd;
}

.modal-view-manage .modal-section.rapid-view-manage-filter {
.modal-catalog .modal-section.rapid-catalog-filter {
display: flex;
flex-flow: row nowrap;
padding: 10px 20px;
border-bottom: 1px solid #aaaa;
color: #fff;
}
.rapid-view-manage-filter-search-wrap,
.rapid-view-manage-filter-type-wrap {
.rapid-catalog-filter-search-wrap,
.rapid-catalog-filter-type-wrap {
position: relative;
flex: 1;
padding: 0 5px;
}
.rapid-view-manage-filter-search-wrap > .icon {
.rapid-catalog-filter-search-wrap > .icon {
position: absolute;
left: 16px;
top: 11px;
color: #aaa;
width: 16px;
height: 16px;
}
.rapid-view-manage-filter-search,
.rapid-view-manage-filter-type {
.ideditor[dir='rtl'] .rapid-catalog-filter-search-wrap > .icon {
left: unset;
right: 16px;
}

.rapid-catalog-filter-search,
.rapid-catalog-filter-type {
background: #444;
color: #ddd;
padding: 4px 12px;
Expand All @@ -824,13 +834,16 @@ hide this one and style something on top of it. */
font-size: 16px;
width: 90%;
}
.rapid-view-manage-filter-search {
.rapid-catalog-filter-search {
padding: 4px 12px 4px 40px;
}
.rapid-view-manage-filter-search:focus,
.rapid-view-manage-filter-search:active,
.rapid-view-manage-filter-type:focus,
.rapid-view-manage-filter-type:active {
.ideditor[dir='rtl'] .rapid-catalog-filter-search {
padding: 4px 40px 4px 12px;
}
.rapid-catalog-filter-search:focus,
.rapid-catalog-filter-search:active,
.rapid-catalog-filter-type:focus,
.rapid-catalog-filter-type:active {
background: #444;
color: #eee;
outline: none;
Expand Down Expand Up @@ -861,48 +874,48 @@ div.combobox.combobox-dataset-categories a:focus {
}
}

.rapid-view-manage-filter-clear a {
.rapid-catalog-filter-clear a {
padding: 15px;
font-size: 14px;
}

.rapid-view-manage-filter-results {
.rapid-catalog-filter-results {
flex: 1 1 200px;
padding: 0 5px;
text-align: end;
font-size: 20px;
}

.modal-view-manage .rapid-view-manage-datasets-section {
.modal-catalog .rapid-catalog-datasets-section {
display: flex;
flex-flow: column nowrap;
align-items: stretch;
overflow-y: auto;
}

/* give this section height, even when its contents are hidden */
.rapid-view-manage-datasets-status,
.rapid-view-manage-datasets {
.rapid-catalog-datasets-status,
.rapid-catalog-datasets {
flex: 1 1 9999px;
}

.rapid-view-manage-datasets-status {
.rapid-catalog-datasets-status {
font-size: 20px;
text-align: center;
margin: 50px;
}
.rapid-view-manage-datasets-spinner {
.rapid-catalog-datasets-spinner {
filter: brightness(2)contrast(0.8);
}

.rapid-view-manage-datasets {
.rapid-catalog-datasets {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
}
.rapid-view-manage-dataset {
.rapid-catalog-dataset {
flex: 0 1 50%;
padding: 15px 25px;
margin-bottom: 10px;
Expand All @@ -911,38 +924,38 @@ div.combobox.combobox-dataset-categories a:focus {
flex-flow: row nowrap;
}

.rapid-view-manage-dataset-label {
.rapid-catalog-dataset-label {
flex: 1;
padding: 0 8px;
}
.rapid-view-manage-dataset-thumb {
.rapid-catalog-dataset-thumb {
flex: 0;
}
img.rapid-view-manage-dataset-thumbnail {
img.rapid-catalog-dataset-thumbnail {
border-radius: 10px;
width: 180px;
filter: invert(1)brightness(2)contrast(0.75);
}

.rapid-view-manage-dataset button.rapid-view-manage-dataset-action {
.rapid-catalog-dataset button.rapid-catalog-dataset-action {
font-size: 12px;
height: 28px;
border-radius: 14px;
margin: 10px 0;
padding: 0 15px;
}
.rapid-view-manage-dataset-name {
.rapid-catalog-dataset-name {
font-weight: bold;
font-size: 14px;
margin-bottom: 3px;
}
.rapid-view-manage-dataset-license {
.rapid-catalog-dataset-license {
display: inline-block;
}
.rapid-view-manage-dataset-beta {
.rapid-catalog-dataset-beta {
font-size: 10px;
}
.rapid-view-manage-dataset-featured {
.rapid-catalog-dataset-featured {
display: inline-block;
font-size: 11px;
background: #a21;
Expand All @@ -952,7 +965,7 @@ img.rapid-view-manage-dataset-thumbnail {
margin: 0px 10px;
line-height: 1.5;
}
.rapid-view-manage-dataset-featured span {
.rapid-catalog-dataset-featured span {
margin: 0px 3px;
}

Expand Down
Loading

0 comments on commit 7910c61

Please sign in to comment.