Acceptance and mobile navigation fixes
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
262cb04c3a
commit
0274507cb1
|
|
@ -2,7 +2,7 @@
|
|||
/** @var $l \OCP\IL10N */
|
||||
/** @var $_ array */
|
||||
?>
|
||||
|
||||
<div id="app-content">
|
||||
<?php if ($_['previewSupported']): /* This enables preview images for links (e.g. on Facebook, Google+, ...)*/?>
|
||||
<link rel="image_src" href="<?php p($_['previewImage']); ?>" />
|
||||
<?php endif; ?>
|
||||
|
|
@ -90,3 +90,4 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
|
|||
data-url="<?php p(\OC::$server->getURLGenerator()->linkTo('files', 'ajax/upload.php')); ?>" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
|
@ -74,13 +74,15 @@ kbd {
|
|||
/* Navigation: folder like structure */
|
||||
#app-navigation {
|
||||
width: $navigation-width;
|
||||
position: sticky;
|
||||
position: fixed;
|
||||
top: $header-height;
|
||||
left: 0;
|
||||
z-index: 1500;
|
||||
z-index: 500;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: calc(100vh - #{$header-height});
|
||||
// Do not use vh because of mobile headers
|
||||
// are included in the calculation
|
||||
height: calc(100% - #{$header-height});
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-main-background);
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -170,6 +172,7 @@ kbd {
|
|||
> ul {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
overflow-y: hidden;
|
||||
/* bezier override the hide/slow effect due to the 2000 max-height */
|
||||
transition: max-height 1000ms cubic-bezier(0, 1, 0, 1),
|
||||
opacity 250ms ease-in-out;
|
||||
|
|
@ -523,7 +526,7 @@ kbd {
|
|||
.app-navigation-entry-deleted {
|
||||
display: inline-flex;
|
||||
padding-left: 44px;
|
||||
transform: translateX(250px);
|
||||
transform: translateX(#{$navigation-width});
|
||||
.app-navigation-entry-deleted-description {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
|
@ -580,12 +583,17 @@ kbd {
|
|||
|
||||
|
||||
/* CONTENT --------------------------------------------------------- */
|
||||
#content-wrapper {
|
||||
// everything not related to content but needs to be on the window
|
||||
// goes here (popups, tooltips...)
|
||||
position: relative;
|
||||
}
|
||||
#content {
|
||||
/* header height */
|
||||
padding-top: $header-height;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-left: $navigation-width;
|
||||
margin-top: $header-height;
|
||||
}
|
||||
|
||||
/* APP-CONTENT AND WRAPPER ------------------------------------------ */
|
||||
|
|
@ -594,7 +602,7 @@ kbd {
|
|||
z-index: 1000;
|
||||
background-color: var(--color-main-background);
|
||||
position: relative;
|
||||
min-height: calc(100vh - #{$header-height});
|
||||
min-height: 100%;
|
||||
flex-basis: 100vw;
|
||||
overflow: auto;
|
||||
/* no top border for first settings item */
|
||||
|
|
|
|||
|
|
@ -46,8 +46,7 @@
|
|||
display: inline-flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 2000;
|
||||
height: $header-height;
|
||||
background-color: var(--color-primary);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
#app-navigation,
|
||||
#app-sidebar {
|
||||
position: fixed !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
|
||||
#app-navigation {
|
||||
transform: translateX(-250px);
|
||||
transform: translateX(-#{$navigation-width});
|
||||
}
|
||||
.snapjs-left {
|
||||
#app-navigation {
|
||||
|
|
@ -28,8 +28,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
#app-content {
|
||||
margin-left: -$navigation-width;
|
||||
#content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@ body {
|
|||
line-height: 1.6em;
|
||||
font-family: var(--font-face);
|
||||
color: var(--color-main-text);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.two-factor-header {
|
||||
|
|
|
|||
|
|
@ -1614,7 +1614,7 @@ function initCore() {
|
|||
var snapper = new Snap({
|
||||
element: document.getElementById('app-content'),
|
||||
disable: 'right',
|
||||
maxPosition: 250,
|
||||
maxPosition: 300, // $navigation-width
|
||||
minDragDistance: 100
|
||||
});
|
||||
$('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;"></div>');
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@
|
|||
</head>
|
||||
<body id="body-public">
|
||||
<?php include 'layout.noscript.warning.php'; ?>
|
||||
<?php print_unescaped($_['content']); ?>
|
||||
<div id="content-wrapper">
|
||||
<div id="content" class="app-public" role="main">
|
||||
<?php print_unescaped($_['content']); ?>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -70,9 +70,11 @@
|
|||
</div>
|
||||
<?php } ?>
|
||||
</header>
|
||||
<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
|
||||
<?php print_unescaped($_['content']); ?>
|
||||
</div>
|
||||
<div id="content-wrapper">
|
||||
<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
|
||||
<?php print_unescaped($_['content']); ?>
|
||||
</div>
|
||||
</div
|
||||
<?php if($template->getFooterVisible()) { ?>
|
||||
<footer>
|
||||
<p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p>
|
||||
|
|
|
|||
|
|
@ -31,8 +31,17 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
|
|||
/**
|
||||
* @return Locator
|
||||
*/
|
||||
public static function settingsMenuButton() {
|
||||
public static function settingsSectionInHeader() {
|
||||
return Locator::forThe()->xpath("//*[@id = 'header']//*[@id = 'settings']")->
|
||||
describedAs("Settings menu section in the header");
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Locator
|
||||
*/
|
||||
public static function settingsMenuButton() {
|
||||
return Locator::forThe()->id("expand")->
|
||||
descendantOf(self::settingsSectionInHeader())->
|
||||
describedAs("Settings menu button");
|
||||
}
|
||||
|
||||
|
|
@ -40,7 +49,8 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
|
|||
* @return Locator
|
||||
*/
|
||||
public static function settingsMenu() {
|
||||
return Locator::forThe()->id("expanddiv")->descendantOf(self::settingsMenuButton())->
|
||||
return Locator::forThe()->id("expanddiv")->
|
||||
descendantOf(self::settingsSectionInHeader())->
|
||||
describedAs("Settings menu");
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue