bug fixes

app/Http/Controllers/Api/UserController.php

@@ -57,7 +57,8 @@ class UserController extends ApiController
         return $this->respondAsResource(
             $collection,
             ['isCollection' => true,
-            'appendData' => ['total' => $total]]
+                'appendData' => ['total' => $total]
+            ]
         );
     }
 
@@ -97,14 +98,14 @@ class UserController extends ApiController
      * Update the specified resource in storage.
      *
      * @param  \App\Http\Requests\UserRequest $request The user update request.
-     * @param  \App\Models\User                     $user    The specified user.
+     * @param  \App\Models\User               $user    The specified user.
      * @return \Illuminate\Http\Response
      */
     public function update(UserRequest $request, User $user)
     {
         if (UserConductor::updatable($user) === true) {
             $input = [];
-            $updatable = ['username', 'first_name', 'last_name', 'email', 'phone', 'password'];
+            $updatable = ['username', 'first_name', 'last_name', 'email', 'phone', 'password', 'display_name'];
 
             if ($request->user()->hasPermission('admin/user') === true) {
                 $updatable = array_merge($updatable, ['email_verified_at']);

resources/js/components/SMButton.vue

@@ -304,4 +304,12 @@ const handleClickItem = (item: string) => {
         color: var(--base-color);
     }
 }
+
+@media only screen and (max-width: 768px) {
+    .button {
+        display: block;
+        width: 100%;
+        text-align: center;
+    }
+}
 </style>

resources/js/components/SMButtonRow.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="row button-row">
+        <slot></slot>
+        <div v-if="slots.right" class="button-row-right">
+            <slot name="right"></slot>
+        </div>
+        <div v-if="slots.left" class="button-row-left">
+            <slot name="left"></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from "vue";
+
+const slots = useSlots();
+</script>
+
+<style lang="scss">
+.button-row {
+    flex-direction: row-reverse;
+    padding: 0 16px;
+
+    & > div {
+        display: flex;
+        flex: 1;
+        width: 100%;
+        gap: 15px;
+
+        &.button-row-right {
+            justify-content: flex-end;
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .button-row {
+        padding: 0;
+        flex-direction: column-reverse;
+        gap: 15px;
+
+        & > div {
+            flex-direction: column;
+        }
+    }
+}
+</style>

resources/js/components/SMColumn.vue

@@ -45,7 +45,7 @@ if (props.width != "") {
 }
 
 @media screen and (max-width: 768px) {
-    .sm-column {
+    .column {
         flex-basis: auto !important;
         width: 100%;
 
@@ -55,7 +55,7 @@ if (props.width != "") {
 }
 
 @media screen and (max-width: 640px) {
-    .sm-column {
+    .column {
         flex-direction: column;
     }
 }

resources/js/components/SMContainer.vue

@@ -50,8 +50,8 @@ const slots = useSlots();
         max-width: 100%;
 
         .container-inner {
-            padding-left: 1rem;
-            padding-right: 1rem;
+            padding-left: 16px;
+            padding-right: 16px;
             width: 100%;
             max-width: 1200px;
             margin: 0 auto;

resources/js/components/SMInput.vue

@@ -11,7 +11,9 @@
             }}</label>
             <template v-if="props.type == 'static'">
                 <div class="static-input-control" v-bind="{ id: id }">
-                    {{ value }}
+                    <span class="text">
+                        {{ value }}
+                    </span>
                 </div>
             </template>
             <template v-else-if="props.type == 'file'">
@@ -344,6 +346,8 @@ const handleChange = (event) => {
         }
 
         .control-item {
+            max-width: 100%;
+
             .control-label {
                 position: absolute;
                 display: block;
@@ -399,6 +403,13 @@ const handleChange = (event) => {
                 border-radius: 8px;
                 background-color: var(--base-color);
                 height: 52px;
+                overflow: auto;
+                scroll-behavior: smooth;
+                scrollbar-width: none;
+
+                &::-webkit-scrollbar {
+                    display: none;
+                }
             }
 
             .file-input-control {
@@ -416,6 +427,14 @@ const handleChange = (event) => {
                 border-radius: 8px 0 0 8px;
                 background-color: var(--base-color);
                 height: 52px;
+
+                overflow: auto;
+                scroll-behavior: smooth;
+                scrollbar-width: none;
+
+                &::-webkit-scrollbar {
+                    display: none;
+                }
             }
 
             .file-input-control-button {
@@ -424,6 +443,7 @@ const handleChange = (event) => {
                 border-color: var(--base-color-darker);
                 border-radius: 0 8px 8px 0;
                 padding: 15px 30px;
+                width: auto;
             }
         }
     }
@@ -446,4 +466,10 @@ const handleChange = (event) => {
         }
     }
 }
+
+@media only screen and (max-width: 768px) {
+    .control-group.control-type-input {
+        // width: 100%;
+    }
+}
 </style>

resources/js/components/SMMastHead.vue

@@ -163,6 +163,10 @@ const tabs = () => {
         overflow-x: auto;
         scroll-behavior: smooth;
         scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
     }
 }
 

resources/js/components/SMNavbar.vue

@@ -282,6 +282,12 @@ onUnmounted(() => {
 //     }
 // }
 
+@media only screen and (max-width: 768px) {
+    #nav-toggle {
+        margin-right: -16px;
+    }
+}
+
 @media screen and (max-width: 650px) {
     .nav-right {
         .button {

resources/js/components/SMPagination.vue

@@ -1,14 +1,10 @@
 <template>
     <div class="pagination">
         <div
-            :class="[
-                'item',
-                'previous',
-                { disabled: computedDisablePrevButton },
-            ]"
+            :class="['item', 'prev', { disabled: computedDisablePrevButton }]"
             @click="handleClickPrev">
             <ion-icon name="chevron-back-outline" />
-            Prev
+            <span class="text">Prev</span>
         </div>
         <div
             :class="['item', 'page', { active: page == props.modelValue }]"
@@ -20,7 +16,7 @@
         <div
             :class="['item', 'next', { disabled: computedDisableNextButton }]"
             @click="handleClickNext">
-            Next
+            <span class="text">Next</span>
             <ion-icon name="chevron-forward-outline" />
         </div>
     </div>
@@ -172,7 +168,7 @@ if (props.modelValue < 1) {
             border-right-width: 0;
         }
 
-        &.previous ion-icon {
+        &.prev ion-icon {
             padding-right: 12px;
         }
 
@@ -192,6 +188,23 @@ if (props.modelValue < 1) {
     }
 }
 
+@media only screen and (max-width: 768px) {
+    .pagination {
+        .item {
+            &.prev,
+            &.next {
+                ion-icon {
+                    padding: 1px 0;
+                }
+
+                .text {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
 // @media (prefers-color-scheme: dark) {
 //     .pagination .item.active {
 //         background-color: var(--primary-color-light);

resources/js/components/SMRow.vue

@@ -1,6 +1,13 @@
 <template>
     <div
-        :class="['row', { 'row-break-lg': breakLarge }, { 'flex-fill': fill }]">
+        :class="[
+            'row',
+            {
+                'row-break-lg': breakLarge,
+                'flex-fill': fill,
+                'no-responsive': noResponsive,
+            },
+        ]">
         <slot></slot>
     </div>
 </template>
@@ -17,6 +24,11 @@ defineProps({
         default: false,
         required: false,
     },
+    noResponsive: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
 });
 </script>
 
@@ -28,6 +40,10 @@ defineProps({
     align-items: flex-start;
     width: 100%;
     max-width: 1200px;
+
+    &.no-responsive {
+        flex-direction: row !important;
+    }
 }
 
 @media screen and (max-width: 992px) {

resources/js/components/SMToolbar.vue

@@ -12,4 +12,15 @@
     align-items: flex-start;
     gap: 20px;
 }
+
+@media screen and (max-width: 768px) {
+    .toolbar {
+        flex-direction: column;
+        margin-bottom: 32px;
+
+        .control-group {
+            margin-bottom: 0;
+        }
+    }
+}
 </style>

resources/js/views/Home.vue

@@ -245,10 +245,6 @@ import SMHero from "../components/SMHero.vue";
 
             flex-direction: column;
             gap: 15px;
-
-            .button {
-                text-align: center;
-            }
         }
     }
 }

resources/js/views/Workshops.vue

@@ -59,22 +59,22 @@
                 </div>
                 <div class="content">
                     <h3 class="title">{{ event.title }}</h3>
-                    <div class="row date">
+                    <SMRow class="date" no-responsive>
                         <ion-icon name="calendar-outline" class="icon" />
                         <div class="text">{{ computedDate(event) }}</div>
-                    </div>
-                    <div class="row location">
+                    </SMRow>
+                    <SMRow class="location" no-responsive>
                         <ion-icon name="location-outline" class="icon" />
                         <div class="text">{{ computedLocation(event) }}</div>
-                    </div>
-                    <div class="row ages">
+                    </SMRow>
+                    <SMRow class="ages" no-responsive>
                         <ion-icon name="body-outline" class="icon" />
                         <div class="text">{{ computedAges(event.ages) }}</div>
-                    </div>
-                    <div class="row price">
+                    </SMRow>
+                    <SMRow class="price" no-responsive>
                         <div class="icon">$</div>
                         <div class="text">{{ computedPrice(event.price) }}</div>
-                    </div>
+                    </SMRow>
                 </div>
             </router-link>
         </div>

resources/js/views/dashboard/MediaEdit.vue

@@ -68,16 +68,19 @@
                         <SMInput type="textarea" control="description" />
                     </SMColumn>
                 </SMRow>
-                <SMRow
-                    class="px-2 flex-row-reverse justify-content-space-between">
-                    <SMButton type="submit" label="Save" :form="form" />
-                    <SMButton
-                        :form="form"
-                        v-if="route.params.id"
-                        type="danger"
-                        label="Delete"
-                        @click="handleDelete" />
-                </SMRow>
+                <SMButtonRow>
+                    <template #right>
+                        <SMButton type="submit" label="Save" :form="form" />
+                    </template>
+                    <template #left>
+                        <SMButton
+                            :form="form"
+                            v-if="route.params.id"
+                            type="danger"
+                            label="Delete"
+                            @click="handleDelete" />
+                    </template>
+                </SMButtonRow>
             </SMForm>
         </SMContainer>
     </SMPage>
@@ -102,6 +105,7 @@ import { toTitleCase } from "../../helpers/string";
 import { useToastStore } from "../../store/ToastStore";
 import SMColumn from "../../components/SMColumn.vue";
 import SMImage from "../../components/SMImage.vue";
+import SMButtonRow from "../../components/SMButtonRow.vue";
 
 const route = useRoute();
 const router = useRouter();

resources/js/views/dashboard/MediaList.vue

@@ -12,7 +12,7 @@
             <SMInput
                 v-model="itemSearch"
                 label="Search"
-                style="max-width: 350px"
+                class="toolbar-search"
                 @keyup.enter="handleSearch">
                 <template #append>
                     <SMButton
@@ -261,6 +261,10 @@ handleLoad();
 
 <style lang="scss">
 .page-dashboard-media-list {
+    .toolbar-search {
+        max-width: 350px;
+    }
+
     .table tr {
         td:first-of-type,
         td:nth-of-type(2) {
@@ -272,4 +276,12 @@ handleLoad();
         }
     }
 }
+
+@media only screen and (max-width: 768px) {
+    .page-dashboard-media-list {
+        .toolbar-search {
+            max-width: none;
+        }
+    }
+}
 </style>

resources/js/views/dashboard/UserEdit.vue

@@ -51,7 +51,7 @@
             </template>
             <SMRow>
                 <SMColumn>
-                    <SMFormFooter>
+                    <SMButtonRow>
                         <template #right>
                             <SMButton
                                 type="secondary"
@@ -59,7 +59,7 @@
                                 @click="handleChangePassword" />
                             <SMButton type="submit" label="Update" />
                         </template>
-                    </SMFormFooter>
+                    </SMButtonRow>
                 </SMColumn>
             </SMRow>
         </SMForm>
@@ -73,7 +73,6 @@ import { openDialog } from "../../components/SMDialog";
 import SMDialogChangePassword from "../../components/dialogs/SMDialogChangePassword.vue";
 import SMButton from "../../components/SMButton.vue";
 import SMForm from "../../components/SMForm.vue";
-import SMFormFooter from "../../components/SMFormFooter.vue";
 import SMInput from "../../components/SMInput.vue";
 import { api } from "../../helpers/api";
 import { UserResponse } from "../../helpers/api.types";
@@ -83,6 +82,7 @@ import { useUserStore } from "../../store/UserStore";
 import SMMastHead from "../../components/SMMastHead.vue";
 import { useToastStore } from "../../store/ToastStore";
 import SMCheckbox from "../../components/SMCheckbox.vue";
+import SMButtonRow from "../../components/SMButtonRow.vue";
 
 const route = useRoute();
 const router = useRouter();