style: Mobile Styles

.drone.yml

@@ -23,6 +23,12 @@ steps:
       - docker compose exec php php artisan migrate --force
       - docker compose exec php php artisan optimize
       - docker compose exec php php artisan storage:link
+      - >
+        if grep -q "GIT_HASH=" .env; then
+            sed -i 's/GIT_HASH=.*/GIT_HASH=$(git rev-parse --short HEAD)/' .env
+        else
+            echo "GIT_HASH=$(git rev-parse --short HEAD)" >> .env
+        fi
       - npx nuxi cleanup
       - pnpm run build
       - find /var/www/html/bookstack.octolabs.net -type f -exec chmod 664 {} \\;

nuxt/components/book-recommendations/BookRecommendationTable.vue

@@ -71,6 +71,18 @@ function resolveStatus(status: string) {
   return bookRecommendationStore.statusOptions.find(option => option.value === status)
 }
 
+const rows = computed(() => {
+  // return all bookRecommendationStore.recommendations but add actions
+  return bookRecommendationStore.recommendations.map((recommendation) => {
+    return {
+      ...recommendation,
+      actions: {
+        class: 'max-w-96',
+      },
+    }
+  })
+})
+
 onMounted(() => {
   $echo.private(`BookRecommendation`)
     .listen('.BookRecommendationUpdated', (e) => {
@@ -86,7 +98,6 @@ onMounted(() => {
 
   $echo.private(`Vote`)
     .listen('.VoteCreated', (e) => {
-      console.log(e)
       bookRecommendationStore.createVoteWS(e.vote)
     })
 })
@@ -95,18 +106,13 @@ onMounted(() => {
 <template>
   <div>
     <NewBookRecommendation />
-    <UTable :sort="sort" :loading="bookRecommendationStore.fetchRecommendationsStatus === 'pending'" :columns="columns" :rows="bookRecommendationStore.recommendations">
+    <UTable :ui="{ td: { base: 'max-w-[0] truncate' } }" :sort="sort" :loading="bookRecommendationStore.fetchRecommendationsStatus === 'pending'" :columns="columns" :rows="rows">
       <template #created_at-data="{ row }">
         <div>{{ dayjs(row.created_at).format('DD.MM.YYYY') }}</div>
       </template>
       <template #published_at-data="{ row }">
         <div>{{ dayjs(row.published_at).format('DD.MM.YYYY') }}</div>
       </template>
-      <template #description-data="{ row }">
-        <div v-if="row.description">
-          {{ `${row.description.substring(0, 50)}...` }}
-        </div>
-      </template>
       <template #votes-data="{ row }">
         {{ row.votes.length }}
       </template>
@@ -116,7 +122,7 @@ onMounted(() => {
         </UBadge>
       </template>
       <template #actions-data="{ row }">
-        <div class="flex space-x-2">
+        <div class="flex max-w-full space-x-2">
           <CastVote :row="row" />
           <EditBookRecommendation :row="row" />
           <DeleteBookRecommendation :row="row" />

nuxt/components/dashboard/BookInfoCard.vue

@@ -17,12 +17,12 @@ const dayjs = useDayjs()
       <div class="hidden w-1/5 md:block">
         <img :src="$storage(props.book.cover_image)" :alt="props.book.book_name" class="rounded-lg">
       </div>
-      <div class="w-4/5 space-y-4">
+      <div class="w-full space-y-4 md:w-4/5">
         <div class="space-y-2">
           <h1 class="font-sans text-3xl font-bold">
             {{ props.book.book_name }}
           </h1>
-          <div class="flex justify-between">
+          <div class="flex flex-col flex-wrap gap-y-2 md:flex-row md:justify-between">
             <div>
               <UBadge>
                 {{ props.book.author }}

nuxt/pages/admin/jobs.vue

@@ -13,8 +13,8 @@ async function runJobs(job: string) {
 </script>
 
 <template>
-  <div class="flex gap-4">
+  <div class="flex flex-col gap-4 md:flex-row">
-    <UCard class="w-1/2">
+    <UCard class="w-full md:w-1/2">
       <template #header>
         <h1 class="font-sans text-3xl font-bold">
           Server Jobs
@@ -24,7 +24,7 @@ async function runJobs(job: string) {
         </UButton>
       </template>
     </UCard>
-    <UCard class="w-1/2">
+    <UCard class="w-full md:w-1/2">
       <template #header>
         <h1 class="font-sans text-3xl font-bold">
           Server Logs

nuxt/pages/admin/votes.vue

@@ -6,7 +6,7 @@ definePageMeta({ middleware: ['role-admin'] })
 
 <template>
   <div>
-    <UCard class="w-1/2">
+    <UCard class="w-full md:w-1/2">
       <template #header>
         <h1 class="font-sans text-3xl font-bold">
           Benutzer Aktionen