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> </div>
<div class="client-logos"> <div class="client-logos">
<div class='client-logos__logo_akamai'></div> <div class='client-logos-div client-logos__logo_akamai'></div>
<div class='client-logos__logo_tum'></div> <div class='client-logos-div client-logos__logo_tum'></div>
<div class='client-logos__logo_wikimedia'></div> <div class='client-logos-div client-logos__logo_wikimedia'></div>
<div class='client-logos__logo_rust'></div> <div class='client-logos-div client-logos__logo_rust'></div>
<div class='client-logos__logo_dr_on_demand'></div> <div class='client-logos-div client-logos__logo_dr_on_demand'></div>
<div class='client-logos__logo_maria'></div> <div class='client-logos-div client-logos__logo_maria'></div>
</div> </div>
</div> </div>
<div class="screen-2"> <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([ const current_client_logo_class_names = new Set([
"client-logos__logo_akamai", "client-logos-div client-logos__logo_akamai",
"client-logos__logo_tum", "client-logos-div client-logos__logo_tum",
"client-logos__logo_wikimedia", "client-logos-div client-logos__logo_wikimedia",
"client-logos__logo_rust", "client-logos-div client-logos__logo_rust",
"client-logos__logo_dr_on_demand", "client-logos-div client-logos__logo_dr_on_demand",
"client-logos__logo_maria", "client-logos-div client-logos__logo_maria",
]); ]);
const future_client_logo_class_names = new Set([ const future_client_logo_class_names = new Set([
"client-logos__logo_pilot", "client-logos-div client-logos__logo_pilot",
"client-logos__logo_recurse", "client-logos-div client-logos__logo_recurse",
"client-logos__logo_level_up", "client-logos-div client-logos__logo_level_up",
"client-logos__logo_layershift", "client-logos-div client-logos__logo_layershift",
"client-logos__logo_julia", "client-logos-div client-logos__logo_julia",
"client-logos__logo_ucsd", "client-logos-div client-logos__logo_ucsd",
"client-logos__logo_lean", "client-logos-div client-logos__logo_lean",
"client-logos__logo_asciidoc", "client-logos-div client-logos__logo_asciidoc",
]); ]);
let current_client_logo_class_names_index = 0; let current_client_logo_class_names_index = 0;
function update_client_logo(): void { function update_client_logo(): void {
if (document.hidden) { if (document.hidden) {
return; 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 = get_new_rand(
current_client_logo_class_names_index, current_client_logo_class_names_index,
client_logos.length, client_logos.length,

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

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