diff --git a/static/css/add-group.css b/static/css/add-group.css index 02eb000f3..6a8961580 100644 --- a/static/css/add-group.css +++ b/static/css/add-group.css @@ -17,6 +17,10 @@ text-align: center; font-family: 'Open Sans', sans-serif; font-weight: normal; + width: calc(100% - 18rem); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } #add-group-screen h1 img { @@ -51,3 +55,18 @@ box-sizing: border-box; background-color: #7f93a1; } + +@media only screen and (max-width: 959px) { + #add-group-form { + flex-direction: column; + } + + #add-group-title-input { + flex: none; + } + + #add-group-create-button { + margin: 2rem auto 0 auto; + width: 9rem; + } +} diff --git a/static/css/group-context-menu.css b/static/css/group-context-menu.css index a366d3601..2925526bc 100644 --- a/static/css/group-context-menu.css +++ b/static/css/group-context-menu.css @@ -17,6 +17,10 @@ text-align: center; font-family: 'Open Sans', sans-serif; font-weight: normal; + width: calc(100% - 18rem); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } #group-context-menu h1 img { @@ -77,3 +81,18 @@ height: 6rem; background-color: #f55; } + +@media only screen and (max-width: 959px) { + #edit-group-form { + flex-direction: column; + } + + #edit-group-title-input { + flex: none; + } + + #edit-group-save-button { + margin: 2rem auto 0 auto; + width: 9rem; + } +} diff --git a/static/css/group.css b/static/css/group.css index 0c1ec4af5..98d15293d 100644 --- a/static/css/group.css +++ b/static/css/group.css @@ -2,7 +2,6 @@ background: #5288af; border-radius: 0.5rem; margin: 2rem 5rem; - min-width: 25rem; min-height: 5rem; max-height: 3.2rem; } @@ -17,28 +16,28 @@ } .group .bar { - padding: 0.5rem 1rem; + display: flex; + flex-direction: row; + padding: 0.5rem; position: relative; height: 5rem; box-sizing: border-box; } .group .bar .title { + flex: 1; color: white; line-height: 4rem; -} - -.group .bar .leftcontainer { - display: flex; + text-align: left; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .group .bar .overflow-button { - position: absolute; - top: 0; - right: 0; width: 3.2rem; height: 3.2rem; - margin: 0.9rem; + margin: 0.4rem; padding: 0; background-image: url('/images/overflow-small.svg'); background-color: transparent; @@ -63,11 +62,10 @@ background-position: center; background-repeat: no-repeat; border: none; - width: 2.4rem; - height: 4rem; - margin-right: 5px; + width: 3.2rem; + height: 3.2rem; + margin: 0.4rem; background-color: transparent; - cursor: grab; } .group.open .bar .expand-button { diff --git a/static/js/views/group.js b/static/js/views/group.js index db4b66684..a05e1d2c4 100644 --- a/static/js/views/group.js +++ b/static/js/views/group.js @@ -62,9 +62,6 @@ class Group { bar.setAttribute('draggable', 'true'); bar.setAttribute('data-layout-index', '-1'); - const leftcontainer = document.createElement('DIV'); - leftcontainer.setAttribute('class', 'leftcontainer'); - const expandButton = document.createElement('BUTTON'); expandButton.setAttribute('class', 'expand-button'); const cookie = `group-${this.id}-closed=1`; @@ -87,14 +84,12 @@ class Group { this.element.classList.add('open'); } }); - leftcontainer.appendChild(expandButton); + bar.appendChild(expandButton); const title = document.createElement('DIV'); title.setAttribute('class', 'title'); title.innerText = this.title; - leftcontainer.appendChild(title); - - bar.appendChild(leftcontainer); + bar.appendChild(title); const groupOverflowButton = document.createElement('BUTTON'); groupOverflowButton.setAttribute('class', 'overflow-button');