Cleanup structure
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
52ec71c4b0
commit
842583038b
|
@ -67,7 +67,7 @@ OCA.Sharing.PublicApp = {
|
||||||
$el,
|
$el,
|
||||||
{
|
{
|
||||||
id: 'files.public',
|
id: 'files.public',
|
||||||
scrollContainer: $('#content-wrapper'),
|
scrollContainer: $('#app-content'),
|
||||||
dragOptions: dragOptions,
|
dragOptions: dragOptions,
|
||||||
folderDropOptions: folderDropOptions,
|
folderDropOptions: folderDropOptions,
|
||||||
fileActions: fileActions,
|
fileActions: fileActions,
|
||||||
|
|
|
@ -80,8 +80,9 @@ kbd {
|
||||||
|
|
||||||
#app-navigation {
|
#app-navigation {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 100%;
|
/* header height */
|
||||||
float: left;
|
height: calc(100vh - 50px);
|
||||||
|
position: fixed;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: var(--color-main-background);
|
background-color: var(--color-main-background);
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
|
@ -583,9 +584,11 @@ kbd {
|
||||||
/* APP-CONTENT ---------------------------------------------------------------*/
|
/* APP-CONTENT ---------------------------------------------------------------*/
|
||||||
/* Part where the content will be loaded into */
|
/* Part where the content will be loaded into */
|
||||||
#app-content {
|
#app-content {
|
||||||
|
margin-left: 250px;
|
||||||
|
z-index: 1000;
|
||||||
|
background-color: var(--color-main-background);
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
min-height: calc(100vh - 50px);
|
||||||
overflow-y: auto;
|
|
||||||
/* no top border for first settings item */
|
/* no top border for first settings item */
|
||||||
> .section:first-child {
|
> .section:first-child {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
|
@ -595,11 +598,6 @@ kbd {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-content-wrapper {
|
|
||||||
min-width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* APP-SIDEBAR ----------------------------------------------------------------*/
|
/* APP-SIDEBAR ----------------------------------------------------------------*/
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -1008,16 +1006,21 @@ $popovericon-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CONTENT WRAPPER --------------------------------------------------------- */
|
/* CONTENT WRAPPER --------------------------------------------------------- */
|
||||||
|
#content {
|
||||||
|
/* header height */
|
||||||
|
padding-top: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
/* if app-content-list is present */
|
||||||
#app-content-wrapper {
|
#app-content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
.app-content-list,
|
.app-content-list,
|
||||||
.app-content-detail {
|
.app-content-detail {
|
||||||
min-height: 100%;
|
min-height: calc(100vh - 50px);
|
||||||
max-height: 100%;
|
max-height: calc(100vh - 50px);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
@ -1186,51 +1189,3 @@ $popovericon-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MOBILE ------------------------------------------------------------------- */
|
|
||||||
/* Mobile width < 768px */
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
|
|
||||||
/* full width for message list on mobile */
|
|
||||||
.app-content-list {
|
|
||||||
width: 100%;
|
|
||||||
background: var(--color-main-background);
|
|
||||||
position: relative;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* overlay message detail on top of message list */
|
|
||||||
.app-content-detail {
|
|
||||||
background: var(--color-main-background);
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
box-shadow: 0 0 100px rgba(100, 100, 100, .9);
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show app details page */
|
|
||||||
#app-content.showdetails {
|
|
||||||
#app-navigation-toggle {
|
|
||||||
transform: translateX(-44px);
|
|
||||||
}
|
|
||||||
#app-navigation-toggle-back {
|
|
||||||
position: fixed;
|
|
||||||
display: inline-block !important;
|
|
||||||
top: 45px;
|
|
||||||
left: 0;
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
z-index: 149;
|
|
||||||
background-color: rgba(255, 255, 255, .7);
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: .6;
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
.app-content-list {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* end of media query */
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,59 +1,87 @@
|
||||||
@media only screen and (max-width: 768px) {
|
@media only screen and (max-width: 768px) {
|
||||||
|
|
||||||
/* do not show update notification on mobile */
|
/* position share dropdown */
|
||||||
#update-notification {
|
#dropdown {
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* position share dropdown */
|
|
||||||
#dropdown {
|
|
||||||
margin-right: 10% !important;
|
margin-right: 10% !important;
|
||||||
width: 80% !important;
|
width: 80% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* fix name autocomplete not showing on mobile */
|
/* fix name autocomplete not showing on mobile */
|
||||||
.ui-autocomplete {
|
.ui-autocomplete {
|
||||||
z-index: 1000 !important;
|
z-index: 1000 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* fix error display on smaller screens */
|
/* fix error display on smaller screens */
|
||||||
.error-wide {
|
.error-wide {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
|
||||||
|
#app-navigation {
|
||||||
|
transform: translateX(-250px);
|
||||||
|
}
|
||||||
|
.snapjs-left {
|
||||||
|
#app-navigation {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#app-content {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
|
/* full width for message list on mobile */
|
||||||
|
.app-content-list {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--color-main-background);
|
||||||
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
#app-navigation,
|
/* since list and content are only displayed full window size
|
||||||
#app-content {
|
* we don't ant inner scrolling
|
||||||
position: absolute !important;
|
*/
|
||||||
top: 0;
|
#app-content-wrapper {
|
||||||
|
.app-content-list,
|
||||||
|
.app-content-detail {
|
||||||
|
max-height: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show app details page */
|
||||||
|
#app-content.showdetails {
|
||||||
|
#app-navigation-toggle {
|
||||||
|
transform: translateX(-44px);
|
||||||
|
}
|
||||||
|
#app-navigation-toggle-back {
|
||||||
|
position: fixed;
|
||||||
|
display: inline-block !important;
|
||||||
|
top: 45px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
width: 44px;
|
||||||
bottom: 0;
|
height: 44px;
|
||||||
}
|
z-index: 149;
|
||||||
|
background-color: rgba(255, 255, 255, .7);
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: .6;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.app-content-list {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
#app-navigation {
|
/* end of media query */
|
||||||
width: 250px !important;
|
|
||||||
}
|
}
|
||||||
|
/* allow horizontal scrollbar in settings
|
||||||
#app-content {
|
|
||||||
width: 100% !important;
|
|
||||||
left: 0 !important;
|
|
||||||
background-color: var(--color-main-background);
|
|
||||||
overflow-x: hidden !important;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* allow horizontal scrollbar in settings
|
|
||||||
otherwise user management is not usable on mobile */
|
otherwise user management is not usable on mobile */
|
||||||
#body-settings #app-content {
|
#body-settings #app-content {
|
||||||
overflow-x: auto !important;
|
overflow-x: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-navigation-toggle {
|
#app-navigation-toggle {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
top: 50px;
|
top: 50px;
|
||||||
|
@ -63,62 +91,57 @@
|
||||||
z-index: 149;
|
z-index: 149;
|
||||||
background-color: var(--color-main-background-darker);
|
background-color: var(--color-main-background-darker);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: .6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
#app-navigation-toggle:hover,
|
#app-navigation-toggle:hover,
|
||||||
#app-navigation-toggle:focus {
|
#app-navigation-toggle:focus {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* position controls for apps with app-navigation */
|
/* position controls for apps with app-navigation */
|
||||||
#app-navigation+#app-content #controls {
|
#app-navigation + #app-content #controls {
|
||||||
padding-left: 44px;
|
padding-left: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .viewer-mode is when text editor, PDF viewer, etc is open */
|
/* .viewer-mode is when text editor, PDF viewer, etc is open */
|
||||||
#body-user .app-files.viewer-mode #controls {
|
#body-user .app-files.viewer-mode #controls {
|
||||||
padding-left: 0 !important;
|
padding-left: 0 !important;
|
||||||
}
|
}
|
||||||
.app-files.viewer-mode #app-navigation-toggle {
|
.app-files.viewer-mode #app-navigation-toggle {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.multiselect thead {
|
table.multiselect thead {
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* prevent overflow in user management controls bar */
|
||||||
/* prevent overflow in user management controls bar */
|
#usersearchform {
|
||||||
#usersearchform {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#body-settings #controls {
|
#body-settings #controls {
|
||||||
min-width: 768px !important;
|
min-width: 768px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* do not show dates in filepicker */
|
||||||
/* do not show dates in filepicker */
|
#oc-dialog-filepicker-content .filelist .filesize,
|
||||||
#oc-dialog-filepicker-content .filelist .filesize,
|
#oc-dialog-filepicker-content .filelist .date {
|
||||||
#oc-dialog-filepicker-content .filelist .date {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#oc-dialog-filepicker-content .filelist .filename {
|
#oc-dialog-filepicker-content .filelist .filename {
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* fix controls bar jumping when navigation is slid out */
|
||||||
/* fix controls bar jumping when navigation is slid out */
|
.snapjs-left #app-navigation-toggle,
|
||||||
.snapjs-left #app-navigation-toggle,
|
.snapjs-left #controls {
|
||||||
.snapjs-left #controls {
|
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
.snapjs-left table.multiselect thead {
|
.snapjs-left table.multiselect thead {
|
||||||
top: 44px;
|
top: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* end of media query */
|
||||||
|
|
||||||
/* end of media query */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
@media only screen and (max-width: 480px) {
|
||||||
|
@ -131,7 +154,7 @@ table.multiselect thead {
|
||||||
}
|
}
|
||||||
/* Arrow directly child of menutoggle */
|
/* Arrow directly child of menutoggle */
|
||||||
#header .header-right > div {
|
#header .header-right > div {
|
||||||
&.openedMenu{
|
&.openedMenu {
|
||||||
&::after {
|
&::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
|
@ -207,25 +207,6 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
.hascontrols {
|
|
||||||
margin-top: 45px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#content-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
/* prevent horizontal scrollbar */
|
|
||||||
padding-top: 50px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* allow horizontal scrollbar for personal and admin settings */
|
/* allow horizontal scrollbar for personal and admin settings */
|
||||||
|
|
||||||
#body-settings:not(.snapjs-left) .app-settings {
|
#body-settings:not(.snapjs-left) .app-settings {
|
||||||
|
|
|
@ -27,8 +27,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body id="<?php p($_['bodyid']);?>">
|
<body id="<?php p($_['bodyid']);?>">
|
||||||
<?php include('layout.noscript.warning.php'); ?>
|
<?php include('layout.noscript.warning.php'); ?>
|
||||||
<header>
|
<header id="header" class="<?php p($_['header-classes']); ?>">
|
||||||
<div id="header" class="<?php p($_['header-classes']); ?>">
|
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<span id="nextcloud">
|
<span id="nextcloud">
|
||||||
<div class="logo logo-icon svg"></div>
|
<div class="logo logo-icon svg"></div>
|
||||||
|
@ -70,9 +69,7 @@
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
</header>
|
||||||
</header>
|
|
||||||
<div id="content-wrapper">
|
|
||||||
<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
|
<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
|
||||||
<?php print_unescaped($_['content']); ?>
|
<?php print_unescaped($_['content']); ?>
|
||||||
</div>
|
</div>
|
||||||
|
@ -81,7 +78,6 @@
|
||||||
<p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p>
|
<p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p>
|
||||||
</footer>
|
</footer>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
<div id="notification-container">
|
<div id="notification-container">
|
||||||
<div id="notification"></div>
|
<div id="notification"></div>
|
||||||
</div>
|
</div>
|
||||||
<header role="banner"><div id="header">
|
<header role="banner" id="header">
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
|
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
|
||||||
id="nextcloud">
|
id="nextcloud">
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -21,7 +21,7 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="content" class="app-settings">
|
||||||
<app-navigation :menu="menu" />
|
<app-navigation :menu="menu" />
|
||||||
<div id="app-content" class="app-settings-content" :class="{ 'with-app-sidebar': currentApp, 'icon-loading': loadingList }">
|
<div id="app-content" class="app-settings-content" :class="{ 'with-app-sidebar': currentApp, 'icon-loading': loadingList }">
|
||||||
<app-list :category="category" :app="currentApp" :search="searchQuery"></app-list>
|
<app-list :category="category" :app="currentApp" :search="searchQuery"></app-list>
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="content" class="app-settings">
|
||||||
<app-navigation :menu="menu">
|
<app-navigation :menu="menu">
|
||||||
<template slot="settings-content">
|
<template slot="settings-content">
|
||||||
<div>
|
<div>
|
||||||
|
|
Loading…
Reference in New Issue