Zlz 001 (#35)

* arayüz geliştirmeleri

* .gitignore added idea

* magnitude added tofixed

* review düzenlemeleri yapıldı

* Deleted .idea

* Deleted project_default

* Deleted modules.xml

* deleted temp file

* Update info.vue

---------

Co-authored-by: admin <[email protected]>
Co-authored-by: Ahmet İlhan <[email protected]>

.gitignore

@@ -1,3 +1,5 @@
+.DS_Store
+.idea
 node_modules
 *.log*
 .nuxt

assets/scss/fonts.scss

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap");

assets/scss/global.scss

@@ -7,7 +7,7 @@
 body {
  background-color: $white;
  color: $dark;
- font-family: "Roboto", sans-serif;
+ font-family: "Ubuntu", sans-serif;
  font-size: 16px;
 }
 

assets/scss/mixins.scss

@@ -33,3 +33,7 @@ $extra-large: 1400px;
  @content;
  }
 }
+
+@function colorOpacity($color,$opacity:1) {
+ @return rgba($color,$opacity)
+}

assets/scss/variables.scss

@@ -1,14 +1,16 @@
-$dark: #273251;
-$gray-one: #e7eaf4;
+$dark: #5e6676;
+$gray-one: #d1d5db;
 $gray-two: #a2a9c0;
 $gray-three: #6a7492;
 $white: #fff;
 
+
+
 $max-width-one: 800px;
 $padding-one: 10px;
-$red: rgb(208, 0, 0);
-$orange: rgb(212, 138, 0);
-$green: rgb(0, 185, 0);
-$red-light: rgba(255, 0, 0, 0.188);
-$orange-light: rgba(255, 165, 0, 0.188);
-$green-light: rgba(0, 210, 0, 0.188);
+$red: #fca5a5;
+$orange: #fb923c;
+$green: #28a745;
+$red-light: transparentize($red,.1);
+$orange-light: transparentize($orange,.1);
+$green-light: transparentize($green,.1);

components/earthquake-list-item.vue

@@ -1,118 +1,121 @@
 <template>
  <article class="earthquake-item" :class="getMagnitudeVal" horizontal-center>
- <NuxtLink
- :to="{
+ <section class="earthquake-item__inner" horizontal-center>
+ <NuxtLink
+ :to="{
  query: {
  city: clearTurkishChars(data.Region.City),
  },
  }"
- :title="data.Region.City + ' ' + data.Region.District + ' deprem'"
- class="earthquake-item__left"
- horizontal-center
- @click="changePageTitle(data.Region.City)"
- >
- <h3
- class="magnitude"
- :title="
+  :title="data.Region.City + ' ' + data.Region.District + ' deprem'"
+  class="earthquake-item__left"
+  horizontal-center
+  @click="changePageTitle(data.Region.City)"
+  >
+  <h3
+  class="magnitude"
+  :title="
  data.Region.City + ' deprem ' + data.Magnitude + ' büyüklüğünde'
  "
- :class="getMagnitudeVal"
- vertical-center
- >
- {{ data.Magnitude }}
- </h3>
- <div class="content" vertical-center>
- <h2 class="city" :title="data.Region.City + ' deprem'">
- {{ data.Region.City }}
- </h2>
- <h4 class="district">{{ data.Region.District }}</h4>
- <h6 class="short-detail">
- {{ data.Depth }} km,
- <strong>{{ dateFromNow }}</strong>
- </h6>
- </div>
- </NuxtLink>
- <div class="earthquake-item__right">
- <ClientOnly>
- <EarthquakesChart
- v-if="allTimeData?.length"
- :magnitude-val="getMagnitudeVal"
- :all-time-data="allTimeData"
- :width="chartStyle.listing.width"
- :height="chartStyle?.listing.height"
- :is-has-grid="false"
- :active-earthquake="data"
- @open-chart-detail-modal="openChartDetailModalHandler"
- />
- </ClientOnly>
- </div>
- <ClientOnly>
- <BaseModal
- v-if="isChartDetailModalVisible"
- :title="data.Region.City + ' Deprem Grafiği'"
- class="chart-detail-modal"
- :is-close-icon-visible="true"
- :is-snapshot-loading="false"
- @close="closeChartDetailModalHandler"
- >
- <template v-slot:content>
- <p>
- Bu grafik ilki
- <strong>{{ $dayjs(allTimeData[0].Date).fromNow(true) }} </strong>
- önce olan
- <strong>{{ allTimeData?.length }}</strong> deprem verisiyle
- oluşturulmuştur.
- </p>
- <EarthquakesChart
- :magnitude-val="getMagnitudeVal"
- :all-time-data="allTimeData"
- :width="chartStyle.modal.width"
- :height="150"
- :is-has-grid="true"
- :active-earthquake="data"
- @open-chart-detail-modal="openChartDetailModalHandler"
- />
- </template>
- </BaseModal>
- <BaseModal
- v-if="isEarthquakeDetailModalVisible"
- title="Deprem Detay"
- class="earthquake-detail-modal"
- @close="closeEarthquakeDetailModalHandler"
- :is-close-icon-visible="!isSnapshotLoading"
- :is-snapshot-loading="isSnapshotLoading"
- >
- <template v-slot:content>
- <DetailTable :data="data" />
+ :class="getMagnitudeVal"
+ vertical-center
+ >
+ {{ data.Magnitude.toFixed(1) }}
+ </h3>
+ <div class="content" vertical-center>
+ <h2 class="city" :title="data.Region.City + ' deprem'">
+ {{ data.Region.City }}
+ </h2>
+ <h4 class="district">{{ data.Region.District }}</h4>
+ <h6 class="short-detail">
+ {{ data.Depth }} km,
+ <strong>{{ dateFromNow }}</strong>
+ </h6>
+ </div>
+ </NuxtLink>
+ <div class="earthquake-item__right">
+ <ClientOnly>
  <EarthquakesChart
