feat: improve mobile styling

Signed-off-by: tylerslaton <[email protected]>
gptscript-ai · Mar 14, 2024 · 7a5cae5 · 7a5cae5
1 parent 1812d61
commit 7a5cae5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 20 deletions.
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -3,18 +3,21 @@
         <div class="flex items-center h-full">
             <ul class="flex space-x-6 items-center">
                 <li class="flex items-center">
-                    <img src="@/assets/img/logo.svg" alt="Logo" class="h-10 w-10 mr-2">
-                    <nuxt-link to="/" class="text-white hover:text-green-200">GPTScript</nuxt-link>
+                    <nuxt-link to="/" class="">
+                        <img src="@/assets/img/logo.svg" alt="Logo" class="h-10 w-10 mr-2">
+                    </nuxt-link>
+
+                    <nuxt-link to="/" class="text-white hover:text-green-200 hidden md:block">GPTScript</nuxt-link>
                 </li>
             </ul>
         </div>
-        <div class="flex items-center h-full mr-4">
+        <div class="flex items-center h-full">
             <ul class="flex space-x-6 items-center">
-                <li class="grow w-72 md:w-96">
+                <li class="grow w-64 md:w-96">
                     <Search :placeholder="placeHolder" />
                 </li>
-                <li><a :href="githubLink" class="text-white hover:text-green-200">GitHub</a></li>
-                <li><a :href="docsLink" class="text-white hover:text-green-200">Docs</a></li>
+                <li class="hidden md:block"><a :href="githubLink" class="text-white hover:text-green-200">GitHub</a></li>
+                <li class="hidden md:block"><a :href="docsLink" class="text-white hover:text-green-200 mr-5">Docs</a></li>
             </ul>
         </div>
     </nav>
@@ -24,7 +27,7 @@
 import { links } from '@/lib/links.ts';
 import { ref } from 'vue';
 
-const placeHolder = ref('Search for a GPTScript Tool...');
+const placeHolder = ref('Search for a tool...');
 
 const githubLink = ref(links.github);
 const docsLink = ref(links.docs);

diff --git a/src/pages/[...slug].vue b/src/pages/[...slug].vue
@@ -1,10 +1,10 @@
 <template>
     <div> 
         <div v-if="!error.status && !loading">
-            <div class="prose my-28 mx-auto px-20 w-full md:w-3/4 lg:w-1/2 max-w-full">
+            <div class="prose my-28 mx-auto px-5 md:px-20 w-full md:w-3/4 lg:w-1/2 max-w-full">
                 <header class="mb-10">
                     <h1 class="mb-0">{{ header }}</h1>
-                    <a :v-if="!isSysTool" :href="`https://${reference}`" target="_blank" class="text-green-500 underline">{{ reference }}</a>
+                    <a v-if="!isSysTool" :href="`https://${reference}`" target="_blank" class="text-green-500 underline">{{ reference }}</a>
                 </header>
 
                 <h2>Overview</h2>

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -1,17 +1,17 @@
 <template>
     <div class="flex flex-col justify-center items-center min-h-screen">
-        <h1 class="text-6xl font-semibold mb-10">Welcome to tools.gptscript.ai</h1>
-        <div class="w-1/2 mb-10">
+        <h1 class="text-4xl md:text-6xl font-semibold mb-10 text-center">Welcome to tools.gptscript.ai</h1>
+        <div class="w-full md:w-1/2 mb-10 px-10">
             <Search :placeholder="placeHolder" />
         </div>
-        <div class="flex flex-wrap justify-center">
-            <router-link to="/github.com/gptscript-ai/search/brave" class="tile rounded bg-gray-200 p-4 m-2 text-2xlg">Search</router-link>
-            <router-link to="/github.com/gptscript-ai/vision" class="tile rounded bg-gray-200 p-4 m-2 text-2xlg">Vision</router-link>
-            <router-link to="/github.com/gptscript-ai/image-generation" class="tile rounded bg-gray-200 p-4 m-2 text-2xlg">Image Generation</router-link>
-			<router-link to="/github.com/gptscript-ai/browser" class="tile rounded bg-gray-200 p-4 m-2 text-2xlg">Browser</router-link>
-            <router-link to="/search?q=sys." class="tile rounded bg-gray-200 p-4 m-2 text-2xlg">System Tools</router-link>
+        <div class="flex flex-wrap justify-center flex-col md:flex-row">
+            <router-link to="/github.com/gptscript-ai/search/brave" class="tile rounded bg-gray-200 p-4 m-2 text-2xl">Search</router-link>
+            <router-link to="/github.com/gptscript-ai/vision" class="tile rounded bg-gray-200 p-4 m-2 text-2xl">Vision</router-link>
+            <router-link to="/github.com/gptscript-ai/image-generation" class="tile rounded bg-gray-200 p-4 m-2 text-2xl">Image Generation</router-link>
+            <router-link to="/github.com/gptscript-ai/browser" class="tile rounded bg-gray-200 p-4 m-2 text-2xl">Browser</router-link>
+            <router-link to="/search?q=sys." class="tile rounded bg-gray-200 p-4 m-2 text-2xl">System Tools</router-link>
         </div>
-  </div>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -21,7 +21,7 @@ import { useRoute } from 'vue-router';
 const route = useRoute();
 const isInvalid = ref(false);
 const errorMessage = ref('');
-const placeHolder = ref('Enter a tool\'s github URL to get started...');
+const placeHolder = ref('Search for a tool to get started...');
 
 onMounted(() => {
   if (route.query.isInvalid === 'true') {

diff --git a/src/pages/search.vue b/src/pages/search.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div v-if="!error.status" class="m-24 mt-36 prose">
+        <div v-if="!error.status" class="m-10 md:m-24 mt-36 prose">
             <h1 class="text-3xl font-bold mb-8">Search Results</h1>
             <div v-for="(tools, url) in searchResults" :key="url" class="mb-8">
                 <a class="text-xl font-semibold mb-4 block" :href="`/${url}`">