upload path

back/api/models.py

@@ -6,16 +6,16 @@ class Product(models.Model):
     title = models.CharField(max_length=100)
     description = models.TextField(default=None, null=True)
     model3d = models.FileField(
-        default=None, blank=True, null=True, upload_to="back/files"
+        default=None, blank=True, null=True, upload_to="files"
     )
     image1 = models.ImageField(
-        default=None, blank=True, null=True, upload_to="back/files"
+        default=None, blank=True, null=True, upload_to="files"
     )
     image2 = models.ImageField(
-        default=None, blank=True, null=True, upload_to="back/files"
+        default=None, blank=True, null=True, upload_to="files"
     )
     image3 = models.ImageField(
-        default=None, blank=True, null=True, upload_to="back/files"
+        default=None, blank=True, null=True, upload_to="files"
     )
 
     def __str__(self):

front/.env.development

@@ -1 +1,2 @@
 VITE_SERVER_URL='http://localhost:8000'
+VITE_IMAGE_URL='https://demo.kustarshina.ru'

front/src/App.vue

@@ -3,7 +3,8 @@ import { onMounted, reactive } from 'vue';
 import { ModelFbx } from 'vue-3d-model';
 import { useProductStore } from './stores/product';
 import type { ProductInfo } from './stores/product';
-import { SERVER_URL } from './constants'
+
+const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? ''
 
 type StateType = {
   active_product?: ProductInfo
@@ -27,7 +28,7 @@ onMounted(async () => {
 <template>
   <div class="container">
     <div class="sidebar">
-      <ul>
+      <ul class="menu">
         <li v-for="item in products.list">
           <a @click.stop.prevent="setActive(item.id)" :href="item.id.toString()">
             {{ item.title }}
@@ -35,18 +36,19 @@ onMounted(async () => {
         </li>
       </ul>
     </div>
-    <div class="header">Проекты Кустарщины</div>
+    <div class="header"><span class="logo-header">Проекты Кустарщины</span></div>
-    <div class="product">
+    <div class="main product" v-if="state.active_product">
-      <div v-if="state.active_product">
       <model-fbx v-if="state.active_product.model3d" class="product-model"
-          :src="`${SERVER_URL}/${state.active_product.model3d.replace('/back', '')}`"></model-fbx>
+        :src="`${IMAGE_URL}/${state.active_product.model3d.replace('/back', '')}`"></model-fbx>
-        <div class="model-image" v-if="state.active_product.image1">
+      <div class="product-image" v-if="state.active_product.image1">
-          <img :src="state.active_product.image1" />
+        <img :src="`${IMAGE_URL}${state.active_product.image1}`" />
       </div>
       <div class="product-description">
         {{ state.active_product.description }}
       </div>
     </div>
+    <div class="main" v-else>
+      <img class="logo-img" src="./assets/logo.png" />
     </div>
   </div>
 </template>

front/src/assets/main.scss

@@ -1,28 +1,103 @@
 @import '../../node_modules/reset-css/sass/reset';
+
+$accentColor: #ef570c;
+
 body {
-  // background-color: red;
+  font-family: 'main';
+}
+
+@font-face {
+  font-family: 'logo';
+  src: url('../fonts/logo.ttf');
+}
+
+@font-face {
+  font-family: 'main';
+  src: url('../fonts/main.otf');
 }
 
 .container {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: 16rem 1fr;
-  grid-template-rows: repeat(5, 1fr);
+  grid-template-rows: 4rem 1fr;
-  grid-column-gap: 0px;
+  gap: 0px 0px;
-  grid-row-gap: 0px;
+  grid-template-areas:
+    "header header"
+    "sidebar content";
+
+  min-height: 100vh;
+  padding: 0 2rem;
 }
 
 .sidebar {
-  grid-area: 1 / 1 / 6 / 2;
+  grid-area: sidebar;
 }
 
 .header {
-  grid-area: 1 / 2 / 2 / 6;
+  grid-area: header;
+  justify-content: center;
 }
 
 .main {
-  grid-area: 2 / 2 / 6 / 6;
+  grid-area: content;
+}
+
+.main,
+.header,
+.sidebar {
+  display: flex;
+  align-items: center;
+}
+
+.menu {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+
+  li {
+    padding: 0.5rem 0;
+
+    a {
+      text-decoration: none;
+
+      &,
+      &:hover,
+      &:active,
+      &:visited {
+        color: $accentColor;
+      }
+    }
+  }
 }
 
 .model {
   max-width: 33vw;
 }
+
+.product {
+  gap: 1rem;
+
+  &-image {
+    flex-basis: 50%;
+    flex-shrink: 0;
+  }
+}
+
+.logo {
+  &-header {
+    font-family: 'logo';
+    font-size: 3rem;
+  }
+
+  &-img {
+    width: 54%;
+    display: block;
+    margin: auto;
+  }
+}
+
+img {
+  max-width: 100%;
+}