Skip to content

Commit

Permalink
feat: swipe subscription for actions
Browse files Browse the repository at this point in the history
Miguel Ribeiro committed Nov 1, 2024
1 parent 4a2829c commit c3383d7
Showing 10 changed files with 229 additions and 90 deletions.
2 changes: 1 addition & 1 deletion endpoints/subscriptions/get.php
Original file line number Diff line number Diff line change
@@ -193,7 +193,7 @@
}

if (isset($print)) {
printSubscriptions($print, $sort, $categories, $members, $i18n, $colorTheme, "../../", $settings['disabledToBottom']);
printSubscriptions($print, $sort, $categories, $members, $i18n, $colorTheme, "../../", $settings['disabledToBottom'], $settings['mobileNavigation']);
}

if (count($subscriptions) == 0) {
3 changes: 3 additions & 0 deletions images/siteicons/svg/mobile-menu/clone.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
<path fill="currentColor" d="M 10 0 C 6.699219 0 4 2.699219 4 6 C 4 9.300781 6.699219 12 10 12 C 13.300781 12 16 9.300781 16 6 C 16 2.699219 13.300781 0 10 0 Z M 40 0 C 36.699219 0 34 2.699219 34 6 C 34 9.300781 36.699219 12 40 12 C 43.300781 12 46 9.300781 46 6 C 46 2.699219 43.300781 0 40 0 Z M 10 2 C 12.222656 2 14 3.777344 14 6 C 14 8.222656 12.222656 10 10 10 C 7.777344 10 6 8.222656 6 6 C 6 3.777344 7.777344 2 10 2 Z M 40 2 C 42.222656 2 44 3.777344 44 6 C 44 8.222656 42.222656 10 40 10 C 37.777344 10 36 8.222656 36 6 C 36 3.777344 37.777344 2 40 2 Z M 6.09375 13 C 2.746094 13 0 15.746094 0 19.09375 L 0 32.8125 C 0 34.078125 1.042969 35 2.3125 35 L 4 35 L 4 47.6875 C 4 48.957031 5.042969 50 6.3125 50 L 13.8125 50 C 15.082031 50 16.09375 48.957031 16.09375 47.6875 L 16.09375 35 L 17.8125 35 C 19.082031 35 20.09375 33.957031 20.09375 32.6875 L 20.09375 29 C 20.097656 28.640625 19.910156 28.304688 19.597656 28.121094 C 19.285156 27.941406 18.902344 27.941406 18.589844 28.121094 C 18.277344 28.304688 18.089844 28.640625 18.09375 29 L 18.09375 32.6875 C 18.09375 32.816406 17.941406 33 17.8125 33 L 15.09375 33 C 14.542969 33 14.09375 33.449219 14.09375 34 L 14.09375 47.6875 C 14.09375 47.816406 13.941406 48 13.8125 48 L 6.3125 48 C 6.183594 48 6 47.816406 6 47.6875 L 6 34 C 6 33.449219 5.550781 33 5 33 L 2.3125 33 C 2.183594 33 2 32.746094 2 32.8125 L 2 19.09375 C 2 16.839844 3.839844 15 6.09375 15 L 13.90625 15 C 16.160156 15 18 16.839844 18 19.09375 L 18 21 C 17.996094 21.359375 18.183594 21.695313 18.496094 21.878906 C 18.808594 22.058594 19.191406 22.058594 19.503906 21.878906 C 19.816406 21.695313 20.003906 21.359375 20 21 L 20 19.09375 C 20 15.746094 17.253906 13 13.90625 13 Z M 36.09375 13 C 34.671875 13 33.347656 13.484375 32.28125 14.3125 C 31.945313 14.507813 31.75 14.882813 31.789063 15.269531 C 31.824219 15.660156 32.082031 15.992188 32.449219 16.121094 C 32.816406 16.25 33.226563 16.15625 33.5 15.875 C 34.234375 15.304688 35.117188 15 36.09375 15 L 44 15 C 46.253906 15 48.09375 16.839844 48.09375 19.09375 L 48.09375 32.6875 C 48.09375 32.816406 47.941406 33 47.8125 33 L 45.09375 33 C 44.542969 33 44.09375 33.449219 44.09375 34 L 44.09375 47.6875 C 44.09375 47.816406 43.941406 48 43.8125 48 L 36.3125 48 C 36.183594 48 36 47.816406 36 47.6875 L 36 34 C 36 33.449219 35.550781 33 35 33 L 32.3125 33 C 31.953125 32.996094 31.617188 33.183594 31.433594 33.496094 C 31.253906 33.808594 31.253906 34.191406 31.433594 34.503906 C 31.617188 34.816406 31.953125 35.003906 32.3125 35 L 34 35 L 34 47.6875 C 34 48.957031 35.042969 50 36.3125 50 L 43.8125 50 C 45.082031 50 46.09375 48.957031 46.09375 47.6875 L 46.09375 35 L 47.8125 35 C 49.082031 35 50.09375 33.957031 50.09375 32.6875 L 50.09375 19.09375 C 50.09375 15.746094 47.347656 13 44 13 Z M 27.90625 17.96875 C 27.863281 17.976563 27.820313 17.988281 27.78125 18 C 27.40625 18.066406 27.105469 18.339844 27 18.703125 C 26.894531 19.070313 27.003906 19.460938 27.28125 19.71875 L 31.5625 24 L 14 24 C 13.96875 24 13.9375 24 13.90625 24 C 13.355469 24.027344 12.925781 24.496094 12.953125 25.046875 C 12.980469 25.597656 13.449219 26.027344 14 26 L 31.5625 26 L 27.28125 30.28125 C 26.882813 30.679688 26.882813 31.320313 27.28125 31.71875 C 27.679688 32.117188 28.320313 32.117188 28.71875 31.71875 L 34.5625 25.84375 C 34.617188 25.808594 34.671875 25.765625 34.71875 25.71875 L 34.78125 25.625 C 34.804688 25.605469 34.824219 25.585938 34.84375 25.5625 L 35.40625 25 L 34.84375 24.4375 C 34.808594 24.382813 34.765625 24.328125 34.71875 24.28125 L 34.6875 24.28125 C 34.667969 24.257813 34.648438 24.238281 34.625 24.21875 L 28.71875 18.28125 C 28.511719 18.058594 28.210938 17.945313 27.90625 17.96875 Z"></path>
</svg>
3 changes: 3 additions & 0 deletions images/siteicons/svg/mobile-menu/delete.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
<path fill="currentColor" d="M 21 2 C 19.354545 2 18 3.3545455 18 5 L 18 7 L 10 7 L 8 7 A 1.0001 1.0001 0 1 0 8 9 L 9 9 L 9 45 C 9 46.654 10.346 48 12 48 L 31.074219 48 C 30.523219 47.386 30.033187 46.718 29.617188 46 L 12 46 C 11.448 46 11 45.551 11 45 L 11 9 L 18.832031 9 A 1.0001 1.0001 0 0 0 19.158203 9 L 30.832031 9 A 1.0001 1.0001 0 0 0 31.158203 9 L 39 9 L 39 28.050781 C 39.331 28.023781 39.662 28 40 28 C 40.338 28 40.669 28.023781 41 28.050781 L 41 9 L 42 9 A 1.0001 1.0001 0 1 0 42 7 L 40 7 L 32 7 L 32 5 C 32 3.3545455 30.645455 2 29 2 L 21 2 z M 21 4 L 29 4 C 29.554545 4 30 4.4454545 30 5 L 30 7 L 20 7 L 20 5 C 20 4.4454545 20.445455 4 21 4 z M 18.984375 13.986328 A 1.0001 1.0001 0 0 0 18 15 L 18 40 A 1.0001 1.0001 0 1 0 20 40 L 20 15 A 1.0001 1.0001 0 0 0 18.984375 13.986328 z M 24.984375 13.986328 A 1.0001 1.0001 0 0 0 24 15 L 24 40 A 1.0001 1.0001 0 1 0 26 40 L 26 15 A 1.0001 1.0001 0 0 0 24.984375 13.986328 z M 31 14 C 30.447 14 30 14.448 30 15 L 30 33.371094 C 30.565 32.520094 31.242 31.753219 32 31.074219 L 32 15 C 32 14.448 31.553 14 31 14 z M 40 30 C 34.5 30 30 34.5 30 40 C 30 45.5 34.5 50 40 50 C 45.5 50 50 45.5 50 40 C 50 34.5 45.5 30 40 30 z M 40 32 C 44.4 32 48 35.6 48 40 C 48 44.4 44.4 48 40 48 C 35.6 48 32 44.4 32 40 C 32 35.6 35.6 32 40 32 z M 36.5 35.5 C 36.25 35.5 36.000781 35.600781 35.800781 35.800781 C 35.400781 36.200781 35.400781 36.799219 35.800781 37.199219 L 38.599609 40 L 35.800781 42.800781 C 35.400781 43.200781 35.400781 43.799219 35.800781 44.199219 C 36.200781 44.599219 36.799219 44.599219 37.199219 44.199219 L 40 41.400391 L 42.800781 44.199219 C 43.200781 44.599219 43.799219 44.599219 44.199219 44.199219 C 44.399219 43.999219 44.5 43.7 44.5 43.5 C 44.5 43.3 44.399219 43.000781 44.199219 42.800781 L 41.400391 40 L 44.199219 37.199219 C 44.399219 36.999219 44.5 36.7 44.5 36.5 C 44.5 36.3 44.399219 36.000781 44.199219 35.800781 C 43.799219 35.400781 43.200781 35.400781 42.800781 35.800781 L 40 38.599609 L 37.199219 35.800781 C 36.999219 35.600781 36.75 35.5 36.5 35.5 z"></path>
</svg>
3 changes: 3 additions & 0 deletions images/siteicons/svg/mobile-menu/edit.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
<path fill="currentColor" d="M 44.34375 2 C 43.402344 2 42.433594 2.347656 41.71875 3.0625 L 40.375 4.4375 L 45.5625 9.625 C 45.558594 9.628906 46.9375 8.28125 46.9375 8.28125 C 48.371094 6.847656 48.371094 4.496094 46.9375 3.0625 C 46.21875 2.34375 45.285156 2 44.34375 2 Z M 38.75 5.9375 L 16.03125 28.65625 L 15.96875 28.96875 L 15.03125 33.8125 L 14.71875 35.28125 L 16.1875 34.96875 L 21.03125 34.03125 L 21.34375 33.96875 L 44.0625 11.25 L 42.625 9.84375 L 20.375 32.0625 L 17.9375 29.625 L 40.15625 7.375 Z M 3 10 C 2.445313 10 2 10.449219 2 11 L 2 47 C 2 47.550781 2.445313 48 3 48 L 39 48 C 39.554688 48 40 47.550781 40 47 L 40 18 L 38 20 L 38 46 L 4 46 L 4 12 L 30 12 L 32 10 Z"></path>
</svg>
1 change: 1 addition & 0 deletions includes/getsettings.php
Original file line number Diff line number Diff line change
@@ -27,6 +27,7 @@
$settings['hideDisabledSubscriptions'] = $settings['hide_disabled'] ? 'true': 'false';
$settings['disabledToBottom'] = $settings['disabled_to_bottom'] ? 'true': 'false';
$settings['showOriginalPrice'] = $settings['show_original_price'] ? 'true': 'false';
$settings['mobileNavigation'] = $settings['mobile_nav'] ? 'true': 'false';
}

$query = "SELECT * FROM custom_colors WHERE user_id = :userId";
1 change: 1 addition & 0 deletions includes/header.php
Original file line number Diff line number Diff line change
@@ -106,6 +106,7 @@ function hex2rgb($hex)
window.update_theme_settings = "<?= $updateThemeSettings ?>";
window.lang = "<?= $lang ?>";
window.colorTheme = "<?= $colorTheme ?>";
window.mobileNavigation = "<?= $mobileNavigation !== "" ?>";
</script>
<style>
<?= htmlspecialchars($customCss, ENT_QUOTES, 'UTF-8') ?>
184 changes: 107 additions & 77 deletions includes/list_subscriptions.php
Original file line number Diff line number Diff line change
@@ -51,7 +51,7 @@ function getPriceConverted($price, $currency, $database)
}
}

function printSubscriptions($subscriptions, $sort, $categories, $members, $i18n, $colorTheme, $imagePath, $disabledToBottom)
function printSubscriptions($subscriptions, $sort, $categories, $members, $i18n, $colorTheme, $imagePath, $disabledToBottom, $mobileNavigation)
{
if ($sort === "price") {
usort($subscriptions, function ($a, $b) {
@@ -99,94 +99,124 @@ function printSubscriptions($subscriptions, $sort, $categories, $members, $i18n,
$currentPaymentMethodId = $subscription['payment_method_id'];
}
?>
<div class="subscription<?= $subscription['inactive'] ? ' inactive' : '' ?>"
onClick="toggleOpenSubscription(<?= $subscription['id'] ?>)" data-id="<?= $subscription['id'] ?>"
data-name="<?= $subscription['name'] ?>">
<div class="subscription-main">
<span class="logo">
<?php
if ($subscription['logo'] != "") {
?>
<img src="<?= $subscription['logo'] ?>">
<?php
} else {
include $imagePath . "images/siteicons/svg/logo.php";
}
?>
</span>
<span class="name"><?= $subscription['name'] ?></span>
<span class="cycle"><?= $subscription['billing_cycle'] ?></span>
<span class="next"><?= $subscription['next_payment'] ?></span>
<span class="price">
<span class="payment_method">
<img src="<?= $subscription['payment_method_icon'] ?>"
title="<?= translate('payment_method', $i18n) ?>: <?= $subscription['payment_method_name'] ?>" />
</span>
<span class="value">
<?= CurrencyFormatter::format($subscription['price'], $subscription['currency_code']) ?>
<div class="subscription-container">
<?php
if ($mobileNavigation === 'true') {
?>
<div class="mobile-actions" data-id="<?= $subscription['id'] ?>">
<button class="mobile-action-edit" onClick="openEditSubscription(event, <?= $subscription['id'] ?>)">
<?php include $imagePath . "images/siteicons/svg/mobile-menu/edit.php"; ?>
Edit
</button>
<button class="mobile-action-delete" onClick="deleteSubscription(event, <?= $subscription['id'] ?>)">
<?php include $imagePath . "images/siteicons/svg/mobile-menu/delete.php"; ?>
Delete
</button>
<button class="mobile-action-clone" onClick="cloneSubscription(event, <?= $subscription['id'] ?>)">
<?php include $imagePath . "images/siteicons/svg/mobile-menu/clone.php"; ?>
Clone
</button>
</div>
<?php
}
?>

<div class="subscription<?= $subscription['inactive'] ? ' inactive' : '' ?>"
onClick="toggleOpenSubscription(<?= $subscription['id'] ?>)" data-id="<?= $subscription['id'] ?>"
data-name="<?= $subscription['name'] ?>">
<div class="subscription-main">
<span class="logo">
<?php
if (isset($subscription['original_price']) && $subscription['original_price'] != $subscription['price']) {
if ($subscription['logo'] != "") {
?>
<span
class="original_price">(<?= CurrencyFormatter::format($subscription['original_price'], $subscription['original_currency_code']) ?>)</span>
<img src="<?= $subscription['logo'] ?>">
<?php
} else {
include $imagePath . "images/siteicons/svg/logo.php";
}
?>
</span>
</span>
<button type="button" class="actions-expand" onClick="expandActions(event, <?= $subscription['id'] ?>)">
<i class="fas fa-ellipsis-v"></i>
</button>
<ul class="actions">
<li class="edit" title="<?= translate('edit_subscription', $i18n) ?>"
onClick="openEditSubscription(event, <?= $subscription['id'] ?>)">
<?php include $imagePath . "images/siteicons/svg/edit.php"; ?>
<?= translate('edit_subscription', $i18n) ?>
</li>
<li class="delete" title="<?= translate('delete', $i18n) ?>"
onClick="deleteSubscription(event, <?= $subscription['id'] ?>)">
<?php include $imagePath . "images/siteicons/svg/delete.php"; ?>
<?= translate('delete', $i18n) ?>
</li>
<li class="clone" title="<?= translate('clone', $i18n) ?>"
onClick="cloneSubscription(event, <?= $subscription['id'] ?>)">
<?php include $imagePath . "images/siteicons/svg/clone.php"; ?>
<?= translate('clone', $i18n) ?>
</li>
</ul>
</div>
<div class="subscription-secondary">
<span
class="name"><?php include $imagePath . "images/siteicons/svg/subscription.php"; ?><?= $subscription['name'] ?></span>
<span class="payer_user"
title="<?= translate('paid_by', $i18n) ?>"><?php include $imagePath . "images/siteicons/svg/payment.php"; ?><?= $members[$subscription['payer_user_id']]['name'] ?></span>
<span class="category"
title="<?= translate('category', $i18n) ?>"><?php include $imagePath . "images/siteicons/svg/category.php"; ?><?= $categories[$subscription['category_id']]['name'] ?></span>
<?php
if ($subscription['url'] != "") {
$url = $subscription['url'];
if (!preg_match('/^https?:\/\//', $url)) {
$url = "https://" . $url;
<span class="name"><?= $subscription['name'] ?></span>
<span class="cycle"><?= $subscription['billing_cycle'] ?></span>
<span class="next"><?= $subscription['next_payment'] ?></span>
<span class="price">
<span class="payment_method">
<img src="<?= $subscription['payment_method_icon'] ?>"
title="<?= translate('payment_method', $i18n) ?>: <?= $subscription['payment_method_name'] ?>" />
</span>
<span class="value">
<?= CurrencyFormatter::format($subscription['price'], $subscription['currency_code']) ?>
<?php
if (isset($subscription['original_price']) && $subscription['original_price'] != $subscription['price']) {
?>
<span
class="original_price">(<?= CurrencyFormatter::format($subscription['original_price'], $subscription['original_currency_code']) ?>)</span>
<?php
}
?>
</span>
</span>
<?php
$desktopMenuButtonClass = "";
if ($mobileNavigation) {
$desktopMenuButtonClass = "";
}
?>
<button type="button" class="actions-expand <?= $desktopMenuButtonClass ?>"
onClick="expandActions(event, <?= $subscription['id'] ?>)">
<i class="fas fa-ellipsis-v"></i>
</button>
<ul class="actions">
<li class="edit" title="<?= translate('edit_subscription', $i18n) ?>"
onClick="openEditSubscription(event, <?= $subscription['id'] ?>)">
<?php include $imagePath . "images/siteicons/svg/edit.php"; ?>
<?= translate('edit_subscription', $i18n) ?>
</li>
<li class="delete" title="<?= translate('delete', $i18n) ?>"
onClick="deleteSubscription(event, <?= $subscription['id'] ?>)">
<?php include $imagePath . "images/siteicons/svg/delete.php"; ?>
<?= translate('delete', $i18n) ?>
</li>
<li class="clone" title="<?= translate('clone', $i18n) ?>"
onClick="cloneSubscription(event, <?= $subscription['id'] ?>)">
<?php include $imagePath . "images/siteicons/svg/clone.php"; ?>
<?= translate('clone', $i18n) ?>
</li>
</ul>
</div>
<div class="subscription-secondary">
<span
class="name"><?php include $imagePath . "images/siteicons/svg/subscription.php"; ?><?= $subscription['name'] ?></span>
<span class="payer_user"
title="<?= translate('paid_by', $i18n) ?>"><?php include $imagePath . "images/siteicons/svg/payment.php"; ?><?= $members[$subscription['payer_user_id']]['name'] ?></span>
<span class="category"
title="<?= translate('category', $i18n) ?>"><?php include $imagePath . "images/siteicons/svg/category.php"; ?><?= $categories[$subscription['category_id']]['name'] ?></span>
<?php
if ($subscription['url'] != "") {
$url = $subscription['url'];
if (!preg_match('/^https?:\/\//', $url)) {
$url = "https://" . $url;
}
?>
<span class="url" title="<?= translate('external_url', $i18n) ?>"><a href="<?= $url ?>"
target="_blank"><?php include $imagePath . "images/siteicons/svg/web.php"; ?></a></span>
<?php
}
?>
<span class="url" title="<?= translate('external_url', $i18n) ?>"><a href="<?= $url ?>"
target="_blank"><?php include $imagePath . "images/siteicons/svg/web.php"; ?></a></span>
</div>
<?php
if ($subscription['notes'] != "") {
?>
<div class="subscription-notes">
<span class="notes">
<?php include $imagePath . "images/siteicons/svg/notes.php"; ?>
<?= $subscription['notes'] ?>
</span>
</div>
<?php
}
?>
</div>
<?php
if ($subscription['notes'] != "") {
?>
<div class="subscription-notes">
<span class="notes">
<?php include $imagePath . "images/siteicons/svg/notes.php"; ?>
<?= $subscription['notes'] ?>
</span>
</div>
<?php
}
?>
</div>
<?php
}
2 changes: 1 addition & 1 deletion index.php
Original file line number Diff line number Diff line change
@@ -396,7 +396,7 @@
}

if (isset($print)) {
printSubscriptions($print, $sort, $categories, $members, $i18n, $colorTheme, "", $settings['disabledToBottom']);
printSubscriptions($print, $sort, $categories, $members, $i18n, $colorTheme, "", $settings['disabledToBottom'], $settings['mobileNavigation']);
}
$db->close();

60 changes: 51 additions & 9 deletions scripts/dashboard.js
Original file line number Diff line number Diff line change
@@ -332,10 +332,12 @@ function fetchSubscriptions(id, event) {
mainActions.classList.remove("hidden");
}
}

if (id && event) {
openEditSubscription(event, id);
}

setSwipeElements();
})
.catch(error => {
console.error(translate('error_reloading_subscription'), error);
@@ -491,6 +493,43 @@ function closeSubMenus() {

}

function setSwipeElements() {
if (window.mobileNavigation) {
const swipeElements = document.querySelectorAll('.subscription');

swipeElements.forEach((element) => {
let startX = 0;
let startY = 0;
let endX = 0;
let endY = 0;

element.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});

element.addEventListener('touchmove', (e) => {
endX = e.touches[0].clientX;
endY = e.touches[0].clientY;
});

element.addEventListener('touchend', () => {
const diffX = startX - endX;
const diffY = startY - endY;

// Swipe left
if (Math.abs(diffX) > Math.abs(diffY) && diffX > 50) {
element.classList.add('show-menu');
}
// Swipe right
else if (Math.abs(diffX) > Math.abs(diffY) && diffX < -50) {
element.classList.remove('show-menu');
}
});
});
}
}

const activeFilters = [];
activeFilters['categories'] = [];
activeFilters['members'] = [];
@@ -516,6 +555,9 @@ document.addEventListener("DOMContentLoaded", function () {
}
}
});

