Merge pull request #52 from ctco-dev/Start_page_design&CSS

#34 Start page design&css
ctco-dev · Sep 4, 2018 · c60d27b · c60d27b
2 parents 89a048e + 90afc5b
commit c60d27b
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 44 deletions.
diff --git a/src/main/webapp/app/jsp/add-event.jsp b/src/main/webapp/app/jsp/add-event.jsp
@@ -5,7 +5,7 @@
     <title>Add/Edit Event</title>
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
-    <link rel="stylesheet" type="text/css" href="pagesStyle.css">
+    <link rel="stylesheet" type="text/css" href="../styles/pagesStyle.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.css" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
@@ -27,7 +27,7 @@
     <p><input type="text" id="timepicker"></p>
 </form>
 
-<div id="buttons">
+<div id="buttons" style="margin: 0px 0px 5px 15px">
     <button type="submit" id="save" onclick="saveDataToDB()">Save</button>
     <button type="submit" id="update" onclick="updateData()">Update</button>
     <button onclick="goToTheMainPage()">Cancel</button>

diff --git a/src/main/webapp/app/jsp/event.jsp b/src/main/webapp/app/jsp/event.jsp
@@ -4,25 +4,32 @@
 <head>
     <script src="https://www.w3schools.com/lib/w3.js"></script>
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
-    <title id="title">{{eventName}}</title>
+    <link rel="stylesheet" type="text/css" href="../styles/pagesStyle.css">
 </head>
-<link rel="stylesheet" type="text/css" href="pagesStyle.css">
+
+
 
 <body onload="loadEvent()">
-<div id="menu">
+<%--<header id="header"><h1>{{eventName}}</h1></header>--%>
+<header id="title"><h1>{{eventName}}</h1></header>
+<div id="menu"; style="margin: 0px 0px 20px 15px">
     <button type="button" onclick="main()">Back To Main</button>
     <button type="button" onclick="myEvents()">My Events</button>
     <button type="button" onclick="addEvent()">Add Event</button>
 </div>
 <div id="event-field" class="w3-hide">
-    <h1>{{eventName}}</h1>
+    <%--<h1>{{eventName}}</h1>--%>
     <div>
+        <p><b>Event name:</b></p>
         <h4>{{eventDate}} &nbsp</h4>
+        <p><b>Event start time:</b></p>
         <h4>{{eventTime}}</h4>
     </div>
-    <p>{{eventDescription}}</p>
-    <p>{{eventAgenda}}</p>
-</div>
+        <p><b>Description:</b></p>
+        <p>{{eventDescription}}</p>
+        <p><b>Agenda:</b></p>
+        <p>{{eventAgenda}}</p>
+    </div>
 
 <script>
     function loadEvent() {

diff --git a/src/main/webapp/app/jsp/my-events.jsp b/src/main/webapp/app/jsp/my-events.jsp
@@ -5,22 +5,28 @@
     <title>My Events</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="stylesheet" type="text/css" href="../styles/pagesStyle.css">
     <script src="http://www.w3schools.com/lib/w3data.js"></script>
 </head>
 <link rel="stylesheet" type="text/css" href="pagesStyle.css">
 
 <body onload="getEventsFromDB()">
 <header id="header"><h1>My Events</h1></header>
-<p>
+<div>
+<div style="margin: 0px 0px 20px 15px">
     <button onclick="goToTheMainPage()">Go to the main page</button>
-</p>
+</div>
+
 <ul class="w3-ul" id="myevent-list">
     <li w3-repeat="eventList" type="text" id="eventElement" class="w3-hide">
         <a href="<c:url value='/app/jsp/event.jsp'/>?id={{eventID}}">{{eventName}}</a>
+        <div style="border-style: none none solid none; border-color: white"; padding-top: 5px ></div>
+
         <p>
             <button onclick="goToEditPage('{{eventID}}')" id="goToEdit">Edit</button>
             <button onclick="deleteEvent('{{eventID}}'),window.location.reload()" id="delete">Delete</button>
             <button onclick="goToCreatePoolPage()" id="createPoolButton">Create Pool</button>
+
         </p>
     </li>
 </ul>

diff --git a/src/main/webapp/app/jsp/start.jsp b/src/main/webapp/app/jsp/start.jsp
@@ -5,11 +5,11 @@
     <title>Event Organizer</title>
     <script src="http://www.w3schools.com/lib/w3data.js"></script>
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
-    <link rel="stylesheet" type="text/css" href="pagesStyle.css">
+    <link rel="stylesheet" type="text/css" href="../styles/pagesStyle.css">
 </head>
 <body onload="checkTopics()">
 <header id="header"><h1>Our Events</h1></header>
-<div>
+<div style="margin: 0px 0px 20px 15px">
     <button type="button" onclick="logout()">Log out</button>
     <button type="button" onclick="addEvent()">Add Event</button>
     <button type="button" onclick="myEvents()">My Events</button>
@@ -18,7 +18,8 @@
 <ul id="topic-list" class="w3-hide">
     <li w3-repeat="topicList">
         <div style="float: left"><a href="<c:url value='/app/jsp/event.jsp'/>?id={{id}}">{{topicName}}</a> </div>
-        <div style="float: right" >{{topicAuthor}}</div>
+        <div style="float: right; padding-right: 15px">{{topicAuthor}}</div>
+        <div style="border-style: none none solid none; border-color: white"></div>
     </li>
 </ul>
 <script>

diff --git a/src/main/webapp/app/styles/pagesStyle.css b/src/main/webapp/app/styles/pagesStyle.css
@@ -1,7 +1,6 @@
 textarea {
-
-    height: 50px;
-    width: 400px;
+    height: 60px;
+    width: 800px;
 }
 
 #buttons {
@@ -12,10 +11,12 @@ textarea {
 
 }
 
-#add, #edit {
-    border: dotted;
+#add, #edit, #header, #title {
     text: bold;
     text-align: center;
+    color: white;
+    background-color: rgb(21, 190, 155);
+    margin-bottom: 30px;
 }
 
 ul {
@@ -31,24 +32,14 @@ a {
     underline-mode: none;
 }
 
-#header {
-    border: dotted;
-    text: bold;
-    text-align: center;
-}
+
 
 #goToEdit {
-    margin-left: 600px;
+    margin-right: 15px;
 }
 
 #createPoolButton {
-    margin-left: 10px;
-}
-
-#header {
-    border: dotted;
-    text: bold;
-    text-align: center;
+        margin-right: 15px;
 }
 
 a {
@@ -63,3 +54,13 @@ a {
 #eventName-field {
     align-content: center;
 }
+
+#event-field {
+    margin: 0px 0px 5px 15px;
+}
+
+#topic-list, #myevent-list {
+    background-color: #d3fbef;
+    border: none;
+    margin: 0px 30px 5px 0px;
+}
diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
@@ -2,7 +2,7 @@
 <%@ page contentType="text/html;charset=UTF-8"%>
 <!DOCTYPE html>
 <html>
-<title>W3.CSS Template</title>
+<title>C.T.co Event Organizer</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
@@ -11,7 +11,7 @@
     body,h1 {font-family: "Raleway", sans-serif}
     body, html {height: 100%}
     .bgimg {
-        background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
+        background-image: url('http://img.src.ca/2016/06/14/635x357/160614_ol4ap_concerts_sn635.jpg');
         min-height: 100%;
         background-position: center;
         background-size: cover;
@@ -20,16 +20,13 @@
 <body>
 
 <div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
-    <div class="w3-display-topleft w3-padding-large w3-xlarge">
-        Logo
-    </div>
-    <div class="w3-display-middle">
-        <h1 class="w3-jumbo w3-animate-top">COMING SOON</h1>
+       <div class="w3-display-middle">
+        <h1 style="text-align:center" class="w3-jumbo w3-animate-top">C.T.co</h1>
+        <h1 class="w3-jumbo w3-animate-top">EVENT ORGANIZER</h1>
         <hr class="w3-border-grey" style="margin:auto;width:40%">
-        <p class="w3-large w3-center">35 days left</p>
-    </div>
-    <div class="w3-display-bottomleft w3-padding-large">
-        <a href="<c:url value='/login.jsp'/>">Log in</a>
+        <p class="w3-large w3-center">join with us</p>
+           <h4 class="w3-large w3-center">
+               <a href="<c:url value='/login.jsp'/>">Log in or Registration</a> </h4>
     </div>
 </div>
 

diff --git a/src/main/webapp/login.jsp b/src/main/webapp/login.jsp
@@ -2,7 +2,7 @@
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <!DOCTYPE html>
 <html>
-<title>W3.CSS</title>
+<title>C.T.co Event Organizer</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <script src="http://www.w3schools.com/lib/w3data.js"></script>