Version 1.0.0 - Ajout du design et début search bar

src/views/Interface.vue

@@ -1,8 +1,10 @@
 <template>
     <SocketEnvironment>
         <div class="container">
-             <GuildHeader/>
-                <Box>
+            <Search class="search"/>
+            <div class="left-side">
+                <GuildHeader class="guildheader"/>
+                <Box class="playlist">
                     <Button @click="router.push('/servers')">Choisir un serveur</Button>
                     <Button @click="router.push('/terms')">Terms</Button>
                     <Button @click="router.push('/privacy')">Privacy</Button>
@@ -10,8 +12,11 @@
                     <Button @click="globalStore.toogleTheme()">Changer le thème</Button>
                     <p>{{ guildId }}</p>
                 </Box>
-                <Search/>
-                <Account/>
+                <Account class="account"/>
+            </div>
+            <div class="queue"></div>
+            <View class="view"></View>
+            <div class="player"></div>
         </div>
     </SocketEnvironment>
 </template>
@@ -29,6 +34,7 @@ import Account from '@/components/Layout/Account.vue';
 import events from '@/utils/Events.js';
 import GuildHeader from '@/components/Layout/GuildHeader.vue';
 import Search from '@/components/Layout/Search.vue';
+import View from '@/components/Layout/View.vue';
 
 const props = defineProps({
     guildId: {
@@ -98,11 +104,105 @@ function checkGuildAvailability() {
 </script>
 <style scoped>  
 
-.container {
-    padding: 15px;;;
-    max-width: 400px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
+@media screen and (max-width: 768px), screen and (max-height: 607px) {
+    .container {
+        display: flex;
+        gap: 15px;
+        flex-direction: column;
+    }
+  
+    .left-side {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .guildheader {
+        order: 0;
+    }
+
+    .account {
+        order: 1;
+    }
+
+    .playlist {
+        order: 2;
+    }
+
 }
+
+@media screen and (min-width: 769px) and (max-width: 1280px) and (min-height: 607px) {
+    .queue {
+        display: none
+    }
+    
+    .container {
+        display: grid;
+        grid-template-columns: 0.8fr repeat(2, 1fr);
+        grid-template-rows: 0.1fr repeat(2, 1fr) 0.5fr;
+        grid-column-gap: 15px;
+        grid-row-gap: 15px;
+
+    }
+
+    .left-side { grid-area: 1 / 1 / 5 / 2; }
+    .player { grid-area: 4 / 2 / 5 / 4; }
+    .search { grid-area: 1 / 2 / 2 / 4; }
+    .view { grid-area: 2 / 2 / 4 / 4; }
+    
+    .left-side {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        height: 100%;
+    }
+
+    .playlist {
+        flex: 1;
+    }
+      
+}
+
+@media screen and (min-width: 1281px) {
+    .container {
+        display: grid;
+        grid-template-columns: 0.7fr repeat(2, 1fr) 0.8fr;
+        grid-template-rows: 0.1fr repeat(2, 1fr) 0.5fr;
+        grid-column-gap: 15px;
+        grid-row-gap: 15px;
+    }
+
+    .left-side { grid-area: 1 / 1 / 5 / 2; }
+    .player { grid-area: 4 / 2 / 5 / 4; }
+    .search { grid-area: 1 / 2 / 2 / 4; }
+    .queue { grid-area: 1 / 4 / 5 / 5; }
+    .view { grid-area: 2 / 2 / 4 / 4; }
+
+    .left-side {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        height: 100%;
+    }
+
+    .playlist {
+        flex: 1;
+    }
+        
+}
+
+
+
+.container {
+    padding: 15px;
+    width: 100%;
+}
+
+.queue, .view, .player {
+    background-color: var(--secondary);
+    border-radius: 10px;
+}
+
+
+
 </style>