Skip to content

S
SkuciSe
Commit 7eff757e by Milovan Samardzic
Options

IzmenaSlikeHover

parent 5504f58a
Showing with 76 additions and 11 deletions
SkuciSe/src/main/java/com/example/SkuciSe/controller/AppController.java
...@@ -8,6 +8,7 @@ import org.springframework.security.core.annotation.AuthenticationPrincipal; ...@@ -8,6 +8,7 @@ import org.springframework.security.core.annotation.AuthenticationPrincipal;
import org.springframework.security.core.userdetails.UserDetails; import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;
import org.springframework.ui.Model; import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*; import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartFile;
...@@ -73,5 +74,9 @@ public class AppController ...@@ -73,5 +74,9 @@ public class AppController
loggedUser.setKorisnik( korisnik); loggedUser.setKorisnik( korisnik);
return "redirect:/profile"; return "redirect:/profile";
} }
@PostMapping("/picture-update")
public String izmeniSliku(@AuthenticationPrincipal KorisnikDetails korisnik,@RequestParam("image") MultipartFile file) throws IOException {
kRepo.updateSlika(korisnik.getKorisnik(),file);
return "redirect:/profile";
}
} }
SkuciSe/src/main/resources/static/css/style.css
...@@ -307,4 +307,55 @@ img { ...@@ -307,4 +307,55 @@ img {
.fab.fa-facebook-f { .fab.fa-facebook-f {
color: #5999ec; color: #5999ec;
}
.profilepic {
position: relative;
border-radius: 50%;
overflow: hidden;
background-color: #111;
}
.profilepic:hover .profilepic__content {
opacity: 1;
}
.profilepic:hover .profilepic__image {
opacity: .5;
}
.profilepic__image {
object-fit: cover;
opacity: 1;
transition: opacity .2s ease-in-out;
}
.profilepic__content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
opacity: 0;
transition: opacity .2s ease-in-out;
}
.profilepic__icon {
color: white;
padding-bottom: 8px;
}
.fas {
font-size: 20px;
}
.profilepic__text {
text-transform: uppercase;
font-size: 12px;
width: 50%;
text-align: center;
} }
\ No newline at end of file
SkuciSe/src/main/resources/templates/profile.html
...@@ -17,6 +17,10 @@ ...@@ -17,6 +17,10 @@
<!-- Core theme CSS (includes Bootstrap)--> <!-- Core theme CSS (includes Bootstrap)-->
<link href="/css/style.css" rel="stylesheet" /> <link href="/css/style.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css" rel="stylesheet" />
</head> </head>
<body th:object="${loggedUser}"> <body th:object="${loggedUser}">
...@@ -60,16 +64,25 @@ ...@@ -60,16 +64,25 @@
<div class="row"> <div class="row">
<div class="col-12 bg-white p-0 px-3 py-3 mb-3"> <div class="col-12 bg-white p-0 px-3 py-3 mb-3">
<div class="d-flex flex-column align-items-center"> <div class="d-flex flex-column align-items-center">
<img class="photo" th:src="@{'data:image/png;charset=utf-8;base64,'+${loggedUser.getKorisnik().getSlika()}}" alt="slika korisnika"> <div class="profilepic">
<img class="photo profilepic__image" th:src="@{'data:image/png;charset=utf-8;base64,'+${loggedUser.getKorisnik().getSlika()}}" alt="slika korisnika">
<div class="profilepic__content">
<span class="profilepic__icon"><i class="fas fa-camera"></i></span>
<span class="profilepic__text"><a href="#" onclick="document.getElementById('inputSlika').click();" style="color:white">Izmeni sliku</a></span>
</div>
</div>
<p class="fw-bold h4 mt-3"><span th:text="${loggedUser.getKorisnik().getIme()}"></span></p> <p class="fw-bold h4 mt-3"><span th:text="${loggedUser.getKorisnik().getIme()}"></span></p>
<p class="text-muted" th:object="${profileRole}" th:text="${profileRole}"></p> <p class="text-muted" th:object="${profileRole}" th:text="${profileRole}"></p>
<div class="d-flex ">
<div class="btn btn-outline-primary message">Poruka</div>
</div>
</div> </div>
</div> </div>
<div class="d-flex align-items-end justify-content-end">
<button type="button" class="btn btn-secondary">Secondary</button>
</div>
</div> </div>
</div> </div>
<form id="formaSlika" method="POST" th:object="${loggedUser}" th:action="@{/picture-update}" style="display: none" enctype="multipart/form-data">
<input type="file" name="image" accept="image/png, image/jpeg" id="inputSlika" style="display: none" onchange="document.getElementById('formaSlika').submit();return false;"/>
</form>
<div class="col-md-7 ps-md-4"> <div class="col-md-7 ps-md-4">
<div class="row"> <div class="row">
<div class="col-12 bg-white px-3 mb-3 pb-3"> <div class="col-12 bg-white px-3 mb-3 pb-3">
...@@ -124,15 +137,10 @@ ...@@ -124,15 +137,10 @@
<div class="valid-feedback">Dobra sifra!</div> <div class="valid-feedback">Dobra sifra!</div>
<div class="invalid-feedback">Sifra ne sme biti prazna!</div> <div class="invalid-feedback">Sifra ne sme biti prazna!</div>
</div> </div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label">Potvrdjujem da su svi podaci tacni</label>
<div class="invalid-feedback">Molim vas da potvrdite da su svi podaci tacni!</div>
</div>
<div class="form-button mt-3"> <div class="form-button mt-3">
<button id="submit" type="submit" class="btn btn-primary">Registruj se</button> <button id="submit" type="submit" class="btn btn-primary">Izmeni podatke</button>
</div> </div>
</form> </form>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment