flightsimulatorplatfrom/OpenSquawk
1
0
Fork 0
mirror of https://github.com/OpenSquawk/OpenSquawk synced 2026-08-12 20:55:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refine PM frequency overview cards

Browse Source
This commit is contained in:
itsrubberduck
2026-05-21 10:35:44 +02:00
parent 282887192f
commit d2c8348bf7
1 changed files with 89 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
app/pages/pm.vue
View File

@@ -535,57 +535,49 @@
:key="freq.displayKey" :key="freq.displayKey"
class="frequency-card" class="frequency-card"
> >
<div class="frequency-card-main"> <div class="frequency-card-content">
<div class="min-w-0"> <div class="frequency-card-topline">
<div class="flex items-center gap-2"> <v-chip size="x-small" color="cyan" variant="outlined">{{ freq.type }}</v-chip>
<v-chip size="x-small" color="cyan" variant="outlined">{{ freq.type }}</v-chip> <v-tooltip :text="`Source: ${freq.sourceLabel}`" location="top">
<span class="truncate text-sm font-semibold text-white">{{ freq.label }}</span> <template #activator="{ props: tip }">
</div> <v-btn
<div v-if="freq.callsign" class="mt-1 truncate text-xs text-white/45"> v-bind="tip"
{{ freq.callsign }} icon="mdi-information-outline"
</div> size="x-small"
variant="text"
color="cyan"
aria-label="Show frequency source"
/>
</template>
</v-tooltip>
</div> </div>
<div class="font-mono text-lg font-semibold text-white">
<div class="frequency-value">
{{ freq.frequency }} {{ freq.frequency }}
</div> </div>
<div class="frequency-description">
<span>{{ freq.label }}</span>
<span v-if="freq.callsign"> · {{ freq.callsign }}</span>
<span v-if="freq.atisCode"> · ATIS {{ freq.atisCode }}</span>
</div>
</div> </div>
<div class="frequency-card-footer"> <div class="frequency-actions" role="group" aria-label="Frequency actions">
<div class="flex min-w-0 flex-wrap items-center gap-2"> <button
<v-chip type="button"
size="x-small" class="frequency-action-btn"
:color="freq.sourceList.length > 1 ? 'cyan' : (freq.source === 'vatsim' ? 'green' : 'blue')" @click="setActiveFrequencyFromList(freq)"
variant="outlined" >
> ACT
{{ freq.sourceLabel }} </button>
</v-chip> <button
<v-chip type="button"
v-if="freq.atisCode" class="frequency-action-btn"
size="x-small" @click="setStandbyFrequencyFromList(freq)"
color="cyan" >
variant="tonal" SBY
> </button>
ATIS {{ freq.atisCode }}
</v-chip>
</div>
<div class="frequency-actions">
<v-btn
icon="mdi-crosshairs-gps"
size="x-small"
color="cyan"
variant="tonal"
aria-label="Set active frequency"
@click="setActiveFrequencyFromList(freq)"
/>
<v-btn
icon="mdi-timer-sand"
size="x-small"
color="cyan"
variant="text"
aria-label="Set standby frequency"
@click="setStandbyFrequencyFromList(freq)"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -3334,30 +3326,68 @@ watch(() => activeFrequency.value, (newFreq) => {
} }
.frequency-card { .frequency-card {
display: flex; display: flex;
min-height: 118px; min-height: 136px;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
gap: 12px;
border-radius: 14px; border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.32); background: rgba(0, 0, 0, 0.32);
padding: 12px; overflow: hidden;
} }
.frequency-card-main, .frequency-card-content {
.frequency-card-footer {
display: flex; display: flex;
align-items: flex-start; flex: 1 1 auto;
justify-content: space-between; flex-direction: column;
gap: 12px; justify-content: center;
padding: 14px;
} }
.frequency-card-footer { .frequency-card-topline {
display: flex;
align-items: center; align-items: center;
justify-content: space-between;
min-height: 24px;
}
.frequency-value {
margin-top: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 30px;
font-weight: 750;
line-height: 1;
color: #fff;
}
.frequency-description {
margin-top: 6px;
min-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
} }
.frequency-actions { .frequency-actions {
display: inline-flex; display: grid;
align-items: center; grid-template-columns: 1fr 1fr;
gap: 4px; border-top: 1px solid rgba(255, 255, 255, 0.1);
flex: 0 0 auto; background: rgba(34, 211, 238, 0.06);
}
.frequency-action-btn {
min-height: 38px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: rgba(103, 232, 249, 0.95);
transition: background 120ms ease, color 120ms ease;
-webkit-tap-highlight-color: transparent;
}
.frequency-action-btn + .frequency-action-btn {
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.frequency-action-btn:hover {
background: rgba(34, 211, 238, 0.14);
color: #cffafe;
}
.frequency-action-btn:active {
background: rgba(34, 211, 238, 0.22);
} }
/* Tablet / desktop: use the extra space ----------------------------------- */ /* Tablet / desktop: use the extra space ----------------------------------- */