Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improvements #90

Merged
merged 2 commits into from
Feb 8, 2024
Merged

Improvements #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c97118e
UX Improvements
jason5ng32 Feb 8, 2024
7ff1f59
Improvements
jason5ng32 Feb 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ export default {
type: "regex",
action: (num) => {
const card = this.$refs.IPCheckRef.ipDataCards[num - 1];
this.scrollToElement("IPInfo-" + num, 120);
this.scrollToElement("IPInfo-" + num, 180);
this.$refs.IPCheckRef.refreshCard(card);
this.$trackEvent('ShortCut', 'ShortCut', 'IPCheck');
},
Expand Down
46 changes: 37 additions & 9 deletions src/components/help.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<!-- Help Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
<div class="modal-header" :class="{ 'dark-mode-border': isDarkMode }">
<h5 class="modal-title" id="helpModalTitle">{{ $t('helpModal.Title') }}</h5>
Expand All @@ -13,15 +13,33 @@
<p class="jn-help-note "><i class="bi bi-hand-thumbs-up-fill"></i>
{{ $t('shortcutKeys.HelpNote') }}
</p>
<div v-for="(key, index) in keyMap" :key="key.keys" class="row p-2 jn-shortcut-row"
:class="[isDarkMode ? 'border-dark-subtle jn-dark-mode-help-border' : 'border-light-subtle', index === keyMap.length - 1 ? 'jn-border-bottom-none' : '']">
<div class="col">
<kbd :class="{ 'text-bg-light': isDarkMode }">
{{ key.keys.replace(/[\[\]\\\(\)]/g, '') }}
</kbd>
<div class="row flex-nowrap text-nowrap">
<!-- 左边的列 -->
<div class="col text-nowrap">
<div v-for="(key, index) in splitKeyMap.left" :key="`left-${key.keys}`" class="row p-2"
:class="[isDarkMode ? 'border-dark-subtle jn-dark-mode-help-border' : 'border-light-subtle']">
<div class="col-auto">
<kbd :class="{ 'text-bg-light': isDarkMode }">
{{ key.keys.replace(/[\[\]\\\(\)]/g, '') }}
</kbd>
</div>
<div class="col-8">{{ key.description }}</div>
</div>
</div>
<!-- 右边的列 -->
<div class="col text-nowrap">
<div v-for="(key, index) in splitKeyMap.right" :key="`right-${key.keys}`" class="row p-2"
:class="[isDarkMode ? 'border-dark-subtle jn-dark-mode-help-border' : 'border-light-subtle']">
<div class="col-auto">
<kbd :class="{ 'text-bg-light': isDarkMode }">
{{ key.keys.replace(/[\[\]\\\(\)]/g, '') }}
</kbd>
</div>
<div class="col-8">{{ key.description }}</div>
</div>
</div>
<div class="col-8">{{ key.description }}</div>
</div>

</div>
</div>
</div>
Expand Down Expand Up @@ -56,7 +74,17 @@ export default {

methods: {

}
},
computed: {
// 拆分 keyMap 为两个数组
splitKeyMap() {
const half = Math.ceil(this.keyMap.length / 2);
return {
left: this.keyMap.slice(0, half),
right: this.keyMap.slice(half),
};
}
},
}
</script>