- v-if="allTimeData?.length"
- :magnitude-val="getMagnitudeVal"
- :all-time-data="allTimeData"
- :width="chartStyle.modal.width"
- :height="140"
- :is-has-grid="true"
- :active-earthquake="data"
+ v-if="allTimeData?.length"
+ :magnitude-val="getMagnitudeVal"
+ :all-time-data="allTimeData"
+ :width="chartStyle.listing.width"
+ :height="chartStyle?.listing.height"
+ :is-has-grid="false"
+ :active-earthquake="data"
+ @open-chart-detail-modal="openChartDetailModalHandler"
  />
- <span class="marker" v-if="isSnapshotLoading"
+ </ClientOnly>
+ </div>
+ <ClientOnly>
+ <BaseModal
+ v-if="isChartDetailModalVisible"
+ :title="data.Region.City + ' Deprem Grafiği'"
+ class="chart-detail-modal"
+ :is-close-icon-visible="true"
+ :is-snapshot-loading="false"
+ @close="closeChartDetailModalHandler"
+ >
+ <template v-slot:content>
+ <p>
+ Bu grafik ilki
+ <strong>{{ $dayjs(allTimeData[0].Date).fromNow(true) }} </strong>
+ önce olan
+ <strong>{{ allTimeData?.length }}</strong> deprem verisiyle
+ oluşturulmuştur.
+ </p>
+ <EarthquakesChart
+ :magnitude-val="getMagnitudeVal"
+ :all-time-data="allTimeData"
+ :width="chartStyle.modal.width"
+ :height="150"
+ :is-has-grid="true"
+ :active-earthquake="data"
+ @open-chart-detail-modal="openChartDetailModalHandler"
+ />
+ </template>
+ </BaseModal>
+ <BaseModal
+ v-if="isEarthquakeDetailModalVisible"
+ title="Deprem Detay"
+ class="earthquake-detail-modal"
+ @close="closeEarthquakeDetailModalHandler"
+ :is-close-icon-visible="!isSnapshotLoading"
+ :is-snapshot-loading="isSnapshotLoading"
+ >
+ <template v-slot:content>
+ <DetailTable :data="data" />
+ <EarthquakesChart
+ v-if="allTimeData?.length"
+ :magnitude-val="getMagnitudeVal"
+ :all-time-data="allTimeData"
+ :width="chartStyle.modal.width"
+ :height="140"
+ :is-has-grid="true"
+ :active-earthquake="data"
+ />
+ <span class="marker" v-if="isSnapshotLoading"
  >Bu görsel <strong><u>www.zelzele.io</u></strong> sitesinden
  alınmıştır.</span
