Improve mobile styles

lnsp · Jan 19, 2020 · 7ce079c · 7ce079c
1 parent 56eeecf
commit 7ce079c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/webui/src/components/RecordList.vue b/webui/src/components/RecordList.vue
@@ -1,38 +1,41 @@
 <template>
   <div>
     <div
-      class="hidden sm:flex flex-row items-center uppercase text-gray-500 font-bold tracking-wider text-xs mb-4"
+      class="hidden sm:flex flex-row items-center uppercase text-gray-500 font-bold tracking-wider text-xs p-3 sm:px-6"
     >
-      <div class="w-1/5 px-4">Type</div>
-      <div class="w-1/3 px-8">Domain</div>
-      <div class="w-1/3 px-8">Data</div>
+      <div class="w-1/5">Type</div>
+      <div class="w-1/4 mx-3 px-4">Domain</div>
+      <div class="w-1/3 mx-3 px-4">Data</div>
     </div>
-    <div>
+    <div class="mb-4">
       <div
         v-for="(record, index) in filtered"
         :key="index"
-        class="flex flex-row items-center py-2 flex-wrap odd:bg-gray-100"
+        class="relative flex flex-row sm:items-center p-3 sm:px-6 flex-wrap sm:odd:bg-gray-100 border sm:border-transparent mb-3 mx-3 sm:m-0"
       >
-        <div class="w-1/2 sm:w-1/5 px-3 mb-3 sm:mb-0">
+        <div class="w-full sm:w-1/5 mb-3 sm:mb-0">
+          <label class="block sm:hidden uppercase text-gray-500 font-bold tracking-wider text-xs px-4 py-2">Type</label>
           <dropdown v-model="record.type" :options="['A', 'CNAME']" />
         </div>
-        <div class="w-1/2 sm:w-1/3 px-3 mb-3 sm:mb-0">
+        <div class="w-full sm:w-1/4 mx-0 sm:mx-3 mb-3 sm:mb-0">
+          <label class="block sm:hidden uppercase text-gray-500 font-bold tracking-wider text-xs px-4 py-2">Domain</label>
           <input
             type="text"
             placeholder="Domain"
             v-model="record.domain"
-            class="w-full py-2 px-4 bg-transparent focus:outline-none focus:shadow-outline appearance-none leading-normal border border-transparent hover:border-gray-300 focus:bg-gray-100"
+            class="w-full py-2 px-4 bg-transparent focus:outline-none focus:shadow-outline appearance-none leading-normal border border-gray-300 sm:border-transparent hover:border-gray-300 focus:bg-gray-100"
           />
         </div>
-        <div class="flex-auto px-3">
+        <div class="flex-grow mx-0 sm:mx-3">
+          <label class="block sm:hidden uppercase text-gray-500 font-bold tracking-wider text-xs px-4 py-2">Data</label>
           <input
             type="text"
             placeholder="Data"
             v-model="record.data"
-            class="w-full py-2 px-4 bg-transparent focus:outline-none focus:shadow-outline appearance-none leading-normal border border-transparent hover:border-gray-300 focus:bg-gray-100"
+            class="w-full py-2 px-4 bg-transparent focus:outline-none focus:shadow-outline appearance-none leading-normal border border-gray-300 sm:border-transparent hover:border-gray-300 focus:bg-gray-100"
           />
         </div>
-        <div class="px-6">
+        <div class="absolute sm:relative pl-3 right-0 mr-3 -mt-2 sm:mr-0 sm:-mt-0">
           <button class="text-gray-500 focus:outline-none focus:shadow-outline hover:text-indigo-600 text-2xl" @click="discard(record)">&#215;</button>
         </div>
       </div>

diff --git a/webui/src/views/ControlPanel.vue b/webui/src/views/ControlPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="min-h-screen bg-gray-900 p-4">
     <transition name="alert-fade">
-      <div v-if="showAlert" class="fixed w-screen mt-4 text-center">
+      <div v-if="showAlert" class="z-50 fixed w-full -ml-4 mt-4 text-center">
         <div
           class="items-center p-2 rounded-full inline-flex"
           :class="{ 'text-green-100': status === 'ok', 'bg-green-700': status === 'ok', 'text-red-100': status === 'error', 'bg-red-700': status === 'error'}"
@@ -10,7 +10,7 @@
             class="flex rounded-full px-3 py-1 mr-4 uppercase font-bold text-xs"
             :class="{ 'bg-green-500': status === 'ok', 'bg-red-500': status === 'error'}"
           >{{ status }}</div>
-          <div class="mr-3 font-semibold flex-auto">{{ alertMessage }}</div>
+          <div class="mr-3 text-xs sm:text-base font-semibold flex-auto">{{ alertMessage }}</div>
         </div>
       </div>
     </transition>
@@ -25,10 +25,10 @@
           :disabled="applying"
         >Apply changes</button>
       </div>
-      <div class="bg-white shadow-md rounded mt-4 p-6">
-        <div class="flex flex-row mb-6">
-          <button class="text-white px-4 py-2 mx-3 rounded bg-indigo-600 hover:bg-indigo-700 shadow" @click="add">Add Record</button>
-          <textInput class="flex-auto mx-3" v-model="filter" placeholder="Search for record" />
+      <div class="bg-white shadow-md rounded mt-4 overflow-hidden">
+        <div class="flex flex-row p-3 sm:px-6 sm:pt-6">
+          <button class="text-white px-4 py-2 mr-3 rounded bg-indigo-600 hover:bg-indigo-700 shadow" @click="add"><span class="inline sm:hidden">Add</span><span class="hidden sm:inline">Add Record</span></button>
+          <textInput class="flex-grow" v-model="filter" placeholder="Search for record" />
         </div>
         <recordList :records="records" :filter="filter" />
       </div>
@@ -53,7 +53,7 @@ export default {
       applying: false,
       showAlert: false,
       alertMessage: "",
-      status: "success",
+      status: "ok",
       filter: "",
       axios: null,
     };