diff --git a/MyWebsite/Views/Gallery/Details.cshtml b/MyWebsite/Views/Gallery/Details.cshtml index ed9e509..518a5cc 100644 --- a/MyWebsite/Views/Gallery/Details.cshtml +++ b/MyWebsite/Views/Gallery/Details.cshtml @@ -1,6 +1,7 @@  @{ ViewData["Title"] = (ViewData["CurrentImage"] as Image).Title; + Image image = ViewData["CurrentImage"] as Image; }
@@ -8,12 +9,17 @@
- +
-

@((ViewData["CurrentImage"] as Image).Title)

- Creation date: @((ViewData["CurrentImage"] as Image).CreationDate.ToShortDateString()) -

@((ViewData["CurrentImage"] as Image).Description)

+

@image.Title

+ Creation date: @image.CreationDate.ToShortDateString() +

+ @foreach(string line in image.Description.Split("
")) + { + @line
+ } +

diff --git a/MyWebsite/wwwroot/css/Gallery.css b/MyWebsite/wwwroot/css/Gallery.css index 4c580c8..f81e39c 100644 --- a/MyWebsite/wwwroot/css/Gallery.css +++ b/MyWebsite/wwwroot/css/Gallery.css @@ -1,19 +1,20 @@ .gallery img { object-fit: cover; - max-height: 200px; + max-height: 300px; max-width: 100%; margin: 2px; transition: .25s; } .gallery img:hover { filter: brightness(125%); - transform: scale(1.25); + transform: scale(1.1); } .image-overview-block img { max-height: 50vh; max-width: 100%; float: left; + cursor: zoom-in; } .image-overview-block div { display: inline-block; @@ -21,4 +22,14 @@ } .image-overview-block h1 { margin-bottom: 0px; +} + +@media only screen and (max-width: 600px) { + .gallery img { + max-height: none; + } + .gallery img:hover { + filter: brightness(125%); + transform: none; + } } \ No newline at end of file diff --git a/MyWebsite/wwwroot/js/site.js b/MyWebsite/wwwroot/js/site.js index 859fa93..dc7072a 100644 --- a/MyWebsite/wwwroot/js/site.js +++ b/MyWebsite/wwwroot/js/site.js @@ -16,10 +16,12 @@ function ToggleImageSize() { image.style.maxHeight = "50vh"; image.style.maxWidth = "100%"; + image.style.cursor = "zoom-in"; } else { image.style.maxHeight = "none"; image.style.maxWidth = "none"; + image.style.cursor = "zoom-out"; } } \ No newline at end of file