Skip to content

Commit

Permalink
Add back subitems, tweak CSS selectors to match new markup
Browse files Browse the repository at this point in the history
  • Loading branch information
@ciampo
ciampo committed Jan 17, 2025
1 parent b925a3c commit b2eb737
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 79 deletions.
2 changes: 1 addition & 1 deletion client/layout/masterbar/item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ class MasterbarItem extends Component< MasterbarItemProps > {
>
{ this.renderChildren() }
</MenuItem>
{ /* { this.renderSubItems() } */ }
{ this.renderSubItems() }
</div>
);
}
Expand Down
171 changes: 93 additions & 78 deletions client/layout/masterbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,15 @@ body.is-mobile-app-view {
padding-top: 10px;
padding-bottom: 40px;

.masterbar__item-wrapper:first-child {
flex: none;
}

.masterbar__item:hover {
background: transparent;
text-decoration: underline;
}
.masterbar__item:last-child {
.masterbar__item-wrapper:last-child .masterbar__item {
margin-left: 6px;
margin-right: 12px;
background-color: #fff;
Expand All @@ -74,26 +78,28 @@ body.is-mobile-app-view {
color: var(--color-sidebar-text);
}
}
.masterbar__item:last-child:hover {
.masterbar__item-wrapper:last-child:hover .masterbar__item {
background: #fff;
text-decoration: none;
}
.masterbar__item:last-child:hover .masterbar__item-content {
.masterbar__item-wrapper:last-child:hover .masterbar__item-content {
color: var(--color-sidebar-text);
}
@media only screen and (max-width: 781px) {
padding-top: 0;

.masterbar__login-links {
.masterbar__item {
height: 30px;
line-height: 30px;
width: unset !important;
padding: 0 8px;
margin: 8px 8px 0 0;

.masterbar__item-content {
display: block !important;
.masterbar__item-wrapper {
.masterbar__item {
height: 30px;
line-height: 30px;
width: unset !important;
padding: 0 8px;
margin: 8px 8px 0 0;

.masterbar__item-content {
display: block !important;
}
}
}
}
Expand Down Expand Up @@ -198,7 +204,6 @@ body.is-mobile-app-view {
align-items: center;
color: var(--color-masterbar-text);
font-size: $masterbar-font-size;
gap: 5px;
height: var(--masterbar-height);
line-height: var(--masterbar-height);
padding: 0 8px;
Expand Down Expand Up @@ -237,7 +242,7 @@ body.is-mobile-app-view {
}
}

.masterbar__item-subitems {
& + .masterbar__item-subitems {
margin: 0;
padding: 6px 0;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
Expand All @@ -258,6 +263,7 @@ body.is-mobile-app-view {
white-space: nowrap;
min-width: 140px;
line-height: 2;

a,
button {
display: inline-block;
Expand Down Expand Up @@ -356,7 +362,7 @@ body.is-mobile-app-view {
fill: var(--color-masterbar-highlight);
}

.masterbar__item-subitems {
& + .masterbar__item-subitems {
display: block;
z-index: 99999;
}
Expand Down Expand Up @@ -449,9 +455,13 @@ body.is-mobile-app-view {
}

@media only screen and (max-width: 781px) {
font-size: $masterbar-mobile-font-size;
padding: 0;

&,
& + .masterbar__item-subitems {
font-size: $masterbar-mobile-font-size;
}

&:not(.masterbar__item--always-show-content) {
width: 46px;
}
Expand Down Expand Up @@ -721,51 +731,22 @@ body.is-mobile-app-view {
gap: 5px;
}

.gravatar {
border: 1px solid var(--color-masterbar-border);
border-radius: unset;
margin-left: 1px;

@media only screen and (max-width: 781px) {
width: 26px;
height: 26px;
margin-left: 4px;
}
}

.masterbar__item-howdy-account-wrapper {
display: flex;
flex-direction: row;
gap: 12px;
padding: 4px 3px;
&,
+ .masterbar__item-subitems {
.gravatar {
border: 1px solid var(--color-masterbar-border);
border-radius: unset;
margin-left: 1px;

.masterbar__item-howdy-account-gravatar {
border: none;
flex-basis: auto;
max-width: 50%;
}

.masterbar__item-howdy-account-details {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
max-width: 50%;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3px 5px;
margin: 0;
line-height: 18px;

.username {
font-size: 11px; /* stylelint-disable-line declaration-property-unit-allowed-list */
line-height: 14px;
margin-bottom: 4px;
@media only screen and (max-width: 781px) {
width: 26px;
height: 26px;
margin-left: 4px;
}
}
}

.masterbar__item-subitems {
+ .masterbar__item-subitems {
min-width: 264px !important;
max-height: 94px;
padding: 12px 0;
Expand All @@ -774,39 +755,73 @@ body.is-mobile-app-view {
min-width: 100% !important;
max-height: 100%;
}
}

.masterbar__item-subitems-item {
&.account-link,
&.logout-link {
position: relative;
float: left;
top: -5px;
left: 85px;
.masterbar__item-howdy-account-wrapper {
display: flex;
flex-direction: row;
gap: 12px;
padding: 4px 3px;

.masterbar__item-howdy-account-gravatar {
border: none;
flex-basis: auto;
max-width: 50%;
}

.masterbar__item-howdy-account-details {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
max-width: 50%;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3px 5px;
margin: 0;
line-height: 18px;

.username {
font-size: 11px; /* stylelint-disable-line declaration-property-unit-allowed-list */
line-height: 14px;
margin-bottom: 4px;
}
}
}

.masterbar__item-subitems-item {
&.account-link,
&.logout-link {
position: relative;
float: left;
top: -5px;
left: 85px;
}
}
}

@media only screen and (max-width: 781px) {
.masterbar__item-howdy-howdy,
.masterbar__item-howdy-account-gravatar {
+ .masterbar__item-subitems .masterbar__item-howdy-account-gravatar {
display: none;
}

.masterbar__item-howdy-account-details {
padding: 0 !important;
}
+ .masterbar__item-subitems {
.masterbar__item-howdy-account-details {
padding: 0 !important;
}

.masterbar__item-subitems-item {
.masterbar__item-subitems-item {

min-width: 100% !important;
&.account-link {
top: -10px;
left: 0;
}
min-width: 100% !important;
&.account-link {
top: -10px;
left: 0;
}

&.logout-link {
top: -10px;
left: 0;
&.logout-link {
top: -10px;
left: 0;
}
}
}
}
Expand All @@ -823,7 +838,7 @@ body.is-mobile-app-view {
}

@include breakpoint-deprecated( ">480px" ) {
.masterbar__item:last-child {
.masterbar__item-wrapper:last-child .masterbar__item {
margin-right: 20px;
}
}
Expand Down

0 comments on commit b2eb737

Please sign in to comment.