From d11ea34c9c8ee10c1faa9d314b4e216df2e8f097 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Wed, 25 Dec 2019 02:22:35 +0530 Subject: [PATCH 1/2] Started basic UI/UX development --- blockchainCloud_client.html | 776 +++++++++++++++++++----------------- 1 file changed, 406 insertions(+), 370 deletions(-) diff --git a/blockchainCloud_client.html b/blockchainCloud_client.html index 6b37780..411aa51 100644 --- a/blockchainCloud_client.html +++ b/blockchainCloud_client.html @@ -1,248 +1,326 @@ - - + - Content Collaboration - - - - + Content Collaboration + + + + + @@ -278,77 +356,72 @@ - -
-
-
Close
- 
Event information log
-                =====================
-
+
+ - -
- - + - - - - - - - From 0455e7cd048dc0b8a4661fce6d4ebb068f88fc03 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Tue, 31 Dec 2019 18:07:00 +0530 Subject: [PATCH 2/2] version 2.1.1 Added section names and minor UI improvements --- blockchainCloud_client.html | 232 ++++++++++++++++++++++++++---------- 1 file changed, 172 insertions(+), 60 deletions(-) diff --git a/blockchainCloud_client.html b/blockchainCloud_client.html index 411aa51..bdd1dd2 100644 --- a/blockchainCloud_client.html +++ b/blockchainCloud_client.html @@ -29,7 +29,7 @@ ::-webkit-scrollbar { width: 0.5em; - height: 0.5em; + height: 0.25em; } ::-webkit-scrollbar-track { @@ -54,6 +54,7 @@ border: none; -webkit-transition: background 0.2s ease; transition: background 0.2s ease; + font-size: 1em; } button:hover { @@ -73,6 +74,8 @@ padding: 1em; margin: 1em 0; color: white; + border: none; + font-size: 1em; } #modal_container { @@ -101,8 +104,9 @@ color: white; } - #article_creation_modal h3 { + #article_creation_modal h3, #article_creation_modal h4 { font-weight: normal; + width: 100%; } #article_creation_modal input { @@ -111,17 +115,30 @@ display: flexbox; width: 100%; padding: 1em; - border: solid 1px rgba(0, 0, 0, 0.2); + border: none; margin: 1em 0; background: #111; color: white; } + #article_creation_modal select { + width: 100%; + padding: 1em; + background: #111; + color: white; + border: none; + font-size: 1em; + } + + #article_creation_modal #section_settings, #article_creation_modal #section_names_select_settings { + width: 100%; + } + #article_creation_modal button { margin: 1em 0; } - #article_creation_modal button:first-of-type { + #article_creation_modal #hide_article_creation_modal { margin-left: auto; } @@ -141,11 +158,10 @@ -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; opacity: 0; - background: rgba(0, 0, 0, 0.8); cursor: pointer; - padding: 0.5em; - height: 4em; - width: 2em; + padding: 1.5em; + height: 100%; + width: 4em; z-index: 2; position: absolute; top: 50%; @@ -154,8 +170,15 @@ fill: white; } + .gallery-container svg: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 svg: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 { @@ -172,6 +195,12 @@ scroll-snap-type: x mandatory; } + .gallery-name { + font-weight: normal; + color: white; + background: #00fa9a; + } + .article-body { display: -webkit-box; display: -ms-flexbox; @@ -286,42 +315,65 @@ transform: translate(-50%, -50%); height: 2em; fill: teal; + overflow: visible; } - .spin { - -webkit-animation: spin 1s infinite ease; - animation: spin 1s infinite ease; + .pulse .first-orb { + -webkit-animation: pulse 1s infinite ease; + animation: pulse 1s infinite ease; } - @-webkit-keyframes spin { + .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: rotate(0deg); - transform: rotate(0deg); + -webkit-transform: scale(1); + transform: scale(1); + } + 60% { + -webkit-transform: scale(1.5); + transform: scale(1.5); } 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); + -webkit-transform: scale(1); + transform: scale(1); } } - @keyframes spin { + @keyframes pulse { 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); + -webkit-transform: scale(1); + transform: scale(1); + } + 60% { + -webkit-transform: scale(1.5); + transform: scale(1.5); } 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); + -webkit-transform: scale(1); + transform: scale(1); } } @media only screen and (max-width: 720px) { .article-body { - min-width: calc(100% - 5em); + min-width: 100%; + } + #article_container { + padding: 1em; } } /*# sourceMappingURL=main.css.map */ +