From 10f4c0d188acdbd4f5415007dc4af07fd5fd58fc Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 14 Jul 2020 15:41:49 +0200
Subject: [PATCH] Responsive Layout, closing button, added text to modalmenu
---
packages/common/styles.js | 76 +++++++++++++++----
.../src/dbp-nextcloud-file-picker.js | 12 +--
packages/file-handling/src/file-source.js | 7 +-
3 files changed, 74 insertions(+), 21 deletions(-)
diff --git a/packages/common/styles.js b/packages/common/styles.js
index e064dcef..2f26117b 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -735,7 +735,7 @@ export function getModalDialogCSS() {
overflow-y: auto;
box-sizing: border-box;
display: grid;
- grid-template-columns: 50px auto;
+ grid-template-columns: 150px auto;
grid-template-rows: auto;
grid-template-areas: "sidebar main";
}
@@ -756,9 +756,8 @@ export function getModalDialogCSS() {
height: 35px;
}
- .modal-nav .active {
- background-color: #777;
- color: white;
+ .modal-nav .active{
+ background-color: white;
}
.modal-close {
@@ -766,22 +765,18 @@ export function getModalDialogCSS() {
background: transparent;
border: none;
float: right;
- top: 10px;
- right: 10px;
- }
-
- .modal-close:hover {
- font-weight: bold;
+ top: 20px;
+ right: 20px;
+ font-size: 1.5rem;
+ color: var(--dbp-override-danger-bg-color);
+ cursor: pointer;
+ transition: all 0.2s ease;
}
button.modal-close:focus {
outline: none;
}
- .modal-close:before {
- content: "\\2715";
- }
-
.modal-content {
padding: 10px;
display: flex;
@@ -865,6 +860,59 @@ export function getModalDialogCSS() {
.micromodal-slide .modal-overlay {
will-change: transform;
}
+
+ @media only screen
+ and (orientation: landscape)
+ and (max-device-width: 896px) {
+ .modal-container {
+ width: 100%;
+ height: 100%;
+ max-width: 100%;
+ }
+ }
+
+ @media only screen
+ and (orientation: portrait)
+ and (max-device-width: 765px) {
+
+ .modal-nav{
+ grid-area: header;
+ display: flex;
+ justify-content: space-around;
+ }
+
+ .modal-content{
+ grid-area: main;
+ }
+
+ .modal-container{
+ grid-template-columns: auto;
+ grid-template-rows: 50px auto;
+ grid-template-areas: "header" "main";
+ }
+
+ .modal-nav > div{
+ flex-grow: 1;
+ }
+
+ .micromodal-slide .modal-container{
+ height: 100%;
+ }
+
+ #nextcloud-file-picker{
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+
+ .modal-close{
+ position: inherit;
+ display: flex;
+ align-self: center;
+ margin-right: 15px;
+ margin-left: 15px;
+ }
+
+ }
`;
}
diff --git a/packages/file-handling/src/dbp-nextcloud-file-picker.js b/packages/file-handling/src/dbp-nextcloud-file-picker.js
index 625a669c..b984b21f 100644
--- a/packages/file-handling/src/dbp-nextcloud-file-picker.js
+++ b/packages/file-handling/src/dbp-nextcloud-file-picker.js
@@ -89,23 +89,24 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
layout: "fitColumns",
selectable: this.maxSelectedItems,
selectableRangeMode: "drag",
+ responsiveLayout:"collapse",
columns: [
- {title: "", field: "type", align:"center", headerSort:false, width:50, formatter: (cell, formatterParams, onRendered) => {
+ {title: "", field: "type", align:"center", headerSort:false, width:50, responsive:0, formatter: (cell, formatterParams, onRendered) => {
const icon_tag = that.constructor.getScopedTagName("dbp-icon");
let icon = `<${icon_tag} name="empty-file"></${icon_tag}>`;
return (cell.getValue() === "directory") ? `<${icon_tag} name="folder"></${icon_tag}>` : icon;
}},
- {title: i18n.t('nextcloud-file-picker.filename'), widthGrow:5, field: "basename", sorter: "alphanum"},
- {title: i18n.t('nextcloud-file-picker.size'), widthGrow:1, field: "size", formatter: (cell, formatterParams, onRendered) => {
+ {title: i18n.t('nextcloud-file-picker.filename'), widthGrow:5, responsive:0, field: "basename", sorter: "alphanum"},
+ {title: i18n.t('nextcloud-file-picker.size'), responsive:2, widthGrow:1, field: "size", formatter: (cell, formatterParams, onRendered) => {
return cell.getRow().getData().type === "directory" ? "" : humanFileSize(cell.getValue());}},
- {title: i18n.t('nextcloud-file-picker.mime-type'), widthGrow:1, field: "mime", formatter: (cell, formatterParams, onRendered) => {
+ {title: i18n.t('nextcloud-file-picker.mime-type'), responsive:1, widthGrow:1, field: "mime", formatter: (cell, formatterParams, onRendered) => {
if(typeof cell.getValue() === 'undefined') {
return "";
}
const [fileMainType, fileSubType] = cell.getValue().split('/');
return fileSubType;
}},
- {title: i18n.t('nextcloud-file-picker.last-modified'), widthGrow:1, field: "lastmod",sorter: (a, b, aRow, bRow, column, dir, sorterParams) => {
+ {title: i18n.t('nextcloud-file-picker.last-modified'), responsive:3, widthGrow:1, field: "lastmod",sorter: (a, b, aRow, bRow, column, dir, sorterParams) => {
const a_timestamp = Date.parse(a);
const b_timestamp = Date.parse(b);
return a_timestamp - b_timestamp;
@@ -418,6 +419,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.nextcloud-logo-sm{
width: 40px;
+ justify-self: inherit;
}
.m-inherit{
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index 18242c1c..77d96bcc 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -393,19 +393,22 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
@click="${() => { this.activeSource = "local"; }}"
class="${classMap({"active": this.activeSource === "local", hidden: !this.hasEnabledSource("local")})}">
<dbp-icon class="nav-icon" name="laptop"></dbp-icon>
+ <p>${i18n.t('file-source.nav-local')}</p>
</div>
<div title="Nextcloud"
@click="${() => { this.activeSource = "nextcloud"; }}"
class="${classMap({"active": this.activeSource === "nextcloud", hidden: !this.hasEnabledSource("nextcloud")})}">
<dbp-icon class="nav-icon" name="cloud"></dbp-icon>
+ <p> ${this.nextcloudName} </p>
</div>
+ <dbp-icon title="${i18n.t('file-source.modal-close')}" name="close" class="modal-close" aria-label="Close modal" data-micromodal-close></dbp-icon>
</nav>
<main class="modal-content" id="modal-picker-content">
- <button title="${i18n.t('file-source.modal-close')}" class="modal-close" aria-label="Close modal" data-micromodal-close></button>
+
<div class="source-main ${classMap({"hidden": this.activeSource !== "local"})}">
<div id="dropArea">
<div class="block">
- ${this.text || i18n.t('intro')}
+ <p>${this.text || i18n.t('intro')}</p>
</div>
<input ?disabled="${this.disabled}"
type="file"
--
GitLab