Skip to content
Snippets Groups Projects
Commit 10f4c0d1 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Responsive Layout, closing button, added text to modalmenu

parent cea204ae
Branches
No related tags found
No related merge requests found
Pipeline #12245 failed
Stage: test
Show whitespace changes
Inline Side-by-side
packages/common/styles.js
+ 62
− 14
View file @ 10f4c0d1
......@@ -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";
}
......@@ -757,8 +757,7 @@ export function getModalDialogCSS() {
}
.modal-nav .active{
background-color: #777;
color: white;
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;
}
}
`;
}
......
packages/file-handling/src/dbp-nextcloud-file-picker.js
+ 7
− 5
View file @ 10f4c0d1
......@@ -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{
......
packages/file-handling/src/file-source.js
+ 5
− 2
View file @ 10f4c0d1
......@@ -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"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment