Merge branch 'develop'

letwebdev · Nov 30, 2023 · 0409274 · 0409274
2 parents 5201653 + e54f3f4
commit 0409274
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 50 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -39,7 +39,9 @@ const confirmLiveDataSetFetched = useFetchingDataStore().confirmLiveDataSetFetch
     </div>
   </header>
 
-  <RouterView />
+  <div class="view">
+    <RouterView />
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -87,11 +89,18 @@ nav {
 
   nav {
     text-align: left;
-    margin-left: -1rem;
     font-size: 1rem;
 
     padding: 1rem 0;
     margin-top: 1rem;
   }
 }
+@media (min-width: 2560px) {
+  nav {
+    margin-left: 200px;
+  }
+  div.view {
+    margin-left: 10%;
+  }
+}
 </style>
diff --git a/src/components/DataCharts.vue b/src/components/DataCharts.vue
@@ -9,7 +9,7 @@ import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/compo
 import type { EChartsOption } from "echarts"
 import VChart, { THEME_KEY } from "vue-echarts"
 
-import { ref, provide } from "vue"
+import { ref, provide, computed } from "vue"
 import type { Ref } from "vue"
 
 const itemTypesAndCounts = storeToRefs(useFetchingDataStore()).itemTypesAndCounts
@@ -19,7 +19,7 @@ const seriesData: object[] = []
 for (const [index, itemTypeAndCount] of itemTypesAndCounts.value.entries()) {
   const type: string = itemTypeAndCount.type
   legendData.push(type)
-  const count = itemTypesAndCounts.value[index].count
+  const count = computed(() => itemTypesAndCounts.value[index].count)
   seriesData.push({ value: count, name: type })
 }
 
@@ -65,5 +65,6 @@ const option: Ref<EChartsOption> = ref({
 <style scoped>
 .chart {
   height: 400px;
+  max-width: 600px;
 }
 </style>
diff --git a/src/components/SettingItems.vue b/src/components/SettingItems.vue
@@ -13,23 +13,22 @@ function reset() {
 }
 </script>
 <template>
-  <section>
-    <ul>
-      <template v-for="(property, item) in settings" :key="item">
-        <li>
-          {{ property.description }}:
-          <button v-if="typeof property.value === 'boolean'" @click="toggle(property)">
-            {{ property.value }}
-          </button>
-          <input v-else v-model="property.value" type="number" />
-        </li>
-      </template>
-    </ul>
-    <button @click="reset">Reset and reload current page</button>
-  </section>
+  <menu>
+    <template v-for="(property, item) in settings" :key="item">
+      <li>
+        {{ property.description }}:
+        <button v-if="typeof property.value === 'boolean'" @click="toggle(property)">
+          {{ property.value }}
+        </button>
+        <input v-else v-model="property.value" type="number" />
+      </li>
+    </template>
+  </menu>
+  <button @click="reset">Reset and reload current page</button>
 </template>
 <style scoped>
 button {
+  max-width: 350px;
   border-radius: 5px;
   &:hover {
     cursor: pointer;

diff --git a/src/stores/fetchData.ts b/src/stores/fetchData.ts
@@ -18,8 +18,8 @@ export const useFetchingDataStore = defineStore("fetchData", () => {
 
   const liveDataSet = coreData.liveDataSet
   const itemTypesAndCounts = ref([
-    { type: "job", count: 0 },
     { type: "story", count: 0 },
+    { type: "job", count: 0 },
     { type: "comment", count: 0 },
     { type: "poll", count: 0 },
     { type: "pollopt", count: 0 },

diff --git a/src/views/ChartsView.vue b/src/views/ChartsView.vue
@@ -13,10 +13,15 @@ import DataCharts from "@/components/DataCharts.vue"
 
 <style>
 @media (min-width: 1024px) {
-  .about {
-    margin-top: 10%;
+  .charts {
+    margin: 2% 0 0 2%;
     display: block;
     align-items: center;
   }
 }
+@media (min-width: 2560px) {
+  .charts {
+    margin-top: 4%;
+  }
+}
 </style>
diff --git a/src/views/HackerNewsView.vue b/src/views/HackerNewsView.vue
@@ -5,6 +5,7 @@ import ControlPanel from "@/components/ControlPanel.vue"
 import SettingItems from "@/components/SettingItems.vue"
 import NavigatingButtons from "@/components/NavigatingButtons.vue"
 import ItemPost from "@/components/ItemPost.vue"
+import DataCharts from "@/components/DataCharts.vue"
 import { useLocalStorage } from "@vueuse/core"
 
 import { useCoreDataStore } from "@/stores/coreData"
@@ -20,43 +21,48 @@ const foldSign = computed(() => (folded.value ? "  ∨  " : "  ∧  "))
 function fold() {
   folded.value = !folded.value
 }
+const isLargeScreen = computed(() => window.matchMedia("(min-width: 2560px)").matches)
 // TODO Be able to drag controlPanel
 </script>
 <template>
   <nav>
     <ControlPanel class="controlPanel" />
   </nav>
-  <main>
-    <section class="settings">
-      <h2>
-        <button @click="fold">
-          Settings <span>{{ foldSign }}</span>
-        </button>
-      </h2>
-      <SettingItems class="settingItems" v-show="!folded" />
-    </section>
-    <ItemPost class="itemPost" v-for="item in items" :key="item.id" :item="item" />
+  <div class="wrapper">
+    <main>
+      <section class="settings">
+        <h1>
+          <button @click="fold">
+            Settings <span>{{ foldSign }}</span>
+          </button>
+        </h1>
+        <SettingItems class="settingItems" v-show="!folded" />
+      </section>
+      <ItemPost class="itemPost" v-for="item in items" :key="item.id" :item="item" />
+      <div>
+        {{ promptOfFetching }}
+      </div>
+    </main>
     <div>
-      {{ promptOfFetching }}
+      <DataCharts class="chart" v-if="isLargeScreen" />
     </div>
-  </main>
+  </div>
+  <footer></footer>
   <NavigatingButtons />
 </template>
 <style lang="scss" scoped>
-@media (min-width: 1024px) {
-  main {
-    margin: 0 20% 10% 1%;
-  }
-  nav {
-    position: fixed;
-    right: 2%;
-  }
+nav section {
+  margin: auto auto;
+}
+footer {
+  padding-bottom: 30%;
 }
+
 .settings {
   display: flex;
   flex-flow: column;
-  margin-bottom: 1%;
-  h2 button {
+  margin: auto 5% 1% 4%;
+  h1 button {
     span {
       cursor: pointer;
     }
@@ -71,15 +77,27 @@ function fold() {
     }
   }
 }
-@media (max-width: 1024px) {
-  nav section {
-    margin: auto auto;
+@media (min-width: 1024px) {
+  nav {
+    position: fixed;
+    right: 2%;
+  }
+}
+@media (min-width: 2560px) {
+  nav {
+    top: 12%;
+    right: 12%;
   }
   main {
-    padding: 0 1% 30% 1%;
-    .settings {
-      margin: auto 4%;
-    }
+    margin-left: 2%;
+    width: 1000px;
+  }
+  div.wrapper {
+    display: flex;
+  }
+  .chart {
+    position: fixed;
+    top: 12%;
   }
 }
 </style>
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
@@ -4,6 +4,7 @@ import SettingItems from "@/components/SettingItems.vue"
 </script>
 <template>
   <main class="wrapper">
+    <h1>Settings</h1>
     <SettingItems />
   </main>
 </template>