Skip to content

Commit

Permalink
UX Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jason5ng32
jason5ng32 committed Feb 3, 2024
1 parent 817bd49 commit 4a049f9
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 16 deletions.
17 changes: 9 additions & 8 deletions src/components/ipcheck.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,45 +32,46 @@
<div v-for="card 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 }" style="font-weight: bold;">
<div class="card-header jn-ip-title" :class="{ 'dark-mode-title': isDarkMode, 'bg-light': !isMapShown && !isDarkMode }" style="font-weight: bold;">
<span>{{ $t('ipInfos.Source') }}: {{ card.source }}</span>
<button @click="refreshCard(card)"
:class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']">
<i class="bi bi-arrow-clockwise"></i></button>
</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">
<ul class="list-group list-group-flush">
<li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
class="jn-text">🖥️ {{ $t('ipInfos.IP') }}</span>: {{ card.ip
class="jn-text"><i class="bi bi-pc-display-horizontal"></i> {{ $t('ipInfos.IP') }}</span>: {{ 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>
</li>
<li class="list-group-item jn-list-group-item"
:class="{ 'dark-mode': isDarkMode, 'mobile-list': isMobile && isCardsCollapsed }">
<span class="jn-text">🌍 {{ $t('ipInfos.Country') }}</span>: {{
<span class="jn-text"><i class="bi bi-geo-alt-fill"></i> {{ $t('ipInfos.Country') }}</span>: {{
card.country_name }}&nbsp;<span v-if="card.country_code"
:class="'fi fi-' + card.country_code.toLowerCase()"></span>
</li>
<li v-show="!isMobile || !isCardsCollapsed" class="list-group-item jn-list-group-item"
:class="{ 'dark-mode': isDarkMode }"><span class="jn-text">🏚️
:class="{ 'dark-mode': isDarkMode }"><span class="jn-text"><i class="bi bi-houses"></i>
{{ $t('ipInfos.Region') }}</span>: {{ card.region
}}</li>
<li v-show="!isMobile || !isCardsCollapsed" class="list-group-item jn-list-group-item"
:class="{ 'dark-mode': isDarkMode }"><span class="jn-text">🚏
:class="{ 'dark-mode': isDarkMode }"><span class="jn-text"><i class="bi bi-sign-turn-right"></i>
{{ $t('ipInfos.City') }}</span>: {{ card.city }}
</li>
<li v-show="!isMobile || !isCardsCollapsed" class="list-group-item jn-list-group-item"
:class="{ 'dark-mode': isDarkMode }"><span class="jn-text">🏢
:class="{ 'dark-mode': isDarkMode }"><span class="jn-text"><i class="bi bi-buildings"></i>
{{ $t('ipInfos.ISP') }}</span>: {{ card.isp }}
</li>
<li v-show="!isMobile || !isCardsCollapsed" class="list-group-item jn-list-group-item"
:class="{ 'dark-mode': isDarkMode }"><span class="jn-text">📶
:class="{ 'dark-mode': isDarkMode }"><span class="jn-text"><i class="bi bi-reception-4"></i>
{{ $t('ipInfos.ASN') }}</span>: <a v-if="card.asnlink" :href="card.asnlink" target="_blank">{{
card.asn }}</a><a v-else>{{ card.asn }}</a></li>
</ul>
Expand Down Expand Up @@ -468,7 +469,7 @@ export default {
longitude: data.longitude || "",
isp: data.org || "",
asn: data.asn || "",
asnlink: data.asn ? `https://radar.cloudflare.com/traffic/${data.asn}` : false,
asnlink: data.asn ? `https://radar.cloudflare.com/${data.asn}` : false,
mapUrl: data.latitude && data.longitude ? `/api/map?latitude=${data.latitude}&longitude=${data.longitude}&language=${this.bingMapLanguage}&CanvasMode=CanvasLight` : "",
mapUrl_dark: data.latitude && data.longitude ? `/api/map?latitude=${data.latitude}&longitude=${data.longitude}&language=${this.bingMapLanguage}&CanvasMode=RoadDark` : ""
};
Expand Down
10 changes: 5 additions & 5 deletions src/components/queryip.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,24 @@
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }">
<span class="jn-text">🌍 {{ $t('ipInfos.Country') }}</span>: {{
<span class="jn-text"><i class="bi bi-pc-display-horizontal"></i> {{ $t('ipInfos.Country') }}</span>: {{
modalQueryResult.country_name }}&nbsp;<span v-if="modalQueryResult.country_code"
:class="'fi fi-' + modalQueryResult.country_code.toLowerCase()"></span>
</li>
<li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
class="jn-text">🏚️ {{ $t('ipInfos.Region') }}</span>: {{
class="jn-text"><i class="bi bi-houses"></i> {{ $t('ipInfos.Region') }}</span>: {{
modalQueryResult.region
}}</li>
<li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
class="jn-text">🚏 {{ $t('ipInfos.City') }}</span>: {{
class="jn-text"><i class="bi bi-sign-turn-right"></i> {{ $t('ipInfos.City') }}</span>: {{
modalQueryResult.city }}
</li>
<li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
class="jn-text">🏢 {{ $t('ipInfos.ISP') }}</span>: {{
class="jn-text"><i class="bi bi-buildings"></i> {{ $t('ipInfos.ISP') }}</span>: {{
modalQueryResult.isp }}
</li>
<li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
class="jn-text">📶 {{ $t('ipInfos.ASN') }}</span>: <a
class="jn-text"><i class="bi bi-reception-4"></i> {{ $t('ipInfos.ASN') }}</span>: <a
v-if="modalQueryResult.asnlink" :href="modalQueryResult.asnlink" target="_blank">{{
modalQueryResult.asn }}</a><a v-else>{{ modalQueryResult.asn }}</a></li>
</ul>
Expand Down
8 changes: 5 additions & 3 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,11 @@
max-width: 1400px;
}

.jn-text {
font-weight: bold;
}
/* .jn-text {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #1a8754;
} */

.jn-list-group-item {
padding: 0.75rem 0.25rem;
Expand Down

0 comments on commit 4a049f9

Please sign in to comment.