UI updates and re-work

austintoddj · Mar 31, 2023 · 64f47b2 · 64f47b2
1 parent 9fcc284
commit 64f47b2
Show file tree

Hide file tree

Showing 12 changed files with 42,736 additions and 424 deletions.
diff --git a/composer.lock b/composer.lock
diff --git a/lang/en/app.php b/lang/en/app.php
@@ -104,6 +104,7 @@
     'these_credentials_do_not_match' => 'These credentials do not match our records.',
     'this_password_reset_token_is_invalid' => 'This password reset token is invalid.',
     'we_have_emailed_your_password_reset_link' => 'We have emailed your password reset link!',
+    'view_site' => 'View site',
 
     // VALIDATION
     'id_required' => 'The id field is required.',

diff --git a/package-lock.json b/package-lock.json
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=100f1b6f9c0672ff320f568ed3d106ac",
-    "/css/app.css": "/css/app.css?id=714508ad25e958ffc2dc926052a65d63"
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
 }
diff --git a/resources/js/components/DesktopSidebar.vue b/resources/js/components/DesktopSidebar.vue
@@ -19,7 +19,7 @@
                             :to="{ name: 'dashboard' }"
                             class="group flex items-center px-2 py-2 text-sm font-medium rounded-md"
                             active-class="bg-gray-200 text-gray-900 dark:text-white dark:bg-gray-900"
-                            inactive-class="text-gray-600 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
+                            inactive-class="text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
                         >
                             <HomeIcon
                                 :class="[
@@ -32,11 +32,21 @@
                             />
                             {{ trans.dashboard }}
                         </AppLink>
+                        <AppLink v-if="config.siteUrl" :to="config.siteUrl" class="group flex items-center rounded-md px-2 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
+                            <WindowIcon
+                                class="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-300"
+                                aria-hidden="true"
+                            />
+                            <span class="flex-1">{{ trans.view_site }}</span>
+                            <span class="ml-3 inline-block text-xs font-medium">
+                                <ArrowTopRightOnSquareIcon class="h-5 w-5 text-transparent group-hover:text-gray-500 dark:group-hover:text-white" />
+                            </span>
+                        </AppLink>
                         <AppLink
                             :to="{ name: 'posts' }"
                             class="group flex items-center px-2 py-2 text-sm font-medium rounded-md"
                             active-class="bg-gray-200 text-gray-900 dark:text-white dark:bg-gray-900"
-                            inactive-class="text-gray-600 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
+                            inactive-class="text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
                         >
                             <BookmarkSquareIcon
                                 :class="[
@@ -57,7 +67,7 @@
                             :to="{ name: 'tags' }"
                             class="group flex items-center px-2 py-2 text-sm font-medium rounded-md"
                             active-class="bg-gray-200 text-gray-900 dark:text-white dark:bg-gray-900"
-                            inactive-class="text-gray-600 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
+                            inactive-class="text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
                         >
                             <TagIcon
                                 :class="[
@@ -76,7 +86,7 @@
                             :to="{ name: 'topics' }"
                             class="group flex items-center px-2 py-2 text-sm font-medium rounded-md"
                             active-class="bg-gray-200 text-gray-900 dark:text-white dark:bg-gray-900"
-                            inactive-class="text-gray-600 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
+                            inactive-class="text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
                         >
                             <RectangleStackIcon
                                 :class="[
@@ -97,7 +107,7 @@
                             :to="{ name: 'users' }"
                             class="group flex items-center px-2 py-2 text-sm font-medium rounded-md"
                             active-class="bg-gray-200 text-gray-900 dark:text-white dark:bg-gray-900"
-                            inactive-class="text-gray-600 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
+                            inactive-class="text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
                         >
                             <UsersIcon
                                 :class="[
@@ -126,7 +136,7 @@
                             :to="{ name: 'settings' }"
                             class="group flex items-center px-2 py-2 text-sm font-medium rounded-md"
                             active-class="bg-gray-200 text-gray-900 dark:text-white dark:bg-gray-900"
-                            inactive-class="text-gray-600 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
+                            inactive-class="text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700"
                         >
                             <CogIcon
                                 :class="[
@@ -139,13 +149,12 @@
                             />
                             {{ trans.settings }}
                         </AppLink>
-
                         <a
-                            class="group flex items-center rounded-md px-2 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer"
+                            class="group flex items-center rounded-md px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer"
                             @click="logout"
                         >
                             <ArrowRightOnRectangleIcon
-                                class="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-300"
+                                class="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-gray-300"
                                 aria-hidden="true"
                             />
                             {{ trans.sign_out }}
@@ -194,12 +203,14 @@
 import { computed } from 'vue'
 import {
     ArrowRightOnRectangleIcon,
+    ArrowTopRightOnSquareIcon,
     TagIcon,
     CogIcon,
     BookmarkSquareIcon,
     HomeIcon,
     RectangleStackIcon,
-    UsersIcon
+    UsersIcon,
+    WindowIcon
 } from '@heroicons/vue/24/outline'
 import { useStore } from 'vuex'
 import AppLink from '@/components/AppLink'
@@ -215,6 +226,7 @@ defineProps({
 const emit = defineEmits(['logout'])
 const route = useRoute()
 const store = useStore()
+const config = computed(() => store.state.config)
 const user = computed(() => store.state.config.user)
 const trans = computed(() => store.getters['config/trans'])
 

diff --git a/resources/js/components/MobileSidebar.vue b/resources/js/components/MobileSidebar.vue
@@ -80,6 +80,16 @@
                                     />
                                     {{ trans.dashboard }}
                                 </AppLink>
+                                <AppLink v-if="config.siteUrl" :to="config.siteUrl" class="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-white dark:text-gray-300 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
+                                    <WindowIcon
+                                        class="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-300"
+                                        aria-hidden="true"
+                                    />
+                                    <span class="flex-1">{{ trans.view_site }}</span>
+                                    <span class="ml-3 inline-block text-xs font-medium">
+                                        <ArrowTopRightOnSquareIcon class="h-5 w-5 text-transparent dark:group-hover:text-white" />
+                                    </span>
+                                </AppLink>
                                 <AppLink
                                     :to="{ name: 'posts' }"
                                     class="group flex items-center px-2 py-2 text-base font-medium rounded-md"
@@ -261,12 +271,14 @@ import {
 } from '@headlessui/vue'
 import {
     ArrowRightOnRectangleIcon,
+    ArrowTopRightOnSquareIcon,
     TagIcon,
     CogIcon,
     BookmarkSquareIcon,
     HomeIcon,
     RectangleStackIcon,
     UsersIcon,
+    WindowIcon,
     XMarkIcon
 } from '@heroicons/vue/24/outline'
 import { useStore } from 'vuex'
@@ -283,6 +295,7 @@ defineProps({
 const emit = defineEmits(['closeSidebar', 'logout'])
 const route = useRoute()
 const store = useStore()
+const config = computed(() => store.state.config)
 const user = computed(() => store.state.config.user)
 const trans = computed(() => store.getters['config/trans'])
 

diff --git a/resources/js/store/modules/config.js b/resources/js/store/modules/config.js
@@ -7,15 +7,16 @@ import {
 
 const initialState = {
     assetsUpToDate: window.Canvas.assetsUpToDate,
-    i18n: window.Canvas.translations,
     languageCodes: window.Canvas.languageCodes,
     maxUpload: window.Canvas.maxUpload,
     path: window.Canvas.path,
+    roles: window.Canvas.roles,
+    siteUrl: window.Canvas.siteUrl,
     timezone: window.Canvas.timezone,
+    translations: window.Canvas.translations,
     unsplash: window.Canvas.unsplash,
     user: window.Canvas.user,
-    version: window.Canvas.version,
-    roles: window.Canvas.roles
+    version: window.Canvas.version
 }
 
 const state = { ...initialState }
@@ -77,7 +78,7 @@ const mutations = {
     },
 
     UPDATE_LOCALE(state, data) {
-        state.i18n = data.i18n
+        state.translations = data.translations
         state.user.locale = data.user.locale
     },
 
@@ -92,7 +93,7 @@ const mutations = {
 
 const getters = {
     trans(state) {
-        return JSON.parse(state.i18n)
+        return JSON.parse(state.translations)
     },
 
     locale(state) {
@@ -108,11 +109,11 @@ const getters = {
     getAppearanceName(state) {
         switch (state.user.dark_mode) {
             case true:
-                return JSON.parse(state.i18n).dark
+                return JSON.parse(state.translations).dark
             case false:
-                return JSON.parse(state.i18n).light
+                return JSON.parse(state.translations).light
             default:
-                return JSON.parse(state.i18n).system
+                return JSON.parse(state.translations).system
         }
     },
 

diff --git a/resources/js/store/modules/user.js b/resources/js/store/modules/user.js
@@ -64,6 +64,7 @@ const mutations = {
     },
 
     UPDATE_LOCALE(state, data) {
+        // TODO: Rename to translations?
         state.i18n = data.i18n
         state.locale = data.user.locale
     },

diff --git a/src/Http/Controllers/ViewController.php b/src/Http/Controllers/ViewController.php
@@ -24,6 +24,7 @@ public function index()
                 'maxUpload' => config('canvas.upload_filesize'),
                 'path' => Canvas::basePath(),
                 'roles' => User::roles(),
+                'siteUrl' => config('canvas.site_url'),
                 'timezone' => config('app.timezone'),
                 'translations' => Canvas::availableTranslations(request()->user('canvas')->locale),
                 'unsplash' => config('canvas.unsplash.access_key'),

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -22,7 +22,6 @@ module.exports = {
     plugins: [
         require('@tailwindcss/typography'),
         require('@tailwindcss/forms'),
-        require('@tailwindcss/line-clamp'),
         require('@tailwindcss/aspect-ratio')
     ]
 }