bug fixes

resources/js/views/Article.vue

@@ -3,9 +3,24 @@
         class="thumbnail"
         :style="{ backgroundImage: `url('${backgroundImageUrl}')` }"></div>
     <SMContainer narrow>
-        <h1 class="title">{{ article.title }}</h1>
-        <div class="author">By {{ article.user.username }}</div>
-        <div class="date">{{ formattedDate(article.publish_at) }}</div>
+        <h1 class="title">
+            {{ article.title }}
+        </h1>
+        <SMToolbar>
+            <div>
+                <div class="author">By {{ article.user.username }}</div>
+                <div class="date">{{ formattedDate(article.publish_at) }}</div>
+            </div>
+            <SMButton
+                v-if="userHasPermission('admin/articles') && article.id"
+                size="medium"
+                type="primary"
+                :to="{
+                    name: 'dashboard-article-edit',
+                    params: { id: article.id },
+                }"
+                label="Edit Article" />
+        </SMToolbar>
         <SMHTML :html="article.content" class="content" />
         <SMAttachments :attachments="article.attachments || []" />
     </SMContainer>
@@ -21,6 +36,9 @@ import { Article, ArticleCollection, User } from "../helpers/api.types";
 import { SMDate } from "../helpers/datetime";
 import { useApplicationStore } from "../store/ApplicationStore";
 import { mediaGetVariantUrl } from "../helpers/media";
+import SMToolbar from "../components/SMToolbar.vue";
+import SMButton from "../components/SMButton.vue";
+import { userHasPermission } from "../helpers/utils";
 
 const applicationStore = useApplicationStore();
 
@@ -129,12 +147,12 @@ handleLoad();
     }
 
     .author {
-        margin-top: 16px;
+        // margin-top: 16px;
         font-weight: 700;
     }
 
     .date {
-        margin-top: 16px;
+        margin-top: 8px;
         font-weight: 700;
         filter: brightness(175%);
     }

resources/js/views/dashboard/ArticleEdit.vue

@@ -1,9 +1,10 @@
 <template>
-    <SMPage
-        class="page-article-edit"
-        :page-error="pageError"
-        permission="admin/articles">
-        <template #container>
+    <SMPage :page-error="pageError" permission="admin/articles">
+        <SMMastHead
+            :title="pageHeading"
+            :back-link="{ name: 'dashboard-article-list' }"
+            back-title="Back to Articles" />
+        <SMContainer class="flex-grow-1">
             <h1>{{ page_title }}</h1>
             <SMForm
                 :model-value="form"
@@ -60,7 +61,7 @@
                     </SMButtonRow>
                 </SMRow>
             </SMForm>
-        </template>
+        </SMContainer>
     </SMPage>
 </template>
 
@@ -80,14 +81,15 @@ import { Form, FormControl } from "../../helpers/form";
 import { And, DateTime, Min, Required } from "../../helpers/validate";
 import { useToastStore } from "../../store/ToastStore";
 import { useUserStore } from "../../store/UserStore";
+import SMMastHead from "../../components/SMMastHead.vue";
 
 const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
-const page_title = route.params.id ? "Edit Article" : "Create New Article";
 let pageError = ref(200);
 const authors = ref({});
 const attachments = ref([]);
+const pageHeading = route.params.id ? "Edit Article" : "Create Article";
 
 let form = reactive(
     Form({