Skip to content

Commit

Permalink
Resolve regression in sidebar layouts
Browse files Browse the repository at this point in the history
Fixes #90
  • Loading branch information
mrliptontea committed Mar 17, 2019
1 parent 99ad2c5 commit 25ba736
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 69 deletions.
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe

## Changelog

v2.0.1 (2019-03-17):

* Fixed #90: regression in some sidebar layouts

v2.0 (2019-03-13):

* Refreshed, modernized look & feel
Expand Down
30 changes: 15 additions & 15 deletions src/sass/components/_admin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
// Admin
// --------------------------------------------------

#main #admin-menu {
ul {
#admin-menu {
ul:nth-child(n) {
li {
list-style-type: none;

Expand All @@ -14,22 +14,22 @@
}
}
}
}

#main #admin-index > #admin-menu {
ul {
margin: 0;
padding: 0;
}
#admin-index > & {
ul {
margin: 0;
padding: 0;
}

li {
padding: ($sidebar-padding-vertical + 1px) ($sidebar-padding-horizontal + 3px);
}
li {
padding: ($sidebar-padding-vertical + 1px) ($sidebar-padding-horizontal + 3px);
}

a {
display: inline-block;
padding-left: 5px + 20px;
background-position: 0 center;
a {
display: inline-block;
padding-left: 5px + 20px;
background-position: 0 center;
}
}
}

Expand Down
119 changes: 67 additions & 52 deletions src/sass/components/_content.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
// Sidebar
// --------------------------------------------------

#main #sidebar {
#sidebar {
padding: $padding-side $sidebar-padding-horizontal;

@if $flexbox-layout {
Expand Down Expand Up @@ -58,6 +58,19 @@
}
}

.nosidebar & {
margin: 0;
padding: 0;
border: 0 none;

@if $flexbox-layout {
flex: 0 0 auto;
} @else {
width: 0;
float: none;
}
}

h3 {
margin-top: $line-height-computed * 1.5;
}
Expand All @@ -68,71 +81,73 @@
}

ul {
margin: 0 0 ($line-height-computed / 2);
padding: 0;
&:nth-child(n) {
margin: 0 0 ($line-height-computed / 2);
padding: 0;

@if $sidebar-position == "left" {
margin-right: -($sidebar-padding-horizontal);
} @else {
margin-left: -($sidebar-padding-horizontal);
@if $sidebar-position == "left" {
margin-right: -($sidebar-padding-horizontal);
} @else {
margin-left: -($sidebar-padding-horizontal);
}
}

li {
margin: 0;
padding: 0;
list-style-type: none;

> a:not(.icon-only) {
display: block;
padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
border: 1px solid transparent;

@if $sidebar-position == "left" {
border-left-width: 3px;
border-radius: $border-radius-large 0 0 $border-radius-large;
} @else {
border-right-width: 3px;
border-radius: 0 $border-radius-large $border-radius-large 0;
}
&:not(.watchers) {
li {
margin: 0;
padding: 0;
list-style-type: none;

&:hover {
background-color: $sidebar-link-hover-bg;
color: $sidebar-link-hover-text;
text-decoration: none;
}

&.selected {
border-color: $sidebar-link-active-border;
background-color: $sidebar-link-active-bg;
color: $sidebar-link-active-text;
> a:not(.icon-only) {
display: block;
padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
border: 1px solid transparent;

@if $sidebar-position == "left" {
margin-right: -1px;
border-right-color: $body-bg;
border-left-color: $sidebar-link-active-side;
box-shadow: -3px 1px 2px rgba(0, 0, 0, .1);
border-left-width: 3px;
border-radius: $border-radius-large 0 0 $border-radius-large;
} @else {
margin-left: -1px;
border-right-color: $sidebar-link-active-side;
border-left-color: $body-bg;
box-shadow: 3px 1px 2px rgba(0, 0, 0, .1);
border-right-width: 3px;
border-radius: 0 $border-radius-large $border-radius-large 0;
}

&:hover {
background-color: $sidebar-link-hover-bg;
color: $sidebar-link-hover-text;
text-decoration: none;
}

&.selected {
border-color: $sidebar-link-active-border;
background-color: $sidebar-link-active-bg;
color: $sidebar-link-active-text;

@if $sidebar-position == "left" {
margin-right: -1px;
border-right-color: $body-bg;
border-left-color: $sidebar-link-active-side;
box-shadow: -3px 1px 2px rgba(0, 0, 0, .1);
} @else {
margin-left: -1px;
border-right-color: $sidebar-link-active-side;
border-left-color: $body-bg;
box-shadow: 3px 1px 2px rgba(0, 0, 0, .1);
}
}
}
}
}
}
}

#main.nosidebar #sidebar {
margin: 0;
padding: 0;
border: 0 none;
// Special treatment for anchor tags directly under sidebar tag
> a {
padding: $sidebar-padding-vertical $sidebar-padding-horizontal;

@if $flexbox-layout {
flex: 0 0 auto;
} @else {
width: 0;
float: none;
@if $sidebar-position == "left" {
padding-left: $sidebar-padding-horizontal + 3px;
} @else {
padding-right: $sidebar-padding-horizontal + 3px;
}
}
}

Expand Down
7 changes: 6 additions & 1 deletion src/sass/components/_elements.scss
Original file line number Diff line number Diff line change
Expand Up @@ -201,10 +201,15 @@ a.collapsible.collapsed,
background: transparent;
}

> .icon-only {
&::before {
line-height: inherit;
}
}

> .delete {
float: right;
opacity: $icon-opacity;
vertical-align: middle;

&:hover {
opacity: $icon-hover-opacity;
Expand Down
2 changes: 1 addition & 1 deletion stylesheets/application.css

Large diffs are not rendered by default.

0 comments on commit 25ba736

Please sign in to comment.