buttons hopefully working on high res screens and pdf always having correct content type

docker-compose.yml

@@ -84,11 +84,11 @@ services:
     container_name: portfolio-nuxt
     build: ./portfolio-nuxt
     # To rebuild the site and the server run this
-    command: bash -c "npm run build && node .output/server/index.mjs"
+    #command: bash -c "npm run build && node .output/server/index.mjs"
     # To just start the server run this
     #command: bash -c "node .output/server/index.mjs"
     # To start the server in dev mode
-    #command: bash -c "npm run dev -o"
+    command: bash -c "npm run dev -o"
     volumes:
       - portfolio-nuxt:/src/node_modules
       - ./portfolio-nuxt:/src

nginx/vhost.d/default

@@ -1,12 +1,2 @@
-## Start of configuration add by letsencrypt container
-location ^~ /.well-known/acme-challenge/ {
-    auth_basic off;
-    auth_request off;
-    allow all;
-    root /usr/share/nginx/html;
-    try_files $uri =404;
-    break;
-}
-## End of configuration add by letsencrypt container
 include /etc/nginx/bots.d/ddos.conf;
 include /etc/nginx/bots.d/blockbots.conf;

nginx/vhost.d/unboundedpress.org

@@ -9,6 +9,11 @@ location ^~ /.well-known/acme-challenge/ {
 }
 ## End of configuration add by letsencrypt container
 
+# This is to make sure that the pdf opens in browser
+
+location ~ ^/api/(.*).pdf$ {
+  proxy_set_header content-type "application/pdf";
+}
 
 # The following are all for collabora routing
 

portfolio-nuxt/components/IconButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="p-1">
-        <div v-show="visible" class="bg-black rounded-full text-xs" >
+    <div class="inline-flex p-1 min-w-[25px]">
+        <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
             <NuxtLink v-if="type === 'document'" class="inline-flex p-1" :to="link">
                 <Icon name="ion:book-sharp" color="white" />

portfolio-nuxt/pages/[files]/[filename].vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex min-h-full items-center justify-center text-center">
-        <embed v-if="route.params.filename.split('.').pop()==='pdf'" :src="'https://unboundedpress.org/api/' + route.params.files + '.files/' + metadata._id.$oid + '/binary'" class="w-[85%] h-[88vh]" />
+        <embed v-if="route.params.filename.split('.').pop()==='pdf'" :src="'https://unboundedpress.org/api/' + route.params.files + '.files/' + metadata._id.$oid + '/binary'" class="w-[85%] h-[88vh]"/>
         <nuxt-img v-else-if="route.params.filename.split('.').pop()==='jpg'" :src="'https://unboundedpress.org/api/' + route.params.files + '.files/' + metadata._id.$oid + '/binary'" class="w-[85%]"/>
     </div>
 </template>

portfolio-nuxt/pages/about.vue

@@ -13,21 +13,21 @@
                 <br>
                 <div class="inline-flex place-items-center p-2">
                     Contact
-                    <div class="w-[28px]">
+                    <div>
                         <IconButton :visible="true" type="email" work="placeholder" link="javascript:location='mailto:\u006d\u0077\u0069\u006e\u0074\u0065\u0072\u0040\u0075\u006e\u0062\u006f\u0075\u006e\u0064\u0065\u0064\u0070\u0072\u0065\u0073\u0073\u002e\u006f\u0072\u0067';void 0"></IconButton>
                     </div>
                 </div>
                 <br>
                 <div class="inline-flex place-items-center p-2">
                     CV
-                    <div class="w-[28px]">
+                    <div>
                         <IconButton :visible="true" type="document" work="placeholder" link="https://unboundedpress.org/legacy/cv"></IconButton>
                     </div>
                 </div>
                 <br>
                 <div class="inline-flex place-items-center p-2">
                     Works List with Presentation History
-                    <div class="w-[28px]">
+                    <div>
                         <IconButton :visible="true" type="document" work="placeholder" link="https://unboundedpress.org/legacy/works_list"></IconButton>
                     </div>
                 </div>

portfolio-nuxt/pages/index.vue

@@ -9,15 +9,23 @@
         <div class="leading-tight py-1 ml-3" v-for="work in item.works">
           <div class="grid grid-cols-[65%,30%] gap-1 font-thin">
             <div class="italic text-sm">{{ work.title }}</div>
-            <div class="grid grid-cols-[28px_28px_28px_28px]">
+            <div class="inline-flex">
 
-            <IconButton :visible="work.score" type="document" :work="work" :link="work.score"></IconButton>
+              <div>
+                <IconButton :visible="work.score" type="document" :work="work" :link="work.score" class="inline-flex p-1"></IconButton>
+              </div>
 
-            <IconButton :visible="work.soundcloud_trackid" type="audio" :work="work"></IconButton>
+              <div>
+                <IconButton :visible="work.soundcloud_trackid" type="audio" :work="work" class="inline-flex p-1"></IconButton>
+              </div>
 
-            <IconButton :visible="work.vimeo_trackid" type="video" :work="work"></IconButton>
+              <div>
+                <IconButton :visible="work.vimeo_trackid" type="video" :work="work" class="inline-flex p-1"></IconButton>
+              </div>
 
-            <IconButton :visible="work.gallery" type="image" :work="work"></IconButton>
+              <div>
+                <IconButton :visible="work.gallery" type="image" :work="work" class="inline-flex p-1"></IconButton>
+              </div>
 
             </div>
           </div>