Responsiveness improvements, removed all 990px covers (minmatarfleet#955

) * Bugfixed ship name parsing for ships icons * Removed all 990 quality covers * Improved responsiveness for contract and combat log dialog
beautifulmim · Dec 10, 2024 · 5e4817e · 5e4817e
1 parent ed474ba
commit 5e4817e
Show file tree

Hide file tree

Showing 63 changed files with 362 additions and 356 deletions.
diff --git a/frontend/app/src/components/blocks/AnalizeCombatLogButton.astro b/frontend/app/src/components/blocks/AnalizeCombatLogButton.astro
diff --git a/frontend/app/src/components/blocks/SupplierContractBadge.astro b/frontend/app/src/components/blocks/SupplierContractBadge.astro
@@ -70,141 +70,144 @@ import AddSupplierButton from '@components/blocks/AddSupplierButton.astro'
         <ContractBadge contract={contract} is_supplier={true} />
     </StylessButton>
 
-    <div class="[ system-finder-dialog ]">
-        <Dialog
-            breakout={true}
-            non_centered={true}
-            class="[ w-full max-w-[600px] component ]"
-            x-bind:class="(combatlog_dialog_open ? 'open' : '')"
-            x-bind:aria-hidden="combatlog_dialog_open == false"
-            x-trap="combatlog_dialog_open"
-            x-bind:inert="!combatlog_dialog_open"
-            @keyup.escape.window="close_dialog()"
-            @mousedown.outside="open && close_dialog()"
+    <Dialog
+        breakout={true}
+        non_centered={true}
+        class="[ supplier-contract-dialog ][ w-full max-w-[600px] component overflow-y-auto ]"
+        x-bind:class="(combatlog_dialog_open ? 'open' : '')"
+        x-bind:aria-hidden="combatlog_dialog_open == false"
+        x-trap="combatlog_dialog_open"
+        x-bind:inert="!combatlog_dialog_open"
+        @keyup.escape.window="close_dialog()"
+        @mousedown.outside="open && close_dialog()"
+    >
+        <form
+            hx-post={SUPPLIER_CONTRACT_BADGE_PARTIAL_URL}
+            hx-trigger="submit"
+            x-bind:hx-target="`#${id}`"
+            hx-indicator=".loader"
+            hx-swap="outerHTML transition:true"
+            x-ref="combatlog_form"
         >
