Started basic UI/UX development
This commit is contained in:
sairaj mote
GitHub
parent
cfcdd2cca6
commit
d11ea34c9c
@ -1,248 +1,326 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Content Collaboration</title>
|
<title>Content Collaboration</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta charset="UTF-8">
|
||||||
<!-- Bootstrap CSS -->
|
<meta name="keywords" content="blockchain,ContentCollaboration,RanchiMall">
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="This web app can be used to collaborate between various teams using blockchain technology.">
|
||||||
|
<!--<link rel="stylesheet" href="css/main.css">-->
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
@font-face {
|
||||||
padding: 0;
|
font-family: 'Roboto';
|
||||||
position: absolute;
|
font-style: normal;
|
||||||
left: 0;
|
src: url("../fonts/roboto-v20-latin-regular.eot");
|
||||||
right: 0;
|
src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin-regular.woff2") format("woff2"), url("../fonts/roboto-v20-latin-regular.woff") format("woff"), url("../fonts/roboto-v20-latin-regular.ttf") format("truetype"), url("../fonts/roboto-v20-latin-regular.svg#Roboto") format("svg");
|
||||||
font-size: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #000000;
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
background: #111;
|
||||||
}
|
}
|
||||||
|
|
||||||
.margin-15 {
|
* {
|
||||||
margin: 15px 15px;
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.padding-8 {
|
|
||||||
padding: 8px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery {
|
|
||||||
position: relative;
|
|
||||||
/*max-width: 800px;*/
|
|
||||||
padding: 0 10;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery_scroller {
|
|
||||||
/* snap mandatory on horizontal axis */
|
|
||||||
scroll-snap-type: x mandatory;
|
|
||||||
|
|
||||||
overflow-x: scroll;
|
|
||||||
overflow-y: hidden;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
height: 500px;
|
|
||||||
|
|
||||||
/* Enable Safari touch scrolling physics which is needed for scroll snap */
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.gallery_scroller div {
|
|
||||||
/* snap align center */
|
|
||||||
scroll-snap-align: center;
|
|
||||||
margin: 10px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery_scroller img {
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery_scroller div.card-body {
|
|
||||||
height: 450em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery_scroller div.colored_card {
|
|
||||||
min-width: 40%;
|
|
||||||
min-height: 100%;
|
|
||||||
max-height: 300px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #343a40;
|
|
||||||
color: aliceblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery div.note {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
/* vertically align center */
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
background: rgba(0,0,0, 0.6);
|
|
||||||
padding: 20px;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
font-size: 4em;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.gallery .btn {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
height: 30px;
|
|
||||||
width: 30px;
|
|
||||||
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: rgba(0,0,0,0.5);
|
|
||||||
background-position: 50% 50%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery .btn.next {
|
|
||||||
background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M25.557 14.7L13.818 2.961 16.8 0l16.8 16.8-16.8 16.8-2.961-2.961L25.557 18.9H0v-4.2z" fill="%23FFF" fill-rule="evenodd"/></svg>');
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery .btn.prev {
|
|
||||||
background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M33.6 14.7H8.043L19.782 2.961 16.8 0 0 16.8l16.8 16.8 2.961-2.961L8.043 18.9H33.6z" fill="%23FFF" fill-rule="evenodd"/></svg>');
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.set-flex {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content_div {
|
|
||||||
flex: 1;
|
|
||||||
padding: 2px 2px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: 250px;
|
|
||||||
font-size: 3vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
font-size: medium;
|
|
||||||
}
|
|
||||||
.float-right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.gallery {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Scrollbar */
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 0.5em;
|
||||||
|
height: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Track f1f1f1, 888, 555*/
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: #343a40;
|
background: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Handle */
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: #888;
|
background: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Handle on hover */
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: #555;
|
background: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
/*logs*/
|
-ms-flex-item-align: start;
|
||||||
.sidenav {
|
align-self: flex-start;
|
||||||
position: fixed;
|
display: flexbox;
|
||||||
z-index: 1;
|
background: transparent;
|
||||||
top: 84px;
|
color: white;
|
||||||
left: 10px;
|
padding: 1em 2em;
|
||||||
background: #eee;
|
border: none;
|
||||||
overflow-x: hidden;
|
-webkit-transition: background 0.2s ease;
|
||||||
|
transition: background 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w3-sidebar {
|
button:hover {
|
||||||
height: 100%;
|
background: linear-gradient(45deg, teal, mediumSpringGreen);
|
||||||
width: auto;
|
cursor: pointer;
|
||||||
transition: width 2s ease 0s;
|
|
||||||
-webkit-transition: width 2s;
|
|
||||||
position: fixed !important;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.w3-bar-block .w3-bar-item {
|
button:first-of-type {
|
||||||
display: block;
|
margin-left: auto;
|
||||||
padding: 8px 16px;
|
|
||||||
text-align: left;
|
|
||||||
border: none;
|
|
||||||
white-space: normal;
|
|
||||||
float: none;
|
|
||||||
outline: 0;
|
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.w3-large {
|
input {
|
||||||
font-size: 18px !important;
|
-ms-flex-item-align: start;
|
||||||
|
align-self: flex-start;
|
||||||
|
display: flexbox;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1em;
|
||||||
|
margin: 1em 0;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-black {
|
#modal_container {
|
||||||
background-color: #101010;
|
position: fixed;
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
place-items: center;
|
||||||
|
z-index: 12;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
-webkit-transition: opacity 0.2s ease;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w3-bar-block .w3-bar-item {
|
#article_creation_modal {
|
||||||
display: block;
|
position: relative;
|
||||||
padding: 8px 16px;
|
display: -webkit-box;
|
||||||
text-align: left;
|
display: -ms-flexbox;
|
||||||
border: none;
|
display: flex;
|
||||||
white-space: normal;
|
-ms-flex-wrap: wrap;
|
||||||
float: none;
|
flex-wrap: wrap;
|
||||||
outline: 0;
|
width: 24em;
|
||||||
color: #fff;
|
background: #222;
|
||||||
|
padding: 1em 2em;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
#article_creation_modal h3 {
|
||||||
max-height: 20em;
|
font-weight: normal;
|
||||||
font-family: monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 2px 5px;
|
|
||||||
color: #0f0;
|
|
||||||
background-color: #111;
|
|
||||||
border: 1px solid #030;
|
|
||||||
overflow: auto;
|
|
||||||
margin: 0;
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.w3-xlarge {
|
#article_creation_modal input {
|
||||||
font-size: 24px !important;
|
-ms-flex-item-align: start;
|
||||||
|
align-self: flex-start;
|
||||||
|
display: flexbox;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1em;
|
||||||
|
border: solid 1px rgba(0, 0, 0, 0.2);
|
||||||
|
margin: 1em 0;
|
||||||
|
background: #111;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w3-teal,
|
#article_creation_modal button {
|
||||||
.w3-hover-teal:hover {
|
margin: 1em 0;
|
||||||
color: #fff !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
user agent stylesheet div {
|
#article_creation_modal button:first-of-type {
|
||||||
display: block;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-container:hover .navigation-arrows {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-container .navigation-arrows {
|
||||||
|
-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;
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-container svg:nth-of-type(2) {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: center;
|
||||||
|
min-width: 30%;
|
||||||
|
background-color: #222;
|
||||||
|
color: white;
|
||||||
|
margin: 1em 1em 1em 0;
|
||||||
|
-webkit-box-shadow: 0.25px 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||||
|
box-shadow: 0.25px 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-body .article-header {
|
||||||
|
padding: 1em;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-body .article-header h5 {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-body .card-body {
|
||||||
|
padding: 1em;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-body .card-footer {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-body .card-footer h5 {
|
||||||
|
font-weight: normal;
|
||||||
|
display: inline-flexbox;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-body .card-footer h5:first-of-type {
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-body .card-footer h5:nth-of-type(2) {
|
||||||
|
margin-left: auto;
|
||||||
|
color: mediumspringgreen;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show {
|
||||||
|
opacity: 1 !important;
|
||||||
|
pointer-events: all !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#article_container {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-transformations {
|
||||||
|
-webkit-transform: none;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar #icon {
|
||||||
|
width: 2em;
|
||||||
|
margin: 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar button {
|
||||||
|
padding: 1.2em 2em;
|
||||||
|
background: linear-gradient(45deg, teal, mediumSpringGreen);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spinner {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translate(-50%, -50%);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
height: 2em;
|
||||||
|
fill: teal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin {
|
||||||
|
-webkit-animation: spin 1s infinite ease;
|
||||||
|
animation: spin 1s infinite ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(359deg);
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(359deg);
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) {
|
||||||
|
.article-body {
|
||||||
|
min-width: calc(100% - 5em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=main.css.map */
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -278,77 +356,72 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body onload="onLoadStartUp()">
|
<body onload="onLoadStartUp()">
|
||||||
|
<section id="modal_container" class="hide">
|
||||||
<div class="sidenav">
|
<div id="article_creation_modal">
|
||||||
<div class="w3-sidebar w3-bar-block" style="display: block; width: 98%;" id="mySidebar">
|
<h3>Create a new article</h3>
|
||||||
<div onclick="closeMessage()" class="w3-bar-item w3-button w3-large bg-black">Close</div>
|
<input type="text" id="article_name" placeholder="Article name">
|
||||||
<pre id="log">Event information log
|
|
||||||
=====================
|
<input type="number" id="section_nums" placeholder="Section number">
|
||||||
</pre>
|
|
||||||
|
<button id="hide_article_creation_modal" onclick="hide_article_creation_modal(this.parentNode)">Cancel</button>
|
||||||
|
<button id="create_article">Create</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="w3-button w3-teal w3-xlarge" onclick="displayMessages()">☰</div>
|
</section>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<nav id="navbar">
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
<svg id="icon" viewBox="0 0 99.555 117.877" style="enable-background:new 0 0 99.555 117.877;"
|
||||||
<span class="navbar-brand mb-0 h1">Blockchain Content Collaboration</span>
|
xml:space="preserve">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
<style type="text/css">
|
||||||
<span class="navbar-toggler-icon"></span>
|
.st0{fill:url(#SVGID_1_);}
|
||||||
</button>
|
.st1{fill:url(#SVGID_2_);}
|
||||||
<div class="collapse navbar-collapse" id="navbarText">
|
</style>
|
||||||
<ul class="navbar-nav mr-auto">
|
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="97.2301" y1="78.3705" x2="9.026" y2="12.0223">
|
||||||
<li class="nav-item active">
|
<stop offset="0" style="stop-color:mediumspringgreen"/>
|
||||||
<a class="nav-link" href="#" data-toggle="modal" data-target=".bd-example-modal-lg">Actions <span class="sr-only">(current)</span></a>
|
<stop offset="1" style="stop-color:teal"/>
|
||||||
</li>
|
</linearGradient>
|
||||||
</ul>
|
<path class="st0" d="M98.46,77.89c-4.54-16.94-21.95-27-38.9-22.46c-4.21,1.13-7.99,3.05-11.23,5.57l-4.93-4.93
|
||||||
<span class="navbar-text" id="retrieveLatestContentBtn" onclick="cloudArticleApp.retrieveLatestContent()">
|
c6.24-8.59,6.09-20.35-0.46-28.78l4.97-4.97c4.6,2.71,10.62,2.11,14.57-1.84c4.69-4.69,4.69-12.28,0-16.97s-12.28-4.69-16.97,0
|
||||||
Refresh
|
c-3.95,3.95-4.56,9.97-1.84,14.57l-4.97,4.97c-9.42-7.32-23.02-6.68-31.67,1.97c-9.37,9.37-9.37,24.57,0,33.94
|
||||||
</span>
|
c8.35,8.35,21.31,9.24,30.67,2.71l4.98,4.98c-5.86,7.58-8.24,17.7-5.57,27.67c4.54,16.94,21.95,27,38.9,22.46
|
||||||
</div>
|
C92.95,112.25,103,94.83,98.46,77.89z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Blockchain Content Collaboration</span>
|
||||||
|
<button id="show_article_creation_modal" onclick="show_article_creation_modal()">Create article</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="container">
|
<svg class="hide" id="spinner" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
|
||||||
|
<path class='p2' d="M6.5,13.8c-2.2-0.5-3.9-2.3-4.4-4.5c-0.7-3.6,1.7-6.8,5-7.2C7.6,2,8,1.6,8,1.1v0c0-0.6-0.5-1.1-1.1-1
|
||||||
|
C2.5,0.7-0.8,4.9,0.2,9.6c0.6,3.1,2.9,5.5,6,6.2c4.8,1.1,9.1-2.2,9.8-6.7C16,8.5,15.5,8,14.9,8h0c-0.5,0-0.9,0.4-1,0.9
|
||||||
|
C13.5,12.2,10.2,14.7,6.5,13.8z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<section id="article_container">
|
||||||
<div id="current_data"></div>
|
<div id="current_data"></div>
|
||||||
<div class="cards">
|
</section>
|
||||||
<div id="full_article_div" class="card-body"></div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<script>
|
||||||
|
function show_article_creation_modal(element){
|
||||||
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
document.getElementById('modal_container').classList.add('show');
|
||||||
<div class="modal-dialog modal-lg">
|
}
|
||||||
<div class="modal-content">
|
function hide_article_creation_modal(element){
|
||||||
<div class="modal-header">
|
element.parentNode.classList.remove('show');
|
||||||
<h5 class="modal-title" id="exampleModalLabel">Actions</h5>
|
}
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
function prevArticle(container){
|
||||||
<span aria-hidden="true">×</span>
|
container.children[0].scrollBy({
|
||||||
</button>
|
top: 0,
|
||||||
</div>
|
left: -100,
|
||||||
<div class="modal-body">
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
<div class="row">
|
}
|
||||||
<div class="col-md-12">
|
function nextArticle(container){
|
||||||
<div id="reset_data_div">
|
container.children[0].scrollBy({
|
||||||
<h5>Reset</h5>
|
top: 0,
|
||||||
<label>Article Name: </label>
|
left: 100,
|
||||||
<input type="text" class="form-control" id="article_name"> <br>
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
<label>Number Of Sections: </label>
|
}
|
||||||
<input type="text" class="form-control" id="section_nums"> <br>
|
</script>
|
||||||
|
|
||||||
<input type="button" class="btn btn-secondary" id="reset_data_btn" value="Reset">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
//All util libraries required for Standard operations (DO NOT EDIT ANY)
|
//All util libraries required for Standard operations (DO NOT EDIT ANY)
|
||||||
@ -7333,26 +7406,20 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
function onLoadStartUp() {
|
function onLoadStartUp() {
|
||||||
|
document.getElementById('spinner').classList.add('show', 'spin');
|
||||||
initIndexedDB().then(result => {
|
initIndexedDB().then(result => {
|
||||||
console.log(result)
|
console.log(result)
|
||||||
showMessage(result)
|
|
||||||
getCredentials().then(result => {
|
getCredentials().then(result => {
|
||||||
console.log(result)
|
console.log(result)
|
||||||
showMessage(result)
|
////showMessage(`FLO_ID: ${myFloID}`)
|
||||||
showMessage(`FLO_ID: ${myFloID}`)
|
|
||||||
readSubAdminListFromAPI().then(result => {
|
readSubAdminListFromAPI().then(result => {
|
||||||
console.log(result)
|
console.log(result)
|
||||||
showMessage(result)
|
|
||||||
readSupernodeListFromAPI().then(result => {
|
readSupernodeListFromAPI().then(result => {
|
||||||
console.log(result)
|
console.log(result)
|
||||||
showMessage(result)
|
|
||||||
floSupernode.kBucket.launch(Object.keys(floGlobals.supernodes),floGlobals.SNStorageID).then(result => {
|
floSupernode.kBucket.launch(Object.keys(floGlobals.supernodes),floGlobals.SNStorageID).then(result => {
|
||||||
console.log(result)
|
console.log(result)
|
||||||
showMessage(result)
|
|
||||||
loadDataFromIDB().then(result => {
|
loadDataFromIDB().then(result => {
|
||||||
console.log(result);
|
console.log(result);
|
||||||
showMessage(result)
|
|
||||||
showMessage('Loading latest data...')
|
|
||||||
cloudArticleApp.retrieveLatestContent();
|
cloudArticleApp.retrieveLatestContent();
|
||||||
}).catch(error => console.log(error))
|
}).catch(error => console.log(error))
|
||||||
}).catch(error => console.log(error))
|
}).catch(error => console.log(error))
|
||||||
@ -7526,7 +7593,7 @@
|
|||||||
indexArr.forEach(i => compactIDB.removeData('credentials', i))
|
indexArr.forEach(i => compactIDB.removeData('credentials', i))
|
||||||
localStorage.removeItem("privKey")
|
localStorage.removeItem("privKey")
|
||||||
let info = `privKey credentials deleted!`;
|
let info = `privKey credentials deleted!`;
|
||||||
showMessage(info)
|
//showMessage(info)
|
||||||
return info;
|
return info;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -7546,44 +7613,13 @@
|
|||||||
return filterStr
|
return filterStr
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function displayMessages() {
|
|
||||||
document.getElementById("mySidebar").style.width = "98%";
|
|
||||||
document.getElementById("mySidebar").style.display = "block";
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeMessage() {
|
|
||||||
document.getElementById("mySidebar").style.display = "none";
|
|
||||||
}
|
|
||||||
|
|
||||||
function LogEvent(msg) {
|
|
||||||
log.textContent += "> " + msg + "\n";
|
|
||||||
var ot = log.scrollHeight - log.clientHeight;
|
|
||||||
if (ot > 0) log.scrollTop = ot;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showMessage(msg = '', t = 10000) {
|
|
||||||
if (msg.length > 0) LogEvent(msg);
|
|
||||||
displayMessages();
|
|
||||||
setTimeout(function () {
|
|
||||||
closeMessage();
|
|
||||||
clearTimeout();
|
|
||||||
}, t);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
const cloudArticleApp = {
|
const cloudArticleApp = {
|
||||||
|
|
||||||
SUBJECT: "testArticle4",
|
SUBJECT: "testArticle4",
|
||||||
|
|
||||||
numberOfSections: 5,
|
numberOfSections: 7,
|
||||||
|
|
||||||
CONTENT_TYPE: "typeContentCollab4",
|
CONTENT_TYPE: "typeContentCollab4",
|
||||||
|
|
||||||
@ -7601,9 +7637,9 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
showFullContentOfArticle: function(obj) {
|
showFullContentOfArticle: function(obj) {
|
||||||
const full_data_div = document.getElementById('current_data');
|
document.getElementById('spinner').classList.remove('show', 'spin');
|
||||||
const full_article_div = document.getElementById('full_article_div');
|
const full_data_div = document.getElementById('current_data'),
|
||||||
const articleSubject = floGlobals.appObjects[this.SUBJECT];
|
articleSubject = floGlobals.appObjects[this.SUBJECT];
|
||||||
|
|
||||||
const new_generalData = getNextGeneralData(this.CONTENT_TYPE, floGlobals.vectorClock[this.SUBJECT]);
|
const new_generalData = getNextGeneralData(this.CONTENT_TYPE, floGlobals.vectorClock[this.SUBJECT]);
|
||||||
|
|
||||||
@ -7623,14 +7659,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let t = ``;
|
let article_structure = ``;
|
||||||
|
|
||||||
for(key in obj) {
|
for(key in obj) {
|
||||||
if (Object.keys(articleSubject).includes(key)) {
|
if (Object.keys(articleSubject).includes(key)) {
|
||||||
t += `<h4 class="card text-center margin-15 padding-8">${key}</h4>`;
|
article_structure += `<h2 class="section-title">${key}</h2>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
for(secKey in articleSubject[key].data) {
|
for(secKey in articleSubject[key].data) {
|
||||||
|
let tempCounter = 0;
|
||||||
const secObject = articleSubject[key].data[secKey];
|
const secObject = articleSubject[key].data[secKey];
|
||||||
|
|
||||||
// Add non scored new entries from users
|
// Add non scored new entries from users
|
||||||
@ -7646,13 +7683,13 @@
|
|||||||
let secObj = Object.values(secObject).sort((a,b)=>b.score-a.score);
|
let secObj = Object.values(secObject).sort((a,b)=>b.score-a.score);
|
||||||
const vc_array = [];
|
const vc_array = [];
|
||||||
|
|
||||||
t += `<div id="paginated_gallery" class="gallery">
|
article_structure += `<div class="gallery-container">
|
||||||
<div class="gallery_scroller">`;
|
<div class="gallery">`;
|
||||||
|
|
||||||
for(iterKey in secObj) {
|
for(iterKey in secObj) {
|
||||||
const article_data = secObj[iterKey];
|
const article_data = secObj[iterKey],
|
||||||
const gen_div_id = this.unique_id();
|
gen_div_id = this.unique_id(),
|
||||||
const content_hash = Crypto.SHA256(article_data.content.trim());
|
content_hash = Crypto.SHA256(article_data.content.trim());
|
||||||
let vc = article_data.vectorClock || "";
|
let vc = article_data.vectorClock || "";
|
||||||
|
|
||||||
if(Number(article_data.score)>0) {
|
if(Number(article_data.score)>0) {
|
||||||
@ -7670,50 +7707,53 @@
|
|||||||
if(vc_array.includes(vc)) continue;
|
if(vc_array.includes(vc)) continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
t +=
|
article_structure +=
|
||||||
`<div class="card colored_card">
|
`<div class="article-body">
|
||||||
<div class="card-header">
|
<div class="article-header">
|
||||||
Author Id: ${article_data.content_creator}
|
<h5>Author Id: ${article_data.content_creator}</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body set-flex">
|
<div class="card-body">
|
||||||
<div class="card-text content_div" id="${gen_div_id}" data-value="${key}__${secKey}" contenteditable="true" onfocusout="cloudArticleApp.edit_onfocuout()">
|
<div class="content_div" id="${gen_div_id}" data-value="${key}__${secKey}" contenteditable="true" onfocusout="cloudArticleApp.edit_onfocuout()">
|
||||||
${article_data.content.trim()}
|
${article_data.content.trim()}
|
||||||
</div>
|
</div>
|
||||||
<input type="hidden" id="hash_${gen_div_id}" value="${content_hash}">
|
<input type="hidden" id="hash_${gen_div_id}" value="${content_hash}">
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<small class="text-muted">Section: ${secKey} </small>
|
<h5>${secKey}</h5>
|
||||||
<small class="text-muted float-right" id="score_${vc}" onclick="cloudArticleApp.upgrade_article()">SCORE: ${article_data.score}</small>
|
<h5 title="Give score to this article" id="score_${vc}" onclick="cloudArticleApp.upgrade_article()">SCORE ${article_data.score}</h5>
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
tempCounter++;
|
||||||
}
|
}
|
||||||
t += `</div>
|
if(tempCounter > 1 && window.innerWidth < 720)
|
||||||
<span class="btn prev"></span>
|
article_structure += `
|
||||||
<span class="btn next"></span>
|
</div>
|
||||||
</div>`;
|
<svg class="navigation-arrows" onclick="prevArticle(this.parentNode)" viewBox="0 0 71.94 67.88" style="enable-background:new 0 0 71.94 67.88;" xml:space="preserve">
|
||||||
|
<polygon points="71.94,29.94 15.31,29.94 39.6,5.66 33.94,0 5.66,28.28 5.66,28.28 0,33.94 5.66,39.6 5.66,39.6 33.94,67.88
|
||||||
|
39.6,62.23 15.31,37.94 71.94,37.94 "/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="navigation-arrows" onclick="nextArticle(this.parentNode)" viewBox="0 0 71.94 67.88" style="enable-background:new 0 0 71.94 67.88;" xml:space="preserve">
|
||||||
|
<polygon points="0,37.94 56.63,37.94 32.34,62.23 38,67.88 66.28,39.6 66.28,39.6 71.94,33.94 66.28,28.28 66.28,28.28 38,0
|
||||||
|
32.34,5.66 56.63,29.94 0,29.94 "/>
|
||||||
|
</svg>`;
|
||||||
|
if(tempCounter > 3 && window.innerWidth > 720)
|
||||||
|
article_structure += `
|
||||||
|
</div>
|
||||||
|
<svg class="navigation-arrows" onclick="prevArticle(this.parentNode)" viewBox="0 0 71.94 67.88" style="enable-background:new 0 0 71.94 67.88;" xml:space="preserve">
|
||||||
|
<polygon points="71.94,29.94 15.31,29.94 39.6,5.66 33.94,0 5.66,28.28 5.66,28.28 0,33.94 5.66,39.6 5.66,39.6 33.94,67.88
|
||||||
|
39.6,62.23 15.31,37.94 71.94,37.94 "/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="navigation-arrows" onclick="nextArticle(this.parentNode)" viewBox="0 0 71.94 67.88" style="enable-background:new 0 0 71.94 67.88;" xml:space="preserve">
|
||||||
|
<polygon points="0,37.94 56.63,37.94 32.34,62.23 38,67.88 66.28,39.6 66.28,39.6 71.94,33.94 66.28,28.28 66.28,28.28 38,0
|
||||||
|
32.34,5.66 56.63,29.94 0,29.94 "/>
|
||||||
|
</svg>`;
|
||||||
|
article_structure+=`</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
full_data_div.innerHTML = t;
|
full_data_div.innerHTML = article_structure;
|
||||||
|
|
||||||
const gallery = document.querySelector('#paginated_gallery');
|
|
||||||
if(gallery==null) return;
|
|
||||||
const gallery_scroller = gallery.querySelector('.gallery_scroller');
|
|
||||||
if(gallery_scroller==null) return;
|
|
||||||
const gallery_item_size = gallery_scroller.querySelector('div').clientWidth;
|
|
||||||
|
|
||||||
gallery.querySelector('.btn.next').addEventListener('click', scrollToNextPage);
|
|
||||||
gallery.querySelector('.btn.prev').addEventListener('click', scrollToPrevPage);
|
|
||||||
|
|
||||||
// For paginated scrolling, simply scroll the gallery one item in the given
|
|
||||||
// direction and let css scroll snaping handle the specific alignment.
|
|
||||||
function scrollToNextPage() {
|
|
||||||
gallery_scroller.scrollBy(gallery_item_size, 0);
|
|
||||||
}
|
|
||||||
function scrollToPrevPage() {
|
|
||||||
gallery_scroller.scrollBy(-gallery_item_size, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
retrieveLatestContent: async function(receiverID=floGlobals.adminID, senderIDs=floGlobals.subAdmins) {
|
retrieveLatestContent: async function(receiverID=floGlobals.adminID, senderIDs=floGlobals.subAdmins) {
|
||||||
@ -7731,7 +7771,7 @@
|
|||||||
for (let j=0; j<number_of_sections; j++) {
|
for (let j=0; j<number_of_sections; j++) {
|
||||||
i = j+1;
|
i = j+1;
|
||||||
let content = '';
|
let content = '';
|
||||||
if(div=='reset_data_div') {
|
if(div=='article_creation_modal') {
|
||||||
//content = document.getElementById(`article_content${i}`).value;
|
//content = document.getElementById(`article_content${i}`).value;
|
||||||
new_article[article_name].data[`section${i}`] = {};
|
new_article[article_name].data[`section${i}`] = {};
|
||||||
new_article[article_name].data[`section${i}`]["iteration0"] = {
|
new_article[article_name].data[`section${i}`]["iteration0"] = {
|
||||||
@ -7760,16 +7800,14 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
resetArticleContent: function() {
|
resetArticleContent: function() {
|
||||||
showMessage(`Creating new article...`);
|
|
||||||
const article_name = document.getElementById('article_name').value;
|
const article_name = document.getElementById('article_name').value;
|
||||||
let number_of_sections = document.getElementById('section_nums').value;
|
let number_of_sections = document.getElementById('section_nums').value;
|
||||||
number_of_sections = Number(number_of_sections);
|
number_of_sections = Number(number_of_sections);
|
||||||
if(number_of_sections<1) {
|
if(number_of_sections<1) {
|
||||||
let err = 'Error: Number of sections must be more than 0.';
|
let err = 'Error: Number of sections must be more than 0.';
|
||||||
showMessage(err)
|
|
||||||
throw new Error(err)
|
throw new Error(err)
|
||||||
}
|
}
|
||||||
let new_article = this.createNewArticle(article_name, 'reset_data_div', number_of_sections);
|
let new_article = this.createNewArticle(article_name, 'article_creation_modal', number_of_sections);
|
||||||
floCloudAPI.resetObjectData(new_article, this.SUBJECT,
|
floCloudAPI.resetObjectData(new_article, this.SUBJECT,
|
||||||
{receiverID:floGlobals.adminID});
|
{receiverID:floGlobals.adminID});
|
||||||
|
|
||||||
@ -7810,7 +7848,7 @@
|
|||||||
|
|
||||||
article.data[section][`iteration${iterNum}`] = new_content_object;
|
article.data[section][`iteration${iterNum}`] = new_content_object;
|
||||||
|
|
||||||
showMessage(`Adding new iteration to article ${article_name}`);
|
//showMessage(`Adding new iteration to article ${article_name}`);
|
||||||
|
|
||||||
if(floGlobals.subAdmins.includes(myFloID)) {
|
if(floGlobals.subAdmins.includes(myFloID)) {
|
||||||
floCloudAPI.updateObjectData(floGlobals.appObjects[this.SUBJECT], full_data, this.SUBJECT, {receiverID: floGlobals.adminID});
|
floCloudAPI.updateObjectData(floGlobals.appObjects[this.SUBJECT], full_data, this.SUBJECT, {receiverID: floGlobals.adminID});
|
||||||
@ -7861,10 +7899,8 @@
|
|||||||
for(title of Object.keys(contents)) {
|
for(title of Object.keys(contents)) {
|
||||||
for(sections of Object.keys(contents[title].data)) {
|
for(sections of Object.keys(contents[title].data)) {
|
||||||
for(iters of Object.values(contents[title].data[sections])) {
|
for(iters of Object.values(contents[title].data[sections])) {
|
||||||
if(typeof iters.vectorClock==="string"
|
if(typeof iters.vectorClock==="string" && iters.vectorClock==article_vc) {
|
||||||
&& iters.vectorClock==article_vc) {
|
cloudArticleApp.addArticleContent(title, sections, iters.content,iters.content_creator, new_score, article_vc);
|
||||||
cloudArticleApp.addArticleContent(title, sections, iters.content,
|
|
||||||
iters.content_creator, new_score, article_vc);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -7877,9 +7913,9 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
const reset_data_btn = document.getElementById('reset_data_btn');
|
document.getElementById('create_article').onclick = function() {
|
||||||
reset_data_btn.onclick = function() {
|
|
||||||
cloudArticleApp.resetArticleContent();
|
cloudArticleApp.resetArticleContent();
|
||||||
|
document.getElementById('modal_container').classList.remove('show');
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user