backend: add partial support for viewing media

lib/PoorBooru.pm

@@ -129,10 +129,26 @@ get "/tag/:tag_id_or_name" => sub {
 	};
 };
 
+get "/view/:media_id" => sub {
+	my $media_id = route_parameters->get("media_id");
+
+	my $res = api_get("/media/$media_id");
+	send_error("API error", 500) if !$res->{success};
+
+	my $data = decode_json($res->{content});
+
+	template "media" => {
+		no_title       => 1,
+		title          => $data->{id},
+		image_src      => "$POORBOORU_API/download/" . $data->{id},
+		media_id       => $data->{id},
+		media_filename => $data->{filename},
+		media_size     => $data->{size},
+		media_tags     => [],
+	};
+};
+
 get "/random" => sub {
 };
 
-get "/view/:media_id" => sub {
-};
-
 true;

public/css/style.css

@@ -29,7 +29,11 @@
   box-sizing: border-box;
 }
 
+dd,
+dl,
+dt,
 h1,
+h2,
 p {
   margin: 0;
 }
@@ -44,7 +48,13 @@ body {
   line-height: 2.4;
 }
 
+main {
+  padding-top: 1.5rem;
+}
+
+dl,
 h1,
+h2,
 p {
   margin-bottom: 1.5rem;
 }
@@ -59,6 +69,11 @@ h1 {
   line-height: 2;
 }
 
+h2 {
+  font-size: 2.5rem;
+  line-height: 1.2;
+}
+
 a {
   color: var(--accent-color-0);
 }
@@ -73,6 +88,14 @@ a:active {
   color: var(--accent-color-1);
 }
 
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 3rem;
+}
+
 .viewport {
   margin-left: auto;
   margin-right: auto;
@@ -135,6 +158,10 @@ a:active {
   width: 100%;
 }
 
+.media-image {
+  max-width: 100%;
+}
+
 .flex-c-horizontal {
   display: flex;
 }

views/layouts/main.tt

@@ -18,7 +18,9 @@
   </header>
   <main class="border-bottom border-top border-accent flex-i-fullsize flex-c-vertical">
     <div class="viewport flex-i-fullsize flex-c-vertical">
+[% UNLESS no_title %]
       <h1>[% title %]</h1>
+[% END %]
       <div class="viewport flex-i-fullsize">[% content %]</div>
 [% IF pager %]
       <footer>

views/media.tt

@@ -0,0 +1,21 @@
+<div class="text-center">
+<a href="[% image_src %]"><img class="media-image" src="[% image_src %]" /></a>
+</div>
+
+<h2>metadata</h2>
+
+<dl>
+  <dt>ID</dt>
+  <dd>[% media_id %]</dd>
+  <dt>Filename</dt>
+  <dd>[% media_filename %]</dd>
+  <dt>Size</dt>
+  <dd>[% media_size %]</dd>
+  <dt>Tags</dt>
+[% UNLESS media_tags %]
+  <dd>no tags</dd>
+[% END %]
+[% FOREACH tag IN media_tags -%]
+  <dd><a href="[% tag.uri %]">[% tag.name %]</a></dd>
+[% END -%]
+</dl>