Fix components in responsive mood, add custom resolution.

dnj · May 2, 2024 · 4a90b7d · 4a90b7d
1 parent 61b4586
commit 4a90b7d
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 111 deletions.
diff --git a/components/Footer.vue b/components/Footer.vue
@@ -2,22 +2,23 @@
  <div class="footer-top text-center">
  <div class="footer-line">
  <NuxtLink :to="localePath('/')" class="footer-title">
- <div>{{ $t("pages.index") }}</div>
+ <div>Web Shot</div>
  </NuxtLink>
  <div class="text-secondary">{{ $t("index.banner.title") }}</div>
  </div>
  </div>
  <v-container class="footer">
  <v-row>
- <v-col sm="6" cols="12" class="py-2">
+ <v-col md="6" cols="12" class="py-2"
+ :align="$vuetify.display.mobile ? 'center' : $vuetify.locale.isRtl ? 'right' : 'left'">
  <v-btn class="mx-1" :to="localePath('docs')" variant="text" prepend-icon="mdi-circle-medium">{{
  $t("pages.docs") }}</v-btn>
  <v-btn class="mx-1" :to="localePath('gallery')" variant="text" prepend-icon="mdi-circle-medium">{{
  $t("pages.gallery") }}</v-btn>
  <v-btn class="mx-1" :to="localePath('contact')" variant="text" prepend-icon="mdi-circle-medium">{{
  $t("pages.contact") }}</v-btn>
  </v-col>
- <v-col sm="6" cols="12" class="py-2"
+ <v-col md="6" cols="12" class="py-2"
  :align="$vuetify.display.mobile ? 'center' : $vuetify.locale.isRtl ? 'left' : 'right'">
  <div class="footer-sen">&copy; {{ $t("copy-right") }}</div>
  </v-col>
@@ -38,6 +39,15 @@ export default defineComponent({
  .v-btn__prepend {
  margin: 0px;
  }
+
+ @media(max-width: 750px) {
+
+ .v-btn {
+ width: 88px;
+ font-size: 13px;
+ }
+ }
+
 }
 
 .footer-top {

diff --git a/components/Header.vue b/components/Header.vue
@@ -1,6 +1,7 @@
 <template>
  <v-app-bar class="app-bar px-5" :elevation="0" color="white" density="comfortable">
- <NuxtLink :to="localePath('/')" class="toolbar-title me-6">
+ <NuxtLink :to="localePath('/')" class="toolbar-title me-sm-6 ms-1"
+ :class="$vuetify.locale.isRtl ? '' : 'english-font'">
  <v-app-bar-title>{{ $t("pages.index") }}</v-app-bar-title>
  </NuxtLink>
  <v-toolbar-items class="hidden-sm-and-down">
@@ -13,7 +14,7 @@
  <template v-slot:activator="{ props }">
  <v-btn variant="text" color="light" height="80%" v-bind="props">
  <span class="fi flag mx-1 rounded" :class="`fi-` + currentLang.country" />
- {{ currentLang.title }}
+ {{ $vuetify.display.smAndUp ? currentLang.title : currentLang.title.slice(0, 2) }}
  </v-btn>
  </template>
  <v-list :elevation="3">
@@ -81,8 +82,11 @@ export default defineComponent({
 .app-bar {
  .toolbar-title {
  text-decoration: none;
- font-family: Audiowide;
  color: black;
  }
+
+ .english-font {
+ font-family: Audiowide;
+ }
 }
 </style>
diff --git a/locales/en.json b/locales/en.json
@@ -48,5 +48,16 @@
  "contact.subtitle": "Ways of communication",
  "contact.ways.email": "Email:",
  "contact.ways.phone": "Phone:",
- "fetch-data.error.server": "Server error"
+ "fetch-data.error.server": "Server error",
+ "api.options.resolution": "Resolution:",
+ "api.options.resolution.custom-btn": "custom",
+ "api.options.width":"Width:",
+ "api.options.height":"Height:",
+ "api.options.timeout":"Timeout:",
+ "api.options.max-age":"Max age:",
+ "api.options.full-page":"Full page:",
+ "api.options.format":"Format:",
+ "api.options.units.px":"px",
+ "api.options.units.second": "s",
+ "api.options.units.ms": "ms"
 }
diff --git a/locales/fa.json b/locales/fa.json
@@ -48,5 +48,16 @@
  "contact.subtitle": "راه های ارتباطی",
  "contact.ways.email": "ایمیل:",
  "contact.ways.phone": "تلفن:",
- "fetch-data.error.server": "خطای سرور"
+ "fetch-data.error.server": "خطای سرور",
+ "api.options.resolution": "رزولوشن:",
+ "api.options.resolution.custom-btn": "دلخواه",
+ "api.options.width": "عرض:",
+ "api.options.height": "ارتفاع:",
+ "api.options.timeout": "حداکثر زمان بارگذاری صفحه:",
+ "api.options.max-age": "حداکثر زمان کش تصویر:",
+ "api.options.full-page": "تمام صفحه:",
+ "api.options.format": "فرمت:",
+ "api.options.units.px": "پیکسل",
+ "api.options.units.second": "ثانیه",
+ "api.options.units.ms": "میلی ثانیه"
 }