added front end functionality, updated websockets with user is typing thing, tags and comments being popped up, layout design yet to be worked upon

canvas2/catalog/static/canvas2/css/base_style.css

@@ -2,6 +2,7 @@
   font-size: 10px;
   color: black;
 }
+
 ul {
   list-style-type: none;
 }
@@ -20,7 +21,7 @@ button {
 
 
 .anchor-button {
-  /*background-color: rgb(210,210,210);*/
+  background-color: rgb(210,210,210);
 
   text-decoration: none;
   cursor: default;
@@ -36,7 +37,7 @@ button {
 }
 
 .tag-button{
-  color: blue;
+  color: green;
 }
 
 .fade-enter-active, .fade-leave-active {
@@ -92,21 +93,13 @@ button.delete-comment{
 #idea-field {
 }
 
-.main-idea-buttons {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
+
 
 #comment-button{
   margin-left: 5%;
   float: left;
 }
 
-#delete-idea{
-  margin-right: 5%;
-  float: right;
-}
-
 #main-idea-div{
   margin-bottom: 10%;
 }
@@ -127,79 +120,111 @@ button.delete-comment{
 }
 
 #new-tag-button{
+}*/
+
+.gridcontainer {
+  display: grid;
+ grid-template-columns: repeat(5, auto);
+  grid-gap: 10px;
 }
 
+#imgt{
+  background-image: url('Capture.PNG');
+    background-repeat: no-repeat;
+}
 .flex-container {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-evenly;
-  align-content: center;
+  align-content: vertical;
+  padding-left: 20px;
 }
 
 .flex-item {
   height: 100%;
   min-height: 100%;
   margin-bottom: 10px;
-  text-align: center;
+  text-align: vertical;
   border-radius: 10px;
+  padding-left: 20px;
 }
 
 .flex-item h3{
   font-size: 18px;
 }
+.new-tag-button{
+  color: white;
+}
+.main-idea-buttons{
+  color:white;
+}
+.masonry{
+  column-count: 5;
+  column-gap: 5em;
+}
+.idea-flex-container-0{
+background: #a67de0;
+
 
 
-.idea-flex-container-0{
-  width: 13%;
-  background: rgb(200, 0, 255);
 }
 
 .idea-flex-container-1{
-  width: 13%;
-  background: rgb(200, 0, 255);
+
+  background: #85ade5;
 }
 
 .idea-flex-container-2{
-  width: 13%;
-  background: rgb(200, 0, 255);
-}
 
+  background: #8b99e0;
+}
 .idea-flex-container-3{
-  width: 13%;
-  background: rgb(100, 100, 200);
+
+  background: #15af97;
 }
 
 .idea-flex-container-4{
-  width: 13%;
-  background: rgb(200, 0, 255);
+
+  background: #a67de0;
 }
 
 .idea-flex-container-5{
-  width: 13%;
-  background: rgb(50, 200, 100);
+
+  background: #aed581;
 }
 
 .idea-flex-container-6{
-  width: 13%;
-  background: rgb(125, 125, 250);
-}
 
+  background: #85ade5;
+}
 .idea-flex-container-7{
-  width: 48.5%;
-  background: rgb(50, 200, 150);
+
+  background: #85ade5;
 }
 
 .idea-flex-container-8{
-  width: 48.5%;
-  background: rgb(100, 100, 240);
-}
 
-.idea-flex-container-9{
-  width: 98%;
-  background: rgb(100, 120, 240);
+  background: #aed581;
 }
 
