feat: update app layout & contact form

NStar-1 · Dec 27, 2023 · 6e2fe9f · 6e2fe9f
1 parent 08cd4e7
commit 6e2fe9f
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 56 deletions.
diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json
@@ -105,7 +105,8 @@
     "name": "Your Full Name",
     "email": "Your Email Address",
     "message": "Message",
-    "button": "Send"
+    "button": "Send",
+    "ways": "You can use following ways to contact us"
   },
   "results": {
     "inputData": "Input data",

diff --git a/src/lib/locales/ru.json b/src/lib/locales/ru.json
@@ -105,7 +105,8 @@
     "name": "Ваше полное имя",
     "email": "Ваш email",
     "message": "Сообщение",
-    "button": "Отправить"
+    "button": "Отправить",
+    "ways": "Вы можете использовать следующие способы для связи"
   },
   "results": {
     "inputData": "Исходные данные",

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores'
+  import { page } from "$app/stores";
   import { _ } from "svelte-i18n";
   import { onMount } from "svelte";
   import { isPhone } from "$lib/store";
@@ -21,48 +21,52 @@
         <slot />
       </div>
       <div class="ContentPage adv">
-        <ins class="adsbygoogle"
-            style="display:block"
-            data-ad-client="ca-pub-1770200227566265"
-            data-ad-slot="1770200227566265"
-            data-ad-format="auto"
-            data-full-width-responsive="true"></ins>
+        <ins
+          class="adsbygoogle"
+          style="display:block"
+          data-ad-client="ca-pub-1770200227566265"
+          data-ad-slot="1770200227566265"
+          data-ad-format="auto"
+          data-full-width-responsive="true"
+        />
       </div>
     </div>
   </div>
   <div class="adv bottom">
-    <ins class="adsbygoogle"
-        style="display:block"
-        data-ad-client="ca-pub-1770200227566265"
-        data-ad-slot="1770200227566265"
-        data-ad-format="auto"
-        data-full-width-responsive="true"></ins>
+    <ins
+      class="adsbygoogle"
+      style="display:block"
+      data-ad-client="ca-pub-1770200227566265"
+      data-ad-slot="1770200227566265"
+      data-ad-format="auto"
+      data-full-width-responsive="true"
+    />
   </div>
   <Footer />
 </div>
 
 <style>
-  .AppWrapper{
+  .AppWrapper {
     display: flex;
     height: 100%;
     min-height: 100vh;
     flex-direction: column;
     justify-content: space-between;
-
   }
   .ContentPage {
     box-sizing: border-box;
+    flex-grow: 1;
     padding: 30px;
+    margin-left: 1rem;
     border-radius: 5px;
-    width: 70%;
     box-shadow: 0 0 10px rgba(153, 153, 153, 0.28);
   }
   .adv {
-    width: 10%;
+    flex: 20rem 0 1;
     height: fit-content;
     box-shadow: none;
   }
-  .bottom{
+  .bottom {
     display: flex;
     width: auto;
     height: 215px;
@@ -86,15 +90,16 @@
       width: 100%;
       height: auto;
     }
-  
+
     .adv {
       display: none;
     }
-    .bottom{
+    .bottom {
       display: flex;
     }
 
     .ContentPage {
+      margin-left: 0;
       width: 100%;
       height: 100%;
       padding: 3px;

diff --git a/src/routes/App.svelte b/src/routes/App.svelte
@@ -12,22 +12,22 @@
 
 <h1>{$_("app.title")}</h1>
 <div class="CalculatorWrapper">
-    <div class="OptionsWrapper">
-      <Options />
-    </div>
-    <div class="PictureWrapper">
-      <Graph />
-    </div>
+  <div class="OptionsWrapper">
+    <Options />
+  </div>
+  <div class="PictureWrapper">
+    <Graph />
+  </div>
 </div>
 
 <style>
   .CalculatorWrapper {
     border: #ff8d48 1px solid;
-    margin-top: 20px;
+    margin-top: 1rem;
     display: flex;
     flex-direction: row;
-    column-gap: 2%;
-    padding: 2%;
+    column-gap: 1rem;
+    padding: 1rem;
     justify-content: space-between;
   }
 
@@ -37,11 +37,13 @@
     min-width: 30%;
     overflow-y: scroll;
   }
+
   .PictureWrapper {
     width: 70%;
     height: content-box;
     border: #ff8d48 1px solid;
   }
+
   @media (max-width: 480px) {
     .CalculatorWrapper {
       border: none;

diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
@@ -1,35 +1,38 @@
 <script>
-    import Button from "@smui/button/src/Button.svelte";
-    import Textfield from "@smui/textfield";
-    import {_} from "svelte-i18n"
+  import Button from "@smui/button/src/Button.svelte";
+  import Textfield from "@smui/textfield";
+  import { _ } from "svelte-i18n";
 
-    let name = ''
+  let name = "";
 </script>
 
 <div class="contact-wrapper">
-    <h2>{$_('contact.title')}</h2>
+  <h2>{$_("contact.title")}</h2>
+  {$_("contact.ways")}:
+  <ul>
+    <li><a href="mailto:[email protected]">[email protected]</a></li>
+    <li><a href="https://github.com/NStar-1/beam-calculator">GitHub</a></li>
+    <li>Telegram: @qhc9j4HyQJVf40bARaHozD4zUc</li>
+  </ul>
+  <!--<div>
     <div>
-        <div>
-            <p>{$_('contact.name')}</p>
-            <Textfield
-                bind:value={name}
-                variant="outlined"
-                required
-
-            />
-        </div>
+      <p>{$_("contact.name")}</p>
+      <Textfield bind:value={name} variant="outlined" required />
     </div>
-    <Button variant="raised">{$_('contact.button')}</Button>
+  </div>
+  <Button variant="raised">{$_("contact.button")}</Button>-->
 </div>
 
-<style>
-    .contact-wrapper{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        row-gap: 24px;
-        & button{
-            align-self: flex-end;
-        }
+<style lang="scss">
+  .contact-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    button {
+      align-self: flex-end;
     }
-</style>
+    li {
+      line-height: 1.25rem;
+    }
+  }
+</style>