diff --git a/server/go.mod b/server/go.mod index 0332e0c8051..67a814cce9b 100644 --- a/server/go.mod +++ b/server/go.mod @@ -27,6 +27,7 @@ require ( github.com/tidwall/gjson v1.7.3 // indirect go.uber.org/zap v1.16.0 golang.org/x/crypto v0.0.0-20210322153248-0c34fe9e7dc2 + golang.org/x/oauth2 v0.0.0-20200107190931-bf48bf16ab8d golang.org/x/sys v0.0.0-20210324051608-47abb6519492 // indirect gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c // indirect ) diff --git a/server/go.sum b/server/go.sum index 82e28622701..51ff8937617 100644 --- a/server/go.sum +++ b/server/go.sum @@ -1166,6 +1166,7 @@ golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4Iltr golang.org/x/oauth2 v0.0.0-20190319182350-c85d3e98c914/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw= golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw= golang.org/x/oauth2 v0.0.0-20191202225959-858c2ad4c8b6/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw= +golang.org/x/oauth2 v0.0.0-20200107190931-bf48bf16ab8d h1:TzXSXBo42m9gQenoE3b9BGiEpg5IG2JkU5FkPIawgtw= golang.org/x/oauth2 v0.0.0-20200107190931-bf48bf16ab8d/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw= golang.org/x/perf v0.0.0-20180704124530-6e6d33e29852/go.mod h1:JLpeXjPJfIyPr5TlbXLkXWLhP8nz10XfvxElABhCtcw= golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= @@ -1359,6 +1360,7 @@ google.golang.org/appengine v1.4.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7 google.golang.org/appengine v1.5.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4= google.golang.org/appengine v1.6.1/go.mod h1:i06prIuMbXzDqacNJfV5OdTW448YApPu5ww/cMBSeb0= google.golang.org/appengine v1.6.5/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc= +google.golang.org/appengine v1.6.6 h1:lMO5rYAqUxkmaj76jAkRUvt5JZgFymx/+Q5Mzfivuhc= google.golang.org/appengine v1.6.6/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc= google.golang.org/genproto v0.0.0-20170818010345-ee236bd376b0/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc= google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc= diff --git a/webapp/cypress/integration/createBoard.js b/webapp/cypress/integration/createBoard.js index f77c9c0ac3e..03129495268 100644 --- a/webapp/cypress/integration/createBoard.js +++ b/webapp/cypress/integration/createBoard.js @@ -25,7 +25,7 @@ describe('Create and delete board / card', () => { it('Can set the board title', () => { // Board title - cy.get('.ViewTitle>.Editable.title'). + cy.get('.Editable.title'). type(boardTitle). type('{enter}'). should('have.value', boardTitle); diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss index ee48d0ba016..59049a3339c 100644 --- a/webapp/src/components/cardDetail/cardDetail.scss +++ b/webapp/src/components/cardDetail/cardDetail.scss @@ -1,7 +1,4 @@ .CardDetail { - .title { - width: 100%; - } .add-buttons { display: flex; diff --git a/webapp/src/components/centerPanel.scss b/webapp/src/components/centerPanel.scss index d23dc01ba0b..31a019e5124 100644 --- a/webapp/src/components/centerPanel.scss +++ b/webapp/src/components/centerPanel.scss @@ -1,4 +1,8 @@ .CenterPanel { + flex: 1 1 auto; + display: flex; + flex-direction: column; + .octo-board { flex: 0 1 auto; @@ -6,3 +10,39 @@ flex-direction: column; } } + + +.BoardComponent { + flex: 1 1 auto; + display: flex; + flex-direction: column; + overflow: auto; + + > * { + + padding: 0 80px; + + @media screen and (max-width: 768px) { + padding: 0 40px; + } + + &:first-child { + padding-top: 24px; + @media screen and (max-width: 768px) { + padding: 0 8px; + } + } + + &:last-child { + padding-bottom: 8px; + } + } + + > .top-head { + position: sticky; + top: 0; + left: 0; + background: rgb(var(--main-bg)); + z-index: 100; + } +} diff --git a/webapp/src/components/centerPanel.tsx b/webapp/src/components/centerPanel.tsx index 411b0b155fa..09030f2f656 100644 --- a/webapp/src/components/centerPanel.tsx +++ b/webapp/src/components/centerPanel.tsx @@ -107,7 +107,7 @@ class CenterPanel extends React.Component { return (
{ this.backgroundClicked(e) @@ -129,54 +129,55 @@ class CenterPanel extends React.Component { /> } -
+
- -
- this.addCard('', true)} - addCardFromTemplate={this.addCardFromTemplate} - addCardTemplate={this.addCardTemplate} - editCardTemplate={this.editCardTemplate} - readonly={this.props.readonly} - /> - {activeView.viewType === 'board' && - } - {activeView.viewType === 'table' && - this.addCard('', show)} - onCardClicked={this.cardClicked} - intl={this.props.intl} - />} - {activeView.viewType === 'gallery' && - this.addCard('', show)} - />} - + this.addCard('', true)} + addCardFromTemplate={this.addCardFromTemplate} + addCardTemplate={this.addCardTemplate} + editCardTemplate={this.editCardTemplate} + readonly={this.props.readonly} + /> + + {activeView.viewType === 'board' && + } + + {activeView.viewType === 'table' && +
this.addCard('', show)} + onCardClicked={this.cardClicked} + intl={this.props.intl} + />} + + {activeView.viewType === 'gallery' && + this.addCard('', show)} + />} + ) } diff --git a/webapp/src/components/dialog.scss b/webapp/src/components/dialog.scss index 357962cefe5..0b802b50a95 100644 --- a/webapp/src/components/dialog.scss +++ b/webapp/src/components/dialog.scss @@ -5,8 +5,13 @@ left: 0; right: 0; bottom: 0; - z-index: 10; + z-index: 200; + } + .wrapper { + position: absolute; + width: 100%; + height: 100%; background-color: rgba(var(--body-color), 0.5); } diff --git a/webapp/src/components/dialog.tsx b/webapp/src/components/dialog.tsx index 6f23985ba3a..21c806f489b 100644 --- a/webapp/src/components/dialog.tsx +++ b/webapp/src/components/dialog.tsx @@ -36,28 +36,30 @@ const Dialog = React.memo((props: Props) => { } }} > -
-
- {toolsMenu && - <> - } - title={closeDialogText} - className='IconButton--large' - /> -
- +
+
+
+ {toolsMenu && + <> } + title={closeDialogText} className='IconButton--large' - icon={} /> - {toolsMenu} - - - } +
+ + } + /> + {toolsMenu} + + + } +
+ {props.children}
- {props.children}
) diff --git a/webapp/src/components/gallery/galleryCard.scss b/webapp/src/components/gallery/galleryCard.scss index 230a9ef397a..e339cc09f11 100644 --- a/webapp/src/components/gallery/galleryCard.scss +++ b/webapp/src/components/gallery/galleryCard.scss @@ -27,7 +27,7 @@ position: absolute; right: 10px; top: 10px; - z-index: 3000; + z-index: 30; .IconButton { background-color: rgba(var(--body-color), 0.13); } diff --git a/webapp/src/components/kanban/kanban.scss b/webapp/src/components/kanban/kanban.scss index 26fe2b290b2..49636312a77 100644 --- a/webapp/src/components/kanban/kanban.scss +++ b/webapp/src/components/kanban/kanban.scss @@ -4,8 +4,11 @@ flex-direction: row; min-height: 30px; - margin-bottom: 16px; + padding-bottom: 16px; color: #909090; + position: fixed; + z-index: 1; + background: rgb(var(--main-bg)); } .octo-board-header-cell { @@ -55,6 +58,7 @@ display: flex; flex-direction: row; flex: 0 1 auto; + margin-top: 50px; } .octo-board-column { diff --git a/webapp/src/components/table/table.scss b/webapp/src/components/table/table.scss index f4422adafa5..2d7f903cc7a 100644 --- a/webapp/src/components/table/table.scss +++ b/webapp/src/components/table/table.scss @@ -88,6 +88,10 @@ } .octo-table-header { + position: fixed; + z-index: 1; + background: rgb(var(--main-bg)); + .octo-table-cell { color: rgba(var(--body-color), 0.6); @@ -112,7 +116,7 @@ } } - .MenuWrapper { + .MenuWrapper { width: 100%; max-width: calc(100% - 5px); diff --git a/webapp/src/components/table/tableRow.scss b/webapp/src/components/table/tableRow.scss index 58ca139b2a4..ac5d63df3a4 100644 --- a/webapp/src/components/table/tableRow.scss +++ b/webapp/src/components/table/tableRow.scss @@ -10,7 +10,7 @@ color: rgba(var(--body-color), 0.64); background-color: rgba(var(--body-color), 0.1); box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, - rgba(var(--body-color), 0.1) 0px 2px 4px; + rgba(var(--body-color), 0.1) 0px 2px 4px; height: 90%; width: 100%; } @@ -27,4 +27,8 @@ display: block; } } + + &:nth-child(2) { + margin-top: 48px; + } } diff --git a/webapp/src/components/viewTitle.scss b/webapp/src/components/viewTitle.scss index e374464e462..11976b4a3b6 100644 --- a/webapp/src/components/viewTitle.scss +++ b/webapp/src/components/viewTitle.scss @@ -1,16 +1,21 @@ .ViewTitle { - flex: 0 0 auto; - display: flex; - flex-direction: row; - align-items: center; - min-width: 300px; + > div { + flex: 0 0 auto; + display: flex; + flex-direction: row; + align-items: center; + min-width: 300px; + } - &.add-buttons { + > .add-buttons { flex-direction: row; min-height: 30px; color: rgba(var(--body-color), 0.4); width: 100%; align-items: flex-start; + .Icon { + margin-left: 0.5em; + } .Button { display: none; } @@ -30,7 +35,7 @@ flex-grow: 1; } - &.description > * { + > .description > * { flex-grow: 1; } } diff --git a/webapp/src/components/viewTitle.tsx b/webapp/src/components/viewTitle.tsx index 8064d683a66..505b3fdfb65 100644 --- a/webapp/src/components/viewTitle.tsx +++ b/webapp/src/components/viewTitle.tsx @@ -28,8 +28,8 @@ const ViewTitle = React.memo((props: Props) => { const intl = useIntl() return ( - <> -
+
+
{!props.readonly && !board.icon &&
-
+
{
{board.showDescription && -
+
{ />
} - +
) }) diff --git a/webapp/src/components/workspace.scss b/webapp/src/components/workspace.scss index 0b643af830b..3c979142d11 100644 --- a/webapp/src/components/workspace.scss +++ b/webapp/src/components/workspace.scss @@ -8,7 +8,7 @@ flex: 1 1 auto; display: flex; flex-direction: column; - overflow: auto; + overflow: hidden; > .banner { background-color: rgba(230, 220, 192, 0.9); diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss index e01cc8f69f0..febcde0c041 100644 --- a/webapp/src/styles/main.scss +++ b/webapp/src/styles/main.scss @@ -87,7 +87,6 @@ h1 { line-height: 40px; margin: 0 0 10px 0; font-weight: 600; - display: inline-block; } /* App frame */ @@ -110,26 +109,6 @@ h1 { /* Main app */ -.octo-app { - flex: 1 1 auto; - display: flex; - flex-direction: column; - overflow: auto; -} - -.octo-frame { - flex: 1 1 auto; - display: flex; - flex-direction: column; - overflow: scroll; - - padding: 24px 80px 8px; - - @media screen and (max-width: 768px) { - padding: 8px 40px; - } -} - .dragover { background-color: rgba(128, 192, 255, 0.4); }