setSwipeElements();

});

function toggleSubMenu(subMenu) {
@@ -556,14 +598,14 @@ document.querySelectorAll('.filter-item').forEach(function (item) {
}
} else if (this.hasAttribute('data-memberid')) {
const memberId = this.getAttribute('data-memberid');
if (activeFilters['members'].includes(memberId)) {
const memberIndex = activeFilters['members'].indexOf(memberId);
activeFilters['members'].splice(memberIndex, 1);
this.classList.remove('selected');
} else {
activeFilters['members'].push(memberId);
this.classList.add('selected');
}
if (activeFilters['members'].includes(memberId)) {
const memberIndex = activeFilters['members'].indexOf(memberId);
activeFilters['members'].splice(memberIndex, 1);
this.classList.remove('selected');
} else {
activeFilters['members'].push(memberId);
this.classList.add('selected');
}
} else if (this.hasAttribute('data-paymentid')) {
const paymentId = this.getAttribute('data-paymentid');
if (activeFilters['payments'].includes(paymentId)) {
60 changes: 58 additions & 2 deletions styles/styles.css
Original file line number Diff line number Diff line change
@@ -338,6 +338,56 @@ button:hover svg .main-color {
font-size: 17px;
}

.subscription-container {
position: relative;
background-color: #FFFFFF;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 16px;
background-color: #f3e22d;
}

.subscription-container > .mobile-actions {
display: flex;
flex-direction: row;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
overflow: hidden;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}

.subscription-container > .mobile-actions > button {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
border: none;
cursor: pointer;
height: 100%;
width: 60px;
justify-content: center;
}

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

button.mobile-action-delete {
background-color: #f45a40;
}

button.mobile-action-clone {
background-color: #2da7f3
}

.subscription-container > .mobile-actions > button > svg {
width: 25px;
height: 25px;
min-height: 25px;
}

.subscription {
display: flex;
flex-direction: column;
@@ -349,14 +399,20 @@ button:hover svg .main-color {
padding: 12px 15px;
border-radius: 16px;
cursor: pointer;
transition: all .3s ease-in;
position: relative;
}

.subscription.show-menu {
transform: translateX(-180px);
}

.subscription.hide {
display: none;
}

.subscription.inactive {
background-color: rgba(255, 255, 255, 0.6);
background-color: #FFF;
color: rgba(100, 100, 100, 0.6);
box-shadow: 0 2px 5px rgba(100, 100, 100, 0.1);
}
@@ -2636,7 +2692,7 @@ input[type="radio"]:checked+label::after {
max-width: 85%;
}

.mobile-nav>a.active{
.mobile-nav>a.active {
color: #202020;
}

0 comments on commit c3383d7

Please sign in to comment.