@package-uploader/ui 1.1.3 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index-BtMbH61W.js +71 -0
- package/dist/assets/{index-BfowR104.css → index-DHoRoGws.css} +1 -1
- package/dist/index.html +2 -2
- package/package.json +1 -1
- package/src/api/client.ts +12 -0
- package/src/components/CourseStructureStep.tsx +9 -1
- package/src/components/UploadModal.tsx +278 -26
- package/src/index.css +158 -0
- package/dist/assets/index-BZdhKDnY.js +0 -71
package/src/index.css
CHANGED
|
@@ -1883,6 +1883,9 @@ body {
|
|
|
1883
1883
|
display: flex;
|
|
1884
1884
|
flex-direction: column;
|
|
1885
1885
|
gap: 0.375rem;
|
|
1886
|
+
position: sticky;
|
|
1887
|
+
bottom: 0;
|
|
1888
|
+
z-index: 1;
|
|
1886
1889
|
}
|
|
1887
1890
|
|
|
1888
1891
|
.bgp-create-info {
|
|
@@ -1944,3 +1947,158 @@ body {
|
|
|
1944
1947
|
text-align: center;
|
|
1945
1948
|
font-style: italic;
|
|
1946
1949
|
}
|
|
1950
|
+
|
|
1951
|
+
/* ========================================
|
|
1952
|
+
PREVIEW MODE — Full-screen split layout
|
|
1953
|
+
======================================== */
|
|
1954
|
+
|
|
1955
|
+
.upload-modal.preview-mode {
|
|
1956
|
+
width: 95vw;
|
|
1957
|
+
max-width: 95vw;
|
|
1958
|
+
height: 90vh;
|
|
1959
|
+
max-height: 90vh;
|
|
1960
|
+
display: flex;
|
|
1961
|
+
flex-direction: column;
|
|
1962
|
+
}
|
|
1963
|
+
|
|
1964
|
+
.upload-modal.preview-mode .modal-header {
|
|
1965
|
+
flex-shrink: 0;
|
|
1966
|
+
}
|
|
1967
|
+
|
|
1968
|
+
.preview-split {
|
|
1969
|
+
display: flex;
|
|
1970
|
+
flex: 1;
|
|
1971
|
+
overflow: hidden;
|
|
1972
|
+
border-top: 1px solid var(--color-border);
|
|
1973
|
+
}
|
|
1974
|
+
|
|
1975
|
+
.preview-split-left {
|
|
1976
|
+
width: 380px;
|
|
1977
|
+
min-width: 320px;
|
|
1978
|
+
overflow-y: auto;
|
|
1979
|
+
border-right: 1px solid var(--color-border);
|
|
1980
|
+
padding: 0.75rem;
|
|
1981
|
+
}
|
|
1982
|
+
|
|
1983
|
+
/* In preview mode, remove max-height on lessons container since the panel scrolls */
|
|
1984
|
+
.preview-split-left .tree-lessons {
|
|
1985
|
+
max-height: none;
|
|
1986
|
+
border: none;
|
|
1987
|
+
padding: 0;
|
|
1988
|
+
}
|
|
1989
|
+
|
|
1990
|
+
.preview-split-right {
|
|
1991
|
+
flex: 1;
|
|
1992
|
+
position: relative;
|
|
1993
|
+
background: var(--color-bg-secondary);
|
|
1994
|
+
}
|
|
1995
|
+
|
|
1996
|
+
.preview-iframe {
|
|
1997
|
+
width: 100%;
|
|
1998
|
+
height: 100%;
|
|
1999
|
+
border: none;
|
|
2000
|
+
}
|
|
2001
|
+
|
|
2002
|
+
.preview-loading {
|
|
2003
|
+
display: flex;
|
|
2004
|
+
flex-direction: column;
|
|
2005
|
+
align-items: center;
|
|
2006
|
+
justify-content: center;
|
|
2007
|
+
height: 100%;
|
|
2008
|
+
gap: 0.75rem;
|
|
2009
|
+
color: var(--color-text-muted);
|
|
2010
|
+
font-size: 0.875rem;
|
|
2011
|
+
}
|
|
2012
|
+
|
|
2013
|
+
/* Preview footer with inline options */
|
|
2014
|
+
.preview-footer {
|
|
2015
|
+
flex-shrink: 0;
|
|
2016
|
+
align-items: center;
|
|
2017
|
+
flex-wrap: wrap;
|
|
2018
|
+
position: relative;
|
|
2019
|
+
}
|
|
2020
|
+
|
|
2021
|
+
.preview-options-toggle {
|
|
2022
|
+
margin-left: 0.5rem;
|
|
2023
|
+
}
|
|
2024
|
+
|
|
2025
|
+
.preview-options-toggle.open {
|
|
2026
|
+
background: var(--color-bg-secondary);
|
|
2027
|
+
}
|
|
2028
|
+
|
|
2029
|
+
.preview-options-panel {
|
|
2030
|
+
position: absolute;
|
|
2031
|
+
bottom: 100%;
|
|
2032
|
+
left: 50%;
|
|
2033
|
+
transform: translateX(-50%);
|
|
2034
|
+
background: var(--color-bg);
|
|
2035
|
+
border: 1px solid var(--color-border);
|
|
2036
|
+
border-radius: var(--radius);
|
|
2037
|
+
padding: 0.75rem;
|
|
2038
|
+
box-shadow: var(--shadow-lg);
|
|
2039
|
+
display: flex;
|
|
2040
|
+
flex-direction: column;
|
|
2041
|
+
gap: 0.5rem;
|
|
2042
|
+
min-width: 250px;
|
|
2043
|
+
margin-bottom: 0.5rem;
|
|
2044
|
+
z-index: 10;
|
|
2045
|
+
}
|
|
2046
|
+
|
|
2047
|
+
.preview-options-panel .upload-link-toggle {
|
|
2048
|
+
font-size: 0.8rem;
|
|
2049
|
+
}
|
|
2050
|
+
|
|
2051
|
+
.preview-option-skin {
|
|
2052
|
+
display: flex;
|
|
2053
|
+
align-items: center;
|
|
2054
|
+
gap: 0.5rem;
|
|
2055
|
+
font-size: 0.8rem;
|
|
2056
|
+
}
|
|
2057
|
+
|
|
2058
|
+
.preview-option-label {
|
|
2059
|
+
color: var(--color-text-muted);
|
|
2060
|
+
white-space: nowrap;
|
|
2061
|
+
}
|
|
2062
|
+
|
|
2063
|
+
.preview-option-input {
|
|
2064
|
+
flex: 1;
|
|
2065
|
+
padding: 0.25rem 0.5rem;
|
|
2066
|
+
font-size: 0.8rem;
|
|
2067
|
+
border: 1px solid var(--color-border);
|
|
2068
|
+
border-radius: var(--radius-sm);
|
|
2069
|
+
background: var(--color-bg);
|
|
2070
|
+
color: var(--color-text);
|
|
2071
|
+
}
|
|
2072
|
+
|
|
2073
|
+
.preview-option-input:focus {
|
|
2074
|
+
outline: none;
|
|
2075
|
+
border-color: var(--color-primary);
|
|
2076
|
+
}
|
|
2077
|
+
|
|
2078
|
+
/* Responsive: stack on smaller screens */
|
|
2079
|
+
@media (max-width: 900px) {
|
|
2080
|
+
.upload-modal.preview-mode {
|
|
2081
|
+
width: 100vw;
|
|
2082
|
+
max-width: 100vw;
|
|
2083
|
+
height: 100vh;
|
|
2084
|
+
max-height: 100vh;
|
|
2085
|
+
border-radius: 0;
|
|
2086
|
+
}
|
|
2087
|
+
|
|
2088
|
+
.preview-split {
|
|
2089
|
+
flex-direction: column;
|
|
2090
|
+
}
|
|
2091
|
+
|
|
2092
|
+
.preview-split-left {
|
|
2093
|
+
width: 100%;
|
|
2094
|
+
min-width: 0;
|
|
2095
|
+
max-height: 40vh;
|
|
2096
|
+
border-right: none;
|
|
2097
|
+
border-bottom: 1px solid var(--color-border);
|
|
2098
|
+
}
|
|
2099
|
+
|
|
2100
|
+
.preview-split-right {
|
|
2101
|
+
flex: 1;
|
|
2102
|
+
min-height: 200px;
|
|
2103
|
+
}
|
|
2104
|
+
}
|