From 6a2b6ef3c05c71bb14690e21f2fec2c0ecb0118b Mon Sep 17 00:00:00 2001 From: Brooks Becton Date: Wed, 25 Oct 2017 18:22:34 -0500 Subject: Added media queries to resize attatchments media queries match other break points and break from a 3 column to 2 to 1 --- client/components/cards/attachments.styl | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/client/components/cards/attachments.styl b/client/components/cards/attachments.styl index 9a5d0645..4a22fd8a 100644 --- a/client/components/cards/attachments.styl +++ b/client/components/cards/attachments.styl @@ -58,7 +58,28 @@ .preview-clipboard-image width: 280px + max-width: 100%; height: 200px display: block border: 1px solid black box-shadow: 0 1px 2px rgba(0,0,0,.2) + +@media screen and (max-width: 800px) + .attachments-galery + flex-direction + row + .attachment-item + width: 50% - 2% + + .attachment-thumbnail + height: 130px + .attachment-details + font-size: 1.1em + +@media screen and (max-width: 360px) + .attachments-galery + .attachment-item + width: 100% + + .attachment-thumbnail + height: 200px -- cgit v1.2.3-1-g7c22 From 0321d9770cc2d07bf4079e0b2b5a87050f101ea2 Mon Sep 17 00:00:00 2001 From: Brooks Becton Date: Wed, 25 Oct 2017 18:22:34 -0500 Subject: Added media queries to resize attatchments media queries match other break points and break from a 3 column to 2 to 1 --- client/components/cards/attachments.styl | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/client/components/cards/attachments.styl b/client/components/cards/attachments.styl index 9a5d0645..4a22fd8a 100644 --- a/client/components/cards/attachments.styl +++ b/client/components/cards/attachments.styl @@ -58,7 +58,28 @@ .preview-clipboard-image width: 280px + max-width: 100%; height: 200px display: block border: 1px solid black box-shadow: 0 1px 2px rgba(0,0,0,.2) + +@media screen and (max-width: 800px) + .attachments-galery + flex-direction + row + .attachment-item + width: 50% - 2% + + .attachment-thumbnail + height: 130px + .attachment-details + font-size: 1.1em + +@media screen and (max-width: 360px) + .attachments-galery + .attachment-item + width: 100% + + .attachment-thumbnail + height: 200px -- cgit v1.2.3-1-g7c22 From d9705a0ec4c6e1296769b87dcac8912c34002c10 Mon Sep 17 00:00:00 2001 From: Brooks Becton Date: Sat, 28 Oct 2017 10:15:05 -0500 Subject: Added swipebox package and added it to attachement images Also removed '.js-open-viewer' and it's styling stub --- .meteor/packages | 1 + .meteor/versions | 1 + client/components/cards/attachments.jade | 4 ++-- client/components/cards/attachments.js | 3 --- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/.meteor/packages b/.meteor/packages index 7c04f207..7e67c10d 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -79,3 +79,4 @@ shell-server@0.2.3 simple:rest-accounts-password useraccounts:core email@1.2.3 +horka:swipebox diff --git a/.meteor/versions b/.meteor/versions index 689362ea..38ee1e3f 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -58,6 +58,7 @@ es5-shim@4.6.15 fastclick@1.0.13 fortawesome:fontawesome@4.7.0 geojson-utils@1.0.10 +horka:swipebox@1.0.2 hot-code-push@1.0.4 html-tools@1.0.11 htmljs@1.0.11 diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade index e35b364a..c8442691 100644 --- a/client/components/cards/attachments.jade +++ b/client/components/cards/attachments.jade @@ -21,11 +21,11 @@ template(name="attachmentDeletePopup") template(name="attachmentsGalery") .attachments-galery each attachments - a.attachment-item.js-open-viewer(title="{{_ 'added'}} {{ moment uploadedAt }}") + a.attachment-item.swipebox(href="{{url}}" title="{{name}}") .attachment-thumbnail if isUploaded if isImage - img.attachment-thumbnail-img.js-preview-image(src="{{url}}") + img.attachment-thumbnail-img(src="{{url}}") else span.attachment-thumbnail-ext= extension else diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js index 95cb9f55..36e8a5ec 100644 --- a/client/components/cards/attachments.js +++ b/client/components/cards/attachments.js @@ -11,9 +11,6 @@ Template.attachmentsGalery.events({ 'click .js-download'(event) { event.stopPropagation(); }, - 'click .js-open-viewer'() { - // XXX Not implemented! - }, 'click .js-add-cover'() { Cards.findOne(this.cardId).setCover(this._id); }, -- cgit v1.2.3-1-g7c22 From dd1a8ade5eabab15e91a41585d5848cf9abf7a05 Mon Sep 17 00:00:00 2001 From: Brooks Becton Date: Wed, 25 Oct 2017 18:22:34 -0500 Subject: Added media queries to resize attatchments media queries match other break points and break from a 3 column to 2 to 1 --- client/components/cards/attachments.styl | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/client/components/cards/attachments.styl b/client/components/cards/attachments.styl index 9a5d0645..4a22fd8a 100644 --- a/client/components/cards/attachments.styl +++ b/client/components/cards/attachments.styl @@ -58,7 +58,28 @@ .preview-clipboard-image width: 280px + max-width: 100%; height: 200px display: block border: 1px solid black box-shadow: 0 1px 2px rgba(0,0,0,.2) + +@media screen and (max-width: 800px) + .attachments-galery + flex-direction + row + .attachment-item + width: 50% - 2% + + .attachment-thumbnail + height: 130px + .attachment-details + font-size: 1.1em + +@media screen and (max-width: 360px) + .attachments-galery + .attachment-item + width: 100% + + .attachment-thumbnail + height: 200px -- cgit v1.2.3-1-g7c22 From d48043c7eef6e4314137d19149dbc7a7cbe4b615 Mon Sep 17 00:00:00 2001 From: Brooks Becton Date: Sat, 28 Oct 2017 10:15:05 -0500 Subject: Added swipebox package and added it to attachement images Also removed '.js-open-viewer' and it's styling stub --- .meteor/packages | 1 + .meteor/versions | 1 + client/components/cards/attachments.jade | 4 ++-- client/components/cards/attachments.js | 3 --- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/.meteor/packages b/.meteor/packages index 7c04f207..7e67c10d 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -79,3 +79,4 @@ shell-server@0.2.3 simple:rest-accounts-password useraccounts:core email@1.2.3 +horka:swipebox diff --git a/.meteor/versions b/.meteor/versions index 689362ea..38ee1e3f 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -58,6 +58,7 @@ es5-shim@4.6.15 fastclick@1.0.13 fortawesome:fontawesome@4.7.0 geojson-utils@1.0.10 +horka:swipebox@1.0.2 hot-code-push@1.0.4 html-tools@1.0.11 htmljs@1.0.11 diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade index e35b364a..c8442691 100644 --- a/client/components/cards/attachments.jade +++ b/client/components/cards/attachments.jade @@ -21,11 +21,11 @@ template(name="attachmentDeletePopup") template(name="attachmentsGalery") .attachments-galery each attachments - a.attachment-item.js-open-viewer(title="{{_ 'added'}} {{ moment uploadedAt }}") + a.attachment-item.swipebox(href="{{url}}" title="{{name}}") .attachment-thumbnail if isUploaded if isImage - img.attachment-thumbnail-img.js-preview-image(src="{{url}}") + img.attachment-thumbnail-img(src="{{url}}") else span.attachment-thumbnail-ext= extension else diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js index 95cb9f55..36e8a5ec 100644 --- a/client/components/cards/attachments.js +++ b/client/components/cards/attachments.js @@ -11,9 +11,6 @@ Template.attachmentsGalery.events({ 'click .js-download'(event) { event.stopPropagation(); }, - 'click .js-open-viewer'() { - // XXX Not implemented! - }, 'click .js-add-cover'() { Cards.findOne(this.cardId).setCover(this._id); }, -- cgit v1.2.3-1-g7c22 From 09808840cd7e580c5e7cfd2c63ed2ada2ab91189 Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Tue, 31 Oct 2017 06:19:24 +0200 Subject: Image attachment resize on smaller screens and swipebox. Thanks to brooksbecton ! Closes #201 --- CHANGELOG.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6dc1d242..d32d5a5c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,9 +2,10 @@ This release adds the following new features: -* [Permit editing WIP limit](https://github.com/wekan/wekan/pull/1312). +* [Permit editing WIP limit](https://github.com/wekan/wekan/pull/1312); +* [Image attachment resize on smaller screens and swipebox](https://github.com/wekan/wekan/pull/1315). -Thanks to GitHub users nztqa and ocdtrekkie for their contributions. +Thanks to GitHub users brooksbecton, nztqa and ocdtrekkie for their contributions. # v0.51 2017-10-25 Wekan release -- cgit v1.2.3-1-g7c22