purpleraft/PurpleMine2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix some styling issues in Redmine 4.

Browse Source 
* Fix #172 Collapsed/expended icons for completed versions.
* Fix #171 "Display" label in Gantt option.
* Fix #170 radio buttons in projects options.
* Fix #169 styles in the spent time tab.
* Change lightness of shades 50 and 950.
* Change loader styles.
This commit is contained in:
mrliptontea
2020-04-05 18:53:53 +01:00
parent aaddd2e10b
commit aa4c59a48c
21 changed files with 225 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -58,11 +58,17 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
Latest (master):
* Fixed #172 Collapsed/expended icons for completed versions.
* Fixed #171 "Display" label in Gantt option.
* Fixed #170 radio buttons in projects options.
* Fixed #169 styles in the spent time tab.
* Fixed #164: apply responsive overrides more generally
* Fixed #159: wrapping long text in issue attributes.
* Fixed #150: styling for query totals and expander in Agile plugin.
* Fixed #148: full screen view for Dashboard plugin.
* Fixed a "timeline" positioning in issue notes/changes.
* Changed lightness of shades 50 and 950.
* Changed loader styles.
v2.9.1 (2020-02-22):

2
plugins/redmine_backlogs/jquery/jquery-ui.css vendored
View File

File diff suppressed because one or more lines are too long

2
plugins/redmine_backlogs/master_backlog.css
View File

File diff suppressed because one or more lines are too long

2
plugins/redmine_backlogs/taskboard.css
View File

File diff suppressed because one or more lines are too long

BIN
screenshots/calendar.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 171 KiB

After

Width:  |  Height:  |  Size: 98 KiB

BIN
screenshots/issue-page.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 202 KiB

After

Width:  |  Height:  |  Size: 99 KiB

BIN
screenshots/issues.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 94 KiB

BIN
screenshots/new-issue.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 161 KiB

After

Width:  |  Height:  |  Size: 92 KiB

BIN
screenshots/redmine-backlogs.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 64 KiB

13
src/sass/_variables.scss
View File

@@ -43,7 +43,7 @@ $black: #000 !default;
$gray: hsl(hue($indigo), 20%, 85%) !default;
$shade-map: (
50: 90%,
50: 87.5%,
100: 80%,
200: 65%,
300: 40%,
@@ -53,7 +53,7 @@ $shade-map: (
700: 40%,
800: 65%,
900: 80%,
950: 90%
950: 87.5%
) !default;
@function shade($color, $shade: 500) {
@@ -612,7 +612,7 @@ $progress-bar-info-bg: $brand-info !default;
$panel-body-padding-vertical: 15px !default;
$panel-body-padding-horizontal: 15px !default;
$panel-body-padding: $panel-body-padding-vertical $panel-body-padding-horizontal !default;
$panel-color: $gray-900 !default;
$panel-color: $text-color !default;
$panel-bg: $gray-50 !default;
$panel-border: $gray-400 !default;
$panel-border-radius: $border-radius-base !default;
@@ -648,10 +648,15 @@ $issue-attribute-padding-h: 5px !default;
//== Speech "bubbles"
//
$bubble-bg: $issue-bg !default;
$bubble-border: $issue-border !default;
$bubble-text: $issue-text !default;
$bubble-gravatar-size: 24px !default;
$bubble-gravatar-space: 12px !default;
$bubble-padding-vertical: 8px !default;
$bubble-padding-horizontal: 15px !default;
$bubble-padding-horizontal: 12px !default;
$bubble-target-border: saturate($brand-primary, 25%) !default;
$bubble-target-shadow-alpha: .2 !default;
//== Badges

7
src/sass/components/_admin.scss
View File

@@ -61,6 +61,13 @@ table.permissions {
//== Workflows
//
.controller-workflows {
table.list,
fieldset.collapsible {
margin-bottom: $line-height-computed;
}
}
table.transitions {
td.enabled {
background: $state-success;

4
src/sass/components/_buttons.scss
View File

@@ -187,6 +187,10 @@ p.buttons {
min-width: 130px;
}
label + & {
margin-left: $padding-side;
}
@at-root span#{&} {
> span {
display: inline-block;

61
src/sass/components/_elements.scss
View File

@@ -7,27 +7,29 @@
//
a.collapsible,
a.collapsible.icon,
.collapsible > legend {
color: $link-color;
cursor: pointer;
user-select: none;
&:hover {
&:hover,
&:focus {
color: $link-hover-color;
text-decoration: none;
}
&::before {
content: "";
display: inline-block;
@include fa-icon;
content: $fa-var-chevron-down;
position: relative;
top: -1px;
width: 0;
height: 0;
top: -.1em;
width: 1em;
height: 1em;
margin-right: 3px;
transform: rotate(0);
border-top: 6px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
color: $gray-600;
font-size: 12px;
vertical-align: middle;
@if $collapsible-animation-time > 0 {
@@ -37,6 +39,7 @@ a.collapsible,
}
a.collapsible.collapsed,
a.collapsible.icon-collapsed,
.collapsible.collapsed > legend {
&::before {
transform: rotate(-90deg);
@@ -669,16 +672,22 @@ div#version-summary {
//== Ajax indicator
//
@keyframes spin {
to { transform: rotate(360deg); }
}
#ajax-indicator {
@include nice-shadow(3);
position: fixed;
z-index: 100;
top: 50%;
left: 50%;
box-sizing: border-box;
width: 200px;
margin: (($line-height-computed + $padding-large-vertical * 2 + 1px * 2) / -2) ((200px + $padding-large-horizontal * 2 + 1px * 2) / -2);
margin: (($padding-large-vertical * 2 + 1px * 2 + $line-height-computed) / -2) (200px / -2);
padding: $padding-large-vertical $padding-large-horizontal;
border: 1px solid $highlight-border;
border-radius: $border-radius-base;
opacity: .9;
background-color: $highlight-bg;
color: $highlight-text;
@@ -686,12 +695,22 @@ div#version-summary {
text-align: center;
span {
padding-left: 26px;
background-image: url("../../../images/loading.gif");
background-repeat: no-repeat;
background-position: 0% 40%;
line-height: $line-height-computed;
&::before {
content: "";
display: inline-block;
box-sizing: border-box;
width: $line-height-computed;
height: $line-height-computed;
margin-right: $line-height-computed / 2;
animation: spin 1s linear infinite;
border: 3px solid rgba($highlight-text, .3);
border-radius: 50%;
border-top-color: $highlight-text;
vertical-align: bottom;
}
}
}
@@ -754,15 +773,14 @@ div.table-list.boards {
}
.message {
border: 1px solid $gray-400;
border: 1px solid $bubble-border;
border-radius: $panel-border-radius;
background: $gray-100;
background: $bubble-bg;
> h4,
> p {
margin-bottom: 0;
padding: $bubble-padding-vertical $bubble-padding-horizontal;
border-bottom: 1px solid mix($gray-400, $gray-100, 50%);
color: $gray-700;
font-size: $font-size-list;
@@ -776,7 +794,8 @@ div.table-list.boards {
}
.wiki {
padding: $bubble-padding-horizontal;
padding: $panel-body-padding;
border-top: 1px solid $bubble-border;
border-radius: 0 0 $panel-border-radius $panel-border-radius;
background: $body-bg;
}
@@ -794,7 +813,7 @@ div.table-list.boards {
.attachments {
padding: $bubble-padding-horizontal;
border-top-color: mix($gray-400, $gray-100, 50%);
border-top-color: $bubble-border;
}
}
@@ -828,12 +847,12 @@ div.table-list.boards {
margin-top: 1px;
margin-left: 2px;
border-width: 6px;
border-right-color: $panel-bg;
border-right-color: $bubble-bg;
}
&::before {
border-width: 7px;
border-right-color: $panel-border;
border-right-color: $bubble-border;
}
}

22
src/sass/components/_forms.scss
View File

@@ -26,6 +26,8 @@ form {
}
}
span.field label,
span.field ~ label,
.box label {
line-height: $line-height-base;
@@ -121,7 +123,7 @@ input[type="search"] {
input[type="radio"],
input[type="checkbox"] {
margin: 4px 1px 0 0;
margin: 4px 3px 0 5px;
margin-top: 1px \9; // IE8-9
line-height: normal;
vertical-align: top;
@@ -264,6 +266,7 @@ em.info {
color: $gray-700;
font-size: $font-size-small;
font-style: normal;
line-height: $line-height-base;
}
@@ -307,6 +310,11 @@ em.info {
display: block;
padding-top: $input-padding-vertical + 1px;
line-height: $line-height-base;
> input[type="checkbox"],
> input[type="radio"] {
margin-left: 0;
}
}
}
@@ -350,6 +358,12 @@ em.info {
float: none;
text-align: left;
cursor: pointer;
> input[type="checkbox"],
> input[type="radio"] {
margin-left: -$check-input-gutter;
float: left;
}
}
&.inline {
@@ -363,11 +377,13 @@ em.info {
> input[type="checkbox"],
> input[type="radio"] {
margin-top: $check-input-margin-vertical;
margin-left: 0;
}
~ input[type="checkbox"],
~ input[type="radio"] {
margin-top: $check-input-margin-btn-v;
margin-left: 0;
}
}
}
@@ -386,6 +402,10 @@ label.inline {
margin-left: -$check-input-gutter;
float: left;
}
input + & {
padding-left: 0;
}
}
label.block {

4
src/sass/components/_icons.scss
View File

@@ -266,6 +266,10 @@ a.icon-del {
}
}
.icon-zoom-in + .icon-zoom-out {
margin-left: 5px;
}
//== Administration menu sections
//

168
src/sass/components/_issue.scss
View File

@@ -290,6 +290,11 @@
padding: $issue-padding;
border-top: 1px solid $issue-border;
}
// Restore margin below buttons in reverse chronological mode
+ div[style] + .contextual {
margin-bottom: $line-height-computed;
}
}
div.fileover {
@@ -357,6 +362,7 @@ div.thumbnails {
top: 0;
margin: 3px;
border-radius: $border-radius-base - 1;
vertical-align: middle;
}
}
@@ -388,6 +394,10 @@ div.thumbnails {
td.buttons {
width: 3em;
vertical-align: middle;
a:not(:first-child) {
margin-left: 2px;
}
}
}
}
@@ -424,8 +434,6 @@ div.thumbnails {
}
#history {
overflow: auto;
> .tabs {
margin-bottom: $line-height-computed + 2px * 2;
}
@@ -458,63 +466,85 @@ div.thumbnails {
.journal {
position: relative;
margin-bottom: $line-height-computed;
border: 1px solid $bubble-border;
border-radius: $panel-border-radius;
@if $use-gravatars {
margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
}
&.changeset {
h4 + p {
margin-bottom: 0;
padding-bottom: $bubble-padding-vertical;
background-color: $bubble-bg;
font-size: $font-size-list;
> a:first-child {
font-family: $font-family-monospace;
font-weight: $font-weight-bold;
}
}
}
> div {
&:target {
$border: $bubble-target-border;
$shadow: rgba($bubble-target-border, $bubble-target-shadow-alpha);
position: relative;
margin-top: -($responsive-header-height + 4px);
padding-top: ($responsive-header-height + 4px);
&::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: -($line-height-computed - 1px);
left: 22px;
width: 4px;
height: $line-height-computed - 2px;
background-color: darken($body-bg, 5%);
top: ($responsive-header-height + 4px);
right: 0;
bottom: 0;
left: 0;
border-radius: $panel-border-radius - 1px;
box-shadow: 0 0 0 1px $border, 0 0 0 4px $shadow;
}
.tabs + &::before {
display: none;
}
> div {
border: 1px solid $issue-border;
border-radius: $panel-border-radius;
&:target {
border-color: darken($issue-border, 25%);
@if $use-gravatars {
h4::before {
border-right-color: darken($issue-border, 25%);
> h4::before {
border-right-color: $border;
filter: drop-shadow(-4px 0 0 $shadow);
}
}
@media screen and (min-width: $redmine-responsive-min) {
margin-top: -$line-height-computed;
padding-top: $line-height-computed;
&::before {
top: $line-height-computed;
}
}
}
}
// For Redmine 4.0+
> div > .contextual {
> div > .contextual,
> .contextual {
position: relative;
z-index: 1;
margin: 0;
padding: $bubble-padding-vertical $bubble-padding-horizontal;
font-size: $font-size-list;
> .journal-actions {
padding-right: $issue-attribute-padding-h;
> a {
a {
opacity: $icon-opacity;
&:hover {
opacity: $icon-hover-opacity;
}
}
}
> a.journal-link {
padding-left: $issue-attribute-padding-h;
opacity: 1;
color: $gray-700;
&::before {
@@ -523,13 +553,15 @@ div.thumbnails {
}
}
> div > h4 {
> div > h4,
> h4 {
margin: 0;
padding: $bubble-padding-vertical $bubble-padding-horizontal;
border-radius: $panel-border-radius $panel-border-radius 0 0;
background-color: $issue-bg;
background-color: $bubble-bg;
color: $gray-700;
font-size: $font-size-list;
font-weight: $font-weight-normal;
a {
color: $gray-900;
@@ -545,7 +577,8 @@ div.thumbnails {
}
@if $use-gravatars {
> div > h4 {
> div > h4,
> h4 {
position: relative;
&::before,
@@ -567,12 +600,12 @@ div.thumbnails {
margin-top: 1px;
margin-left: 2px;
border-width: 6px;
border-right-color: $issue-bg;
border-right-color: $bubble-bg;
}
&::before {
border-width: 7px;
border-right-color: $issue-border;
border-right-color: $bubble-border;
}
> .gravatar {
@@ -584,35 +617,27 @@ div.thumbnails {
}
}
> p {
padding-right: $bubble-padding-horizontal;
padding-left: $bubble-padding-horizontal;
&:empty {
margin-bottom: 0;
}
}
form,
.wiki,
.details {
border-top: 1px solid $bubble-border;
}
.details {
margin: 0;
padding: $bubble-padding-vertical 0;
padding-left: $bubble-padding-horizontal * 2.5;
list-style: none;
border-top: 1px solid mix($body-bg, $issue-border, 50%);
padding-left: $bubble-padding-horizontal + 20px;
font-size: $font-size-list;
li {
position: relative;
margin-bottom: $bubble-padding-vertical / 2;
&:last-child {
margin-bottom: 0;
}
&::before {
content: "";
display: block;
position: absolute;
top: 5px;
left: -($bubble-padding-horizontal + 6px / 2);
width: 6px;
height: 6px;
border-radius: 50%;
background-color: $gray-600;
}
}
img {
margin: 0 0 -3px 4px;
}
@@ -627,15 +652,13 @@ div.thumbnails {
}
}
.wiki,
form {
.wiki {
padding: $issue-padding;
border-top: 1px solid $issue-border;
}
form {
padding-top: 5px;
background-color: $gray-100;
padding: $bubble-padding-vertical $bubble-padding-horizontal $bubble-padding-horizontal;
background-color: $bubble-bg;
> p {
margin-bottom: $issue-padding;
@@ -679,13 +702,11 @@ div.thumbnails {
}
.private-notes {
> div {
border-left-color: $brand-warning;
h4::before {
> div > h4::before {
border-right-color: $brand-warning;
}
}
}
#activity dt,
@@ -712,22 +733,29 @@ span.private {
@media screen and (min-width: $screen-md-min) {
width: 45%;
margin-left: $padding-side;
float: right;
+ #history {
margin-right: 45%;
padding-right: $padding-side;
}
}
@media screen and (min-width: $screen-lg-min) {
width: 33%;
min-width: 28em;
+ #history {
margin-right: 33%;
}
}
div.changeset {
margin-top: $line-height-computed / 2 + 2px * 2;
padding: 0;
overflow: hidden;
border: 1px solid $issue-border;
border: 1px solid $bubble-border;
border-radius: $panel-border-radius;
background-color: $issue-bg;
background-color: $bubble-bg;
font-size: $font-size-list;
&:first-of-type {
@@ -740,7 +768,7 @@ span.private {
padding: $padding-base-vertical $padding-base-horizontal;
color: $gray-700;
> a {
> a:first-child {
font-family: $font-family-monospace;
font-weight: $font-weight-bold;
}
@@ -760,7 +788,7 @@ span.private {
> .wiki {
padding: $padding-base-vertical $padding-base-horizontal;
border-top: 1px solid mix($body-bg, $issue-border, 50%);
border-top: 1px solid $bubble-border;
background-color: $body-bg;
}
}

6
src/sass/components/_jquery-ui.scss
View File

@@ -298,3 +298,9 @@ img.ui-datepicker-trigger {
}
}
}
.ui-tooltip {
@include nice-shadow(1);
padding: $padding-small-vertical $padding-small-horizontal;
border: 0 none;
}

10
src/sass/components/_list.scss
View File

@@ -29,6 +29,12 @@ table.list {
color: $gray-700;
vertical-align: bottom;
@if $table-list-header-bg == $body-bg {
@at-root .box & {
background-color: $panel-bg;
}
}
a {
color: $gray-900;
}
@@ -80,6 +86,10 @@ table.list {
padding-right: $table-cell-padding;
padding-left: $table-cell-padding;
&:first-child {
padding-right: 0;
}
input {
margin: 2px 0 0;
}

7
src/sass/components/_responsive.scss
View File

@@ -83,6 +83,11 @@ body {
overflow: auto;
}
#ajax-indicator {
left: 50%;
width: 200px;
}
.mobile-toggle-button {
width: $responsive-header-height;
height: $responsive-header-height;
@@ -412,7 +417,7 @@ body {
}
}
#issue-changesets {
div#issue-changesets {
div.changeset {
padding: 0;
}

5
src/sass/components/_wiki.scss
View File

@@ -116,6 +116,8 @@ div.wiki {
}
blockquote {
margin-bottom: 1em;
> :first-child {
margin-top: 0;
}
@@ -157,7 +159,8 @@ div.wiki {
}
li > p {
margin-top: ($line-height-computed / 2);
margin-top: .25em;
margin-bottom: 0;
}
table {

2
stylesheets/application.css
View File

File diff suppressed because one or more lines are too long