Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Use class_name for .client-logos div. 

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.
This commit is contained in:
Shubham Padia 2024-07-29 09:31:10 +00:00 committed by Tim Abbott
parent f0e484ea07
commit 996a091bd9
3 changed files with 25 additions and 23 deletions
Show Stats 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;
}
}