Skip to content

Commit

Permalink
Align buttons on watch page and user context dropdown on homepage (#1240
Browse files Browse the repository at this point in the history
)

- Alignment of "Select Theme" button on the watch page
- Alignment of elements in "User Context" on the home page
  • Loading branch information
YiranDuan721 authored Nov 20, 2023
1 parent bd63a53 commit d29a949
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 9 deletions.
24 changes: 18 additions & 6 deletions web/template/home.gohtml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion web/template/partial/info-dropdown.gohtml
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
5 changes: 3 additions & 2 deletions web/template/partial/theme-selector.gohtml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"}}
Expand Down

0 comments on commit d29a949

Please sign in to comment.