GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Use third grid column in graphs layout on wide screens (#2226)

Browse source 
* Use third grid column on graphs page when width > 1400px

* Define column width more precisely

* Center graphs inside containers

* Fix graphs always showing 2+ columns (dae)
This commit is contained in:
Matthias Metelka 2022-12-01 07:33:52 +01:00 committed by GitHub
parent 49455b4b14
commit 9ecc0ffdc6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ts/graphs/Graph.svelte
View file

@ -9,8 +9,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let subtitle: string | null = null; export let subtitle: string | null = null;
</script> </script>
<TitledContainer {title}> <TitledContainer class="d-flex flex-column" {title}>
<div class="graph"> <div class="graph d-flex flex-grow-1 flex-column justify-content-center">
{#if subtitle} {#if subtitle}
<div class="subtitle">{subtitle}</div> <div class="subtitle">{subtitle}</div>
{/if} {/if}

7
ts/graphs/GraphsPage.svelte
View file

@ -56,9 +56,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss"> <style lang="scss">
.graphs-container { .graphs-container {
display: grid; display: grid;
gap: 1.5em; gap: 1em;
grid-template-columns: 50% 50%; grid-template-columns: repeat(3, minmax(0, 1fr));
@media only screen and (max-width: 1400px) {
grid-template-columns: 50% 50%;
}
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
grid-template-columns: 100%; grid-template-columns: 100%;
} }