From 7e24f0cc8bc8e25e2f4d133664fbaabe3de9a7e3 Mon Sep 17 00:00:00 2001 From: DianaXWiki Date: Tue, 12 Sep 2023 14:52:16 +0300 Subject: [PATCH 1/7] Make event edit menu visible on mobile #1094 --- www/calendar/app-calendar.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less index e8b7be8ed..8e7670676 100644 --- a/www/calendar/app-calendar.less +++ b/www/calendar/app-calendar.less @@ -142,6 +142,11 @@ color: @cryptpad_text_col; border-radius: @variables_radius_L; font-weight: normal; + @media screen and (max-width: 600px) + { + max-width: 100%; + margin-left: 80px; + } .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) { display: none; } From 5a1f95da382d32302119a8b9e6f38f50e795e977 Mon Sep 17 00:00:00 2001 From: DianaXWiki Date: Mon, 18 Sep 2023 14:10:10 +0300 Subject: [PATCH 2/7] Fix edit event panel cut off on small screen #1094 --- www/calendar/app-calendar.less | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less index 8e7670676..f9191d66b 100644 --- a/www/calendar/app-calendar.less +++ b/www/calendar/app-calendar.less @@ -113,7 +113,11 @@ justify-content: center !important; align-items: center !important; .tui-full-calendar-popup { - width: 540px !important; + width: 540px; + @media screen and (max-width: 780px) + { + width: 100%; + } } } #tui-full-calendar-popup-arrow { @@ -142,10 +146,9 @@ color: @cryptpad_text_col; border-radius: @variables_radius_L; font-weight: normal; - @media screen and (max-width: 600px) + @media screen and (max-width: 780px) { - max-width: 100%; - margin-left: 80px; + min-width: 100%; } .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) { display: none; @@ -191,6 +194,11 @@ overflow: hidden; text-overflow: ellipsis; font: @colortheme_app-font; + @media screen and (max-width: 780px) + { + font-size: 14px; + padding: 6px; + } } input { flex: 1; } } @@ -288,6 +296,10 @@ * { font-size: @colortheme_app-font-size; font-weight: normal; + @media screen and (max-width: 780px) + { + font-size: 14px; + } } & > div { display: flex; From 5dde8f1a53e6431c950e9d79c54be1b18ad834e2 Mon Sep 17 00:00:00 2001 From: DianaXWiki Date: Tue, 26 Sep 2023 10:26:01 +0300 Subject: [PATCH 3/7] Revert "Fix edit event panel cut off on small screen #1094" --- www/calendar/app-calendar.less | 20 ++++---------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less index f9191d66b..8e7670676 100644 --- a/www/calendar/app-calendar.less +++ b/www/calendar/app-calendar.less @@ -113,11 +113,7 @@ justify-content: center !important; align-items: center !important; .tui-full-calendar-popup { - width: 540px; - @media screen and (max-width: 780px) - { - width: 100%; - } + width: 540px !important; } } #tui-full-calendar-popup-arrow { @@ -146,9 +142,10 @@ color: @cryptpad_text_col; border-radius: @variables_radius_L; font-weight: normal; - @media screen and (max-width: 780px) + @media screen and (max-width: 600px) { - min-width: 100%; + max-width: 100%; + margin-left: 80px; } .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) { display: none; @@ -194,11 +191,6 @@ overflow: hidden; text-overflow: ellipsis; font: @colortheme_app-font; - @media screen and (max-width: 780px) - { - font-size: 14px; - padding: 6px; - } } input { flex: 1; } } @@ -296,10 +288,6 @@ * { font-size: @colortheme_app-font-size; font-weight: normal; - @media screen and (max-width: 780px) - { - font-size: 14px; - } } & > div { display: flex; From 6b7dfa24519386301a89982a99180e4ef2ee3ba2 Mon Sep 17 00:00:00 2001 From: DianaXWiki Date: Tue, 26 Sep 2023 13:59:55 +0300 Subject: [PATCH 4/7] More robust solution #1094 --- www/calendar/app-calendar.less | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less index 8e7670676..58c349c65 100644 --- a/www/calendar/app-calendar.less +++ b/www/calendar/app-calendar.less @@ -113,7 +113,8 @@ justify-content: center !important; align-items: center !important; .tui-full-calendar-popup { - width: 540px !important; + width: 540px; + max-width: 100%; } } #tui-full-calendar-popup-arrow { @@ -138,15 +139,11 @@ border-radius: @variables_radius_L; } .tui-full-calendar-popup-container { + min-width: 100%; background: @cp_flatpickr-bg; color: @cryptpad_text_col; border-radius: @variables_radius_L; font-weight: normal; - @media screen and (max-width: 600px) - { - max-width: 100%; - margin-left: 80px; - } .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) { display: none; } @@ -317,9 +314,11 @@ } } span:not(:last-child) { - margin: 0px 5px; + margin: 1px 5px; + display: inline; } .btn-danger-outline { + display: inline-block; margin-right: 0px !important; background-color: transparent; color: @cryptpad_text_col; From 1b6392e95c7de840a8b4abb5c6a2102dfb2d7069 Mon Sep 17 00:00:00 2001 From: DianaXWiki Date: Wed, 27 Sep 2023 23:39:50 +0300 Subject: [PATCH 5/7] Fix layout reminders #1094 --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index 19931c216..83ccb9aad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,3 +1,4 @@ + { "name": "cryptpad", "version": "5.4.1", From 3f6c72ff674ad05f96bd21150040daa2c10b3789 Mon Sep 17 00:00:00 2001 From: DianaXWiki Date: Mon, 2 Oct 2023 10:27:31 +0300 Subject: [PATCH 6/7] Fix layout reminders v2 #1094 --- www/calendar/app-calendar.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less index 58c349c65..3515b2cd9 100644 --- a/www/calendar/app-calendar.less +++ b/www/calendar/app-calendar.less @@ -299,12 +299,13 @@ display: flex; flex-flow: column; .cp-notif-entry { + display: flex; margin-bottom: 2px; border-radius: @variables_radius; background-color: fade(@cryptpad_text_col, 10%); padding: 0.25rem; .cp-notif-value { - width: 170px; + width: 75%; display: inline-flex; line-height: 30px; vertical-align: middle; @@ -314,11 +315,10 @@ } } span:not(:last-child) { - margin: 1px 5px; - display: inline; + margin: 0px 3px; } .btn-danger-outline { - display: inline-block; + display: block; margin-right: 0px !important; background-color: transparent; color: @cryptpad_text_col; From e8513a2d1deba8f272ea164cc8d170f920e08491 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 2 Oct 2023 15:14:28 +0200 Subject: [PATCH 7/7] Fix calendar reminders --- www/calendar/app-calendar.less | 24 +++++++++++++++++++++++- www/calendar/inner.js | 12 ++++++++---- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less index 3515b2cd9..39ce10d61 100644 --- a/www/calendar/app-calendar.less +++ b/www/calendar/app-calendar.less @@ -115,6 +115,8 @@ .tui-full-calendar-popup { width: 540px; max-width: 100%; + max-height: 100%; + overflow-y: auto; } } #tui-full-calendar-popup-arrow { @@ -188,6 +190,7 @@ overflow: hidden; text-overflow: ellipsis; font: @colortheme_app-font; + padding: 0 10px; } input { flex: 1; } } @@ -290,6 +293,7 @@ display: flex; } .cp-calendar-notif-list-container { + width: 100%; margin-bottom: 10px; .cp-notif-label { margin-top: 0.5em; @@ -298,6 +302,8 @@ .cp-calendar-notif-list { display: flex; flex-flow: column; + flex: 1; + min-width: 150px; .cp-notif-entry { display: flex; margin-bottom: 2px; @@ -309,13 +315,18 @@ display: inline-flex; line-height: 30px; vertical-align: middle; + flex-grow: 1; .cp-before { flex: 1; min-width: 0; } } span:not(:last-child) { - margin: 0px 3px; + margin: 0; + margin-right: 0.3rem; + } + span:first-child { + margin-left: 0.3rem; } .btn-danger-outline { display: block; @@ -344,6 +355,13 @@ } .cp-calendar-notif-form { align-items: center; + .cp-calendar-notif-form-buttons { + display: inline-flex; + align-items: center; + & > input { + height: 40px; + } + } // margin-bottom: 20px; input { width: 80px; @@ -624,6 +642,10 @@ } @media (max-width: @browser_media-medium-screen) { + .cp-calendar-notif-list-container, .cp-calendar-notif-form { + flex-direction: column; + align-items: unset !important; + } .cp-calendar-newevent { i { margin: 0 !important; diff --git a/www/calendar/inner.js b/www/calendar/inner.js index fc1a7e376..caaaaebfe 100644 --- a/www/calendar/inner.js +++ b/www/calendar/inner.js @@ -1920,7 +1920,9 @@ APP.recurrenceRule = { }; $(addNotif).click(function () { var unit = $block.getValue(); - var value = $number.val(); + var val = $number.val(); + if (val === "") { return void UI.warn(Messages.error); } + var value = Number(val); addNotification(unit, value); }); oldReminders.forEach(function (minutes) { @@ -1931,9 +1933,11 @@ APP.recurrenceRule = { listContainer, h('div.cp-calendar-notif-form', [ h('span.cp-notif-label', Messages.calendar_addNotification), - number, - $block[0], - addNotif + h('span.cp-calendar-notif-form-buttons', [ + number, + $block[0], + addNotif + ]) ]) ]); };