fea: responsivity - contacts & news

AloisSeckar · Feb 23, 2024 · e5ad76f · e5ad76f
1 parent a156899
commit e5ad76f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 19 deletions.
diff --git a/assets/lang/cs.json b/assets/lang/cs.json
@@ -54,7 +54,7 @@
         "title" : "Novinky",
         "total" : "Celkem novinek",
         "none" : "Zatím žádné novinky",
-        "added" : "přidal"
+        "added" : " přidal"
     },
     "invalid" : {
         "content" : "Data neexistují nebo je nelze načíst",

diff --git a/assets/lang/en.json b/assets/lang/en.json
@@ -54,7 +54,7 @@
         "title" : "News",
         "total" : "Total news",
         "none" : "No news yet",
-        "added" : "added"
+        "added" : " added"
     },
     "invalid" : {
         "content" : "Data doesn't exist or cannot be loaded",

diff --git a/components/item/Contact.vue b/components/item/Contact.vue
@@ -1,18 +1,20 @@
 <template>
-  <div class="flex flex-row flex-wrap">
-    <div class="w-[30%]">
+  <div class="flex flex-col sm:flex-row">
+    <div class="flex-1">
       <strong>{{ item.name }}</strong>
     </div>
-    <div class="w-[30%]">
-      {{ item.email }}
-    </div>
-    <div class="w-[30%]">
-      {{ item.phone }}
-    </div>
-    <div v-if="item.fb" class="w-[10%]">
-      <NuxtLink :to="item.fb" :external="true" :title=" item.name + ' - Facebook'" class="text-xl">
-        <BaseIcon icon="facebook" size="1.25rem" css-class="mb-1.5" />
-      </NuxtLink>
+    <div>
+      <div class="min-[480px]:inline text-nowrap mx-2">
+        {{ item.email }}
+      </div>
+      <div class="min-[480px]:inline text-nowrap mx-2">
+        {{ item.phone }}
+      </div>
+      <div v-if="item.fb" class="min-[480px]:inline mx-2 w-32">
+        <NuxtLink :to="item.fb" :external="true" :title=" item.name + ' - Facebook'" class="text-xl">
+          <BaseIcon icon="facebook" size="1.25rem" css-class="mb-1.5" />
+        </NuxtLink>
+      </div>
     </div>
   </div>
 </template>

diff --git a/components/item/News.vue b/components/item/News.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="flex flex-col sm:flex-row mb-4">
-    <div class="sm:hidden">
+  <div class="flex flex-col md:flex-row mb-4">
+    <div class="md:hidden">
       <strong>{{ toDate(item.dateCreated) }}</strong> <em>{{ item.elrhAuthor?.name }}</em>{{ $t('news.added') }}:
     </div>
-    <div class="hidden sm:inline-block sm:w-32">
+    <div class="hidden md:inline-block md:w-32">
       <strong>{{ toDate(item.dateCreated) }}</strong>
     </div>
-    <div class="hidden sm:inline-block sm:w-32">
+    <div class="hidden md:inline-block md:w-32">
       <em>{{ item.elrhAuthor?.name }}</em>
     </div>
-    <div class="flex-1 mt-2 sm:mt-0">
+    <div class="flex-1 mt-2 md:mt-0">
       <div>
         <AdminEditLink v-if="user" :link="'news/' + item.newsId" item="news" />
         <strong>{{ item.title }}</strong>