Skip to content

Commit 8a8adfe

Browse files
mateofmateof
committed
chore: improve js and css
1 parent 1c7dd4b commit 8a8adfe

3 files changed

Lines changed: 85 additions & 34 deletions

File tree

‎TelegramDownloader/Pages/_Layout.cshtml‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1010
<base href="~/" />
1111

12-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
12+
<link href="css/bootstrap5/bootstrap.min.css" rel="stylesheet" />
1313
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
1414
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
1515

@@ -21,8 +21,7 @@
2121
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
2222
<link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
2323

24-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
25-
24+
2625
</head>
2726
<body>
2827

@@ -43,7 +42,7 @@
4342
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/intlTelInput.min.js"></script>
4443
<script src="js/phonecodes.js"></script>
4544
<script src="_framework/blazor.server.js"></script>
46-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
45+
<script src="js/bootstrap5/bootstrap.bundle.min.js"></script>
4746
<!-- Add chart.js reference if chart components are used in your application. -->
4847
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4948
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
@@ -53,8 +52,6 @@
5352
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
5453
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
5554
@* <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> *@
56-
<script src="js/bootstrap5/popper.min.js"></script>
57-
5855
<script src="js/bshelp.js"></script>
5956
<script src="https://vjs.zencdn.net/8.16.1/video.min.js"></script>
6057

‎TelegramDownloader/Shared/NavMenu.razor‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,6 @@
1010
@inject ITelegramService ts;
1111
@inject IJSRuntime JS;
1212

13-
<style>
14-
@@media (max-width: 1024px), (orientation: portrait) {
15-
.collapse.navbar-collapse {
16-
display: none !important;
17-
}
18-
19-
.collapse.navbar-collapse.show {
20-
display: block !important;
21-
}
22-
}
23-
</style>
2413

2514
<div class="navbar navbar-dark bg-dark top-row ps-3 navbar-expand-xl">
2615
<div class="container-fluid">
@@ -257,7 +246,7 @@
257246
private bool showSearch = false;
258247
private ElementReference searchInput;
259248

260-
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
249+
private string NavMenuCssClass => collapseNavMenu ? "collapse" : "collapse show";
261250

262251
private void ToggleNavMenu()
263252
{

‎TelegramDownloader/Shared/NavMenu.razor.css‎

Lines changed: 81 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -50,25 +50,90 @@
5050
color: white;
5151
}
5252

53-
@media (min-width: 2048px) {
54-
.navbar-toggler {
55-
display: none;
56-
}
57-
58-
.collapse {
59-
/* Never collapse the sidebar for wide screens */
60-
display: block;
61-
}
62-
}
63-
6453
.menu {
6554
overflow-y: auto;
6655
height: 94vh;
6756
overflow-x: hidden;
6857
}
6958

70-
@media (min-width: 768px) and (max-width: 2048px) {
71-
.navbar-toggler {
72-
display: block !important; /* mostrar botón hamburguesa */
73-
}
74-
}
59+
/* Toolbar buttons - full width */
60+
.groupbtnclass {
61+
display: flex;
62+
width: 100%;
63+
padding: 0.5rem;
64+
}
65+
66+
.groupbtnclass .btn {
67+
flex: 1;
68+
}
69+
70+
/* Always show navbar-toggler and allow collapse on all screen sizes */
71+
.navbar-toggler {
72+
display: block !important;
73+
}
74+
75+
/* Collapse behavior - works on all screen sizes */
76+
.collapse:not(.show) {
77+
display: none !important;
78+
}
79+
80+
.collapse.show {
81+
display: block !important;
82+
}
83+
84+
/* Row alignment for channel items */
85+
.row {
86+
display: flex;
87+
align-items: center;
88+
margin: 0;
89+
padding: 0.25rem 0;
90+
}
91+
92+
.col-1 {
93+
flex: 0 0 auto;
94+
width: 2rem;
95+
display: flex;
96+
align-items: center;
97+
justify-content: center;
98+
}
99+
100+
.col-9 {
101+
flex: 1;
102+
min-width: 0;
103+
overflow: hidden;
104+
}
105+
106+
.col-2 {
107+
flex: 0 0 auto;
108+
width: auto;
109+
display: flex;
110+
align-items: center;
111+
gap: 0.25rem;
112+
}
113+
114+
/* Star icon styling */
115+
.bi-star, .bi-star-fill {
116+
font-size: 0.9rem;
117+
}
118+
119+
.bi-star-fill {
120+
color: #ffc107 !important;
121+
}
122+
123+
/* Scrollbar styling */
124+
.menu::-webkit-scrollbar {
125+
width: 6px;
126+
}
127+
128+
.menu::-webkit-scrollbar-track {
129+
background: rgba(255, 255, 255, 0.05);
130+
}
131+
132+
.menu::-webkit-scrollbar-thumb {
133+
background: rgba(255, 255, 255, 0.2);
134+
border-radius: 3px;
135+
}
136+
137+
.menu::-webkit-scrollbar-thumb:hover {
138+
background: rgba(255, 255, 255, 0.3);
139+
}

0 commit comments

Comments
 (0)