From 85afe70daa22f1930c03b12f51113d822170fc1c Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Wed, 10 Aug 2022 20:11:44 +0100 Subject: [PATCH] Making the website a bit more preformant on weaker phones and ajusting image view --- app/image/edit_tags.php | 16 ----- assets/icons/file-search.svg | 1 + css/.master.css.swp | Bin 24576 -> 0 bytes css/footer.css | 3 +- css/master.css | 83 +-------------------- css/nav.css | 8 ++- image.php | 135 +++++++++++++++++++++++------------ upload.php | 55 ++++++++------ 8 files changed, 132 insertions(+), 169 deletions(-) create mode 100644 assets/icons/file-search.svg delete mode 100644 css/.master.css.swp diff --git a/app/image/edit_tags.php b/app/image/edit_tags.php index b3298bf..d18bc2e 100644 --- a/app/image/edit_tags.php +++ b/app/image/edit_tags.php @@ -1,19 +1,3 @@ -/* - Tags Confirm -*/ -if (isset($_POST['tags_confirm']) && $privilaged) { - // Unset all the variables, needed by flyout - unset($header, $content, $action); - - - - - header("Location:image.php?id=".$image["id"]."&update=success"); - } else { - header("Location:image.php?id=".$image["id"]."&update=error"); - } - } -} \ No newline at end of file diff --git a/css/.master.css.swp b/css/.master.css.swp deleted file mode 100644 index 22751548b1bfd74c75c3d8ecf655eba5a2f3c7da..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24576 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 z ztJhvuDF2mPXjD`tXbPP_zr6tsUy8!8GpjSoLO^- zQ`OA%^rS3m#GrIG`6x#(yH?YO&!0nQ)CC2Fv-r2dJ9^X1R<5aXgj1a|GE(dsTO_yk zK4gb;A~nKKZCW+$pzuzX);GWM;DF3+u*=e+6_lvvL5-%-em6nwDdbgBb+v+;T^c0K zVI>yc2fs5QQ8zq!5RGGvvO0R`K zGgm$KC5FSrxm41U|Ia3WHzD~yX`cG|F|VJ)0XzfA|F1(8vh7-Y04L*Z^7o(P6-Xbz z-H`GBPr*S6^U;YUPKMi))ZU3X=N|Vh;WoGcX-*kiW}Z z|0nQGd;!6n|G(hxA~qs}rC0(3ZJ3D}c#FLK=QxO$a67i)I>`9{Wf;Uqa26!jKN0W6 zOiaU%$k`8IAMVF}*on{LR@{OuFd;erYV=|@-iMix?*zPv{df|)@fAqU|9M=GAm6`) zzt6=A4B%|Y_XMWl7`(*Id=XFLdw3k*!hN_GJFp#}!cB0o2_}|f8RWYIXXBvc?RW~0 zLizx1#WlDZd91{_kUal%==eh%gQM}^~ zzopcELH_;<4&YHdf?c=?@_mBqu@#+YM=L&rx5?Sx#INxaNY1|pyYWp_!2b$EvvDET zqaVv4-!VwwWV|1e|NoT!vKMeSzJ$NUmDqqh{v7fX=h#6->-9B6+YfP$-C)e4;dc#W zR$7?U#yNI_FKWpAGrk1)rsA7H9~<#pg68u4hec;%|Ta|ZMk>jwwd_OBTjnCka&qGLDSRE|bp GaQ$D}c{8a1 diff --git a/css/footer.css b/css/footer.css index 02b12af..5b03cac 100644 --- a/css/footer.css +++ b/css/footer.css @@ -6,8 +6,7 @@ footer { width: calc(100vh - 2rem)); - background-color: var(--bg); color: var(--fg); - backdrop-filter: blur(8px); + background-color: var(--bg-3); color: var(--fg); border: 0.2rem solid var(--green); /*outline: 0.5rem solid var(--bg);*/ diff --git a/css/master.css b/css/master.css index 2c51ed5..27b986d 100644 --- a/css/master.css +++ b/css/master.css @@ -28,7 +28,7 @@ --white: #E8E3E3; --shadow: 6px 6px 2px #15151588; - --rad: 2px; + --rad: 0px; --square: 33.33%; } @@ -110,8 +110,7 @@ body { width: auto; - background-color: var(--bg); - backdrop-filter: blur(8px); + background-color: var(--bg-3); /*outline: 0.5rem solid var(--bg);*/ @@ -152,8 +151,7 @@ body { .gallery-root { margin: 0 0 2rem; padding: 0.25rem; - background-color: var(--bg); color: var(--fg); - backdrop-filter: blur(8px); + background-color: var(--bg-3); color: var(--fg); border: 0.2rem solid var(--green); /*outline: 0.5rem solid var(--bg);*/ @@ -332,36 +330,6 @@ body { /* -=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ - -/* - Notification system - - This is the notification system used by the website. Probably a little too much for what its used for -*/ -.notify-root { - margin: 0; padding: 0; - - max-width: 621px; width: calc(100% - 2rem); - height: auto; - - top: 1rem; left: 50%; - transform: translateX(-50%); - - position: fixed; z-index: 999; -} -.notify { - margin-bottom: 1rem; padding: 0.5rem; - - width: auto; - - text-align: center; - - display: block; - - border-radius: var(--rad); - /*outline: 0.5rem solid var(--bg);*/ -} - .alert { padding: 0.69rem; @@ -447,51 +415,6 @@ a.btn { border-radius: var(--rad); } -/* - -=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -*/ -/*.flyout { - margin: 0; padding: 0.5rem 0.5rem 1.5rem; - - max-width: 621px; width: calc(100% - 2.5rem + 3px); - max-height: 20rem; height: auto; min-height: 10rem; - - bottom: -20rem; left: 50%; - - transform: translateX(-50%) scale(0.8); - - position: fixed; z-index: 99999; - - overflow-y: auto; - - border: 0.2rem solid var(--green); - border-bottom: none; - border-radius: inherit inherit none none; - - word-wrap: break-word; - - transition: bottom 0.5s cubic-bezier(.19,1,.22,1), transform 0.5s cubic-bezier(.19,1,.22,1); -} - -.flyout-dim { - margin: 0; padding: 0; - - width: 100vw; height: 100vh; - - left: 0; top: 0; - - position: fixed; z-index: 99998; - - opacity: 1; - - display: none; - - background: #15151588; - backdrop-filter: blur(5px); - - transition: opacity 2s cubic-bezier(.19,1,.22,1); -}*/ - /* -=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ diff --git a/css/nav.css b/css/nav.css index 266d562..3614ee4 100644 --- a/css/nav.css +++ b/css/nav.css @@ -6,14 +6,13 @@ nav { width: calc(100vh - 2rem)); height: 2.5rem; - position: sticky; z-index: 99; + position: static; z-index: 99; top: 1rem; align-items: center; vertical-align: middle; - background-color: var(--bg); color: var(--fg); - backdrop-filter: blur(8px); + background-color: var(--bg-3); color: var(--fg); border: 0.2rem solid var(--green); /*outline: 0.5rem solid var(--bg);*/ @@ -62,6 +61,9 @@ nav hr { position: fixed; top: auto; bottom: 0; left: 0; right: 0; + background-color: var(--bg); + backdrop-filter: blur(8px); + border: none; border-top: 3px solid var(--green); border-radius: 0; diff --git a/image.php b/image.php index 7eb15e0..d4bcc63 100644 --- a/image.php +++ b/image.php @@ -41,6 +41,8 @@ |------------------------------------------------------------- */ include "ui/required.php"; + include "ui/nav.php"; + /* |------------------------------------------------------------- @@ -50,98 +52,132 @@ | If ID cannot be obtained, give error. ID going here ^^ |------------------------------------------------------------- */ - if (isset($_GET['id'])) { + if (isset($_GET['id']) && is_numeric($_GET['id'])) { // Get all image info $image = get_image_info($conn, $_GET['id']); // Check if image is avalible if (isset($image['imagename'])) { - // Display image - $image_path = "images/".$image['imagename']; - $image_alt = $image['alt']; + $image_present = True; } else { - // ID not avalible toast - echo "

Could not find image with ID: ".$_GET['id']."

"; - - // Replacement "no image" image and description - $image_path = "assets/no_image.png"; - $image_alt = "No image could be found, sowwy"; + ?> + + No ID present

"; - - // Replacement "no image" image and description - //$image_path = "assets/no_image.png"; - //$image_alt = "No image could be found, sowwy"; + ?> + +
' src='' alt=''>
+

Description

- ".$image_alt."

"; - } else { - echo "

No description provided

"; - } - ?> +

Details

Author: ".$user['username']."

"; - } else { - echo "

Author: Deleted User

"; - } - } else { - echo "

Author: No author

"; - } + // User + echo "

Author: ".$image_author."

"; // Image ID echo "

ID: ".$image['id']."

"; // File name if (strlen($image['imagename']) > 30) { - echo "

File Name: ".trim(substr($image['imagename'], 0, 30))."...

"; + echo "

File Name: ".substr($image['imagename'], 0, 30)."...

"; } else { echo "

File Name: ".$image['imagename']."

"; } @@ -195,8 +231,8 @@ |------------------------------------------------------------- | Check if user is privilaged, |------------------------------------------------------------- - | If yes, grant them access to the Danger zone, or "the place that can fuck things up" - | Checking is done prior to here + | If yes, grant them access to the Danger zone, or "the place + | that can fuck things up" |------------------------------------------------------------- */ if ($privilaged) { @@ -338,6 +374,13 @@ } echo "
"; } + + /* + |------------------------------------------------------------- + | End of displaying all user info + |------------------------------------------------------------- + */ + } ?> diff --git a/upload.php b/upload.php index 66eee17..e4687a0 100644 --- a/upload.php +++ b/upload.php @@ -33,30 +33,41 @@ $(document).ready(function() { $("#uploadSubmit").submit(function(event) { event.preventDefault(); - // Make form - var formData = new FormData(); + // Check if image avalible + var file = $("#image").val(); + if (file != "") { + // Make form + var formData = new FormData(); - // Get image - var image_data = $("#image").prop("files")[0]; - formData.append("image", image_data); - // Get ALT - var alt = $("#alt").val(); - formData.append("alt", alt); - // Get ALT - var submit = $("#submit").val(); - formData.append("submit", submit); + // Get image + var image_data = $("#image").prop("files")[0]; + formData.append("image", image_data); + // Get ALT + var alt = $("#alt").val(); + formData.append("alt", alt); + // Get ALT + var submit = $("#submit").val(); + formData.append("submit", submit); - // Upload the information - $.ajax({ - url: 'app/image/upload_image.php', - type: 'post', - data: formData, - contentType: false, - processData: false, - success: function(response){ - $("#sniffle").html(response); - } - }); + // Upload the information + $.ajax({ + url: 'app/image/upload_image.php', + type: 'post', + data: formData, + contentType: false, + processData: false, + success: function(response){ + $("#sniffle").html(response); + } + }); + + // Empty values + $("#image").val(""); + $("#alt").val(""); + $("#submit").val(""); + } else { + sniffleAdd('Gwha!', 'Pls provide image', 'var(--red)', 'assets/icons/file-search.svg'); + } }); });