Styling guided project

src/main/webapp/css/user-page.css

@@ -16,32 +16,76 @@
 
 /* Set the size of the message input to be 100 pixels high
    and will fill the width of its parent element. */
-#message-input {
-  height: 100px;
-  width: 100%;
+
+
+body {
+  margin: 0;
+  background: linear-gradient(white, #c0e5ff) fixed;
+  font-family: sans-serif;
 }
 
-/* Give each message a rounded border. */
-.message-div {
-  border: thin solid black;
-  border-radius: 5px;
-  margin-top: 20px;
+nav {
+  background-color: white;
+  font-size: 18pt;
+  padding: 10px;
+}
+
+nav a {
+  color: black;
+  margin-right: 10px;
+}
+
+h2 {
+  margin: 0;
+}
+
+input[type=submit] {
+  background-color: #c0e5ff;
+  height: 50px;
+  width: 100px;
+  font-size: 14pt;
+}
+
+#content {
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+#message-input {
+  height: 100px;
+  width: 99%;
 }
 
-/* Add a bottom border to the message header. */
 .message-header {
   border-bottom: thin solid black;
-  padding: 5px;
+  background-image: linear-gradient(to right, white , #c0e5ff);
 }
 
-/* Give the message body a margin so the text
-   isn't too close to the border. */
 .message-body {
-  margin: 5px;
+  font: 12pt cursive;
+}
+
+.panel {
+  background-color: white;
+  margin-top: 20px;
+}
+
+.centered{
+  text-align: center;
+}
+
+.padded {
+  padding: 10px;
+}
+
+.rounded {
+  border: thin solid black;
+  border-radius: 5px;
+  overflow: hidden;
 }
 
-/* Use this to hide certain elements like forms if the
-   user is not logged in or viewing their own page. */
 .hidden {
   display: none;
 }

src/main/webapp/js/user-page-loader.js

@@ -32,15 +32,15 @@ function setPageTitle() {
 /**
  * Shows the message form if the user is logged in and viewing their own page.
  */
-function showMessageFormIfLoggedIn() {
+function showMessageFormIfViewingSelf() {
   fetch('/login-status')
       .then((response) => {
         return response.json();
       })
       .then((loginStatus) => {
-        if (loginStatus.isLoggedIn) {
+        if (loginStatus.isLoggedIn &&
+            loginStatus.username == parameterUsername) {
           const messageForm = document.getElementById('message-form');
-          messageForm.action = '/messages?recipient=' + parameterUsername;
           messageForm.classList.remove('hidden');
         }
       });
@@ -96,28 +96,38 @@ function fetchAboutMe(){
  * @param {Message} message
  * @return {Element}
  */
+
 function buildMessageDiv(message) {
   const headerDiv = document.createElement('div');
   headerDiv.classList.add('message-header');
+  headerDiv.classList.add('padded');
+
   headerDiv.appendChild(document.createTextNode(
-      message.user + ' - ' + new Date(message.timestamp)));
+      message.user + ' - ' + formatDate(message.timestamp)));
 
   const bodyDiv = document.createElement('div');
   bodyDiv.classList.add('message-body');
+  bodyDiv.classList.add('padded');
   bodyDiv.innerHTML = message.text;
 
   const messageDiv = document.createElement('div');
-  messageDiv.classList.add('message-div');
+  messageDiv.classList.add('rounded');
+  messageDiv.classList.add('panel');
   messageDiv.appendChild(headerDiv);
   messageDiv.appendChild(bodyDiv);
 
   return messageDiv;
 }
 
+
+
 /** Fetches data and populates the UI of the page. */
 function buildUI() {
   setPageTitle();
-  showMessageFormIfLoggedIn();
+  showMessageFormIfViewingSelf();
   fetchMessages();
   fetchAboutMe();
+  const config = {removePlugins: [ 'ImageUpload']};
+  ClassicEditor.create(document.getElementById('message-input'), config );
+
 }