Skip to content

Commit d72bff7

Browse files
jakewinsjakewins
committed
UI for public and private profile pages, updates to movie page.
1 parent d10529a commit d72bff7

File tree

16 files changed

+482
-81
lines changed

16 files changed

+482
-81
lines changed

‎src/main/webapp/WEB-INF/views/decorators/frontpage.jsp‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
<div id="content">
1717
<div id="big-search-wrap">
1818
<form action="/movies" method="get">
19-
<input type="text" class="big-search" name="q" />
19+
<input type="text" class="big-search" name="q" value="Find movie" onfocus="this.value='';" onblur="this.value = (this.value=='') ? 'Find movie' : this.value;" />
2020
<input type="submit" class="big-search-submit" value="Search"/>
2121
</form>
2222
</div>
2323
<decorator:body />
2424
</div>
2525
<%@ include file="/WEB-INF/views/includes/footer.jsp" %>
2626
</body>
27-
</html>
27+
</html>

‎src/main/webapp/WEB-INF/views/includes/navigation.jsp‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
<div class="navigation">
55
<c:choose>
66
<c:when test="${empty user}">
7-
<a href="/auth/login">Login</a>
7+
<a href="<c:url value="/auth/login" />">Login</a>
88
</c:when>
99
<c:otherwise>
10-
<a href="/user/${user.login}">${user.name}</a>
11-
<a href="/auth/logout">Logout</a>
10+
<a href="<c:url value="/user/${user.login}" />">${user.name}</a>
11+
<a href="<c:url value="/auth/logout" />">Logout</a>
1212
</c:otherwise>
1313
</c:choose>
14-
</div>
14+
</div>

‎src/main/webapp/WEB-INF/views/includes/search.jsp‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="search">
22
<form action="/movies" method="get">
3-
<input type="text" name="q" value="Search Movie" onfocus="this.value='';" onblur="this.value = (this.value=='') ? 'Search Movie' : this.value;"/>
3+
<input type="text" name="q" value="Find movie" onfocus="this.value='';" onblur="this.value = (this.value=='') ? 'Find movie' : this.value;"/>
44
</form>
55
</div>

‎src/main/webapp/WEB-INF/views/movies/show.jsp‎

Lines changed: 133 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,142 @@
44

55
<c:choose>
66
<c:when test="${not empty movie}">
7-
<h2>${movie.title} (${movie.year}) has ${movie.stars} Stars</h2>
8-
9-
<c:if test="${not empty user}">
10-
<div>
11-
<form method="post" action="/movies/${movie.id}">
12-
<div>
13-
<input type="image" src="/images/star.png" name="rated" value="1"/>
14-
<input type="image" src="/images/star.png" name="rated" value="2"/>
15-
<input type="image" src="/images/star.png" name="rated" value="3"/>
16-
<input type="image" src="/images/star.png" name="rated" value="4"/>
17-
<input type="image" src="/images/star.png" name="rated" value="5"/>
18-
</div>
19-
<textarea rows="3" cols="60" name="comment"></textarea>
20-
</form>
7+
<div class="span-5">
8+
<div class="profile-header">
9+
<div class="profile-image"><img src="<c:url value="/images/movie-placeholder.png" />" /></div>
10+
<div class="profile-header-details">
11+
<h2>${movie.title} (${movie.year})</h2>
12+
<ul class="rating">
13+
<!-- Add a loop here -->
14+
<li class="active"></li>
15+
<li class="active"></li>
16+
<li class="active"></li>
17+
<li class="disabled"></li>
18+
<li class="disabled"></li>
19+
</ul>
20+
</div>
21+
<div class="break"></div>
2122
</div>
22-
</c:if>
23-
<c:if test="${not empty movie.roles}">
24-
<ul>
25-
<c:forEach items="${movie.roles}" var="role">
23+
24+
<div class="span-half">
25+
<h3>Movie facts</h3>
26+
27+
<table>
28+
<tr>
29+
<th>Status</th>
30+
<td>Released</td>
31+
</tr>
32+
<tr>
33+
<th>Runtime</th>
34+
<td>2h 12m</td>
35+
</tr>
36+
<tr>
37+
<th>Etc</th>
38+
<td>etc</td>
39+
</tr>
40+
</table>
41+
</div>
42+
43+
<div class="span-half last">
44+
<h3>Trailers</h3>
45+
46+
<ul>
47+
<li><a href="#">Some trailer</a></li>
48+
</ul>
49+
</div>
50+
51+
<div class="span-half">
52+
<h3>Release info</h3>
53+
54+
<ul>
2655
<li>
27-
<a href="/actors/${role.actor.id}"><c:out value="${role.actor.name}" /> as <c:out value="${role.name}" /></a><br/>
56+
<h4>USA</h4>
57+
<table>
58+
<tr>
59+
<th>Released</th>
60+
<td>1994-06-23</td>
61+
</tr>
62+
<tr>
63+
<th>Runtime</th>
64+
<td>2h 12m</td>
65+
</tr>
66+
<tr>
67+
<th>Etc</th>
68+
<td>etc</td>
69+
</tr>
70+
</table>
2871
</li>
29-
</c:forEach>
30-
</ul>
31-
</c:if>
32-
<c:if test="${not empty movie.ratings}">
33-
<dl>
34-
<c:forEach items="${movie.ratings}" var="rating">
35-
<dt>${rating.stars} Stars by ${rating.user.name}</dt>
36-
<dd>Comment: ${rating.comment}</dd>
37-
</c:forEach>
38-
</dl>
39-
</c:if>
72+
</ul>
73+
</div>
74+
75+
</div>
76+
<div class="span-7 last">
77+
<div class="movie-content-outer">
78+
<div class="movie-content">
79+
<h2>Overview</h2>
80+
<p>Lorem ipsum dolor sit amet.</p>
81+
82+
<h2>Cast</h2>
83+
<c:if test="${not empty movie.roles}">
84+
<ul class="actors-list">
85+
<c:forEach items="${movie.roles}" var="role">
86+
<li>
87+
<a class="actor-image" href="<c:url value="/actors/${role.actor.id}" />"><img src="<c:url value="/images/profile-placeholder-small.png" />" /></a>
88+
<a href="<c:url value="/actors/${role.actor.id}" />"><c:out value="${role.actor.name}" /> as <c:out value="${role.name}" /></a>
89+
</li>
90+
</c:forEach>
91+
</ul>
92+
<div class="break"></div>
93+
</c:if>
94+
95+
<h2>Reviews</h2>
96+
<c:if test="${not empty movie.ratings}">
97+
<ul>
98+
<c:forEach items="${movie.ratings}" var="rating">
99+
<li>
100+
<h4>${rating.stars} stars by <a href="<c:url value="/user/${rating.user.login}" />">${rating.user.name}</a></h4>
101+
<p>${rating.comment}</p>
102+
</li>
103+
</c:forEach>
104+
</ul>
105+
</c:if>
106+
107+
<c:if test="${not empty user}">
108+
<form method="post" action="<c:url value="/movies/${movie.id}" />">
109+
<ul class="rating-input">
110+
<lh>My rating</lh>
111+
<li>
112+
<input id="rating-one" type="radio" name="rated" value="1" />
113+
<label class="button-label" for="rating-one">1</label>
114+
</li>
115+
<li>
116+
<input id="rating-two" type="radio" name="rated" value="2" />
117+
<label class="button-label" for="rating-two">2</label>
118+
</li>
119+
<li>
120+
<input id="rating-three" type="radio" name="rated" value="3" selected="selected" />
121+
<label class="button-label" for="rating-three">3</label>
122+
</li>
123+
<li>
124+
<input id="rating-four" type="radio" name="rated" value="4" />
125+
<label class="button-label" for="rating-four">4</label>
126+
</li>
127+
<li>
128+
<input id="rating-five" type="radio" name="rated" value="5" />
129+
<label class="button-label" for="rating-five">5</label>
130+
</li>
131+
</ul>
132+
<textarea rows="3" cols="60" name="comment"></textarea>
133+
<div class="break"></div>
134+
<input type="submit" value="Submit review" />
135+
</form>
136+
</c:if>
137+
</div>
138+
</div>
139+
</div>
40140
</c:when>
41141
<c:otherwise>
42-
No Movie with id ${id} found!
142+
<h2>No movie found</h2>
143+
<p>The movie you were looking for could not be found.</p>
43144
</c:otherwise>
44-
</c:choose>
145+
</c:choose>

‎src/main/webapp/WEB-INF/views/user/index.jsp‎

Lines changed: 68 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,76 @@
22
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
33
<%--@elvariable id="user" type="org.neo4j.movies.domain.User"--%>
44
<html>
5-
<head><title>Profile</title></head>
6-
<body>
7-
<h3>Hi, ${user.name},</h3>
5+
<head>
6+
<title>Profile</title>
7+
</head>
8+
<body>
89

9-
<div>You can update your preferences and details here.<br/>
10-
Have fun.
11-
12-
<c:choose>
10+
<div class="span-5">
11+
<div class="profile-header">
12+
<div class="profile-image"><img src="<c:url value="/images/profile-placeholder.png" />" /></div>
13+
<div class="profile-header-details">
14+
<h2>Hi ${user.name}!</h2>
15+
<p>User description goes here.</p>
16+
</div>
17+
<div class="break"></div>
18+
</div>
19+
20+
<c:choose>
1321
<c:when test="${not empty user.friends}">
14-
<h4>Your friends,</h4>
15-
<ul>
16-
<c:forEach items="${user.friends}" var="friend">
17-
<a href="/user/${friend.login}"><c:out value="${friend.name}"/></a><br/>
18-
</c:forEach>
19-
</ul>
22+
<h2>Your friends</h2>
23+
<ul class="friends-list">
24+
<c:forEach items="${user.friends}" var="friend">
25+
<li>
26+
<a class="friend-image" href="<c:url value="/user/${friend.login}" />"><img src="<c:url value="/images/profile-placeholder-small.png" />" /></a>
27+
<div class="friend-info">
28+
<h3><a href="<c:url value="/user/${friend.login}" />"><c:out value="${friend.name}"/></a></h3>
29+
<p>Description of friend</p>
30+
</div>
31+
<div class="break"></div>
32+
</li>
33+
</c:forEach>
34+
</ul>
2035
</c:when>
2136
<c:otherwise>
22-
<h3>Add some Friends</h3>
23-
<div>Here are some recommendationss:</div>
37+
<h2>You don't have any friends yet</h2>
2438
</c:otherwise>
25-
</c:choose>
26-
</div>
27-
</body>
28-
</html>
39+
</c:choose>
40+
</div>
41+
<div class="span-7 last">
42+
<div class="profile-feed">
43+
<div class="span-third">
44+
<h2>Your rated movies</h2>
45+
</div>
46+
<div class="span-third last">
47+
<h2>12</h2>
48+
</div>
49+
<ul class="rated-movies-list span-all last">
50+
<li>
51+
<h3><a href="<c:url value="/movies/1" />">Forest gump</a></h3>
52+
<ul class="rating">
53+
<!-- Add a loop here -->
54+
<li class="active"></li>
55+
<li class="active"></li>
56+
<li class="active"></li>
57+
<li class="disabled"></li>
58+
<li class="disabled"></li>
59+
</ul>
60+
</li>
61+
<li>
62+
<h3><a href="<c:url value="/movies/1" />">Forest gump</a></h3>
63+
<ul class="rating">
64+
<!-- Add a loop here -->
65+
<li class="active"></li>
66+
<li class="active"></li>
67+
<li class="active"></li>
68+
<li class="disabled"></li>
69+
<li class="disabled"></li>
70+
</ul>
71+
</li>
72+
</ul>
73+
<div class="break"></div>
74+
</div>
75+
</div>
76+
</body>
77+
</html>

0 commit comments

Comments
 (0)