Skip to content

Commit

Permalink
feat: add hint for mobile swipe action (#608)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellite
ellite authored Nov 3, 2024
1 parent 20719a8 commit 49666f8
Show file tree
Hide file tree
Showing 11 changed files with 97 additions and 26 deletions.
4 changes: 2 additions & 2 deletions endpoints/admin/adduser.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,8 +235,8 @@ function validate($value)
$stmt->execute();

// Add settings for that user
$query = "INSERT INTO settings (dark_theme, monthly_price, convert_currency, remove_background, color_theme, hide_disabled, user_id)
VALUES (2, 0, 0, 0, 'blue', 0, :user_id)";
$query = "INSERT INTO settings (dark_theme, monthly_price, convert_currency, remove_background, color_theme, hide_disabled, user_id, disabled_to_bottom, show_original_price, mobile_nav)
VALUES (2, 0, 0, 0, 'blue', 0, :user_id, 0, 0, 0)";
$stmt = $db->prepare($query);
$stmt->bindValue(':user_id', $newUserId, SQLITE3_INTEGER);
$stmt->execute();
Expand Down
Binary file added images/siteimages/mobilenav.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/siteimages/mobilenavdark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 2 additions & 3 deletions includes/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,11 @@ function hex2rgb($hex)
return "$r, $g, $b";
}

$mobileNavigation = $settings['mobile_nav'] ? "mobile-navivagtion" : "";
$mobileNavigation = $settings['mobile_nav'] ? "mobile-navigation" : "";

?>
<!DOCTYPE html>
<html dir="<?= $languages[$lang]['dir'] ?>">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Expand Down Expand Up @@ -106,7 +105,7 @@ function hex2rgb($hex)
window.update_theme_settings = "<?= $updateThemeSettings ?>";
window.lang = "<?= $lang ?>";
window.colorTheme = "<?= $colorTheme ?>";
window.mobileNavigation = "<?= $mobileNavigation !== "" ?>";
window.mobileNavigation = "<?= $settings['mobileNavigation'] == "true" ?>";
</script>
<style>
<?= htmlspecialchars($customCss, ENT_QUOTES, 'UTF-8') ?>
Expand Down
4 changes: 2 additions & 2 deletions registration.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,8 +268,8 @@ function validate($value)
$stmt->execute();

// Add settings for that user
$query = "INSERT INTO settings (dark_theme, monthly_price, convert_currency, remove_background, color_theme, hide_disabled, user_id)
VALUES (2, 0, 0, 0, 'blue', 0, :user_id)";
$query = "INSERT INTO settings (dark_theme, monthly_price, convert_currency, remove_background, color_theme, hide_disabled, user_id, disabled_to_bottom, show_original_price, mobile_nav)
VALUES (2, 0, 0, 0, 'blue', 0, :user_id, 0, 0, 0)";
$stmt = $db->prepare($query);
$stmt->bindValue(':user_id', $userId, SQLITE3_INTEGER);
$stmt->execute();
Expand Down
19 changes: 17 additions & 2 deletions scripts/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,11 @@ document.addEventListener('DOMContentLoaded', function () {
const themePreference = prefersDarkMode ? 'dark' : 'light';
const darkThemeCss = document.querySelector("#dark-theme");
darkThemeCss.disabled = themePreference === 'light';
document.body.className = themePreference;

// Preserve existing classes on the body tag
const existingClasses = document.body.className.split(' ').filter(cls => cls !== 'dark' && cls !== 'light');
document.body.className = [...existingClasses, themePreference].join(' ');

document.cookie = `inUseTheme=${themePreference}; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Strict`;
const themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
themeColorMetaTag.setAttribute('content', themePreference === 'dark' ? '#222222' : '#FFFFFF');
Expand All @@ -97,4 +101,15 @@ document.addEventListener('DOMContentLoaded', function () {
document.querySelector('.dropdown-content').addEventListener('focus', function () {
isDropdownOpen = true;
});
});
});

