Skip to content

Commit

Permalink
1306 usercontext menu inconsistent padding (#1309)
Browse files Browse the repository at this point in the history 
* Align padding of header and items in tum-live-menu (fix #1306)

* Minor changes to tum-live-menu ui

* menu item: Reduce margin-right, so that the icons don't extend beyond the left boundary of the region

* Revert "menu item: Reduce margin-right, so that the icons don't extend beyond the left boundary of the region"

This reverts commit 94fe9f0.

* menu item: Reduce margin-right, so that the icons don't extend beyond the left boundary of the region

* menu item: Make the icons vertically aligned in the center
  • Loading branch information
@YiranDuan721
YiranDuan721 authored Jan 23, 2024
1 parent a0d815f commit e9e4108
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 14 deletions.
9 changes: 8 additions & 1 deletion web/assets/css/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,13 +218,20 @@
}

.tum-live-menu .tum-live-menu-item {
@apply flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-800 my-2 w-full
@apply flex items-center py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 my-2 w-full
}

.tum-live-menu .tum-live-menu-item.active {
@apply bg-gray-100 dark:bg-gray-800
}

.tum-live-menu .tum-live-menu-item .icon-wrapper {
width: 18px;
display: flex;
justify-content: center;
align-items: center;
}


.tum-live-course-list > header {
@apply flex items-center justify-between mb-8
Expand Down
26 changes: 13 additions & 13 deletions web/template/home.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,8 @@
{{if or (eq $user.Role 1) (eq $user.Role 2) }}
<a href="/admin"
class="tum-live-menu-item">
<div style="width: 30px; display: flex; justify-content: center; align-items: center;">
<i class="fa-solid fa-hammer mr-3"></i>
<div class="icon-wrapper mr-2">
<i class="fa-solid fa-hammer"></i>
</div>
<p>Admin</p>
</a>
Expand All @@ -95,8 +95,8 @@
<button type="button"
class="tum-live-menu-item"
@click="userContext.getChild('themePicker').toggle()">
<div style="width: 30px; display: flex; justify-content: center; align-items: center;">
<i class="fa-regular fa-moon mr-3"></i>
<div class="icon-wrapper mr-2">
<i class="fa-regular fa-moon"></i>
</div>
<span>Theme</span>
<i class="fa-solid ml-auto"
Expand All @@ -106,7 +106,7 @@
<template x-for="[modeId, mode] of Object.entries($store.theme.modes)"
:key="modeId">
<button type="button" tabindex="0"
class="text-left hover:bg-gray-100 dark:hover:bg-gray-800 py-2 px-4"
class="text-left hover:bg-gray-100 dark:hover:bg-gray-800 py-1 px-10"
:class="{'bg-gray-100 dark:bg-gray-800': modeId === $store.theme.activeTheme}"
@click="$store.theme.setTheme(modeId)"
x-text="mode.name">
Expand All @@ -116,33 +116,33 @@
</div>
<a href="/settings"
class="tum-live-menu-item">
<div style="width: 30px; display: flex; justify-content: center; align-items: center;">
<i class="fa-solid fa-gear mr-3"></i>
<div class="icon-wrapper mr-2">
<i class="fa-solid fa-gear"></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">
<div style="width: 30px; display: flex; justify-content: center; align-items: center;">
<i class="fa-regular fa-comment mr-3"></i>
<div class="icon-wrapper mr-2">
<i class="fa-regular fa-comment"></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">
<div style="width: 30px; display: flex; justify-content: center; align-items: center;">
<i class="fa-brands fa-github mr-3"></i>
<div class="icon-wrapper mr-2">
<i class="fa-brands fa-github"></i>
</div>
<p>Report problem</p>
</a>
<div class="border-b dark:border-gray-800"></div>
<a href="/logout"
class="tum-live-menu-item">
<div style="width: 30px; display: flex; justify-content: center; align-items: center;">
<i class="fa-solid fa-sign-out mr-3"></i>
<div class="icon-wrapper mr-2">
<i class="fa-solid fa-sign-out"></i>
</div>
<p>Logout</p>
</a>
Expand Down

0 comments on commit e9e4108

Please sign in to comment.