From 202ea61d33a047b719b55a2f267c9409bb46724b Mon Sep 17 00:00:00 2001
From: O3H <owen77stubbs@gmail.com>
Date: Mon, 7 Oct 2024 00:10:24 +0100
Subject: [PATCH] desc

- Invisible topbar to allow dragging.
- Size down the sidebar icon and slightly reduce width.
- Restricted app width slightly but reduce min height.
- Remove useless ButtonGroup that wrapped the control buttons.
---
 frontend/src/App.vue                          | 14 +++++-
 .../src/components/general/ControlButtons.vue | 19 +++----
 frontend/src/components/general/Sidebar.vue   | 49 +++++--------------
 frontend/src/views/Dashboard.vue              |  2 +-
 frontend/src/views/GameSelection.vue          |  5 +-
 frontend/src/views/ModDevTools.vue            |  2 +-
 frontend/src/views/SelectedGame.vue           |  2 +-
 main.go                                       |  4 +-
 8 files changed, 39 insertions(+), 58 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7084480..822408f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -28,8 +28,10 @@ onMounted(async () => {
 </script>
 
 <template>
-<ControlButtons/>
-  
+<div class="topbar drag">
+    <ControlButtons/>
+</div>
+
 <div class="app-container">
     <Sidebar/>
 
@@ -41,6 +43,14 @@ onMounted(async () => {
 </template>
 
 <style>
+.topbar {
+    position: fixed;
+    display: flex;
+    justify-content: end;
+    z-index: 0;
+    width: 100%;
+}
+
 .app-container {
     display: flex;
 }
diff --git a/frontend/src/components/general/ControlButtons.vue b/frontend/src/components/general/ControlButtons.vue
index 1b7aeaf..92265b0 100644
--- a/frontend/src/components/general/ControlButtons.vue
+++ b/frontend/src/components/general/ControlButtons.vue
@@ -7,8 +7,6 @@ import {
     WindowIsMaximised,
 } from '@runtime'
 
-import ButtonGroup from 'primevue/buttongroup'
-
 let windowMaximised: boolean
 
 const CustomMinimise = async () => {
@@ -21,25 +19,22 @@ const CustomMinimise = async () => {
 </script>
 
 <template>
-<div class="control-buttons no-drag">
-    <ButtonGroup>
-        <Button text icon="pi pi-minus" @click="WindowMinimise"/>
-        <Button text :icon="`pi ${windowMaximised ? 'pi-minimise' : 'pi-expand'}`" @click="CustomMinimise"/>
-        <Button text icon="pi pi-times" @click="Quit"/>
-    </ButtonGroup>
+<div class="control-buttons no-drag gap-2">
+    <Button text icon="pi pi-minus" @click="WindowMinimise"/>
+    <Button text :icon="`pi ${windowMaximised ? 'pi-minimise' : 'pi-expand'}`" @click="CustomMinimise"/>
+    <Button text icon="pi pi-times" @click="Quit"/>
 </div>
 </template>
 
 <style scoped>
 .control-buttons {
-    margin-top: 4px;
-    margin-right: 4px;
     z-index: 9999;
-    position: fixed;
     top: 0;
     right: 0;
     display: flex;
     align-items: center;
+    margin-right: 5px;
+    margin-top: 2px;
     /* border-left: rgba(211, 211, 211, 0.823) 1px solid; */
     /* border-bottom: rgba(211, 211, 211, 0.823) 1px solid; */
     /* border-bottom-left-radius: 5px; */
@@ -53,7 +48,7 @@ const CustomMinimise = async () => {
 .control-buttons .p-button {
     cursor: pointer;
     color: rgba(201, 201, 201, 0.905);
-    width: 40px;
+    width: 30px;
 }
 
 .control-buttons :hover {
diff --git a/frontend/src/components/general/Sidebar.vue b/frontend/src/components/general/Sidebar.vue
index 8200d5c..6e48f0f 100644
--- a/frontend/src/components/general/Sidebar.vue
+++ b/frontend/src/components/general/Sidebar.vue
@@ -14,7 +14,7 @@ const ModDevTools = () => router.push('/mod-dev-tools')
 </script>
 
 <template>
-<div class="sidebar">
+<div class="sidebar drag">
     <img class="icon no-select" src="../../assets/images/appicon.png">
 
     <div class="flex column h-full">
@@ -80,40 +80,26 @@ const ModDevTools = () => router.push('/mod-dev-tools')
     position: fixed;
     z-index: 999;
     height: 100vh;
-    width: 80px;
-    border-right: rgba(231, 231, 231, 0.885) 1px outset;
+    width: 75px;
+    border-right: rgba(255, 255, 255, 0.45) 1px outset;
     background-color: rgb(28, 29, 33);
     padding-left: 15px;
     padding-right: 15px;
 }
 
-.btn {
-    position: relative;
-    border-radius: 3px;
-    border: 1px solid rgba(255, 255, 255, 0.35);
-}
-
 .sidebar img {
     margin: 15px 0px 20px 0px;
 }
 
 .icon {
-    width: 55px;
-    height: 64px;
-}
-
-.top .p-button {
-    margin-bottom: 10px;
-}
-
-.bottom .p-button {
-    margin-top: 10px;
+    width: 50px;
+    height: 58px;
 }
 
 .btn {
     position: relative;
     border-radius: 3px;
-    border: 1px solid rgba(255, 255, 255, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .btn-no-outline {
@@ -122,22 +108,6 @@ const ModDevTools = () => router.push('/mod-dev-tools')
     border: none;
 }
 
-/*.plain-btn {
-    color: rgba(218, 218, 218, 0.921);
-    background-color: #18181bcd;
-    border: solid rgba(139, 139, 139, 0.712) 1px;
-    border-radius: 3px;
-}*/
-
-.sidebar img {
-    margin: 15px 0px 20px 0px;
-}
-
-.icon {
-    width: 55px;
-    height: 64px;
-}
-
 .top .p-button {
     margin-bottom: 10px;
 }
@@ -146,6 +116,13 @@ const ModDevTools = () => router.push('/mod-dev-tools')
     margin-top: 10px;
 }
 
+/*.plain-btn {
+    color: rgba(218, 218, 218, 0.921);
+    background-color: #18181bcd;
+    border: solid rgba(139, 139, 139, 0.712) 1px;
+    border-radius: 3px;
+}*/
+
 .spacer {
     flex: 1;
 }
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 07be13c..1a40fb2 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -59,7 +59,7 @@ async function PackagesByUser() {
 <!-- #region Style -->
 <style scoped>
 .dashboard {
-    margin-left: 80px; /* Account for sidebar */
+    margin-left: 75px; /* Account for sidebar */
     position: relative;
     text-align: center;
     user-select: none;
diff --git a/frontend/src/views/GameSelection.vue b/frontend/src/views/GameSelection.vue
index 5777fbb..295ee33 100644
--- a/frontend/src/views/GameSelection.vue
+++ b/frontend/src/views/GameSelection.vue
@@ -207,8 +207,7 @@ onMounted(async () => {
                 <template #header>
                     <div class="flex flex-row justify-content-between align-items-center">
                         <div>
-                            <Dropdown 
-                                checkmark
+                            <Dropdown checkmark
                                 class="no-drag filter-dropdown"
                                 :options="filters"
                                 v-model="selectedFilter"
@@ -361,7 +360,7 @@ onMounted(async () => {
 <style scoped>
 .game-selection {
     padding-top: 0px;
-    margin-left: 80px; /* Account for sidebar */
+    margin-left: 75px; /* Account for sidebar */
 }
 
 .game-selection .header {
diff --git a/frontend/src/views/ModDevTools.vue b/frontend/src/views/ModDevTools.vue
index 9e8b8e8..9393699 100644
--- a/frontend/src/views/ModDevTools.vue
+++ b/frontend/src/views/ModDevTools.vue
@@ -62,7 +62,7 @@ const items = ref([{
 
 <style scoped>
 .mod-dev-tools {
-    margin-left: 80px; /* Account for sidebar */
+    margin-left: 75px; /* Account for sidebar */
     top: 350px;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/SelectedGame.vue b/frontend/src/views/SelectedGame.vue
index ba5ba96..88ed84d 100644
--- a/frontend/src/views/SelectedGame.vue
+++ b/frontend/src/views/SelectedGame.vue
@@ -367,7 +367,7 @@ const installMod = async (fullName: string) => {
 .selected-game {
     display: flex;
     flex-direction: column;
-    margin-left: 80px; /* Account for sidebar */
+    margin-left: 75px; /* Account for sidebar */
     margin-top: 30px;
 }
 
diff --git a/main.go b/main.go
index 22a5b72..5b2f109 100644
--- a/main.go
+++ b/main.go
@@ -79,8 +79,8 @@ func main() {
 		Title:     "modm8",
 		Width:     int(modm8.Persistence.Window.Width),
 		Height:    int(modm8.Persistence.Window.Height),
-		MinWidth:  800,
-		MinHeight: 600,
+		MinWidth:  850,
+		MinHeight: 500,
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},