failed-galleries/php-gallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-01-01 12:26:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved image info around

Browse source
This commit is contained in:
Michał 2022-09-08 19:41:47 +00:00
parent b261368a9b
commit 4aab53a7d5
3 changed files with 85 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
css/main.css
View file

@ -377,7 +377,30 @@ nav .btn {
.image-detail input { .image-detail input {
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
} }
.image-detail > div {
width: 100%;
display: flex;
flex-direction: row;
}
.image-detail > div > div {
width: 50%;
}
.image-detail > div > div * {
margin-top: 0;
margin-bottom: 0.5rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@media (max-width: 669px) {
.image-detail > div {
flex-direction: column;
}
.image-detail > div > div {
width: auto;
}
}
.tags-root { .tags-root {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.5rem 0.5rem 0 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;

29
css/scss/_body.scss
View file

@ -214,6 +214,35 @@
.image-detail { .image-detail {
@include defaultDecoration($green); @include defaultDecoration($green);
@include defaultFont(); @include defaultFont();
&>div {
width: 100%;
display: flex;
flex-direction: row;
&>div {
width: 50%;
* {
margin-top: 0;
margin-bottom: 0.5rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
}
@media (max-width: 669px) {
.image-detail {
&>div {
flex-direction: column;
&>div {
width: auto;
}
}
}
} }
// TAGS // TAGS

67
image.php
View file

@ -149,40 +149,42 @@
</div> </div>
<div class="image-detail flex-down default-window"> <div class="image-detail">
<h2>Details</h2> <h2>Details</h2>
<div>
<div>
<?php
// User
echo "<p>Author: ".$image_author."</p>";
// Image ID
echo "<p>ID: ".$image['id']."</p>";
// Image Upload date
echo "<p>Last updated: +0 ".$image['upload']."</p>";
?>
</div>
<div>
<?php
// File name
$image_pathinfo = pathinfo($image['imagename']);
echo "<p>File Name: ".$image_pathinfo['filename']."</p>";
// File extention
echo "<p>File Type: ".pathinfo($image['imagename'], PATHINFO_EXTENSION)."</p>";
// Image resolution
list($width, $height) = getimagesize($image_path);
echo "<p>Image resolution: ".$width."x".$height."</p>";
?>
</div>
</div>
<?php <?php
// User // Image download
echo "<p>Author: ".$image_author."</p>"; echo "<a class='btn btn-good' href='images/".$image['imagename']."' download='".$image['imagename']."'><img class='svg' src='assets/icons/download.svg'>Download image</a>";
// Image ID
echo "<p>ID: ".$image['id']."</p>";
// File name
$image_pathinfo = pathinfo($image['imagename']);
if (strlen($image['imagename']) > 30) {
echo "<p>File Name: ".substr($image_pathinfo['filename'], 0, 30)."...</p>";
} else {
echo "<p>File Name: ".$image_pathinfo['filename']."</p>";
}
// File extention
echo "<p>File Type: ".pathinfo($image['imagename'], PATHINFO_EXTENSION)."</p>";
// Image resolution
list($width, $height) = getimagesize($image_path);
echo "<p>Image resolution: ".$width."x".$height."</p>";
// Image Upload date
echo "<p>Last updated: +0 ".$image['upload']."</p>";
echo "<br>";
// Image download
echo "<a class='btn btn-good' href='images/".$image['imagename']."' download='".$image['imagename']."'><img class='svg' src='assets/icons/download.svg'>Download image</a>";
// Copy image
?> ?>
<button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>
<script> <script>
function copyLink() { function copyLink() {
navigator.clipboard.writeText(window.location.href); navigator.clipboard.writeText(window.location.href);
@ -190,9 +192,6 @@
sniffleAdd("Info", "Link has been copied!", "var(--green)", "assets/icons/clipboard-text.svg"); sniffleAdd("Info", "Link has been copied!", "var(--green)", "assets/icons/clipboard-text.svg");
} }
</script> </script>
<?php
echo "<button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>";
?>
</div> </div>
<div class="tags-root default-window"> <div class="tags-root default-window">