diff --git a/css/comp-13.scss b/css/comp-13.scss new file mode 100644 index 000000000..770fd8727 --- /dev/null +++ b/css/comp-13.scss @@ -0,0 +1,38 @@ +#content-wrapper #content { + height: 100%; +} +#app-content { + flex-grow: 1; + height: 100%; + + &.details-visible { + margin-right: 500px; + } +} + +#app-sidebar { + right: -500px; + max-width: 100%; + width: 500px; + display:flex; + flex-direction: column; + + &.details-visible { + right: 0; + } +} + +#content[class*='app-'] * { + box-sizing: border-box; +} + +body:not(.snapjs-left) { + .app-navigation-hide { + #app-content { + margin-left: 0 !important; + } + #app-navigation { + display: none; + } + } +} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index 673c4b45c..4f0d73c8c 100644 --- a/css/style.scss +++ b/css/style.scss @@ -70,6 +70,32 @@ input.input-inline { cursor: text; } +/** + * Generic app layout + */ +#content-wrapper { + overflow: hidden; + position: fixed; + width: 100%; + height: 100%; + + #content { + height: calc(100% - 50px); + min-height: initial; + } + + .app.app-deck { + width: 100%; + height: 100%; + display: flex; + } + + #app-content { + display: flex; + flex-direction: column; + } +} + /** * Navigation sidebar */ @@ -238,7 +264,7 @@ input.input-inline { } } -#app-navigation-toggle { +#app-navigation-toggle-custom { width: 44px; height: 44px; cursor: pointer; @@ -617,17 +643,6 @@ input.input-inline { /** * App sidebar */ -#app-sidebar { - right: -500px; - max-width: 100%; - width: 500px; - display:flex; - flex-direction: column; - - &.details-visible { - right: 0; - } -} #sidebar-header { h3 { @@ -922,16 +937,6 @@ input.input-inline { } } -#app-content { - overflow: hidden; - display: flex; - flex-direction: column; - - &.details-visible { - margin-right: 500px; - } -} - .labels { display: block; overflow: hidden; @@ -1434,3 +1439,22 @@ input.input-inline { .ui-select-dropdown.select2-drop-active { opacity: 1 !important; } + +/** + * Custom app sidebar handling + */ +body:not(.snapjs-left) { + .app-navigation-hide { + #app-content { + margin-left: 0 !important; /* overwrite margin since we want the translateX to handle it*/ + } + #app-navigation { + transform: translateX(-300px); + } + } +} +@media only screen and (max-width: 768px) { + #app-navigation-toggle-custom { + display: none; + } +} \ No newline at end of file diff --git a/js/app/Config.js b/js/app/Config.js index 8a8510496..fcb2203fe 100644 --- a/js/app/Config.js +++ b/js/app/Config.js @@ -71,8 +71,9 @@ app.config(function ($provide, $interpolateProvider, $httpProvider, $urlRouterPr tab: {value: 0, dynamic: true}, }, views: { - 'sidebarView': { - templateUrl: '/board.sidebarView.html' + 'sidebarView@': { + templateUrl: '/board.sidebarView.html', + controller: 'BoardController' } } }) @@ -82,7 +83,7 @@ app.config(function ($provide, $interpolateProvider, $httpProvider, $urlRouterPr tab: {value: 0, dynamic: true}, }, views: { - 'sidebarView': { + 'sidebarView@': { templateUrl: '/card.sidebarView.html', controller: 'CardController' } diff --git a/js/app/Run.js b/js/app/Run.js index 6fef22355..60523305c 100644 --- a/js/app/Run.js +++ b/js/app/Run.js @@ -56,26 +56,6 @@ app.run(function ($document, $rootScope, $transitions, BoardService) { OC.filePath('deck', 'img', 'app-512.png') ); - $('#app-navigation-toggle').off('click'); - // App sidebar on mobile - var snapper = new Snap({ - element: document.getElementById('app-content'), - disable: 'right', - maxPosition: 250, - touchToDrag: false - }); - - $('#app-navigation-toggle').click(function () { - if ($(window).width() > 768) { - $('#app-navigation').toggle('hidden'); - } else { - if (snapper.state().state === 'left') { - snapper.close(); - } else { - snapper.open('left'); - } - } - }); // Select all elements with data-toggle="tooltips" in the document $('body').tooltip({ selector: '[data-toggle="tooltip"]' diff --git a/js/controller/AppController.js b/js/controller/AppController.js index 62f4e088a..c2e4ef4cf 100644 --- a/js/controller/AppController.js +++ b/js/controller/AppController.js @@ -30,4 +30,13 @@ app.controller('AppController', function ($scope, $location, $http, $log, $rootS $scope.sidebar = $rootScope.sidebar; $scope.user = oc_current_user; $rootScope.config = JSON.parse($attrs.config); + + $scope.appNavigationHide = false; + + $scope.toggleSidebar = function() { + if ($(window).width() > 768) { + $scope.appNavigationHide = !$scope.appNavigationHide; + console.log($scope.appNavigationHide); + } + }; }); diff --git a/templates/main.php b/templates/main.php index 0dc3b7fb8..2cd2310e6 100644 --- a/templates/main.php +++ b/templates/main.php @@ -28,32 +28,30 @@ Util::addScript('deck', 'build/vendor'); Util::addStyle('deck', 'style'); Util::addScript('deck', 'build/deck'); + +if (\OC_Util::getVersion()[0] < 14) { + Util::addStyle('deck', 'comp-13'); +} ?> -
+
inc('part.navigation')); ?> inc('part.settings')); */ ?>
-
-
-
+
+
- - - -
+
\ No newline at end of file diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php index 1b9ae6fdd..bc5f483c2 100644 --- a/templates/part.board.mainView.php +++ b/templates/part.board.mainView.php @@ -37,7 +37,6 @@
- {{ cardOpen }}
diff --git a/templates/part.board.php b/templates/part.board.php deleted file mode 100644 index 7fe90db85..000000000 --- a/templates/part.board.php +++ /dev/null @@ -1,4 +0,0 @@ -inc('part.board.mainView')); ?> -
-
diff --git a/templates/part.card.php b/templates/part.card.php index dcfecc96a..a21f4735b 100644 --- a/templates/part.card.php +++ b/templates/part.card.php @@ -1,5 +1,5 @@ -
-
+
+

t('Drop your files here to upload it to the card')); ?>

@@ -97,8 +97,8 @@ t('Saved')); ?> t('Unsaved changes')); ?> t('Formatting help')); ?> - - + +