- >
- </template>
- <template v-if="!isSnapshotLoading" v-slot:footer>
- <button class="share-btn" @click="share">
- {{ isMobile() ? "Paylaş" : "İndir" }}
- </button>
- </template>
- </BaseModal>
- <div
- class="earthquake-item__detail-icon"
- vertical-center
- @click="openEarthquakeDetailModal"
- >
- <img src="@/assets/svg/eye.svg" alt="Detail modal icon" />
- </div>
- <Loader v-if="isSnapshotLoading" />
- </ClientOnly>
+ >
+ </template>
+ <template v-if="!isSnapshotLoading" v-slot:footer>
+ <button class="share-btn" @click="share">
+ {{ isMobile() ? "Paylaş" : "İndir" }}
+ </button>
+ </template>
+ </BaseModal>
+ <div
+ class="earthquake-item__detail-icon"
+ vertical-center
+ @click="openEarthquakeDetailModal"
+ >
+ <img src="@/assets/svg/eye.svg" alt="Detail modal icon" />
+ </div>
+ <Loader v-if="isSnapshotLoading" />
+ </ClientOnly>
+ </section>
+
  </article>
 </template>
 <script setup lang="ts">
@@ -228,14 +231,21 @@ const share = async () => {
 .earthquake-item {
  width: 100%;
  height: 130px;
- justify-content: space-between;
- margin: 10px 0;
+ justify-content: center;
  border-radius: 10px;
  position: relative;
+ padding-inline: 10px;
  @include small-device {
  margin: 5px 0;
  height: 100px;
  }
+
+ .earthquake-item__inner{
+ width: 100%;
+ max-width: $max-width-one;
+ position: relative;
+ justify-content: space-between;
+ }
  &--last {
  border-width: 1px;
  border-style: dashed;
@@ -258,15 +268,25 @@ const share = async () => {
  }
  }
  &.little {
- background: linear-gradient(90deg, $white 0%, $gray-one 100%);
+ background: linear-gradient(90deg, transparentize($gray-one,.8) 0%,
+ transparentize($gray-one,.5) 40%,
+ transparentize($gray-one,.5) 60%,
+ transparentize($gray-one,.8) 100%);
+
  border-color: $gray-three;
  }
  &.medium {
- background: linear-gradient(90deg, $white 0%, $orange-light 100%);
+ background: linear-gradient(90deg, transparentize($orange-light,.9) 0%,
+ transparentize($orange-light,.6) 40%,
+ transparentize($orange-light,.6) 60%,
+ transparentize($orange-light,.9) 100%);
  border-color: $orange;
  }
  &.much {
- background: linear-gradient(90deg, $white 0%, $red-light 100%);
+ background: linear-gradient(90deg, transparentize($red-light,.8) 0%,
+ transparentize($red-light,.5) 40%,
+ transparentize($red-light,.5) 60%,
+ transparentize($red-light,.8) 100%);
  border-color: $red;
  }
  &__left {
@@ -285,16 +305,19 @@ const share = async () => {
  font-weight: bold;
  border-radius: 10px;
  &.little {
- background-color: $gray-one;
+ transition: 1s;
  color: $dark;
+ box-shadow: 0 0 11px 0 transparentize($dark,.7);
  }
  &.medium {
- background-color: $orange-light;
+ transition: 1s;
  color: $orange;
+ box-shadow: 0 0 11px 0 transparentize($orange,.7);
  }
  &.much {
- background-color: $red-light;
+ transition: 1s;
  color: $red;
+ box-shadow: 0 0 11px 0 transparentize($red,.7);
  }
  }
  .content {
@@ -347,7 +370,7 @@ const share = async () => {
  &__detail-icon {
  position: absolute;
  right: 0;
- top: 0;
+ top: -10px;
  cursor: pointer;
  z-index: 1;
  width: 50px;

components/earthquakes-list.vue

@@ -30,8 +30,13 @@ const getAllTimeDataForCustomEQ = (
 <style lang="scss" scoped>
 .earthquakes-list {
  width: 100%;
+
+ row-gap: 16px;
+ margin-block: 16px;
+ position: relative;
  @include medium-device {
  padding: $padding-one;
+ row-gap: 8px;
  }
 }
 </style>

components/partials/app-header.vue

@@ -29,10 +29,17 @@
 <style lang="scss" scoped>
 .header {
  width: 100%;
- padding: $padding-one;
- border-bottom: 1px solid $dark;
+ padding: 0 $padding-one;
+ box-shadow: 0 0 6px 2px transparentize($dark,.8);
+ position: sticky;
+ height: 60px;
+ top: 0;
+ z-index: 99;
+ background: #fff;
+
  @include small-device {
- padding: calc($padding-one / 3) $padding-one;
+ padding: 0 $padding-one;
+ height: 40px;
  border-color: $gray-three;
  }
  &__content {