diff --git a/src/assets/css/collection-color.css b/src/assets/css/collection-color.css index f6f29ff..e9bbfa4 100644 --- a/src/assets/css/collection-color.css +++ b/src/assets/css/collection-color.css @@ -27,10 +27,6 @@ border-width: 2px; } -.tainacan-collection--change-text-color .control { - margin-top: 0.5rem; -} - .tainacan-collection--change-text-color input[type="radio"]::before { background-color: #000; } @@ -48,6 +44,7 @@ border-radius: 2px; padding: 0.7rem 1.25rem 0.7rem 1.0rem; font-size: 0.875rem; + display: inline-block; } .tainacan-collection--change-text-color .color-text[for="black"] { @@ -58,8 +55,45 @@ border-radius: 2px; padding: 0.7rem 1.25rem 0.7rem 1.0rem; font-size: 0.875rem; + display: inline-block; } .tainacan-collection--change-text-color .color-text input[type="radio"] { border-color: white; vertical-align: middle; +} + +.metadata-section-options { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + font-size: 0.875rem; + font-weight: bold; +} + +.metadata-section-options label { + width: 94px; + margin: 5px 12px 5px 0px; +} +.metadata-section-options label img { + border-radius: 2px; + border: 1px solid #dbdbdb; + width: 94px; + opacity: 0.8; + transition: border 0.2s ease, opacity 0.2s ease; +} + +.metadata-section-options label:hover img, +.metadata-section-options label:focus img { + border: 1px solid var(--tainacan-gray4, #555758); + opacity: 0.9; +} + +.metadata-section-options label input:checked+img { + opacity: 1.0; + border: 2px solid var(--tainacan-interface--link-color, #298596); +} + +.metadata-section-options label input { + position: absolute; + opacity: 0.0; } \ No newline at end of file diff --git a/src/assets/css/spectrum.css b/src/assets/css/spectrum.css index 4b9d16b..b14166a 100644 --- a/src/assets/css/spectrum.css +++ b/src/assets/css/spectrum.css @@ -10,8 +10,8 @@ License: MIT top:0; left:0; display:inline-block; - *display: inline; - *zoom: 1; + display: inline; + zoom: 1; /* https://github.com/bgrins/spectrum/issues/40 */ z-index: 9999994; overflow: hidden; @@ -374,8 +374,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. cursor:pointer; padding: 0px; display:inline-block; - *zoom: 1; - *display: inline; + zoom: 1; + display: inline; border: none; border-radius: 42px; background: transparent; @@ -399,9 +399,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. } .sp-preview { position:relative; - width:32px; - height: 32px; - border-radius: 42px; + width: calc(100% - 24px); + height: 41px; + border-radius: 2px; border: none; margin-right: 5px; float:left; @@ -409,7 +409,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. } .sp-palette { - *width: 220px; + width: 220px; max-width: 220px; } .sp-palette .sp-thumb-el { @@ -470,7 +470,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner { display:block; position:absolute; - border-radius: 42px; + border-radius: 2px; top:0;left:0;bottom:0;right:0; } diff --git a/src/assets/images/section_accordion.png b/src/assets/images/section_accordion.png new file mode 100644 index 0000000..3a81878 Binary files /dev/null and b/src/assets/images/section_accordion.png differ diff --git a/src/assets/images/section_collapse.png b/src/assets/images/section_collapse.png new file mode 100644 index 0000000..2716ffe Binary files /dev/null and b/src/assets/images/section_collapse.png differ diff --git a/src/assets/images/section_default.png b/src/assets/images/section_default.png new file mode 100644 index 0000000..1122407 Binary files /dev/null and b/src/assets/images/section_default.png differ diff --git a/src/assets/images/section_tabs.png b/src/assets/images/section_tabs.png new file mode 100644 index 0000000..42bf2cb Binary files /dev/null and b/src/assets/images/section_tabs.png differ diff --git a/src/assets/scss/_single-item-collection.scss b/src/assets/scss/_single-item-collection.scss index b903832..ef83371 100644 --- a/src/assets/scss/_single-item-collection.scss +++ b/src/assets/scss/_single-item-collection.scss @@ -642,6 +642,103 @@ } } } +.single-item-collection--section-metadata--layout-tabs { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + padding: 0 4.16667vw 0 4.16667vw; + + .tainacan-metadata-section { + display: none; + padding: 2rem 4.16667vw 1rem 4.16667vw; + border-top: 1px solid #cbcbcb; + } + label { + width: 100%; + text-align: center; + margin: 0; + cursor: pointer; + opacity: 0.85; + border-bottom: 3px solid transparent; + transition: border-bottom 0.2s ease; + + h1,h2,h3,h4 { + font-size: 1.0rem !important; + margin: 0.75rem 1.5rem; + } + + &:hover { + opacity: 1.0; + } + } + input { + position: absolute; + opacity: 0; + } + input:checked+label { + opacity: 1.0; + border-bottom-color: var(--tainacan-interface--link-color, #298596); + } + input:checked+label+.tainacan-metadata-section { + display: block; + } + @media screen and (min-width: 768px) { + label { + width: auto; + } + .tainacan-metadata-section { + order: 99; + } + } +} +.single-item-collection--section-metadata--layout-collapses, +.single-item-collection--section-metadata--layout-accordion { + box-sizing: border-box; + padding: 0 4.16667vw 0 4.16667vw; + + .tainacan-metadata-section { + display: none; + padding: 2rem 4.16667vw 1rem 4.16667vw; + border-bottom: 1px solid #cbcbcb; + } + label { + width: 100%; + margin: 0; + cursor: pointer; + opacity: 0.85; + border-bottom: 1px solid #cbcbcb; + transition: opacity 0.2s ease; + + h1,h2,h3,h4 { + font-size: 1.0rem !important; + margin: 0.75rem 1.5rem 0.75rem 2.25rem; + } + .tainacan-icon { + color: var(--tainacan-interface--link-color, #298596); + position: absolute; + transform: rotate(0deg); + transition: transform 0.2s ease; + } + &:hover { + opacity: 1.0; + border-bottom: 1px solid #dbdbdb; + } + } + input { + position: absolute; + opacity: 0; + } + input:checked+label { + opacity: 1.0; + + .tainacan-icon { + transform: rotate(90deg); + } + } + input:checked+label+.tainacan-metadata-section { + display: block; + } +} #breadcrumb-single-item-pagination { font-size: 0.875rem; height: 1.3rem; diff --git a/src/functions.php b/src/functions.php index dbd8ab4..023b562 100644 --- a/src/functions.php +++ b/src/functions.php @@ -586,5 +586,5 @@ add_action( 'enqueue_block_editor_assets', 'tainacan_editor_styles' ); require get_template_directory() . '/functions/customizer.php'; require get_template_directory() . '/functions/single-functions.php'; -require get_template_directory() . '/functions/class-tainacanthemecollectioncolor.php'; +require get_template_directory() . '/functions/class-tainacan-interface-collection-settings.php'; require get_template_directory() . '/functions/breadcrumb.php'; diff --git a/src/functions/class-tainacan-interface-collection-settings.php b/src/functions/class-tainacan-interface-collection-settings.php new file mode 100644 index 0000000..12e57b8 --- /dev/null +++ b/src/functions/class-tainacan-interface-collection-settings.php @@ -0,0 +1,197 @@ + __( 'Cancel', 'tainacan-interface' ), + 'chooseText' => __( 'Choose', 'tainacan-interface' ), + 'togglePaletteMoreText' => __( 'more', 'tainacan-interface' ), + 'togglePaletteLessText' => __( 'less', 'tainacan-interface' ), + 'clearText' => __( 'Clear Color Selection', 'tainacan-interface' ), + 'noColorSelectedText' => __( 'No Color Selected', 'tainacan-interface' ), + )); + + wp_enqueue_script( 'spectrum', get_template_directory_uri() . '/assets/js/spectrum.js', false, false, true ); + wp_enqueue_style( 'spectrum', get_template_directory_uri() . '/assets/css/spectrum.css' ); + } + + function register_hook() { + if ( function_exists( 'tainacan_register_admin_hook' ) ) { + tainacan_register_admin_hook( 'collection', array( $this, 'form' ) ); + } + } + + function form() { + if ( ! function_exists( 'tainacan_get_api_postdata' ) ) { + return ''; + } + + ob_start(); + ?> + +