-            <form
-                hx-post={SUPPLIER_CONTRACT_BADGE_PARTIAL_URL}
-                hx-trigger="submit"
-                x-bind:hx-target="`#${id}`"
-                hx-indicator=".loader"
-                hx-swap="outerHTML transition:true"
-                x-ref="combatlog_form"
-            >
-                <Flexblock gap="var(--space-l)">
-                    <h3>{t('claim_contract_dialog_title')}</h3>
-
-                    <Flexblock>
-                        {(characters_options.length > 0 && corporations_options.length > 0) ?
-                            <p>{t('claim_contract_dialog_text')}</p> :
-                            characters_options.length > 0 ?
-                            <p>{t('claim_contract_character_dialog_text')}</p> :
-                            <p>{t('claim_contract_corporation_dialog_text')}</p>
+            <Flexblock gap="var(--space-l)">
+                <h3>{t('claim_contract_dialog_title')}</h3>
+
+                <Flexblock>
+                    {(characters_options.length > 0 && corporations_options.length > 0) ?
+                        <p>{t('claim_contract_dialog_text')}</p> :
+                        characters_options.length > 0 ?
+                        <p>{t('claim_contract_character_dialog_text')}</p> :
+                        <p>{t('claim_contract_corporation_dialog_text')}</p>
+                    }
+
+                    <FlexInline class="[ !items-center ]">
+                        <Badge title="" image={get_item_icon(contract.eve_type_id)}>
+                            <a href={translatePath(`/ships/fitting/${contract.fitting_id}`)} slot="title">{contract.title}</a>
+                            <FlexInline gap='var(--space-3xs)'>
+                                {contract.entities > 0 ? <Square color='green' /> : <Square color='fleet-red' />}
+                                <small>{contract.entities === 1 ? t('claimed_by_entity') : t('claimed_by_entities').replace('%d', contract.entities.toString())}</small>
+                            </FlexInline>
+                        </Badge>
+                        {contract.eft_format &&
+                            <ClipboardButton narrow={true} id={contract.fitting_id.toString()}>{contract.eft_format}</ClipboardButton>
                         }
+                    </FlexInline>
 
-                        <FlexInline class="[ !items-center ]">
-                            <Badge title="" image={get_item_icon(contract.eve_type_id)}>
-                                <a href={translatePath(`/ships/fitting/${contract.fitting_id}`)} slot="title">{contract.title}</a>
-                                <FlexInline gap='var(--space-3xs)'>
-                                    {contract.entities > 0 ? <Square color='green' /> : <Square color='fleet-red' />}
-                                    <small>{contract.entities === 1 ? t('claimed_by_entity') : t('claimed_by_entities').replace('%d', contract.entities.toString())}</small>
-                                </FlexInline>
-                            </Badge>
-                            {contract.eft_format &&
-                                <ClipboardButton narrow={true} id={contract.fitting_id.toString()}>{contract.eft_format}</ClipboardButton>
+                    {(claimed_by_user_characters.length > 0 || claimed_by_user_corporations.length > 0) &&
+                        <p>{t('claimed_by_user_characters')}</p>
+                        <Grid min_item_width="250px">
+                            {claimed_by_user_characters.map(characters =>
+                                <PilotBadge
+                                    character_id={characters.character_id}
+                                    character_name={characters.character_name}
+                                    size={32}
+                                />
+                            )}
+                            {claimed_by_user_corporations.map(corporation =>
+                                <Badge
+                                    title={corporation.name}
+                                    image={get_corporation_logo(corporation.id)}
+                                    size={32}
+                                />
+                            )}
+                        </Grid>
+                    }
+
+                    {(characters_options.length > 0 || corporations_options.length > 0) ?
+                        <Flexblock>
+                            {characters_options.length > 0 &&
+                                <Select
+                                    name="character"
+                                    placeholder={t('contracts_character_placeholder')}
+                                    value="-1"
+                                    x-model="character"
+                                    x-on:change="corporation = '-1'"
+                                >
+                                    <option value="-1">{t('contracts_character_placeholder')}</option>
+                                    {characters_options.map((option) => 
+                                        <option value={option.value}>{option.label}</option>
+                                    )}
+                                </Select>
+                            }
+                            {(characters_options.length > 0 && corporations_options.length > 0) &&
+                                <OrSeparator />
                             }
+                            {corporations_options.length > 0 &&
+                                <Select
+                                    name="corporation"
+                                    placeholder={t('contracts_corporation_placeholder')}
+                                    value="-1"
+                                    x-model="corporation"
+                                    x-on:change="character = '-1'"
+                                >
+                                    <option value="-1">{t('contracts_corporation_placeholder')}</option>
+                                    {corporations_options.map((option) => 
+                                        <option value={option.value}>{option.label}</option>
+                                    )}
+                                </Select>
+                            }
+                        </Flexblock>
+                        :
+                        <p>{t('add_supplier_note')}</p>
+                        <FlexInline>
+                            <AddSupplierButton />
                         </FlexInline>
+                    }
 
-                        {(claimed_by_user_characters.length > 0 || claimed_by_user_corporations.length > 0) &&
-                            <p>{t('claimed_by_user_characters')}</p>
-                            <Grid min_item_width="250px">
-                                {claimed_by_user_characters.map(characters =>
-                                    <PilotBadge
-                                        character_id={characters.character_id}
-                                        character_name={characters.character_name}
-                                        size={32}
-                                    />
-                                )}
-                                {claimed_by_user_corporations.map(corporation =>
-                                    <Badge
-                                        title={corporation.name}
-                                        image={get_corporation_logo(corporation.id)}
-                                        size={32}
-                                    />
-                                )}
-                            </Grid>
-                        }
-
-                        {(characters_options.length > 0 || corporations_options.length > 0) ?
-                            <Flexblock>
-                                {characters_options.length > 0 &&
-                                    <Select
-                                        name="character"
-                                        placeholder={t('contracts_character_placeholder')}
-                                        value="-1"
-                                        x-model="character"
-                                        x-on:change="corporation = '-1'"
-                                    >
-                                        <option value="-1">{t('contracts_character_placeholder')}</option>
-                                        {characters_options.map((option) => 
-                                            <option value={option.value}>{option.label}</option>
-                                        )}
-                                    </Select>
-                                }
-                                {(characters_options.length > 0 && corporations_options.length > 0) &&
-                                    <OrSeparator />
-                                }
-                                {corporations_options.length > 0 &&
-                                    <Select
-                                        name="corporation"
-                                        placeholder={t('contracts_corporation_placeholder')}
-                                        value="-1"
-                                        x-model="corporation"
-                                        x-on:change="character = '-1'"
-                                    >
-                                        <option value="-1">{t('contracts_corporation_placeholder')}</option>
-                                        {corporations_options.map((option) => 
-                                            <option value={option.value}>{option.label}</option>
-                                        )}
-                                    </Select>
-                                }
-                            </Flexblock>
-                            :
-                            <p>{t('add_supplier_note')}</p>
-                            <FlexInline>
-                                <AddSupplierButton />
-                            </FlexInline>
-                        }
+                    <input type="hidden" name="expectation_id" value={contract.expectation_id} />
+                </Flexblock>
 
-                        <input type="hidden" name="expectation_id" value={contract.expectation_id} />
-                    </Flexblock>
-
-                    <FlexInline justification='flex-end'>
-                        {(characters_options.length > 0 || corporations_options.length > 0) &&
-                            <Button
-                                size='sm'
-                                x-on:click="close_dialog()"
-                                type="submit"
-                                x-bind:disabled="disabled_submit"
-                            >
-                                {t('accept')}
-                            </Button>
-                        }
+                <FlexInline justification='flex-end'>
+                    {(characters_options.length > 0 || corporations_options.length > 0) &&
                         <Button
-                            type="button"
                             size='sm'
                             x-on:click="close_dialog()"
+                            type="submit"
+                            x-bind:disabled="disabled_submit"
                         >
-                            {t('close')}
+                            {t('accept')}
                         </Button>
-                    </FlexInline>
-                </Flexblock>
-            </form>
-        </Dialog>
-    </div>
+                    }
+                    <Button
+                        type="button"
+                        size='sm'
+                        x-on:click="close_dialog()"
+                    >
+                        {t('close')}
+                    </Button>
+                </FlexInline>
+            </Flexblock>
+        </form>
+    </Dialog>
 
 </div>
 
 <style lang="scss" is:global>
+    .supplier-contract-dialog {
+        max-width: 40rem;
+        max-height: min(750px, 88vh);
+    }
+
     .supplier-contract-badge {
         canvas {
             opacity: 0.6;

diff --git a/frontend/app/src/layouts/Post.astro b/frontend/app/src/layouts/Post.astro
@@ -162,7 +162,7 @@ import PilotBadge from '@components/blocks/PilotBadge.astro'
                 wide={true}
                 cover={{
                     image: "/images/editor-cover.jpg",
-                    image_990: "/images/editor-cover-990.jpg",
+                    image_990: "/images/editor-cover.jpg",
                     alt: t('account.cover_alt'),
                     scrollable: true,
                     overlay: true

diff --git a/frontend/app/src/pages/403.astro b/frontend/app/src/pages/403.astro
@@ -20,7 +20,7 @@ const page_description = t('403.leading_text');
     <PageLanding
         cover={{
             image: "/images/403-cover.jpg",
-            image_990: "/images/403-cover-990.jpg",
+            image_990: "/images/403-cover.jpg",
             alt: t('403.cover_alt'),
             animated: false,
             overlay: true

diff --git a/frontend/app/src/pages/404.astro b/frontend/app/src/pages/404.astro
@@ -20,7 +20,7 @@ const page_description = t('404.leading_text');
     <PageLanding
         cover={{
             image: "/images/404-cover.jpg",
-            image_990: "/images/404-cover-990.jpg",
+            image_990: "/images/404-cover.jpg",
             alt: t('404.cover_alt'),
             animated: false,
             overlay: true

diff --git a/frontend/app/src/pages/500.astro b/frontend/app/src/pages/500.astro
@@ -20,7 +20,7 @@ const page_description = t('500.leading_text');
     <PageLanding
         cover={{
             image: "/images/500-cover.jpg",
-            image_990: "/images/500-cover-990.jpg",
+            image_990: "/images/500-cover.jpg",
             alt: t('500.cover_alt'),
             animated: false,
             overlay: true

diff --git a/frontend/app/src/pages/account.astro b/frontend/app/src/pages/account.astro
@@ -102,7 +102,7 @@ const page_title = t('account.page_title');
     <PageDefault
         cover={{
             image: "/images/account-cover.jpg",
-            image_990: "/images/account-cover-990.jpg",
+            image_990: "/images/account-cover.jpg",
             alt: t('account.cover_alt'),
             scrollable: true,
             overlay: true

diff --git a/frontend/app/src/pages/alliance.astro b/frontend/app/src/pages/alliance.astro
@@ -73,7 +73,7 @@ const leading_text = t('alliance.leading_text');
     <PageLanding
         cover={{
             image: "/images/alliance-cover.jpg",
-            image_990: "/images/alliance-cover-990.jpg",
+            image_990: "/images/alliance-cover.jpg",
             alt: t('alliance.cover_alt'),
             overlay: true,
             scrollable: true,

diff --git a/...d/app/src/pages/alliance/corporations/application/[corporation_id]/[application_id].astro b/...d/app/src/pages/alliance/corporations/application/[corporation_id]/[application_id].astro
@@ -82,7 +82,7 @@ const page_title = `${application?.character_name ?? ''} ${t('application').toLo
     <PageDefault
         cover={{
             image: "/images/alliance-cover.jpg",
-            image_990: "/images/alliance-cover-990.jpg",
+            image_990: "/images/alliance-cover.jpg",
             alt: t('alliance.cover_alt'),
             animated: false,
             scrollable: true,

diff --git a/frontend/app/src/pages/alliance/corporations/applications.astro b/frontend/app/src/pages/alliance/corporations/applications.astro
@@ -71,7 +71,7 @@ const page_title = t('corporations.applications.page_title')
     <PageDefault
         cover={{
             image: "/images/alliance-cover.jpg",
-            image_990: "/images/alliance-cover-990.jpg",
+            image_990: "/images/alliance-cover.jpg",
             alt: t('alliance.cover_alt'),
             animated: false,
             scrollable: true,

diff --git a/frontend/app/src/pages/alliance/corporations/applications/records.astro b/frontend/app/src/pages/alliance/corporations/applications/records.astro
@@ -71,7 +71,7 @@ const page_title = t('corporations.applications.records.page_title')
     <PageDefault
         cover={{
             image: "/images/alliance-cover.jpg",
-            image_990: "/images/alliance-cover-990.jpg",
+            image_990: "/images/alliance-cover.jpg",
             alt: t('alliance.cover_alt'),
             animated: false,
             scrollable: true,

diff --git a/frontend/app/src/pages/alliance/corporations/associates.astro b/frontend/app/src/pages/alliance/corporations/associates.astro
@@ -55,7 +55,7 @@ const page_description = t('corporations.associates.leading_text');
         wide={true}
         cover={{
             image: "/images/alliance-cover.jpg",
-            image_990: "/images/alliance-cover-990.jpg",
+            image_990: "/images/alliance-cover.jpg",
             alt: t('alliance.cover_alt'),
             animated: false,
             scrollable: true,

diff --git a/frontend/app/src/pages/alliance/corporations/list.astro b/frontend/app/src/pages/alliance/corporations/list.astro
@@ -52,7 +52,7 @@ const page_title = t('corporations.list.page_title');
         fullscreen={true}
         cover={{
             image: "/images/corporations-cover.jpg",
-            image_990: "/images/corporations-cover-990.jpg",
+            image_990: "/images/corporations-cover.jpg",
             alt: t('corporations.cover_alt'),
             animated: false,
             scrollable: true,

diff --git a/frontend/app/src/pages/alliance/corporations/members.astro b/frontend/app/src/pages/alliance/corporations/members.astro
@@ -75,7 +75,7 @@ const page_title = t('corporations.members.page_title')
     <PageDefault
         cover={{
             image: "/images/alliance-cover.jpg",
-            image_990: "/images/alliance-cover-990.jpg",
+            image_990: "/images/alliance-cover.jpg",
             alt: t('alliance.cover_alt'),
             animated: false,
             scrollable: true,

diff --git a/frontend/app/src/pages/alliance/corporations/members/mains.astro b/frontend/app/src/pages/alliance/corporations/members/mains.astro
@@ -74,7 +74,7 @@ const page_title = t('corporations.members.mains.page_title')
     <PageDefault
         cover={{
             image: "/images/alliance-cover.jpg",
-            image_990: "/images/alliance-cover-990.jpg",
+            image_990: "/images/alliance-cover.jpg",
             alt: t('alliance.cover_alt'),
             animated: false,
             scrollable: true,

diff --git a/frontend/app/src/pages/alliance/corporations/members/unregistered.astro b/frontend/app/src/pages/alliance/corporations/members/unregistered.astro
@@ -75,7 +75,7 @@ const page_title = t('corporations.members.unregistered.page_title')
     <PageDefault
         cover={{
             image: "/images/alliance-cover.jpg",
-            image_990: "/images/alliance-cover-990.jpg",
+            image_990: "/images/alliance-cover.jpg",
             alt: t('alliance.cover_alt'),
             animated: false,
             scrollable: true,

diff --git a/frontend/app/src/pages/alliance/posts/[post_id].astro b/frontend/app/src/pages/alliance/posts/[post_id].astro
@@ -70,7 +70,7 @@ const page_description = post?.excerpt ?? page_title
         wide={true}
         cover={{
             image: "/images/editor-cover.jpg",
-            image_990: "/images/editor-cover-990.jpg",
+            image_990: "/images/editor-cover.jpg",
             alt: t('posts.cover_alt'),
             scrollable: true,
             overlay: true