Align buttons on watch page and user context dropdown on homepage (#1240

) - Alignment of "Select Theme" button on the watch page - Alignment of elements in "User Context" on the home page
TUM-Dev · Nov 20, 2023 · d29a949 · d29a949
1 parent bd63a53
commit d29a949
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/web/template/home.gohtml b/web/template/home.gohtml
@@ -84,7 +84,9 @@
                             {{if or (eq $user.Role 1) (eq $user.Role 2) }}
                                 <a href="/admin"
                                    class="tum-live-menu-item">
-                                    <i class="fa-solid fa-hammer mr-4"></i>
+                                    <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                        <i class="fa-solid fa-hammer mr-3"></i>
+                                    </div>
                                     <p>Admin</p>
                                 </a>
                                 <div class="border-b dark:border-gray-800"></div>
@@ -93,7 +95,9 @@
                                 <button type="button"
                                         class="tum-live-menu-item"
                                         @click="userContext.getChild('themePicker').toggle()">
-                                    <i class="fa-regular fa-moon mr-4"></i>
+                                    <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                        <i class="fa-regular fa-moon mr-3"></i>
+                                    </div>
                                     <span>Theme</span>
                                     <i class="fa-solid ml-auto"
                                        :class="userContext.getChild('themePicker').value ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
@@ -112,26 +116,34 @@
                             </div>
                             <a href="/settings"
                                class="tum-live-menu-item">
-                                <i class="fa-solid fa-gear mr-4"></i>
+                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                    <i class="fa-solid fa-gear mr-3"></i>
+                                </div>
                                 <p>Settings</p>
                             </a>
                             <div class="border-b dark:border-gray-800"></div>
                             <a href="https://github.com/TUM-Dev/gocast"
                                target="_blank"
                                class="tum-live-menu-item">
-                                <i class="fa-regular fa-comment mr-4"></i>
+                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                    <i class="fa-regular fa-comment mr-3"></i>
+                                </div>
                                 <p>Send Feedback</p>
                             </a>
                             <a href="https://github.com/TUM-Dev/gocast/issues/new?assignees=&labels=&template=bug_report.md&title="
                                class="tum-live-menu-item"
                                target="_blank">
-                                <i class="fa-brands fa-github mr-4"></i>
+                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                    <i class="fa-brands fa-github mr-3"></i>
+                                </div>
                                 <p>Report problem</p>
                             </a>
                             <div class="border-b dark:border-gray-800"></div>
                             <a href="/logout"
                                class="tum-live-menu-item">
-                                <i class="fa-solid fa-sign-out mr-4"></i>
+                                <div style="width: 30px; display: flex; justify-content: center; align-items: center;">
+                                    <i class="fa-solid fa-sign-out mr-3"></i>
+                                </div>
                                 <p>Logout</p>
                             </a>
                         </nav>

diff --git a/web/template/partial/info-dropdown.gohtml b/web/template/partial/info-dropdown.gohtml
@@ -1,5 +1,5 @@
 {{define "info-dropdown"}}
-    <div x-cloak x-data="{showInfoDropdown: false, show: false, mobile: false}" class="relative text-right md:mt-px">
+    <div x-cloak x-data="{showInfoDropdown: false, show: false, mobile: false}" class="relative text-right md:mt">
         <button title="Toggle Menu" @click="showInfoDropdown=true;"
                 class="transition-colors duration-200 hover:text-gray-600 dark:hover:text-white text-gray-400">
             <i class="fa fa-bars text-xl md:text-normal"></i>

diff --git a/web/template/partial/theme-selector.gohtml b/web/template/partial/theme-selector.gohtml
@@ -9,7 +9,7 @@
                  type="button"
                  @click="$store.theme.setMode(modeId); show=false;">
                 <div class="flex items-center" :class="mobile ? 'flex-row-reverse' : ''">
-                    <i class="fa-solid" :class="['fa-' + mode.faIconId, mobile ? 'ml-8' : 'mr-2']"></i>
+                    <i class="fa-solid w-4" :class="['fa-' + mode.faIconId, mobile ? 'ml-8' : 'mr-2']"></i>
                     <p x-text="mode.name" :class="mobile ? 'mr-2' : ''"></p>
                 </div>
             </button>
@@ -23,7 +23,8 @@
 
 {{define "theme-selector"}}
     <div class="relative" x-data="{ show: false, mobile: false }">
-        <button title="Select Theme" class="transition-colors duration-200 hover:text-gray-600
+        <button title="Select Theme" class="absolute top-1/2 transform -translate-y-1/2
+                        transition-colors duration-200 hover:text-gray-600
                        dark:hover:text-white text-gray-400 mr-6 relative w-4"
                 type="button" @click="show=!show">
             {{template "theme-switcher-icon"}}