diff --git a/blockchainCloud_client.html b/blockchainCloud_client.html index 01feb3d..609ff6c 100644 --- a/blockchainCloud_client.html +++ b/blockchainCloud_client.html @@ -1,777 +1,820 @@ + Content Collaboration - - + + - + .dropdown { + position: relative; + } + + .dropdown-content { + display: none; + position: absolute; + background-color: #222; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + text-align: right; + -webkit-box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24); + box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24); + z-index: 2; + right: 0; + } + + .dropdown-content button { + width: 100%; + } + + .dropdown-content button svg { + fill: none; + overflow: visible; + } + + .dropdown:hover .dropdown-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + + .spacer { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + } + + .popup-container { + display: -ms-grid; + display: grid; + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + place-items: center; + background: rgba(0, 0, 0, 0.4); + -webkit-backdrop-filter: blur(0.5rem); + backdrop-filter: blur(0.5rem); + z-index: 4; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + } + + .popup-container .popup { + overflow-y: auto; + padding: 1rem 0; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + background: #222; + -webkit-transform: translateY(1em); + transform: translateY(1em); + -webkit-transition: -webkit-transform 0.2s ease; + transition: -webkit-transform 0.2s ease; + transition: transform 0.2s ease; + transition: transform 0.2s ease, -webkit-transform 0.2s ease; + -webkit-box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24); + box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24); + color: white; + } + + #context_menu { + display: none; + } + + #article_creation_modal { + max-height: 24rem; + width: 24rem; + padding: 1rem 2rem; + } + + #article_creation_modal h3, + #article_creation_modal h4 { + font-weight: normal; + width: 100%; + } + + #article_creation_modal button { + margin: 1rem 0; + } + + #article_creation_modal button:first-of-type { + margin-left: auto; + margin-right: 1rem; + } + + .section-title { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + } + + .section-title h2 { + color: #111; + background: var(--primary-color); + padding: 0.5rem; + margin: 0; + } + + .gallery-name { + padding: 0.2rem 0; + margin: 1rem 0; + color: white; + } + + .edit-article { + margin-left: auto; + } + + .edit-article svg { + fill: var(--primary-color); + margin-right: 0.5rem; + } + + #edit_article { + width: 24rem; + padding: 0; + } + + #edit_article label { + font-size: 0.9rem; + } + + #edit_article input { + margin-bottom: 2rem; + margin-top: 0.5rem; + width: 100%; + } + + #edit_article header { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.5rem 2rem; + } + + #edit_article header button { + margin-left: auto; + margin-right: 0; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + } + + #edit_article header button svg { + stroke: var(--primary-color); + stroke-width: 0.3rem; + fill: none; + margin-right: 0.5rem; + } + + #edit_article #edit_section_container { + max-height: 50vh; + overflow-y: auto; + padding: 1rem 2rem; + } + + .gallery-container { + position: relative; + } + + .gallery-container .navigation-arrows { + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + cursor: pointer; + padding: 1.5rem; + height: 100%; + width: 4rem; + z-index: 2; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + fill: white; + } + + .gallery-container .navigation-arrows:nth-of-type(1) { + background: -webkit-gradient(linear, right top, left top, from(transparent), to(rgba(0, 0, 0, 0.6))); + background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.6)); + } + + .gallery-container .navigation-arrows:nth-of-type(2) { + right: 0; + background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0, 0, 0, 0.6))); + background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.6)); + } + + .gallery { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + overflow-x: auto; + -ms-scroll-snap-type: x mandatory; + scroll-snap-type: x mandatory; + } + + .article-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + scroll-snap-align: start; + min-width: 30%; + background-color: #222; + color: white; + margin: 0 1rem 1rem 0; + } + + .article-body .article-header { + padding: 0.5rem 1rem; + word-break: break-all; + } + + .article-body .article-header h5 { + font-weight: normal; + color: #82DDF0; + } + + .article-body .card-body { + position: relative; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + } + + .article-body .card-body .content-div { + padding: 0 1rem 4rem 1rem; + min-height: 12rem; + line-height: 1.2rem; + max-height: 60vh; + overflow-y: auto; + font-weight: 400; + } + + .article-body .card-body .content-div * { + font-family: 'Roboto', sans-serif; + } + + .article-body .card-body button { + position: absolute; + bottom: 0; + right: 0; + margin-right: 1rem; + } + + .article-body .card-footer { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.5rem 1rem; + } + + .article-body .card-footer h5 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + font-weight: normal; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: var(--primary-color); + cursor: pointer; + } + + .article-body .card-footer h5:nth-of-type(2) { + margin-left: auto; + } + + .article-body .card-footer h5:nth-of-type(2):hover svg { + fill: var(--primary-color); + } + + .article-body .card-footer h5 svg { + stroke: var(--primary-color); + width: 1.2rem; + margin-right: 0.5rem; + } + + .show { + opacity: 1; + pointer-events: all; + } + + .hide { + opacity: 0; + pointer-events: none; + } + + #article_container { + padding: 2rem; + position: absolute; + width: 100%; + height: calc(100% - 4.4rem); + bottom: 0; + overflow-y: auto; + } + + .snippet-selected { + outline: 1px solid var(--primary-color); + } + + .no-transformations { + -webkit-transform: none !important; + transform: none !important; + } + + #navbar { + position: fixed; + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: white; + background: #222; + padding: 0.5rem 1rem; + z-index: 2; + } + + #navbar h5 { + font-weight: normal; + margin: 0 0 0.25rem 0; + } + + #navbar span { + font-size: 0.9rem; + -ms-grid-column-align: center; + justify-self: center; + } + + #navbar #icon { + width: 2rem; + margin: 0 0.5rem; + } + + #navbar button { + text-transform: uppercase; + } + + #navbar button svg { + stroke: var(--primary-color); + stroke-width: 0.2rem; + margin-right: 0.5rem; + fill: none; + overflow: visible; + } + + .floating-btn { + display: none; + } + + #loader_container { + position: fixed; + height: 100vh; + width: 100vw; + top: 0; + background: rgba(0, 0, 0, 0.4); + -webkit-backdrop-filter: blur(0.5rem); + backdrop-filter: blur(0.5rem); + -webkit-transition: opacity 0.6s ease; + transition: opacity 0.6s ease; + display: -ms-grid; + display: grid; + place-content: center; + z-index: 4; + text-align: center; + } + + #loader_container #spinner { + position: relative; + height: 2rem; + fill: teal; + overflow: visible; + -ms-grid-column-align: center; + justify-self: center; + } + + #loader_container h4 { + font-weight: normal; + color: white; + } + + #loader_container button { + margin: auto; + } + + .pulse .first-orb { + -webkit-animation: pulse 1s infinite ease; + animation: pulse 1s infinite ease; + } + + .pulse .second-orb { + -webkit-animation: pulse 1s 0.1s infinite ease; + animation: pulse 1s 0.1s infinite ease; + } + + .pulse .third-orb { + -webkit-animation: pulse 1s 0.2s infinite ease; + animation: pulse 1s 0.2s infinite ease; + } + + @-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 60% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } + } + + @keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 60% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } + } + + .spin svg { + -webkit-animation: spin 0.6s ease infinite; + animation: spin 0.6s ease infinite; + -webkit-transform-origin: center; + transform-origin: center; + } + + @-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } + } + + @keyframes spin { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } + } + + @media only screen and (max-width: 640px) { + ::-webkit-scrollbar { + width: 0.2rem; + height: 0.2rem; + } + + ::-webkit-scrollbar-track { + background: transparent; + } + + ::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + } + + .hide-on-mobile { + display: none; + } + + .article-body { + min-width: calc(100% - 2em) !important; + } + + #context_menu, + .floating-btn { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 2rem; + background: #222; + position: fixed; + -webkit-box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); + z-index: 3; + } + + #context_menu button, + .floating-btn button { + width: 100%; + } + + #context_menu button svg, + .floating-btn button svg { + fill: none; + stroke: var(--primary-color); + } + + .floating-btn { + background: #282828; + bottom: 0; + right: 0; + border-radius: 5rem; + overflow: hidden; + } + + .floating-btn button svg { + stroke-width: 0.2rem; + } + + #context_menu { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + + #context_menu button svg { + stroke-width: 0.2rem; + margin-right: 0.5rem; + } + + #context_menu button:nth-of-type(1) svg { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + } + + #article_container { + padding: 0.5rem 0.5rem 6rem 0.5rem; + } + + #navbar { + padding: 0.5rem; + } + + .navigation-arrows { + opacity: 0; + pointer-events: none; + } + + .popup { + width: 100% !important; + } + + .popup-container { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + } + + #edit_section_container { + max-height: 70vh !important; + } + } + + @media only screen and (max-width: 1280px) { + .article-body { + min-width: 50%; + } + + .hide-on-medium { + display: none; + } + } + + /*# sourceMappingURL=main.css.map */ + @@ -779,16 +822,16 @@ input {
@@ -796,91 +839,105 @@ input { - +
- + - - - + + +

@@ -891,85 +948,85 @@ input {
- + function buttonVisibility(mode, parent) { + let button = parent.children[2]; + if (parent.firstElementChild.innerText == '') { + button.classList.add('hide') + return; + } + if (mode === 'show' && button.classList.contains('hide')) + button.classList.remove('hide') + if (mode === 'hide' && !button.classList.contains('hide')) + button.classList.add('hide') + } + - - - - + + + - - - - + + + + + //addStartUpFunction('Sample', Promised Function) + //setAppObjectStores({sampleObs1:{}, sampleObs2:{options{autoIncrement:true, keyPath:'SampleKey'}, Indexes:{sampleIndex:{}}}}) + showLoader(); + showMessage("Starting the app! Please Wait!") + floDapps.launchStartUp().then(result => { + console.log(result) + showMessage(result) + showMessage(`Welcome ${myFloID}`) + buidAdminUI(); + cloudArticleApp.retrieveLatestContent(); + }).catch(error => console.error(error)) + } + - + - + + \ No newline at end of file