mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
my-profile pretty much done'
This commit is contained in:
kaipher7
@@ -4,8 +4,8 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
|
||||
<meta name="_csrf" th:content="${_csrf.token}"/>
|
||||
<title>Public Profile - Thyme Crunch</title>
|
||||
<!--<link rel="stylesheet" th:href="@{css/public-profile.css}"> -->
|
||||
<title>My Profile - Thyme Crunch</title>
|
||||
<link rel="stylesheet" th:href="@{css/my-profile.css}">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
@@ -16,67 +16,80 @@
|
||||
<img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
|
||||
</header>
|
||||
|
||||
<div class="form-wrap">
|
||||
<div class="form-split">
|
||||
<div class="body">
|
||||
|
||||
<h1 th:text="${profile.displayName != null and !#strings.isEmpty(profile.displayName) ? profile.displayName : profile.username}">
|
||||
Display Name
|
||||
</h1>
|
||||
|
||||
<nav>
|
||||
<a th:href="@{/}">Home</a> |
|
||||
<a th:href="@{/explore}">Explore</a> |
|
||||
<a th:href="@{/my-profile}">Profile</a>
|
||||
<!-- Left Navigation -->
|
||||
<div class="body-left">
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a th:href="@{/explore}">Explore</a></li>
|
||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||
<li>
|
||||
<form th:action="@{/logout}" method="post">
|
||||
<input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<br>
|
||||
|
||||
<p>
|
||||
<strong>Username:</strong>
|
||||
<span th:text="${profile.username}">username</span>
|
||||
</p>
|
||||
|
||||
<h2>Bio</h2>
|
||||
<p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">
|
||||
Bio text
|
||||
</p>
|
||||
<p th:unless="${profile.bio != null and !#strings.isEmpty(profile.bio)}">
|
||||
This user has not added a bio yet.
|
||||
</p>
|
||||
|
||||
<h2>Recipes</h2>
|
||||
|
||||
<div th:if="${#lists.isEmpty(profile.recipes)}">
|
||||
<p>This user has not created any recipes yet.</p>
|
||||
</div>
|
||||
|
||||
<div th:unless="${#lists.isEmpty(profile.recipes)}">
|
||||
<div th:each="recipe : ${profile.recipes}" class="recipe-block" style="margin-bottom: 20px;">
|
||||
<h3>
|
||||
<a th:href="@{/recipes/{id}(id=${recipe.id})}" th:text="${recipe.title}">Recipe Title</a>
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
<strong>Author:</strong>
|
||||
<a th:href="@{/users/{id}(id=${recipe.userDto.id})}"
|
||||
th:text="${recipe.userDto.displayName != null and !#strings.isEmpty(recipe.userDto.displayName) ? recipe.userDto.displayName : recipe.userDto.username}">
|
||||
Author Name
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p th:text="${recipe.description}">Recipe description</p>
|
||||
|
||||
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
|
||||
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a th:href="@{/create}" target="_blank" class="create_icon">
|
||||
<img th:src="@{images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.)">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Main Content — recipes -->
|
||||
<main class="main-content">
|
||||
|
||||
<h2>My Recipes</h2>
|
||||
|
||||
<p th:if="${#lists.isEmpty(profile.recipes)}">You have not created any recipes yet.</p>
|
||||
|
||||
<div class="recipe-card" th:unless="${#lists.isEmpty(profile.recipes)}">
|
||||
<th:block th:each="recipe : ${profile.recipes}">
|
||||
<div class="card-wrapper">
|
||||
<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card">
|
||||
<div class="card-text">
|
||||
<h2 th:text="${recipe.title}">Recipe Title</h2>
|
||||
<p th:text="${recipe.description}">Description</p>
|
||||
</div>
|
||||
<div class="card-right">
|
||||
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
|
||||
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
|
||||
</div>
|
||||
<p th:text="${recipe.cost}">Cost</p>
|
||||
</div>
|
||||
</a>
|
||||
<a th:href="@{/recipes/{id}/edit(id=${recipe.id})}" class="edit-link">Edit</a>
|
||||
</div>
|
||||
</th:block>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Right Sidebar — profile info & edit -->
|
||||
<div class="body-right">
|
||||
<div class="sidebar-right">
|
||||
|
||||
<p><strong th:text="${profile.effectiveDisplayName}">Display Name</strong></p>
|
||||
<p th:text="'@' + ${profile.username}">@username</p>
|
||||
<p th:if="${profile.bio != null}" th:text="${profile.bio}">Bio goes here.</p>
|
||||
<a th:href="@{/users/{id}(id=${profile.id})}" class="view-profile-btn">View public profile</a>
|
||||
|
||||
<form th:action="@{/my-profile/update}" method="post" th:object="${updateProfileDto}" class="profile-form">
|
||||
<div class="rows">
|
||||
<label for="displayName">Display Name</label>
|
||||
<input type="text" id="displayName" th:field="*{displayName}" maxlength="100">
|
||||
</div>
|
||||
<div class="rows">
|
||||
<label for="bio">Bio</label>
|
||||
<textarea id="bio" th:field="*{bio}" rows="6" maxlength="1000"></textarea>
|
||||
</div>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user