Global Server 3 years ago
parent
commit
d547a3ccaa
  1. 2
      src/components/sidebarLeft/index.ts
  2. 4
      src/components/sidebarLeft/tabs/peopleNearby.ts
  3. 136
      src/scss/partials/_peopleNearby.scss

2
src/components/sidebarLeft/index.ts

@ -25,7 +25,7 @@ import AppNewChannelTab from "./tabs/newChannel"; @@ -25,7 +25,7 @@ import AppNewChannelTab from "./tabs/newChannel";
import AppContactsTab from "./tabs/contacts";
import AppArchivedTab from "./tabs/archivedTab";
import AppAddMembersTab from "./tabs/addMembers";
import AppPeopleNearby from "./tabs/PeopleNearby";
import AppPeopleNearby from "./tabs/peopleNearby";
import { i18n_, LangPackKey } from "../../lib/langPack";
import { ButtonMenuItemOptions } from "../buttonMenu";
import CheckboxField from "../checkboxField";

4
src/components/sidebarLeft/tabs/PeopleNearby.ts → src/components/sidebarLeft/tabs/peopleNearby.ts

@ -185,7 +185,7 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -185,7 +185,7 @@ export default class AppPeopleNearby extends SliderSuperTab {
break;
}
}
dom.lastMessageSpan.append(', '+i18n('Members', [participantsCount]));
dom.lastMessageSpan.append(', ', i18n('Members', [participantsCount]));
}
});
@ -234,7 +234,7 @@ export default class AppPeopleNearby extends SliderSuperTab { @@ -234,7 +234,7 @@ export default class AppPeopleNearby extends SliderSuperTab {
const distanceCheck = this.calculateDistance(
result.coords.latitude, result.coords.longitude,
this.latestLocationSaved.latitude, this.latestLocationSaved.longitude
);
) > 100;
if((isLatitudeDifferent || isLongitudeDifferent) && distanceCheck){
appUsersManager.getLocated(
result.coords.latitude,

136
src/scss/partials/_peopleNearby.scss

@ -1,79 +1,81 @@ @@ -1,79 +1,81 @@
div.text.nearby-description {
margin-top: 15px;
text-align: center;
color: var(--primary-text-color);
}
.peoplenearby-container {
div.text.nearby-description {
margin-top: 15px;
text-align: center;
color: var(--primary-text-color);
}
div.text.nearby-error {
color: var(--gc-secondary-text-color);
margin-top: 10px;
text-align: center;
}
div.text.nearby-error {
color: var(--gc-secondary-text-color);
margin-top: 10px;
text-align: center;
}
.locating-animation-container {
min-height: 140px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.locating-animation-container {
min-height: 140px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
& .tgico.tgico-location {
padding: 50px;
background: var(--avatar-color-bottom);
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
& .tgico.tgico-location {
padding: 50px;
background: var(--avatar-color-bottom);
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
&::before {
font-size: 58px;
color: white;
}
}
&::before {
font-size: 58px;
color: white;
}
}
& .locating-animation-waves {
position: fixed;
& .locating-animation-waves {
position: fixed;
&.wave-1,
&.wave-3 {
animation: 3s waves-animation infinite;
width: 50px;
height: 50px;
border: 5px solid white;
border-radius: 50%;
clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%);
margin-left: 36px;
}
&.wave-1,
&.wave-3 {
animation: 3s waves-animation infinite;
width: 50px;
height: 50px;
border: 5px solid white;
border-radius: 50%;
clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%);
margin-left: 36px;
}
&.wave-2,
&.wave-4 {
animation: 5s waves-animation infinite;
width: 66px;
height: 71px;
border: 5px solid white;
border-radius: 50%;
clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%);
margin-left: 51px;
margin-top: 1px;
animation-delay: 2s;
}
&.wave-2,
&.wave-4 {
animation: 5s waves-animation infinite;
width: 66px;
height: 71px;
border: 5px solid white;
border-radius: 50%;
clip-path: polygon(72% 0, 100% 0, 100% 100%, 72% 100%);
margin-left: 51px;
margin-top: 1px;
animation-delay: 2s;
}
&.wave-3 {
margin-left: -36px !important;
transform: rotateY(180deg);
}
&.wave-3 {
margin-left: -36px !important;
transform: rotateY(180deg);
}
&.wave-4 {
margin-left: -51px !important;
transform: rotateY(180deg);
&.wave-4 {
margin-left: -51px !important;
transform: rotateY(180deg);
}
}
}
}
}
@keyframes waves-animation {
from { opacity: 100%; }
50% { opacity: 0%; }
to { opacity: 100%; }
@keyframes waves-animation {
from { opacity: 100%; }
50% { opacity: 0%; }
to { opacity: 100%; }
}
}
Loading…
Cancel
Save