From bc6e973fdcfa4ca2edbdd14d6c081386c350eb0f Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 23 Jan 2020 12:20:47 +0530 Subject: [PATCH] Updating to version 2.3.1 UX improvement 1. Exporting options are in a context menu for easier access to mobile devices. 2. Added the submit button for submitting new content to the app. 3. Options will be available as per the user's privilege level. 4. Export options on desktop will be displayed as soon as a selection is made. 5. Added option to logout and clear local data. 6. Added icons to actions for better understanding. UI improvements 1. Blur effect for popups and dialogs boxes( !Experimental chromium only). 2. Fixed issue with scroll arrows not disappearing on the desktop when the last element is reached. 3. Fixed issue with web fonts not rendering properly. **Other minor UI/UX improvements and bug fixes. --- blockchainCloud_client.html | 1758 +++++++++++++++++++++-------------- 1 file changed, 1068 insertions(+), 690 deletions(-) diff --git a/blockchainCloud_client.html b/blockchainCloud_client.html index ab436ca..01feb3d 100644 --- a/blockchainCloud_client.html +++ b/blockchainCloud_client.html @@ -6,562 +6,741 @@ - + + scroll-behavior: smooth; + font-size: 16px; +} + +@media only screen and (min-width: 1920px) { + html { + font-size: 18px; + } +} + +@media only screen and (min-width: 2560px) { + html { + font-size: 20px; + } +} + +@media only screen and (min-width: 3840px) { + html { + font-size: 22px; + } +} + +body { + margin: 0; + font-size: 16px; + background: #111; +} + +:root { + --primary-color: #00fa9a; + --light-shade: rgba(255, 255, 255, 0.1); +} + +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} + +h1, h2, h3, h4, h5, span, p { + font-family: 'Quicksand', sans-serif; +} + +::-webkit-scrollbar { + width: 0.6rem; + height: 0.25rem; +} + +::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); +} + +::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +.hide-completely { + display: none !important; +} + +._2rem-stroke svg { + stroke-width: 0.2rem !important; +} + +._5rem-stroke svg { + stroke-width: 0.5rem !important; +} + +.no-fill svg, .no-fill path, .no-fill polyline { + fill: none !important; +} + +button { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: transparent; + color: var(--primary-color); + padding: 1.2rem; + border: none; + -webkit-transition: background 0.2s ease; + transition: background 0.2s ease; + font-weight: 500; +} + +button svg { + height: 1rem; + width: 1rem; +} + +button:hover { + background: var(--light-shade); + cursor: pointer; +} + +button:first-of-type { + margin-left: auto; +} + +button:focus { + outline: none; +} + +input { + -ms-flex-item-align: start; + align-self: flex-start; + display: flexbox; + width: 100%; + padding: 1rem; + border: none; + margin: 1rem 0; + background: #181818; + color: white; + font-size: 1rem !important; +} + +#clear_export svg { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +.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 */ -
-
-

Create a new article

- - - - - - - -
-
-
-
-
-

Edit section names

- -
-
-
+
+
+ + +
+
+ +
-
@@ -653,86 +884,141 @@

+
- + if(mode === 'show' && button.classList.contains('hide')) + button.classList.remove('hide') + if(mode === 'hide' && !button.classList.contains('hide')) + button.classList.add('hide') + } + - - - - \ No newline at end of file +