aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/CollectionSchemaView.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections/CollectionSchemaView.scss')
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss413
1 files changed, 133 insertions, 280 deletions
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 4ab38b9d9..4bc7a778c 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,7 +1,5 @@
@import "../globalCssVariables";
-
-
.collectionSchemaView-container {
border-width: $COLLECTION_BORDER_WIDTH;
border-color: $intermediate-color;
@@ -13,15 +11,6 @@
height: 100%;
overflow: hidden;
- .collectionSchemaView-cellContents {
- height: $MAX_ROW_HEIGHT;
-
- img {
- width: auto;
- max-height: $MAX_ROW_HEIGHT;
- }
- }
-
.collectionSchemaView-previewRegion {
position: relative;
background: $light-color;
@@ -47,16 +36,6 @@
}
}
- .collectionSchemaView-previewHandle {
- position: absolute;
- height: 15px;
- width: 15px;
- z-index: 20;
- right: 0;
- top: 20px;
- background: Black;
- }
-
.collectionSchemaView-dividerDragger {
position: relative;
background: black;
@@ -67,324 +46,198 @@
right: 0;
top: 0;
background: $main-accent;
- }
-
- .collectionSchemaView-columnsHandle {
- position: absolute;
- height: 37px;
- width: 20px;
- z-index: 20;
- left: 0;
- bottom: 0;
- background: $main-accent;
- }
-
- .collectionSchemaView-colDividerDragger {
- position: relative;
- box-sizing: border-box;
- border-top: 1px solid $intermediate-color;
- border-bottom: 1px solid $intermediate-color;
- float: top;
- width: 100%;
- }
-
- .collectionSchemaView-dividerDragger {
- position: relative;
box-sizing: border-box;
border-left: 1px solid $intermediate-color;
border-right: 1px solid $intermediate-color;
- float: left;
- height: 100%;
}
+}
- .collectionSchemaView-tableContainer {
- position: relative;
- float: left;
- height: 100%;
- }
+.ReactTable {
+ width: 100%;
+ height: 100%;
+ background: $light-color;
+ box-sizing: border-box;
+ border: none !important;
- .ReactTable {
- // position: absolute; // display: inline-block;
- // overflow: auto;
- width: 100%;
+ .rt-table {
+ overflow-y: auto;
+ overflow-x: auto;
height: 100%;
- background: $light-color;
- box-sizing: border-box;
- border: none !important;
-
- .rt-table {
- overflow-y: auto;
- overflow-x: auto;
- height: 100%;
- display: -webkit-inline-box;
- direction: ltr; // direction:rtl;
- // display:block;
- }
-
- .rt-tbody {
- //direction: ltr;
- direction: rtl;
- }
+ display: -webkit-inline-box;
+ direction: ltr;
+ }
- .rt-tr-group {
- direction: ltr;
- max-height: $MAX_ROW_HEIGHT;
+ .rt-thead {
+ &.-header {
+ background: $intermediate-color;
+ color: $light-color;
+ font-size: 12px;
+ height: 30px;
}
- .rt-td {
- border-width: 1px;
- border-right-color: $intermediate-color;
-
- .imageBox-cont {
- position: relative;
- max-height: 100%;
- }
-
- .imageBox-cont img {
- object-fit: contain;
- max-width: 100%;
- height: 100%;
- }
+ .rt-resizable-header {
+ padding: 0;
+ height: 30px;
- .videoBox-cont {
- object-fit: contain;
- width: auto;
- height: 100%;
+ &:last-child {
+ overflow: visible;
}
}
- }
- .ReactTable .rt-thead.-header {
- background: $intermediate-color;
- color: $light-color;
- // text-transform: uppercase;
- letter-spacing: 2px;
- font-size: 12px;
- height: 30px;
- padding-top: 4px;
+ .rt-resizable-header-content {
+ height: 100%;
+ overflow: visible;
+ }
}
- .ReactTable .rt-th,
- .ReactTable .rt-td {
+ .rt-th {
max-height: $MAX_ROW_HEIGHT;
padding: 3px 7px;
font-size: 13px;
text-align: center;
}
- .ReactTable .rt-tbody .rt-tr-group:last-child {
- border-bottom: $intermediate-color;
- border-bottom-style: solid;
- border-bottom-width: 1;
+ .rt-tbody {
+ direction: rtl;
}
- .documentView-node-topmost {
- text-align: left;
- transform-origin: center top;
- display: inline-block;
- }
+ .rt-tr-group {
+ direction: ltr;
+ max-height: $MAX_ROW_HEIGHT;
- .documentView-node:first-child {
- background: $light-color;
+ &:last-child {
+ border-bottom: $intermediate-color;
+ border-bottom-style: solid;
+ border-bottom-width: 1;
+ }
}
- .ReactTable .rt-thead .rt-resizable-header:last-child {
- overflow: visible;
- }
-}
+ .rt-td {
+ border-width: 1px;
+ border-right-color: $intermediate-color;
+ max-height: $MAX_ROW_HEIGHT;
+ padding: 3px 7px;
+ font-size: 13px;
+ text-align: center;
-.collectionSchema-header-menuOptions {
- position: absolute;
- top: $MAX_ROW_HEIGHT;
- left: 0;
- z-index: 9999;
- background-color: $light-color-secondary;
- color: black;
- border: 1px solid $main-accent;
- width: 250px;
- padding: 10px;
+ .imageBox-cont {
+ position: relative;
+ max-height: 100%;
+ }
- input {
- color: black;
- width: 100%;
+ .imageBox-cont img {
+ object-fit: contain;
+ max-width: 100%;
+ height: 100%;
+ }
+
+ .videoBox-cont {
+ object-fit: contain;
+ width: auto;
+ height: 100%;
+ }
}
}
-//options menu styling
-#schemaOptionsMenuBtn {
- position: absolute;
- height: 20px;
- width: 20px;
- border-radius: 50%;
- z-index: 21;
- right: 4px;
- top: 4px;
- pointer-events: auto;
- background-color: black;
+.documentView-node-topmost {
+ text-align: left;
+ transform-origin: center top;
display: inline-block;
- padding: 0px;
- font-size: 100%;
-}
-
-ul {
- list-style-type: disc;
}
-#schema-options-header {
- text-align: center;
- padding: 0px;
- margin: 0px;
+.documentView-node:first-child {
+ background: $light-color;
}
-.schema-options-subHeader {
- color: $intermediate-color;
- margin-bottom: 5px;
-}
+.collectionSchemaView-header {
+ height: 100%;
-#schemaOptionsMenuBtn:hover {
- transform: scale(1.15);
-}
+ .collectionSchema-header-menu {
+ height: 100%;
-#preview-schema-checkbox-div {
- margin-left: 20px;
- font-size: 12px;
-}
+ .collectionSchema-header-toggler {
+ width: 100%;
+ height: 100%;
+ padding: 4px;
-#options-flyout-div {
- text-align: left;
- padding: 0px;
- z-index: 100;
- font-family: $sans-serif;
- padding-left: 5px;
+ svg {
+ margin-right: 4px;
+ }
+ }
+ }
}
-#schema-col-checklist {
- overflow: scroll;
+.collectionSchema-header-menuOptions {
+ // position: absolute;
+ // top: 30px;
+ // left: 50%;
+ // transform: translateX(-50%);
+ // z-index: 9999;
+ // background-color: $light-color-secondary;
+ color: black;
+ // border: 1px solid $main-accent;
+ width: 175px;
+ // padding: 10px;
text-align: left;
- //background-color: $light-color-secondary;
- line-height: 25px;
- max-height: 175px;
- font-family: $sans-serif;
- font-size: 12px;
-}
-
-.Resizer {
- box-sizing: border-box;
- background: #000;
- opacity: 0.5;
- z-index: 1;
- background-clip: padding-box;
-
- &.horizontal {
- height: 11px;
- margin: -5px 0;
- border-top: 5px solid rgba(255, 255, 255, 0);
- border-bottom: 5px solid rgba(255, 255, 255, 0);
- cursor: row-resize;
- width: 100%;
-
- &:hover {
- border-top: 5px solid rgba(0, 0, 0, 0.5);
- border-bottom: 5px solid rgba(0, 0, 0, 0.5);
- }
+ .collectionSchema-headerMenu-group {
+ margin-bottom: 10px;
}
- &.vertical {
- width: 11px;
- margin: 0 -5px;
- border-left: 5px solid rgba(255, 255, 255, 0);
- border-right: 5px solid rgba(255, 255, 255, 0);
- cursor: col-resize;
-
- &:hover {
- border-left: 5px solid rgba(0, 0, 0, 0.5);
- border-right: 5px solid rgba(0, 0, 0, 0.5);
- }
+ label {
+ color: $main-accent;
+ font-weight: normal;
}
- &:hover {
- -webkit-transition: all 2s ease;
- transition: all 2s ease;
+ input {
+ color: black;
+ width: 100%;
}
-}
-.vertical {
- section {
- width: 100vh;
- height: 100vh;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- }
+ .keys-dropdown {
+ position: relative;
+ max-width: 175px;
- header {
- padding: 1rem;
- background: #eee;
- }
+ // .keys-search {
- footer {
- padding: 1rem;
- background: #eee;
- }
-}
+ // }
-.horizontal {
- section {
- width: 100vh;
- height: 100vh;
- display: flex;
- flex-direction: column;
+ .keys-options-wrapper {
+ width: 100%;
+ max-height: 150px;
+ overflow-y: scroll;
+ position: absolute;
+ top: 20px;
+
+ .key-option {
+ background-color: $light-color;
+ border: 1px solid $light-color-secondary;
+ padding: 2px 3px;
+
+ &:not(:last-child) {
+ border-top: 0;
+ }
+
+ &:hover {
+ background-color: $light-color-secondary;
+ }
+ }
+ }
}
- header {
- padding: 1rem;
- background: #eee;
- }
+ .columnMenu-types {
+ display: flex;
+ justify-content: space-between;
- footer {
- padding: 1rem;
- background: #eee;
+ button {
+ border-radius: 20px;
+ }
}
}
-.parent {
- width: 100%;
- height: 100%;
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.header {
- background: #aaa;
- height: 3rem;
- line-height: 3rem;
-}
-
-.wrapper {
- background: #ffa;
- margin: 5rem;
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
+#preview-schema-checkbox-div {
+ margin-left: 20px;
+ font-size: 12px;
}
.-even {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-14 03:53:35 +0000