Improved mobile view greatly

Added experimental dark mode
Several critical bug fixes

src/main/java/com/nonononoki/alovoa/entity/User.java

@@ -51,6 +51,8 @@ public class User {
 	private String profilePicture;
 
 	private double totalDonations;
+
+	private int theme;
 
 	@ManyToMany
 	@JoinTable(name = "user2interest")

src/main/java/com/nonononoki/alovoa/html/DeleteAccountResource.java

@@ -1,19 +1,28 @@
 package com.nonononoki.alovoa.html;
 
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.servlet.ModelAndView;
 
+import com.nonononoki.alovoa.entity.User;
+import com.nonononoki.alovoa.service.AuthService;
+
 @Controller
 @RequestMapping("/")
 public class DeleteAccountResource {
 
+	@Autowired
+	private AuthService authService;
+
 	@GetMapping("/delete-account/{tokenString}")
 	public ModelAndView deleteAccount(@PathVariable String tokenString) throws Exception {
+		User user = authService.getCurrentUser();
 		ModelAndView mav = new ModelAndView("delete-account");
 		mav.addObject("tokenString", tokenString);
+		mav.addObject("user", user);
 		return mav;
 	}
 }

src/main/java/com/nonononoki/alovoa/html/PasswordResource.java

@@ -1,15 +1,22 @@
 package com.nonononoki.alovoa.html;
 
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.servlet.ModelAndView;
 
+import com.nonononoki.alovoa.entity.User;
+import com.nonononoki.alovoa.service.AuthService;
+
 @Controller
 @RequestMapping("/password")
 public class PasswordResource {
 
+	@Autowired
+	private AuthService authService;
+
 	@GetMapping("/reset")
 	public ModelAndView passwordReset() throws Exception {
 		ModelAndView mav = new ModelAndView("password-reset");
@@ -18,8 +25,10 @@ public ModelAndView passwordReset() throws Exception {
 
 	@GetMapping("/change/{tokenString}")
 	public ModelAndView passwordChange(@PathVariable String tokenString) throws Exception {
+		User currUser = authService.getCurrentUser();
 		ModelAndView mav = new ModelAndView("password-change");
 		mav.addObject("tokenString", tokenString);
+		mav.addObject("user", currUser);
 		return mav;
 	}
 }

src/main/java/com/nonononoki/alovoa/html/SearchResource.java

@@ -1,15 +1,24 @@
 package com.nonononoki.alovoa.html;
 
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.servlet.ModelAndView;
 
+import com.nonononoki.alovoa.entity.User;
+import com.nonononoki.alovoa.service.AuthService;
+
 @Controller
 public class SearchResource {
 
+	@Autowired
+	private AuthService authService;
+
 	@GetMapping("/search")
 	public ModelAndView search() {
+		User currUser = authService.getCurrentUser();
 		ModelAndView mav = new ModelAndView("search");
+		mav.addObject("user", currUser);
 		return mav;
 	}
 }

src/main/java/com/nonononoki/alovoa/html/UserProfileResource.java

@@ -40,6 +40,7 @@ public ModelAndView profileView(@PathVariable String idEncoded) throws NumberFor
 			}	
 			ModelAndView mav = new ModelAndView("userProfile");
 			mav.addObject("user", UserDto.userToUserDto(user, currUser, textEncryptor));
+			mav.addObject("currUser", currUser);
 			return mav;
 		} else {
 			throw new Exception("");

src/main/java/com/nonononoki/alovoa/rest/UserController.java

@@ -71,6 +71,11 @@ public void updatePreferedGenders(@PathVariable int genderId, @PathVariable Stri
 	public void updateInterest(@PathVariable int interest, @PathVariable String activated) {
 		userService.updateInterest(interest, Tools.binaryStringToBoolean(activated));
 	}
+
+	@PostMapping("/update/theme/{themeId}")
+	public void updateTheme(@PathVariable int themeId) {
+		userService.updateTheme(themeId);
+	}
 
 	@PostMapping(value = "/like/{idEnc}")
 	public void likeUser(@PathVariable String idEnc) throws Exception {

src/main/java/com/nonononoki/alovoa/service/UserService.java

@@ -255,6 +255,12 @@ public void updatePreferedGender(long genderId, boolean activated) {
 		user.setPreferedGenders(list);
 		userRepo.save(user);
 	}
+
+	public void updateTheme(int themeId) {
+		User user = authService.getCurrentUser();
+		user.setTheme(themeId);
+		userRepo.save(user);
+	}
 
 	private String adjustPicture(String imgB64) throws IOException {
 		// convert b64 to bufferedimage

src/main/resources/application.properties

@@ -50,7 +50,7 @@ app.profile.image.size=5000
 app.profile.image.length=800
 app.profile.description.size=255
 app.search.max=100
-app.search.max.distance=50
+app.search.max.distance=100
 app.message.size=255
 app.donate.users.max=100
 app.vapid.public=BC5Ur3Wq8-2djUYGD-VSXbMByIgxFFqtXoewSOYrthgxNUTOeueIHSB2b_81UT7p0By8MoFI2Bv9hrWeB8P3k2Q

src/main/resources/i18n/messages.properties

@@ -18,6 +18,7 @@ cancel=Cancel
 captcha=Captcha
 chats=Chats
 
+dark=Dark
 description=Description
 distance=Distance
 dob=Date of birth
@@ -40,10 +41,10 @@ kofi=Ko-fi
 
 last-active=Last active
 last-name=Last name
+light=Light
 login=Login
 logout=Logout
 
-
 new-password=New password
 no-users-found=No users found
 
@@ -59,14 +60,15 @@ sort=Sort
 submit=Submit
 
 tos=Terms and conditions
+theme=Theme
 
 view-profile=View Profile
 
 # TEMPLATE #
 
 profile.warning.incomplete=User profile is incomplete, you won't be seen by other users.
 profile.warning.no-profile-picture=No profile picture found!
-profile.warning.no-description=No	description found!
+profile.warning.no-description=No description found!
 profile.warning.no-dating-preference=No dating preference found! users.
 profile.warning.no-gender-preference=No gender preference found!
 profile.warning.no-location=No location found! It will be set automatically when you search for other users!

src/main/resources/static/css/alovoa-dark.css

@@ -0,0 +1,28 @@
+body, .card, .box, .textarea, .footer, .table, .select select, select option{
+	background-color: #2e3436;
+}
+
+body *, container *, .label, .textarea, .select select {
+	color: white;
+}
+
+.option {
+	color: #363636 !important;
+}
+
+.message {
+	background-color: #292929;
+}
+
+.content table td, .content table th {
+	border-color: rgba(219,219,219,.5);
+	color: white;
+}
+
+.footer {
+	background-color: #292929;
+}
+
+#logout:hover span {
+	color: #0a0a0a;
+}

src/main/resources/static/css/search.css

@@ -28,6 +28,7 @@
 	.card {
 		border: initial;
 		border-top: 1px solid #d3d3d3;
+		border-radius: 0px !important;
 	}
 	.card-content .content {
 		height: initial;
@@ -37,7 +38,43 @@
 		max-width: initial;
 		padding-bottom: 24px;
 	}
+
+	.section {
+    	padding: 1rem 1.5rem;
+	}
 }
+/*very small screens*/
+@media screen and (max-width: 500px) {
+
+	.section {
+    	padding: 0.5rem 0.5rem;
+	}
+	#distance-spacing {
+		padding-left: 4px !important;
+	}
+	#sort-search-spacing {
+		padding-left: 4px !important;
+	}
+
+	.image img {
+		width: 150px;
+		padding-bottom: 4px;
+	}
+
+	.media {
+		margin-top: 0.2em !important;
+		margin-bottom: 0.2em !important;
+	}
+
+	.searched {
+		display: none;
+	}
+
+	.card {
+		padding: 1em 0em;
+	}
+}
+
 /*https://github.com/jgthms/bulma/pull/1596#issuecomment-556416927*/
 .card.is-horizontal {
 	flex-direction: row;

src/main/resources/static/js/message.js

@@ -7,4 +7,14 @@ function viewMessageDetail(e, id) {
     }
 
 	window.open("/chats/" + id ,"_self");
+}
+
+$('.profile-pic').click(function(event){
+    event.stopPropagation();
+	let val = $(event.target).attr("value");
+	viewProfile(val);
+});
+
+function viewProfile(idEnc) {
+	window.open('/profile/view/' + idEnc, '_blank');
 }

src/main/resources/static/js/profile.js

@@ -51,7 +51,7 @@ $(function() {
 			if(timerDescription) {
 				clearTimeout(timerDescription);
 			}
-			if ($('#desctiprion').val) {
+			if ($('#description').val) {
 				timerDescription = setTimeout(function(){
 
 					console.log("uploading description")
@@ -171,6 +171,27 @@ $(function() {
 
 	});
 
+	$("#theme").change(function(e) {
+
+		let data = $("#theme").val();
+		if (data) {
+			$.ajax({
+				type : "POST",
+				url : "/user/update/theme/" + data,
+				headers : {
+					"X-CSRF-TOKEN" : $("input[name='_csrf']").val()
+				},
+				success : function(e) {
+					location.reload();
+				},
+				error : function(e) {
+					console.log(e);
+					alert(getGenericErrorText());
+				}
+			});
+		}
+	});
+
 	$("#userdata-submit").click(function(e) {
 
 		let password = $("#userdata-password").val();

src/main/resources/static/js/search.js

@@ -12,6 +12,7 @@ $(function() {
 
 function search() {
 	console.log("search");
+
 	if (navigator.geolocation) {
 		navigator.geolocation.getCurrentPosition(function(position) {
 			console.log(position);
@@ -20,7 +21,7 @@ function search() {
 			let url = "/search/users/" + position.coords.latitude + "/"
 					+ position.coords.longitude + "/" + distance + "/" + sort;
 			$("#main-container").load(url);
-
+			$("#filter-div").addClass("searched");
 		});
 	} else {
 		alert(getText("search.js.error.no-geolocation"));

src/main/resources/static/js/tools/getText.js

@@ -29,5 +29,5 @@ function getGenericSubmitSuccessText() {
 }
 
 function getGenericMaxCharsErrorText() {
-	return getText("success.submit.generic");
+	return getText("error.max-chars.generic");
 }

src/main/resources/templates/delete-account.html

@@ -11,6 +11,7 @@
 <link rel="stylesheet" href="/css/lib/bulma.min.css" />
 <link rel="stylesheet" href="/css/lib/bulma-switch.min.css" />
 <link rel="stylesheet" href="/css/alovoa.css" />
+<link th:if="${user.theme == 1}" rel="stylesheet" href="/css/alovoa-dark.css" />
 <title th:text="#{delete-account.title}"></title>
 </head>
 <body>

src/main/resources/templates/donate.html

@@ -11,6 +11,7 @@
 <link rel="stylesheet" href="/css/lib/bulma.min.css" />
 <link rel="stylesheet" href="/css/alovoa.css" />
 <link rel="stylesheet" href="/css/search.css" />
+<link th:if="${user.theme == 1}" rel="stylesheet" href="/css/alovoa-dark.css" />
 <title th:text="#{donate.title}"></title>
 </head>
 <body>

src/main/resources/templates/fragments.html

@@ -38,7 +38,7 @@
 				<div class="navbar-end">
 					<form th:action="@{/logout}" method="post">
 						<span class="navbar-item">
-							<button class="button is-white is-outlined" href="/logout">
+							<button class="button is-white is-outlined" href="/logout" id="logout">
 								<span th:text="#{logout}"></span>
 							</button>
 						</span>
@@ -104,7 +104,7 @@
 	<div th:fragment="search-users">
 
 		<div th:if="${#lists.isEmpty(users)}"
-			style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+			style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-top: 12px;">
 			<span th:text="#{no-users-found}"></span>
 		</div>
 

src/main/resources/templates/messageDetail.html

@@ -12,6 +12,7 @@
 <link rel="stylesheet" href="/css/lib/bulma-slider.min.css" />
 <link rel="stylesheet" href="/css/alovoa.css" />
 <link rel="stylesheet" href="/css/messageDetail.css" />
+<link th:if="${user.theme == 1}" rel="stylesheet" href="/css/alovoa-dark.css" />
 <title th:text="#{message.title}"></title>
 </head>
 <body>

src/main/resources/templates/messages.html

@@ -12,6 +12,7 @@
 <link rel="stylesheet" href="/css/lib/bulma-slider.min.css" />
 <link rel="stylesheet" href="/css/alovoa.css" />
 <link rel="stylesheet" href="/css/notification.css" />
+<link th:if="${user.theme == 1}" rel="stylesheet" href="/css/alovoa-dark.css" />
 <title th:text="#{message.title}"></title>
 </head>
 <body>
@@ -25,8 +26,8 @@
 						<div class="card-image">
 							<figure class="image"
 								style="max-width: 200px; max-height: 200px;">
-								<img th:src="${convo.userProfilePicture}"
-									th:onclick="viewProfile([[${convo.userIdEncoded}]])">
+								<img th:src="${convo.userProfilePicture}" class="profile-pic"
+									th:value="${convo.userIdEncoded}">
 							</figure>
 						</div>
 						<div class="card-content">