Skip to content

Commit

Permalink
fix: dark mode support for home images and menu logo (fix #193)
Browse files Browse the repository at this point in the history
  • Loading branch information
@camarm-dev
camarm-dev committed Jul 4, 2024
1 parent 181a607 commit 2bf3e80
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 13 deletions.
13 changes: 3 additions & 10 deletions app/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<ion-menu content-id="main-content" type="overlay">
<ion-content>
<ion-list>
<img class="ion-margin-start main-logo" height="50" src="/logo.png" alt="">
<RemedeLogo class="ion-margin-start"/>
<ion-note>Le dictionnaire.</ion-note>
<ion-searchbar :value="query" @ionChange="query = $event.detail.value as string" ref="searchbar" @keydown.enter="goTo(`/search/${$event.target.value}`)" v-if="!isPage('/dictionnaire')" class="hidden-mobile" placeholder="Rechercher un mot..."></ion-searchbar>
<div class="menu-links">
Expand Down Expand Up @@ -79,14 +79,14 @@ import {
IonSplitPane,
IonApp,
IonPage,
IonSearchbar,
IonGrid
IonSearchbar
} from "@ionic/vue"
import {
bookOutline,
informationCircleOutline,
cogOutline, documentOutline, bookmarkOutline, medicalOutline, swapHorizontalOutline
} from "ionicons/icons"
import RemedeLogo from "@/components/RemedeLogo.vue"
</script>

<script lang="ts">
Expand Down Expand Up @@ -152,13 +152,6 @@ export default defineComponent({
</script>

<style scoped>
.main-logo {
max-height: 1.2em;
object-fit: contain;
width: max-content;
object-position: left;
}
ion-menu-toggle {
cursor: pointer;
}
Expand Down
22 changes: 22 additions & 0 deletions app/src/components/RemedeLogo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<template>
<svg class="main-logo" width="1269" height="230" viewBox="0 0 1269 230" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.5229 229C35.9326 229 24.8346 226.28 17.229 220.841C9.62341 215.402 5.82061 208.409 5.82061 199.862C5.82061 195.2 7.37277 191.005 10.4771 187.275C13.5814 183.545 17.9275 181.681 23.5153 181.681C28.6374 181.681 32.7506 183.157 35.855 186.11C39.1145 188.907 40.7443 192.636 40.7443 197.298C40.7443 201.028 39.9682 204.136 38.416 206.622C36.8639 209.109 34.7684 210.818 32.1298 211.751V213.149C35.5445 214.392 38.6489 215.169 41.4427 215.48C44.2366 215.946 46.9529 216.18 49.5916 216.18C50.3677 216.18 51.1438 216.18 51.9198 216.18C52.6959 216.18 53.472 216.102 54.2481 215.946V125.504C46.6425 125.504 39.5025 124.416 32.8282 122.24C26.3092 120.064 20.5662 116.956 15.5992 112.916C10.7875 108.876 6.98473 103.903 4.19084 97.9977C1.39695 91.9371 0 85.0218 0 77.2517C0 69.6371 1.39695 62.7995 4.19084 56.7389C6.98473 50.6783 10.7875 45.6278 15.5992 41.5874C20.5662 37.547 26.3092 34.439 32.8282 32.2634C39.5025 30.0878 46.6425 29 54.2481 29H122V44.3846H105.935V168.627C105.935 187.741 101.046 202.582 91.2672 213.149C81.6438 223.716 68.0623 229 50.5229 229ZM70.0802 211.284C76.5992 207.555 81.5662 202.193 84.9809 195.2C88.3957 188.363 90.1031 179.816 90.1031 169.559V44.3846H70.0802V211.284Z" fill="currentColor"/>
<path d="M219 209.526H239.022V46.53H219V29.61H324.186C332.834 29.61 340.73 30.644 347.874 32.712C355.018 34.592 361.128 37.6 366.204 41.736C371.468 45.872 375.51 51.136 378.33 57.528C381.15 63.92 382.56 71.44 382.56 80.088C382.56 93.624 378.518 104.81 370.434 113.646C362.35 122.482 351.916 128.216 339.132 130.848L374.664 192.042C378.424 198.622 382.372 203.228 386.508 205.86C390.644 208.304 395.908 209.526 402.3 209.526H403.992V226.446H380.022C373.818 226.446 368.366 225.976 363.666 225.036C359.154 223.908 355.112 222.216 351.54 219.96C348.156 217.704 345.148 214.884 342.516 211.5C339.884 208.116 337.346 204.168 334.902 199.656L303.318 138.18H278.502V209.526H298.524V226.446H219V209.526ZM278.502 120.696H311.496C321.46 120.696 328.98 118.252 334.056 113.364C339.32 108.476 341.952 101.426 341.952 92.214V76.422C341.952 67.21 339.32 60.16 334.056 55.272C328.98 50.384 321.46 47.94 311.496 47.94H278.502V120.696Z" fill="currentColor"/>
<path d="M475.157 229.83C463.877 229.83 453.819 227.95 444.983 224.19C436.335 220.43 429.003 215.166 422.987 208.398C416.971 201.442 412.365 193.264 409.169 183.864C406.161 174.276 404.657 163.842 404.657 152.562C404.657 140.906 406.255 130.378 409.451 120.978C412.835 111.39 417.535 103.306 423.551 96.726C429.567 89.958 436.711 84.788 444.983 81.216C453.443 77.644 462.749 75.858 472.901 75.858C483.053 75.858 492.171 77.55 500.255 80.934C508.527 84.13 515.483 88.736 521.123 94.752C526.951 100.768 531.369 108.006 534.377 116.466C537.573 124.738 539.171 134.044 539.171 144.384V153.126H444.419V163.278C444.419 176.814 447.897 187.248 454.853 194.58C461.997 201.724 471.303 205.296 482.771 205.296C493.299 205.296 501.759 202.946 508.151 198.246C514.543 193.546 519.243 187.718 522.251 180.762L536.069 189.222C534.377 193.922 531.839 198.716 528.455 203.604C525.259 208.304 521.123 212.628 516.047 216.576C511.159 220.524 505.331 223.72 498.563 226.164C491.795 228.608 483.993 229.83 475.157 229.83ZM444.419 136.77H500.819V133.104C500.819 119.568 498.375 109.604 493.487 103.212C488.787 96.82 481.925 93.624 472.901 93.624C463.877 93.624 456.827 96.82 451.751 103.212C446.863 109.416 444.419 119.286 444.419 132.822V136.77Z" fill="currentColor"/>
<path d="M553.177 209.526H571.225V104.904L553.177 101.238V87.138L607.603 75.858V103.212H609.013C610.329 99.64 612.115 96.256 614.371 93.06C616.815 89.676 619.729 86.762 623.113 84.318C626.497 81.686 630.445 79.618 634.957 78.114C639.657 76.61 644.921 75.858 650.749 75.858C663.157 75.858 672.839 78.208 679.795 82.908C686.751 87.608 691.545 94.658 694.177 104.058H695.305C696.809 100.486 698.783 97.008 701.227 93.624C703.859 90.24 706.961 87.232 710.533 84.6C714.293 81.968 718.523 79.9 723.223 78.396C728.111 76.704 733.657 75.858 739.861 75.858C757.157 75.858 769.377 80.464 776.521 89.676C783.853 98.7 787.519 112.33 787.519 130.566V209.526H805.567V226.446H734.221V209.526H750.577V132.258C750.577 121.166 748.603 113.176 744.655 108.288C740.707 103.212 734.221 100.674 725.197 100.674C721.813 100.674 718.429 101.144 715.045 102.084C711.849 103.024 708.935 104.528 706.303 106.596C703.859 108.476 701.791 111.014 700.099 114.21C698.595 117.218 697.843 120.79 697.843 124.926V209.526H714.199V226.446H644.545V209.526H660.901V132.258C660.901 121.166 658.927 113.176 654.979 108.288C651.219 103.212 644.921 100.674 636.085 100.674C632.513 100.674 629.035 101.144 625.651 102.084C622.267 103.024 619.259 104.528 616.627 106.596C614.183 108.476 612.115 111.014 610.423 114.21C608.919 117.218 608.167 120.79 608.167 124.926V209.526H624.523V226.446H553.177V209.526Z" fill="currentColor"/>
<path d="M887.021 229.83C875.741 229.83 865.683 227.95 856.847 224.19C848.199 220.43 840.867 215.166 834.851 208.398C828.835 201.442 824.229 193.264 821.033 183.864C818.025 174.276 816.521 163.842 816.521 152.562C816.521 140.906 818.119 130.378 821.315 120.978C824.699 111.39 829.399 103.306 835.415 96.726C841.431 89.958 848.575 84.788 856.847 81.216C865.307 77.644 874.613 75.858 884.765 75.858C894.917 75.858 904.035 77.55 912.119 80.934C920.391 84.13 927.347 88.736 932.987 94.752C938.815 100.768 943.233 108.006 946.241 116.466C949.437 124.738 951.035 134.044 951.035 144.384V153.126H856.283V163.278C856.283 176.814 859.761 187.248 866.717 194.58C873.861 201.724 883.167 205.296 894.635 205.296C905.163 205.296 913.623 202.946 920.015 198.246C926.407 193.546 931.107 187.718 934.115 180.762L947.933 189.222C946.241 193.922 943.703 198.716 940.319 203.604C937.123 208.304 932.987 212.628 927.911 216.576C923.023 220.524 917.195 223.72 910.427 226.164C903.659 228.608 895.857 229.83 887.021 229.83ZM856.283 136.77H912.683V133.104C912.683 119.568 910.239 109.604 905.351 103.212C900.651 96.82 893.789 93.624 884.765 93.624C875.741 93.624 868.691 96.82 863.615 103.212C858.727 109.416 856.283 119.286 856.283 132.822V136.77ZM844.439 15.792L876.869 0L897.455 56.4L885.329 62.04L844.439 15.792Z" fill="currentColor"/>
<path d="M1026.47 229.83C1017.45 229.83 1009.27 228.044 1001.94 224.472C994.792 220.9 988.588 215.824 983.324 209.244C978.248 202.476 974.299 194.392 971.479 184.992C968.847 175.404 967.531 164.688 967.531 152.844C967.531 141 968.847 130.378 971.479 120.978C974.299 111.39 978.248 103.306 983.324 96.726C988.588 89.958 994.792 84.788 1001.94 81.216C1009.27 77.644 1017.45 75.858 1026.47 75.858C1037.19 75.858 1045.83 78.396 1052.41 83.472C1058.99 88.548 1063.69 94.376 1066.51 100.956H1067.92V41.172L1049.88 37.506V23.406L1104.87 12.126V200.784L1122.91 204.45V218.55L1067.92 229.83V204.45H1066.51C1063.69 211.218 1058.9 217.14 1052.13 222.216C1045.55 227.292 1037 229.83 1026.47 229.83ZM1038.6 206.706C1046.49 206.706 1053.35 204.356 1059.18 199.656C1065.01 194.768 1067.92 188.188 1067.92 179.916V125.772C1067.92 117.5 1065.01 111.014 1059.18 106.314C1053.35 101.426 1046.49 98.982 1038.6 98.982C1029.2 98.982 1021.58 102.178 1015.75 108.57C1009.93 114.962 1007.01 123.986 1007.01 135.642V170.046C1007.01 181.702 1009.93 190.726 1015.75 197.118C1021.58 203.51 1029.2 206.706 1038.6 206.706Z" fill="currentColor"/>
<path d="M1204.42 229.83C1193.14 229.83 1183.09 227.95 1174.25 224.19C1165.6 220.43 1158.27 215.166 1152.25 208.398C1146.24 201.442 1141.63 193.264 1138.44 183.864C1135.43 174.276 1133.92 163.842 1133.92 152.562C1133.92 140.906 1135.52 130.378 1138.72 120.978C1142.1 111.39 1146.8 103.306 1152.82 96.726C1158.83 89.958 1165.98 84.788 1174.25 81.216C1182.71 77.644 1192.02 75.858 1202.17 75.858C1212.32 75.858 1221.44 77.55 1229.52 80.934C1237.79 84.13 1244.75 88.736 1250.39 94.752C1256.22 100.768 1260.64 108.006 1263.64 116.466C1266.84 124.738 1268.44 134.044 1268.44 144.384V153.126H1173.69V163.278C1173.69 176.814 1177.16 187.248 1184.12 194.58C1191.26 201.724 1200.57 205.296 1212.04 205.296C1222.57 205.296 1231.03 202.946 1237.42 198.246C1243.81 193.546 1248.51 187.718 1251.52 180.762L1265.34 189.222C1263.64 193.922 1261.11 198.716 1257.72 203.604C1254.53 208.304 1250.39 212.628 1245.31 216.576C1240.43 220.524 1234.6 223.72 1227.83 226.164C1221.06 228.608 1213.26 229.83 1204.42 229.83ZM1173.69 136.77H1230.09V133.104C1230.09 119.568 1227.64 109.604 1222.75 103.212C1218.05 96.82 1211.19 93.624 1202.17 93.624C1193.14 93.624 1186.09 96.82 1181.02 103.212C1176.13 109.416 1173.69 119.286 1173.69 132.822V136.77Z" fill="currentColor"/>
</svg>
</template>
<style scoped>
.dark svg {
color: var(--ion-text-color)
}
.main-logo {
max-height: 1.2em;
object-fit: contain;
width: max-content;
object-position: left;
}
</style>
6 changes: 3 additions & 3 deletions app/src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,13 @@
<ion-list inset>
<swiper :modules="[Pagination]" :pagination="{ enabled: true, clickable: true }">
<swiper-slide v-if="hasDictionaryUpdate" @click="goTo('/parametres')">
<img :src="newBaseIllustration" alt="Mettez à jour votre dictionnaire !"/>
<img class="new-base" :src="newBaseIllustration" alt="Mettez à jour votre dictionnaire !"/>
</swiper-slide>
<swiper-slide v-if="hasAppUpdate" @click="open('https://remede.camarm.fr/download')">
<img :src="newVersionIllustration" alt="Mettez à jour votre app !"/>
<img class="new-version" :src="newVersionIllustration" alt="Mettez à jour votre app !"/>
</swiper-slide>
<swiper-slide id="open-changelog">
<img :src="changelogIllustration" alt="Illustration changelog"/>
<img class="changelog" :src="changelogIllustration" alt="Illustration changelog"/>
</swiper-slide>
</swiper>
</ion-list>
Expand Down

0 comments on commit 2bf3e80

Please sign in to comment.