+.idea-flex-container-9{
 
+  background:#a67de0;
+}
+.navbar-default
+{
+    background-color: #eceff1;
+}
+#saved_tags_row {
+  width: 100%;
+  margin-top: -1.14em;
+  margin-right: auto;
+  margin-bottom: 1.04em;
+  margin-left: auto;
+  background-color: #eceff1;
+  border-radius: 5px;
+  padding: 1em 1em 1em 1em;
+}
 /* FROM https://vuejs.org/v2/examples/modal.html */
 .modal-mask {
   position: fixed;
@@ -263,4 +288,4 @@ button.delete-comment{
 .modal-leave-active .modal-container {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
-}
+}

canvas2/catalog/static/canvas2/javascript/projectDetail.js

@@ -1,3 +1,4 @@
+
 var admins;
 var adminNames = [];
 var users;
@@ -35,7 +36,7 @@ $j(document).ready(function(data){
                                         COLLABORATOR CALLBACKS
 *************************************************************************************************************/
 
-function collabSuccessCallbackAJAX(data){    
+function collabSuccessCallbackAJAX(data){
     collabSocket.send(JSON.stringify({
         'data': data,
     }));
@@ -56,11 +57,11 @@ function deleteUserSuccessCallback(data){
 
     if (users[userListIndex].fields.username === loggedInUser.fields.username){
         alert("You've been removed from the project");
-        // go back to project view after 2s 
+        // go back to project view after 2s
         setInterval(
-            function(){ 
+            function(){
                 window.location.href="/catalog/project-list/"
-            }, 
+            },
             100);
     }
 
@@ -114,14 +115,14 @@ function newActiveUserCallback(data){
 
     user = data.user;
     activeUsers.push(user.fields.username);
-    
+
     var data = {
         'function': 'sendWholeList',
         'users': activeUsers,
     }
 
     collabSocket.send(JSON.stringify({
-        'data': data,   
+        'data': data,
     }));
 }
 
@@ -129,7 +130,7 @@ function wholeListCallback(data){
 
     if (data.users.length <= activeUsers.length)
         return;
-    else 
+    else
     {
         for (u in data.users){
             if (activeUsers.includes(data.users[u]))
@@ -159,7 +160,7 @@ function initSuccessCallback(data){
     admins = JSON.parse(data.admins);
     users = JSON.parse(data.users);
     loggedInUser = JSON.parse(data.loggedInUser);
-    
+
     initCollabSocket();
 
     for (a in admins)
@@ -182,7 +183,7 @@ function initSuccessCallback(data){
             isAdmin: isAdmin,
             active: activeUsers,
         },
-    }) 
+    })
 }
 
 function initFailureCallback(data){
@@ -192,11 +193,11 @@ function initFailureCallback(data){
 /*************************************************************************************************************
                                             COLLAB-LIST COMPONENT
 *************************************************************************************************************/
- 
+
 Vue.component('collabs', {
     props: [],
     delimiters: ['<%', '%>'],
-    
+
     template:'#collabs',
 
     data: function(){
@@ -229,7 +230,7 @@ Vue.component('collabs', {
 /*************************************************************************************************************
                                             COLLAB-POPUP COMPONENT
 *************************************************************************************************************/
- 
+
 Vue.component('collab-popup', {
     props: ['users', 'admins', 'logged-in-user', 'is-admin', 'admin-names', 'active'],
     delimiters: ['<%', '%>'],
@@ -259,65 +260,65 @@ Vue.component('collab-popup', {
         }
     },
 
-    template: ` 
-            <modal> 
-                <div slot="header"> 
-                    <h3>Collaborators</h3> 
-                </div> 
-                 
-                <div slot="body"> 
-                    <h3>Admins</h3> 
-                        <ul> 
-                        <li v-for="(admin, adminListIndex) in adminList" style="list-style-type:none;"> 
-                            <span> 
-                                <% admin.fields.username 
-                                + ( loggedInUser.fields.username === admin.fields.username ? " (you)" : activeList.includes(admin.fields.username) ? " (active)" : "" ) %> 
-                            </span> 
-
-                            <div  
-
-                                id="admin-buttons" 
-                                v-if="loggedInUser.fields.username !== admin.fields.username && adminNameList.includes(loggedInUser.fields.username)" 
-                            > 
-                                <button class="delete-admin" @click="deleteUser($event, admin, adminListIndex)">Delete</button> 
-                                <button class="demote-admin" @click="demoteAdmin($event, admin, adminListIndex)">Demote</button> 
-                            </div> 
-                        </li> 
-                    </ul> 
-                     
-                    <h3>Users</h3> 
-                    <ul> 
-                        <li v-for="(user, userListIndex) in this.users" style="list-style-type:none;"> 
-                            <span> 
-                                <% user.fields.username   
-                                + ( loggedInUser.fields.username === user.fields.username ? " (you)" : activeList.includes(user.fields.username) ? " (active)" : "" ) %> 
-
-                            </span> 
-                            <div  
-                                id="user-buttons" 
-                                v-if="loggedInUser.fields.username !== user.fields.username && adminNameList.includes(loggedInUser.fields.username)" 
-                            > 
-                                <button class="delete-user" @click="deleteUser($event, user, userListIndex)">Delete</button> 
-                                <button  
-                                    v-if="adminNameList.indexOf(user.fields.username) === -1" 
-                                    class="promote-user" @click="promoteUser($event, user)" 
-                                >Promote</button> 
-                            </div> 
-                        </li> 
-                    </ul> 
-                    <div v-if="adminNameList.includes(loggedInUser.fields.username)"> 
-                        <h3>Add User</h3> 
-                        <input v-model="name" placeholder="Enter admin username"> 
-                        <button @click="addUser($event, name, this.isAdmin)">Add User</button> 
-                    </div> 
-                </div> 
-                 
-                <div slot="footer"> 
-                    <button class="modal-default-button" @click="$emit( 'close' )"> 
-                    Close 
-                    </button> 
-                </div> 
-            </modal> 
+    template: `
+            <modal>
+                <div slot="header">
+                    <h3>Collaborators</h3>
+                </div>
+
+                <div slot="body">
+                    <h3>Admins</h3>
+                        <ul>
+                        <li v-for="(admin, adminListIndex) in adminList" style="list-style-type:none;">
+                            <span>
+                                <% admin.fields.username
+                                + ( loggedInUser.fields.username === admin.fields.username ? " (you)" : activeList.includes(admin.fields.username) ? " (active)" : "" ) %>
+                            </span>
+
+                            <div
+
+                                id="admin-buttons"
+                                v-if="loggedInUser.fields.username !== admin.fields.username && adminNameList.includes(loggedInUser.fields.username)"
+                            >
+                                <button class="delete-admin" @click="deleteUser($event, admin, adminListIndex)">Delete</button>
+                                <button class="demote-admin" @click="demoteAdmin($event, admin, adminListIndex)">Demote</button>
+                            </div>
+                        </li>
+                    </ul>
+
+                    <h3>Users</h3>
+                    <ul>
+                        <li v-for="(user, userListIndex) in this.users" style="list-style-type:none;">
+                            <span>
+                                <% user.fields.username
+                                + ( loggedInUser.fields.username === user.fields.username ? " (you)" : activeList.includes(user.fields.username) ? " (active)" : "" ) %>
+
+                            </span>
+                            <div
+                                id="user-buttons"
+                                v-if="loggedInUser.fields.username !== user.fields.username && adminNameList.includes(loggedInUser.fields.username)"
+                            >
+                                <button class="delete-user" @click="deleteUser($event, user, userListIndex)">Delete</button>
+                                <button
+                                    v-if="adminNameList.indexOf(user.fields.username) === -1"
+                                    class="promote-user" @click="promoteUser($event, user)"
+                                >Promote</button>
+                            </div>
+                        </li>
+                    </ul>
+                    <div v-if="adminNameList.includes(loggedInUser.fields.username)">
+                        <h3>Add User</h3>
+                        <input v-model="name" placeholder="Enter admin username">
+                        <button @click="addUser($event, name, this.isAdmin)">Add User</button>
+                    </div>
+                </div>
+
+                <div slot="footer">
+                    <button class="modal-default-button" @click="$emit( 'close' )">
+                    Close
+                    </button>
+                </div>
+            </modal>
         `,
 
     methods: {
@@ -349,7 +350,7 @@ Vue.component('collab-popup', {
                 'function': 'promoteUser',
                 'project_pk': projectPK,
                 'user_pk': user.pk,
-            }   
+            }
             performAjaxPOST(url, data, function placeholder(){}, promoteUserFailureCallback)
         },
 
@@ -359,7 +360,7 @@ Vue.component('collab-popup', {
                 'function': 'demoteUser',
                 'project_pk': projectPK,
                 'user_pk': admin.pk,
-                'admin_list_index': adminListIndex    
+                'admin_list_index': adminListIndex
             }
             performAjaxPOST(url, data, function placeholder(){}, demoteAdminFailureCallback)
         },
@@ -381,7 +382,7 @@ Vue.component('modal', {
 
 function initCollabSocket(){
     collabSocket = new WebSocket(
-        'ws://' + window.location.host + 
+        'ws://' + window.location.host +
         '/ws/project/' + projectPK + '/collab/'
     );
 
@@ -460,4 +461,4 @@ window.onbeforeunload = function(e){
         "data": data,
     }));
     collabSocket.close();
-};
+};

canvas2/catalog/templates/base_generic.html

@@ -7,6 +7,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="{% static 'canvas2/css/base_style.css' %}">
   <link rel="shortcut icon" href="/static/canvas2/images/canvas-favicon.ico">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
+<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
   {% block title %}<title>Ethics Canvas</title>{% endblock %}
 
 </head>
@@ -14,13 +17,15 @@
   {% block content %}<p></p>{% endblock %}
 
   <script src="{% static 'canvas2/javascript/jquery-3.3.1.js' %}"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
   <script src="{% static 'canvas2/javascript/vue.js' %}"></script>
   <script src="{% static 'canvas2/javascript/boilerplate.js' %}"></script>
   <script>
-    var $j = jQuery.noConflict();    
+    var $j = jQuery.noConflict();
 
   </script>
   {% block scripts %}
   {% endblock %}
 </body>
-</html>
+</html>

canvas2/catalog/templates/catalog/canvas_detail.html

@@ -2,22 +2,33 @@
 {% load static %}
 
 {% block title %}
-<title id="canvas-title"></title>
+
 {% if user.is_authenticated %}
-    <h3>Signed in as {{ user }}</h3>
+
+<nav class="navbar navbar-default">
+  <title id="canvas-title"></title>
+<h3 class="navbar-brand">Signed in as {{ user }}</h3>
 {% endif %}
+
 {% endblock %}
 
 {% block content %}
+</nav>
+
 
 {% if user.is_authenticated %}
 
-<!--==================================================== 
-                TAG COMPONENT 
+<!--====================================================
+                TAG COMPONENT
 =====================================================-->
 
 <div id = "tag-div">
-    <h3 v-if="auth">Canvas Tags:</h3>
+    <h3 v-if="auth"></h3>
+
+    <div id="saved_tags_row">
+
+    <label>Saved Tags for this Canvas...<label>
+
     <tag
         v-if="auth"
         id="tag"
@@ -26,9 +37,9 @@
         v-bind:key="index"
         v-bind:index="index"
     >
-        
-        <li 
-            class="tag-elem" 
+
+        <li
+            class="tag-elem"
             v-if="this.label != null"
         >
             <button v-on:click="tagInfo($event, index), show=true" class="tag-button">
@@ -36,35 +47,39 @@
             </button>
 
 
-            <tag-popup  
+            <tag-popup
                 id="tag-popup"
                 v-bind:label="this.label"
                 v-bind:canvases="canvasList[index]"
                 v-bind:tag="tagList[index]"
                 v-bind:index="index"
                 v-bind:ideas="ideaList[index]"
-                v-show="show" 
+                v-show="show"
                 @close="show=false"
                 @delete-tag="showTag=false" show="false"
             >
             </tag-popup>
-        </li> 
+        </li>
     </tag>
     <tag v-else>
         <p>Disabled for Trial User</p>
     </tag>
+  </div>
+
 </div>
+
 </br>
 
 {% endif %}
 
 
-<!--==================================================== 
-                IDEA COMPONENT 
+<!--====================================================
+                IDEA COMPONENT
 =====================================================-->
 
 <div id="idea-div" >
-    <idea-list id="ideas">
+
+
         <div class="flex-container">
                 <idea
                     v-for="(ideas, index) in ideaList"
@@ -80,13 +95,13 @@
                 >
                 </idea>
         </div>
-    </idea-list>
+
 
 </div>
 
 
-<!--==================================================== 
-                MODAL COMPONENT 
+<!--====================================================
+                MODAL COMPONENT
 =====================================================-->
 
 <!-- FROM https://vuejs.org/v2/examples/modal.html -->
@@ -129,8 +144,9 @@
 {% if user.is_authenticated %}
     <a class="anchor-button" href="{{ project.get_absolute_url }}">
         <button>
-            Return to Project
+            Return to Project<i class="material-icons">face</i>
         </button>
+        <p color="green"><i class="mate-icons">ok</i>Your canvas is saved automatically</p>
     </a>
 {% else %}
     <a class="anchor-button" href="{% url 'index' %}">
@@ -142,5 +158,16 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{% static 'canvas2/javascript/canvasDetail.js' %}"></script>
-{% endblock %}
+
+ <script src="{% static 'canvas2/javascript/canvasDetail.js' %}"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
+<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
+<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
+
+{% endblock %}