diff --git a/src/front/cobalt.css b/src/front/cobalt.css
index 5fe2013..2b7d630 100644
--- a/src/front/cobalt.css
+++ b/src/front/cobalt.css
@@ -505,7 +505,8 @@ button:active,
scrollbar-width: none;
}
.popup-content-inner,
-.tab-content-settings {
+.tab-content-settings,
+#picker-holder {
padding-top: calc(env(safe-area-inset-top)/2 + 4.9rem);
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 4.8rem);
}
@@ -679,25 +680,26 @@ button:active,
}
.picker-image {
object-fit: cover;
- width: inherit;
- height: inherit;
+ width: 100%;
+ height: 100%;
cursor: pointer;
user-select: all;
-webkit-user-select: all;
}
.picker-image-container {
- width: 8rem;
- height: 8rem;
- margin-bottom: var(--padding-1);
+ width: calc(100% / 3);
+ height: 12rem;
background-color: var(--accent-button);
+ cursor: pointer;
}
.picker-various-container {
- height: 20rem;
- width: 25rem;
+ height: 12rem;
+ width: 12rem;
margin-bottom: var(--padding-1);
background-color: var(--accent-button);
border: var(--accent-button) 0.18rem solid;
position: relative;
+ cursor: pointer;
}
#picker-holder {
display: flex;
@@ -707,12 +709,6 @@ button:active,
padding-top: calc(env(safe-area-inset-top)/2 + 7.6rem);
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 4.8rem);
}
-#picker-holder.various {
- justify-content: left;
- flex-wrap: unset;
- overflow-x: scroll;
- gap: 2rem;
-}
.imageBlock {
height: 100%;
width: 100%;
@@ -867,6 +863,12 @@ button:active,
.loader {
text-align: center;
}
+#picker-download {
+ visibility: hidden;
+}
+#picker-download.visible {
+ visibility: visible;
+}
#home {
opacity: 0;
}
@@ -929,8 +931,8 @@ button:active,
.collapse-list.last.expanded .collapse-header {
border-radius: 0;
}
+/* prevent resizing fliecker on ios if web app is installed as standalone */
@media all and (display-mode: standalone) {
- /* prevent resizing fliecker on ios if web app is installed as standalone */
#home.visible {
transition-delay: 0.1s;
}
@@ -1167,11 +1169,6 @@ button:active,
height: 20rem;
max-width: 100%;
}
- .picker-image-container {
- height: 7rem;
- width: 7rem;
- line-height: 7rem;
- }
.popup, .popup.scrollable {
border: none;
width: 100%;
@@ -1196,9 +1193,4 @@ button:active,
.popup-title {
line-height: inherit;
}
- .picker-image-container {
- line-height: 6rem;
- height: 6rem;
- width: 6rem;
- }
}
\ No newline at end of file
diff --git a/src/front/cobalt.js b/src/front/cobalt.js
index f05b132..37662df 100644
--- a/src/front/cobalt.js
+++ b/src/front/cobalt.js
@@ -164,11 +164,13 @@ function hideAllPopups() {
for (let i = 0; i < filter.length; i++) {
filter[i].classList.remove("visible");
}
+ eid("popup-backdrop").classList.remove("visible");
+ store.isPopupOpen = false;
+
+ // clear the picker
eid("picker-holder").innerHTML = '';
eid("picker-download").href = '/';
eid("picker-download").classList.remove("visible");
- eid("popup-backdrop").classList.remove("visible");
- store.isPopupOpen = false;
}
function popup(type, action, text) {
if (action === 1) {
@@ -197,10 +199,13 @@ function popup(type, action, text) {
case "images":
eid("picker-title").innerHTML = loc.pickerImages;
eid("picker-subtitle").innerHTML = loc.pickerImagesExpl;
- if (!eid("popup-picker").classList.contains("scrollable")) eid("popup-picker").classList.add("scrollable");
- if (eid("picker-holder").classList.contains("various")) eid("picker-holder").classList.remove("various");
+
+ eid("popup-picker").classList.add("scrollable");
+ eid("picker-holder").classList.remove("various");
+
eid("picker-download").href = text.audio;
eid("picker-download").classList.add("visible");
+
for (let i in text.arr) {
eid("picker-holder").innerHTML += `
`
}
@@ -208,13 +213,15 @@ function popup(type, action, text) {
default:
eid("picker-title").innerHTML = loc.pickerDefault;
eid("picker-subtitle").innerHTML = loc.pickerDefaultExpl;
- if (eid("popup-picker").classList.contains("scrollable")) eid("popup-picker").classList.remove("scrollable");
- if (!eid("picker-holder").classList.contains("various")) eid("picker-holder").classList.add("various");
+
+ eid("popup-picker").classList.remove("scrollable");
+ eid("picker-holder").classList.add("various");
+
for (let i in text.arr) {
let s = text.arr[i], item;
switch (s.type) {
case "video":
- item = `VIDEO ${Number(i)+1}
${Number(i)+1}