function getCookie(name) {
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
cookie = cookie.trim();
if (cookie.startsWith(`${name}=`)) {
return cookie.substring(name.length + 1);
}
}
return null;
}
55 changes: 46 additions & 9 deletions scripts/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ function deleteSubscription(event, id) {
.then(response => {
if (response.ok) {
showSuccessMessage(translate('subscription_deleted'));
fetchSubscriptions();
fetchSubscriptions(null, null, "delete");
closeAddSubscription();
} else {
showErrorMessage(translate('error_deleting_subscription'));
Expand Down Expand Up @@ -222,7 +222,7 @@ function cloneSubscription(event, id) {
.then(data => {
if (data.success) {
const id = data.id;
fetchSubscriptions(id, event);
fetchSubscriptions(id, event, "clone");
showSuccessMessage(decodeURI(data.message));
} else {
showErrorMessage(data.message || translate('error'));
Expand Down Expand Up @@ -303,7 +303,7 @@ function closeLogoSearch() {
logoResults.innerHTML = "";
}

function fetchSubscriptions(id, event) {
function fetchSubscriptions(id, event, initiator) {
const subscriptionsContainer = document.querySelector("#subscriptions");
let getSubscriptions = "endpoints/subscriptions/get.php";

Expand Down Expand Up @@ -333,11 +333,18 @@ function fetchSubscriptions(id, event) {
}
}

if (id && event) {
if (initiator == "clone" && id && event) {
openEditSubscription(event, id);
}

setSwipeElements();
if (initiator === "add") {
if (document.getElementsByClassName('subscription').length === 1) {
setTimeout(() => {
swipeHintAnimation();
}, 1000);
}
}
})
.catch(error => {
console.error(translate('error_reloading_subscription'), error);
Expand All @@ -359,7 +366,7 @@ function setSortOption(sortOption) {
expirationDate.setDate(expirationDate.getDate() + daysToExpire);
const cookieValue = encodeURIComponent(sortOption) + '; expires=' + expirationDate.toUTCString();
document.cookie = 'sortOrder=' + cookieValue + '; SameSite=Strict';
fetchSubscriptions();
fetchSubscriptions(null, null, "sort");
toggleSortOptions();
}

Expand Down Expand Up @@ -407,8 +414,9 @@ function submitFormData(formData, submitButton, endpoint) {
.then((data) => {
if (data.status === "Success") {
showSuccessMessage(data.message);
fetchSubscriptions();
fetchSubscriptions(null, null, "add");
closeAddSubscription();

}
})
.catch((error) => {
Expand Down Expand Up @@ -653,7 +661,7 @@ document.querySelectorAll('.filter-item').forEach(function (item) {
document.querySelector('#clear-filters').classList.add('hide');
}

fetchSubscriptions();
fetchSubscriptions(null, null, "filter");
});
});

Expand All @@ -667,7 +675,7 @@ function clearFilters() {
item.classList.remove('selected');
});
document.querySelector('#clear-filters').classList.add('hide');
fetchSubscriptions();
fetchSubscriptions(null, null, "clearfilters");
}

let currentActions = null;
Expand Down Expand Up @@ -704,4 +712,33 @@ function expandActions(event, subscriptionId) {
} else {
currentActions = null;
}
}
}

function swipeHintAnimation() {
if (window.mobileNavigation) {
const maxAnimations = 3;
const cookieName = 'swipeHintCount';

let count = parseInt(getCookie(cookieName)) || 0;
if (count < maxAnimations) {
const firstElement = document.querySelector('.subscription');
if (firstElement) {
firstElement.style.transition = 'transform 0.3s ease';
firstElement.style.transform = 'translateX(-80px)';

setTimeout(() => {
firstElement.style.transform = 'translateX(0px)';
}, 600);
}

count++;
document.cookie = `${cookieName}=${count}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/; SameSite=Strict`;
}
}
}

window.addEventListener('load', () => {
if (document.querySelector('.subscription')) {
swipeHintAnimation();
}
});
2 changes: 2 additions & 0 deletions service-worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ self.addEventListener('install', function (event) {
'images/siteicons/wallos.png',
'images/siteicons/walloswhite.png',
'images/siteimages/empty.png',
'images/siteimages/mobilenav.png',
'images/siteimages/mobilenavdark.png',
'images/avatars/1.svg',
'images/avatars/2.svg',
'images/avatars/3.svg',
Expand Down
2 changes: 2 additions & 0 deletions settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1205,6 +1205,8 @@ class="thin"><?= $settings['customCss'] ?? "" ?></textarea>
echo 'checked'; ?>>
<label for="mobilenavigation"><?= translate('use_mobile_navigation_bar', $i18n) ?></label>
</div>
<div class="mobile-nav-image">
</div>
</div>
</div>
<div class="settings-notes">
Expand Down
4 changes: 4 additions & 0 deletions styles/dark-theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,10 @@ input {
border: 2px dashed #444;
}

.mobile-nav-image {
background-image: url("../images/siteimages/mobilenavdark.png");
}

@media (max-width: 768px) {
.mobile-nav {
background-color: #222;
Expand Down
28 changes: 20 additions & 8 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ body.no-scroll {
}

@media (max-width: 768px) {
.mobile-navivagtion main {
.mobile-navigation main {
margin-bottom: 70px;
}
}
Expand Down Expand Up @@ -128,7 +128,7 @@ header .logo .logo-image svg {
}

@media (max-width: 768px) {
.mobile-navivagtion .dropbtn:after {
.mobile-navigation .dropbtn:after {
content: "";
display: none;
}
Expand Down Expand Up @@ -346,7 +346,7 @@ button:hover svg .main-color {
background-color: #FFFFFF;
}

.subscription-container > .mobile-actions {
.subscription-container>.mobile-actions {
display: flex;
flex-direction: row;
position: absolute;
Expand All @@ -358,7 +358,7 @@ button:hover svg .main-color {
border-bottom-right-radius: 16px;
}

.subscription-container > .mobile-actions > button {
.subscription-container>.mobile-actions>button {
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -372,7 +372,8 @@ button:hover svg .main-color {
}

button.mobile-action-edit {
background-color: #ffbf15; /* #f3e22d; */
background-color: #ffbf15;
/* #f3e22d; */
}

button.mobile-action-delete {
Expand All @@ -383,7 +384,7 @@ button.mobile-action-clone {
background-color: #2da7f3
}

.subscription-container > .mobile-actions > button > svg {
.subscription-container>.mobile-actions>button>svg {
width: 25px;
height: 25px;
min-height: 25px;
Expand Down Expand Up @@ -1752,7 +1753,7 @@ button.dark-theme-button i {
width: 100%;
}

.mobile-navivagtion .toast {
.mobile-navigation .toast {
bottom: 70px;
}
}
Expand Down Expand Up @@ -2652,6 +2653,17 @@ input[type="radio"]:checked+label::after {
display: none;
}

.mobile-nav-image {
width: 100%;
max-width: 440px;
margin-top: 15px;
background-image: url("../images/siteimages/mobilenav.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 16/9;
}

@media (max-width: 768px) {
.mobile-nav {
position: fixed;
Expand Down Expand Up @@ -2693,7 +2705,7 @@ input[type="radio"]:checked+label::after {
color: #202020;
}

.mobile-navivagtion .mobileNavigationHideOnMobile {
.mobile-navigation .mobileNavigationHideOnMobile {
display: none !important;
}
}

0 comments on commit 49666f8

Please sign in to comment.