Skip to content

Commit

Permalink
Refine groups UI - fixes #2938
Browse files Browse the repository at this point in the history
  • Loading branch information
@benfrancis
benfrancis committed Aug 10, 2023
1 parent e30d64f commit eac03fa
Show file tree
Hide file tree
Showing 24 changed files with 749 additions and 279 deletions.
53 changes: 53 additions & 0 deletions static/css/add-group.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
#add-group-screen {
display: flex;
align-items: center;
justify-content: center;
}

#add-group-screen.hidden {
display: none;
}

#add-group-screen h1 {
position: fixed;
top: 0;
line-height: 9.6rem;
margin: 0;
font-size: 1.6rem;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}

#add-group-screen h1 img {
vertical-align: middle;
margin-right: 0.3rem;
}

#add-group-form {
width: calc(100% - 4rem);
max-width: 48rem;
padding: 4rem;
box-sizing: border-box;
display: flex;
flex-direction: row;
background-color: #597285;
border-radius: 0.5rem;
}

#add-group-title-input {
height: 3.2rem;
flex: 1;
margin: 0;
padding: 0 1rem;
box-sizing: border-box;
}

#add-group-create-button {
height: 3.2rem;
font-size: 1.5rem;
margin: 0 0 0 1rem;
padding: 0 1rem;
box-sizing: border-box;
background-color: #7f93a1;
}
40 changes: 0 additions & 40 deletions static/css/add-thing.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,43 +327,3 @@
width: 12rem;
}
}

#add-group {
background-color: #597285;
width: 50%;
min-width: 28rem;
max-width: 65rem;
margin: 1rem auto;
padding: 1rem;
display: flex;
flex-direction: row;
border-radius: 0.5rem;
text-align: center;
flex-wrap: wrap;
}

#add-group-label {
flex-basis: 100%;
flex-grow: 1;
}

#add-group-title-input {
height: 1.75rem;
background-color: #d2d9de;
border: none;
border-radius: 0.5rem;
padding: 0.5rem;
margin: 0.5rem 10px;
font-size: 1.6rem;
flex-grow: 1;
margin-top: 15px;
}

#add-group-add-button {
background-color: #7f93a1;
border: none;
border-radius: 0.5rem;
padding: 1rem;
color: #fff;
margin-top: 15px;
}
85 changes: 85 additions & 0 deletions static/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,7 @@ h6 {
background: no-repeat center/100% url('/images/overflow.svg');
}

/* Old Overflow Menu (to be deprecated) */
#overflow-menu {
position: fixed;
bottom: 9rem;
Expand Down Expand Up @@ -352,6 +353,90 @@ h6 {
margin-bottom: -0.3rem;
}

/** New Overflow Menu **/
.overflow-menu {
display: block;
position: fixed;
width: 24rem;
padding: 1rem 0 1rem 0;
border-radius: 0.5rem;
background-color: #48779a;
color: #fff;
}

.overflow-menu.hidden {
display: none;
}

.overflow-menu.above ::after {
content: '';
position: absolute;
bottom: -1rem;
right: 1.8rem;
border-width: 1rem 1rem 0;
border-style: solid;
border-color: #48779a transparent;
display: block;
width: 0;
}

.overflow-menu.below ::before {
content: '';
position: absolute;
top: -1rem;
right: 1.8rem;
border-width: 0 1rem 1rem;
border-style: solid;
border-color: #48779a transparent;
display: block;
width: 0;
}

.overflow-menu-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0;
list-style-type: none;
}

.overflow-menu-item:last-child {
border: none;
}

.overflow-menu-item button {
display: flex;
flex-direction: row;
width: 100%;
height: 4rem;
margin: 0;
padding: 0 1rem;
border-radius: 0;
border: none;
background-color: transparent;
align-items: center;
justify-content: center;
color: #fff;
}

.overflow-menu-item button:hover, .overflow-menu-item button:active {
background-color: #3a607c;
}

.overflow-menu-item button img {
width: 1.6rem;
height: 1.6rem;
padding: 0.8rem;
}

.overflow-menu-item button span {
flex: 1;
text-align: left;
font-size: 1.6rem;
margin-left: 1rem;
}

/* Dialog */
.dialog {
position: fixed;
Expand Down
122 changes: 52 additions & 70 deletions static/css/group-context-menu.css
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,81 @@
#group-context-menu {
text-align: center;
}

#group-context-menu-heading {
line-height: 9.6rem;
}

#group-context-menu-heading-text {
font-size: 1.6rem;
}

#group-context-menu-content {
text-align: center;
position: relative;
top: calc(50% - 3.8rem);
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
}

#group-context-menu-heading .hidden,
#group-context-menu-content .hidden {
#group-context-menu.hidden {
display: none;
}

.group-context-menu-button {
border: none;
border-radius: 0.5rem;
color: white;
#group-context-menu h1 {
position: fixed;
top: 0;
line-height: 9.6rem;
margin: 0;
font-size: 1.6rem;
width: 60%;
min-width: 15rem;
height: 6rem;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}

.group-context-menu-button.danger {
background-color: #f55;
#group-context-menu h1 img {
vertical-align: middle;
margin-right: 0.3rem;
}

#group-context-menu-back-button {
background-color: transparent;
}

#group-context-menu-content-edit {
background-color: #597285;
width: 50%;
min-width: 28rem;
max-width: 65rem;
margin: 1rem auto;
padding: 1rem;
/* Edit Group Form */
#edit-group-form {
width: calc(100% - 4rem);
max-width: 48rem;
padding: 4rem;
box-sizing: border-box;
display: flex;
flex-direction: row;
background-color: #597285;
border-radius: 0.5rem;
}

#edit-group-metadata {
flex: 1;
padding: 1rem 1rem 0 1rem;
text-align: left;
#edit-group-form.hidden {
display: none;
}

#edit-group-title {
display: block;
width: calc(100% - 1rem);
#edit-group-title-input {
height: 3.2rem;
flex: 1;
margin: 0;
padding: 0 1rem;
box-sizing: border-box;
}

.edit-group-button {
height: 4rem;
#edit-group-save-button {
height: 3.2rem;
font-size: 1.5rem;
margin: 0 0 0 1rem;
padding: 0 1rem;
box-sizing: border-box;
background-color: #7f93a1;
margin: 1.25rem 0;
}

.edit-group-button:disabled,
.edit-group-button:disabled:hover,
.edit-group-button:hover:active {
background-color: #597285;
}

#edit-group-label {
display: block;
text-align: left;
color: #ccc;
margin: 1rem 0;
font-size: 1.5rem;
/* Remove Group Form */
#remove-group-form {
width: 100%;
text-align: center;
}

#edit-group-label.error {
color: orange;
#remove-group-form.hidden {
display: none;
}

@media only screen and (max-width: 800px) {
#edit-group-spacer {
display: block;
margin-top: 1rem;
}

#edit-group-metadata {
padding-bottom: 1rem;
}
}
#remove-group-button {
border: none;
border-radius: 0.5rem;
color: white;
font-size: 1.6rem;
width: 60%;
min-width: 15rem;
height: 6rem;
background-color: #f55;
}
Loading

0 comments on commit eac03fa

Please sign in to comment.