From ddbdce302570a7bd72ba1b2e3297bb4e0985b87d Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Mon, 28 Jun 2021 15:23:14 +0200
Subject: [PATCH] Unify breakpoints
---
packages/app-shell/src/app-shell.js | 2 +-
packages/common/styles.js | 8 +---
packages/file-handling/src/clipboard.js | 2 +-
.../src/dbp-nextcloud-file-picker.js | 2 +-
packages/file-handling/src/file-source.js | 4 +-
packages/file-handling/src/styles.js | 45 ++++++++++---------
.../qr-code-scanner/src/qr-code-scanner.js | 2 +-
7 files changed, 32 insertions(+), 33 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index e30650ba..eed7aa45 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -680,7 +680,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
z-index: 99999;
}
- @media (max-width: 680px) {
+ @media (max-width: 768px) {
#main {
grid-template-columns: minmax(0, auto);
grid-template-rows: min-content min-content min-content 1fr min-content;
diff --git a/packages/common/styles.js b/packages/common/styles.js
index bdf519c3..8d6475a6 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -968,17 +968,13 @@ export function getModalDialogCSS() {
@media only screen
and (orientation: landscape)
- and (max-device-width: 896px) {
+ and (max-width: 768px) {
.modal-container {
width: 100%;
height: 100%;
max-width: 100%;
}
- }
-
- @media only screen
- and (orientation: portrait)
- and (max-device-width: 800px) {
+
.micromodal-slide .modal-container{
height: 100%;
width: 100%;
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index a21478ad..426145dc 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -772,7 +772,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
@media only screen
and (orientation: portrait)
- and (max-device-width: 768px) {
+ and (max-width: 768px) {
.flex-container{
justify-content: space-between;
display: flex;
diff --git a/packages/file-handling/src/dbp-nextcloud-file-picker.js b/packages/file-handling/src/dbp-nextcloud-file-picker.js
index 51584fa5..801f93f3 100644
--- a/packages/file-handling/src/dbp-nextcloud-file-picker.js
+++ b/packages/file-handling/src/dbp-nextcloud-file-picker.js
@@ -1392,7 +1392,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
@media only screen
and (orientation: portrait)
- and (max-device-width: 768px) {
+ and (max-width: 768px) {
.add-folder button {
float: right;
}
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index e1e2376b..6f744abe 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -524,9 +524,9 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
height: 100%;
}
- @media only screen
+ @media only screen
and (orientation: portrait)
- and (max-device-width: 800px) {
+ and (max-width: 768px) {
#dropArea{
height: 100%;
}
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 061326d7..f18f68fd 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -34,8 +34,8 @@ export function getFileHandlingCss() {
}
.modal-nav .active{
- background-color: var(--dbp-dark);;
- color: var(--dbp-light);;
+ background-color: var(--dbp-dark);
+ color: var(--dbp-light);
}
.modal-content {
@@ -210,30 +210,31 @@ export function getFileHandlingCss() {
user-select: none;
}
+ .tabulator .tabulator-tableHolder {
+ height: unset !important; //TODO find a better way to do this
+ }
+
+ .tabulator-row .tabulator-responsive-collapse{
+ border: none;
+ }
+
+ .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{
+ height: 32px;
+ width: 32px;
+ background-color: unset;
+ color: black;
+ font-size: 1.3em;
+ margin-top: -8px;
+ }
+
@media only screen
and (orientation: portrait)
- and (max-device-width: 765px) {
+ and (max-width: 768px) {
.tabulator .tabulator-tableHolder{
white-space: inherit;
}
- }
-
-
-
-
-
-
-
-
- /**************************\\
- Mobile Landscape Styles
- \\**************************/
-
- @media only screen
- and (orientation: landscape)
- and (max-device-width: 896px) {
.modal-container {
width: 100%;
height: 100%;
@@ -241,6 +242,8 @@ export function getFileHandlingCss() {
}
}
+
+
/**************************\\
Tablett Portrait Styles
@@ -248,7 +251,7 @@ export function getFileHandlingCss() {
@media only screen
and (orientation: portrait)
- and (max-device-width: 800px) {
+ and (max-width: 768px) {
.modal-nav{
display: flex;
@@ -301,7 +304,7 @@ export function getFileHandlingCss() {
@media only screen
and (orientation: portrait)
- and (max-device-width: 765px) {
+ and (max-width: 768px) {
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index 31d40517..59bda21b 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -478,7 +478,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
@media only screen
and (orientation: portrait)
- and (max-device-width: 765px) {
+ and (max-width: 768px) {
.button-wrapper{
display: flex;
justify-content: space-between;
--
GitLab