paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Use class_name for .client-logos div.

Browse Source 
Having the `div` selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
We've introduced a new class called `.client-logos-div`.
In `hello.ts` we just manually append the name of this new class for the
logo changing logic since that felt more readable than adding the class
programmatically.

(cherry picked from commit 996a091bd9)
This commit is contained in:
Shubham Padia
2024-07-29 09:31:10 +00:00
committed by Tim Abbott
parent 614dca46b4
commit 7ec93b920c
3 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
templates/corporate/hello.html
View File

@@ -68,12 +68,12 @@
</div>
</div>
<div class="client-logos">
<div class='client-logos__logo_akamai'></div>
<div class='client-logos__logo_tum'></div>
<div class='client-logos__logo_wikimedia'></div>
<div class='client-logos__logo_rust'></div>
<div class='client-logos__logo_dr_on_demand'></div>
<div class='client-logos__logo_maria'></div>
<div class='client-logos-div client-logos__logo_akamai'></div>
<div class='client-logos-div client-logos__logo_tum'></div>
<div class='client-logos-div client-logos__logo_wikimedia'></div>
<div class='client-logos-div client-logos__logo_rust'></div>
<div class='client-logos-div client-logos__logo_dr_on_demand'></div>
<div class='client-logos-div client-logos__logo_maria'></div>
</div>
</div>
<div class="screen-2">

32
web/src/portico/hello.ts
View File

@@ -12,30 +12,32 @@ function get_random_item_from_array<T>(array: T[]): T {
}
const current_client_logo_class_names = new Set([
"client-logos__logo_akamai",
"client-logos__logo_tum",
"client-logos__logo_wikimedia",
"client-logos__logo_rust",
"client-logos__logo_dr_on_demand",
"client-logos__logo_maria",
"client-logos-div client-logos__logo_akamai",
"client-logos-div client-logos__logo_tum",
"client-logos-div client-logos__logo_wikimedia",
"client-logos-div client-logos__logo_rust",
"client-logos-div client-logos__logo_dr_on_demand",
"client-logos-div client-logos__logo_maria",
]);
const future_client_logo_class_names = new Set([
"client-logos__logo_pilot",
"client-logos__logo_recurse",
"client-logos__logo_level_up",
"client-logos-div client-logos__logo_pilot",
"client-logos-div client-logos__logo_recurse",
"client-logos-div client-logos__logo_level_up",
"client-logos__logo_layershift",
"client-logos__logo_julia",
"client-logos__logo_ucsd",
"client-logos__logo_lean",
"client-logos__logo_asciidoc",
"client-logos-div client-logos__logo_layershift",
"client-logos-div client-logos__logo_julia",
"client-logos-div client-logos__logo_ucsd",
"client-logos-div client-logos__logo_lean",
"client-logos-div client-logos__logo_asciidoc",
]);
let current_client_logo_class_names_index = 0;
function update_client_logo(): void {
if (document.hidden) {
return;
}
const client_logos = [...document.querySelectorAll("[class^='client-logos__']")];
const client_logos = [
...document.querySelectorAll("[class^='client-logos-div client-logos__']"),
];
current_client_logo_class_names_index = get_new_rand(
current_client_logo_class_names_index,
client_logos.length,

4
web/styles/portico/hello.css
View File

@@ -197,7 +197,7 @@ ul {
place-items: center;
}
.client-logos div {
.client-logos-div {
transition: all 0.7s ease-out;
background-position: center;
}
@@ -679,7 +679,7 @@ ul {
background: hsl(238deg 28% 21%);
}
.client-logos div {
.client-logos-div {
opacity: 0.7;
}
}