Expand Down
86 changes: 63 additions & 23 deletions src/components/ipcheck.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
<hr class="dropdown-divider">
</li>
<li v-for="source in sources" :key="source.id">
<span class="dropdown-item jn-select" :class="{ active: ipGeoSource === source.id, disabled: !source.enabled }"
<span class="dropdown-item jn-select"
:class="{ active: ipGeoSource === source.id, disabled: !source.enabled }"
@click="source.enabled ? selectIPGeoSource(source.id) : null" :disabled="!source.enabled"
:aria-disabled="!source.enabled" :aria-label="source.text">
{{ source.text }}
Expand All @@ -57,38 +58,46 @@
</div>
<div class="jn-card-deck">
<div class="row">
<div v-for="(card,index) in ipDataCards" :key="card.id" :ref="card.id"
<div v-for="(card, index) in ipDataCards" :key="card.id" :ref="card.id"
:class="{ 'jn-opacity': !card.asn, 'col-xl-4': true, 'col-lg-6': true, 'col-md-6': true, 'mb-4': true }">
<div class="card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
<div class="card-header jn-ip-title"
:class="{ 'dark-mode-title': isDarkMode, 'bg-light': !isMapShown && !isDarkMode }"
style="font-weight: bold;">
<div class="card-header jn-ip-title jn-link1"
:class="{ 'dark-mode-title': isDarkMode, 'bg-light': !isDarkMode }" style="font-weight: bold;">
<span>
<i class="bi" :class="'bi-'+(index+1)+'-circle-fill'"></i>
<i class="bi" :class="'bi-' + (index + 1) + '-circle-fill'"></i>&nbsp;
{{ $t('ipInfos.Source') }}: {{ card.source }}</span>
<button @click="refreshCard(card)" :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']"
:aria-label="'Refresh' + card.source">
<i class="bi bi-arrow-clockwise"></i></button>
</div>
<div class="p-3" :class="{
'dark-mode-title': isDarkMode,
'jn-link2-dark': isDarkMode,
'bg-light': !isDarkMode,
'jn-link2': !isDarkMode
}">
<span class="jn-text col-auto">
<i class="bi bi-pc-display-horizontal"></i>&nbsp;
</span>
<span v-if="(card.asn) || (card.ip === $t('ipInfos.IPv4Error')) || (card.ip === $t('ipInfos.IPv6Error'))"
class="col-10"
:class="{ 'jn-ip-font': isMobile}"
>
{{ card.ip }}&nbsp;
<i v-if="isValidIP(card.ip)"
:class="copiedStatus[card.id] ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'"
@click="copyToClipboard(card.ip, card.id)"></i>
</span>
<span v-else class="placeholder col-10"></span>
</div>

<img v-if="isMapShown" :src="isDarkMode ? card.mapUrl_dark : card.mapUrl" class="card-img-top jn-map-image"
alt="Map">

<div v-if="(card.asn) || (card.ip === $t('ipInfos.IPv4Error')) || (card.ip === $t('ipInfos.IPv6Error'))
" class="card-body" :id="'IPInfo-'+(index+1)">
<ul class="list-group list-group-flush">
" class="card-body" :id="'IPInfo-' + (index + 1)">
<ul class="list-group list-group-flush" v-if="card.country_name">

<li class="jn-list-group-item" :class="{ 'dark-mode': isDarkMode }">
<span class="jn-text col-auto">
<i class="bi bi-pc-display-horizontal"></i> {{ $t('ipInfos.IP') }} :&nbsp;
</span>
<span class="col-10 ">
{{ card.ip }}
<i v-if="isValidIP(card.ip)"
:class="copiedStatus[card.id] ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'"
@click="copyToClipboard(card.ip, card.id)"></i>
</span>
</li>
<img v-if="isMapShown" :src="isDarkMode ? card.mapUrl_dark : card.mapUrl"
class="card-img-top jn-map-image" alt="Map">

<li class="jn-list-group-item"
:class="{ 'dark-mode': isDarkMode, 'mobile-list': isMobile && isCardsCollapsed }">
Expand Down Expand Up @@ -191,7 +200,7 @@ export default {
data() {
return {
isCardsCollapsed: JSON.parse(localStorage.getItem('isCardsCollapsed')) || false,
placeholderSizes: [12, 8, 6, 8, 4, 8],
placeholderSizes: [12, 8, 6, 8, 4],
sources: [
{ id: 0, text: 'IPCheck.ing', enabled: true },
{ id: 1, text: 'IP.SB', enabled: true },
Expand Down Expand Up @@ -741,8 +750,39 @@ export default {
</script>

<style scoped>
.jn-select{
.jn-select {
cursor: pointer;
user-select: none;
}

.jn-link1 {
position: relative;
}

.jn-link2::before {
content: '';
position: absolute;
top: 34px;
left: 24px;
transform: translateX(-50%);
height: 40px;
width: 2px;
border-left: 2px dashed #212529;
z-index: 1;
}

.jn-link2-dark::before {
content: '';
position: absolute;
top: 34px;
left: 24px;
transform: translateX(-50%);
height: 40px;
width: 2px;
border-left: 2px dashed #e3e3e3;
z-index: 1;
}
.jn-ip-font{
zoom:0.8;
}
</style>
5 changes: 0 additions & 5 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,11 +220,6 @@ footer {
margin-top: 50vh;
}

.jn-shortcut-row {
margin: 2pt 0 2pt 0;
border-bottom: 1px solid;
}

.jn-dark-mode-help-border {
border-color: #a8a8a863 !important;
}
Expand Down
Loading