opendev/storyboard-vue
Code Issues Proposed changes

Convert colours to use standardised variables

Browse Source 
This commit also makes some styling changes to improve accessibility and
tidy up the overall design somewhat.
This commit is contained in:
Adam Coldrick 2020-09-27 17:36:55 +01:00
parent 46d8c4e37c
commit b82edd7e2c
24 changed files with 185 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@ -22,13 +22,13 @@ export default {
</script>
<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
#app {
font-family: 'Roboto', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #333;
color: $grey-900;
}
#page {
@ -37,8 +37,8 @@ export default {
body {
margin: 0;
background-color: #f7f6f4;
color: #333;
background-color: $grey-000;
color: $grey-900;
h1 {
font-size: 3rem;
@ -48,7 +48,7 @@ body {
}
a {
color: #c43422;
color: $red-500;
text-decoration: none;
&:hover {

9
src/components/Chip.vue
View File

@ -34,13 +34,14 @@ export default {
justify-content: space-between;
padding: 6px 12px;
margin: 0 5px;
background-color: #f0ad4e;
color: #f7f6f4;
background-color: $yellow-100;
color: $yellow-900;
border-radius: 20px;
}
.chip-delete {
background: darken(#f0ad4e, 20%);
background: $yellow-300;
color: $yellow-800;
font-size: 12px;
cursor: pointer;
border-radius: 50%;
@ -50,7 +51,7 @@ export default {
transition: background 0.2s;
&:hover {
background: darken(#f0ad4e, 30%);
background: $yellow-400;
}
}
</style>

8
src/components/ChipInputDropdown.vue
View File

@ -129,7 +129,7 @@ export default {
<style lang="scss">
.chip-input {
align-items: center;
background-color: white;
background-color: $white;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .125);
display: flex;
margin-top: 5px;
@ -146,7 +146,7 @@ export default {
margin: 0;
padding: 0 10px;
line-height: 0;
color: #666666;
color: $grey-600;
}
}
@ -180,13 +180,13 @@ export default {
}
li {
background: white;
background: $white;
cursor: pointer;
padding: 8px 10px;
&.selected,
&:hover {
background: #eeeeee;
background: $grey-100;
}
}
}

4
src/components/DateInline.vue
View File

@ -17,7 +17,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
</style>

2
src/components/EventComment.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="event-details">
<div class="event-details comment">
<p class="event-title">
<UserLinkInline v-if="event.author_id" :user-id="event.author_id" />
commented on {{ createdDate.toDateString() }}

4
src/components/EventTagsAdded.vue
View File

@ -34,8 +34,8 @@ export default {
.tag {
padding: 6px 12px;
margin: 0 5px;
background-color: #f0ad4e;
color: #f7f6f4;
background-color: $yellow-100;
color: $yellow-900;
border-radius: 20px;
}
</style>

4
src/components/Header.vue
View File

@ -16,8 +16,8 @@ export default {
top: 0;
left: 0;
height: 60px;
background-color: #c43422;
color: #f7f6f4;
background-color: $red-500;
color: $grey-000;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
padding: 0 10px;
z-index: 2000;

28
src/components/ProjectGroupListItem.vue
View File

@ -97,16 +97,11 @@ export default {
<style lang="scss" scoped>
.project-group {
padding: 20px;
border-top: solid 1px #ddd;
border-top: solid 1px $grey-100;
h3 {
margin: 0;
font-size: 1.25em;
font-weight: 300;
}
&:hover {
background-color: #fff;
}
.metadata {
@ -114,15 +109,11 @@ export default {
align-items: center;
.text-muted {
color: #999;
color: $grey-600;
}
p {
margin: 0.5em 1em 0 1em;
&.text-muted {
color: #777;
}
}
ul {
@ -132,7 +123,8 @@ export default {
padding: 0;
a {
color: #333;
color: $grey-800;
font-weight: 500;
}
}
}
@ -143,7 +135,17 @@ export default {
.svg-inline--fa {
margin-right: 10px;
color: #7c342b;
color: $red-700;
font-size: 22px;
}
&:hover {
cursor: pointer;
background-color: $white;
.svg-inline--fa {
color: $red-500;
}
}
}

13
src/components/ProjectListItem.vue
View File

@ -50,11 +50,7 @@ export default {
<style lang="scss" scoped>
.project {
padding: 20px;
border-top: solid 1px #ddd;
&:hover {
background-color: #fff;
}
border-top: solid 1px $grey-100;
.header {
display: flex;
@ -64,7 +60,6 @@ export default {
h3 {
margin: 0;
font-size: 1.25em;
font-weight: 300;
}
}
@ -73,15 +68,11 @@ export default {
align-items: center;
.text-muted {
color: #999;
color: $grey-600;
}
p {
margin: 0.5em 1em 0 1em;
&.text-muted {
color: #777;
}
}
}

4
src/components/ProjectTabDetails.vue
View File

@ -95,7 +95,7 @@ export default {
margin: 10px;
padding: 30px;
border-radius: 5px;
background-color: #fff;
background-color: $white;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
h2 {
@ -104,7 +104,7 @@ export default {
}
.svg-inline--fa {
color: #777;
color: $grey-400;
margin-right: 10px;
}

4
src/components/ProjectTabStories.vue
View File

@ -50,7 +50,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
</style>

14
src/components/Sidebar.vue
View File

@ -61,23 +61,23 @@ export default {
left: 0;
height: calc(100vh - 60px);
width: 10vw;
background-color: #333;
background-color: $grey-900;
box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.5);
a {
color: #f9f0eb;
color: $grey-100;
display: block;
padding: 20px 20px;
text-decoration: none;
text-align: left;
&.router-link-active {
color: #f7f6f4;
background-color: #a03427;
color: $grey-000;
background-color: $red-600;
}
&:hover {
color: #f7f6f4;
background-color: #7c342b;
color: $grey-000;
background-color: $red-700;
}
svg {
@ -88,7 +88,7 @@ export default {
.divider {
margin: 9px 10px;
height: 1px;
background-color: #444;
background-color: $grey-700;
}
}
</style>

9
src/components/Spinner.vue
View File

@ -26,17 +26,16 @@ export default {
width: 11em;
height: 11em;
border-radius: 50%;
background: linear-gradient(to right, rgb(196, 52, 34) 10%, rgba(196, 52, 34, 0.42));
background: linear-gradient(to right, $red-300, $red-500);
position: relative;
animation: spin 1.2s infinite linear;
animation: spin 1.4s infinite linear;
transform: translateZ(0);
}
.spinner:before {
width: 50%;
height: 50%;
background: #f7f6f4;
border-radius: 100% 0 0 0;
background: $grey-000;
position: absolute;
top: 0;
left: 0;
@ -44,7 +43,7 @@ export default {
}
.spinner:after {
background: #f7f6f4;
background: $grey-000;
width: 75%;
height: 75%;
border-radius: 50%;

63
src/components/StoryListItem.vue
View File

@ -65,10 +65,10 @@ export default {
<style lang="scss" scoped>
.story {
padding: 20px;
border-top: solid 1px #ddd;
border-top: solid 1px $grey-100;
&:hover {
background-color: #fff;
background-color: $grey-000;
}
.header {
@ -79,27 +79,44 @@ export default {
h3 {
margin: 0;
font-size: 1.25em;
font-weight: 300;
}
.story-status-badge {
padding: 6px 12px;
margin: 0 5px;
color: #f7f6f4;
border-radius: 20px;
width: 60px;
text-align: center;
.header-details {
display: flex;
&.merged {
background-color: #5cb85c;
}
.badge {
padding: 6px 12px;
margin: 0 5px;
border-radius: 20px;
width: 80px;
text-align: center;
&.active {
background-color: #5bc0de;
}
&.story-status {
color: $grey-000;
&.invalid {
background-color: #777;
&.merged {
background-color: $lime-100;
color: $lime-900;
}
&.active {
background-color: $cyan-100;
color: $cyan-900;
}
&.invalid {
background-color: $grey-100;
color: $grey-900;
}
}
&.security {
width: 160px;
}
&.privacy {
width: 80px;
}
}
}
}
@ -109,7 +126,7 @@ export default {
align-items: center;
.text-muted {
color: #999;
color: $grey-600;
}
p {
@ -124,9 +141,13 @@ export default {
display: inline-block;
padding: 6px 12px;
margin: 0 5px;
background-color: #f0ad4e;
color: #f7f6f4;
background-color: $yellow-100;
color: $yellow-900;
border-radius: 20px;
.svg-inline--fa {
color: $yellow-600;
}
}
}

44
src/components/TaskListEntry.vue
View File

@ -10,7 +10,9 @@
Not assigned
</div>
<p class="thin"><FontAwesomeIcon icon="code-branch" fixed-width />{{ branch.name }}</p>
<p class="thin">{{ task.status }}</p>
<p class="thin right-align">
<span class="status" :class="[task.status]">{{ task.status }}</span>
</p>
</div>
</template>
@ -71,7 +73,7 @@ export default {
}
.svg-inline--fa {
color: #777;
color: $grey-400;
&.fa-code-branch {
margin-right: 10px;
@ -91,4 +93,42 @@ export default {
display: inline-flex;
align-items: center;
}
.right-align {
text-align: right;
}
.status {
display: inline-block;
text-align: center;
padding: 6px 12px;
margin: 0 5px;
border-radius: 20px;
width: 80px;
color: $grey-000;
&.todo {
background-color: $grey-100;
color: $grey-900;
}
&.merged {
background-color: $lime-100;
color: $lime-900;
}
&.inprogress {
background-color: $cyan-100;
color: $cyan-900;
}
&.invalid {
color: $grey-600;
}
&.review {
background-color: $yellow-100;
color: $yellow-900;
}
}
</style>

41
src/components/TimelineEvent.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="timeline-event">
<div class="timeline-event" :class="{ 'align-top': isComment }">
<p class="timeline-event-icon" :class="iconClass">
<FontAwesomeIcon :icon="eventIcon" />
</p>
@ -81,29 +81,33 @@ export default {
<style lang="scss" scoped>
.timeline-event {
display: flex;
align-items: flex-start;
align-items: center;
margin-top: 20px;
&.align-top {
align-items: flex-start;
}
.timeline-event-icon {
flex: 0 0 30px;
margin: 3px 5px;
background-color: #f7f6f4;
background-color: $grey-000;
width: 30px;
height: 30px;
border-radius: 50px;
border: 3px solid #ddd;
border: 3px solid $grey-200;
display: flex;
align-items: center;
justify-content: center;
color: #999;
color: $grey-400;
&.primary {
flex-basis: 40px;
margin: 0;
width: 40px;
height: 40px;
background-color: #c43422;
color: #f7f6f4;
background-color: $red-500;
color: $grey-000;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
}
@ -119,18 +123,25 @@ export default {
::v-deep .event-title {
padding: 5px 10px;
line-height: 30px;
background-color: #eee;
border: 1px solid #ddd;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
z-index: 10;
position: relative;
color: $grey-600;
}
::v-deep .event-body {
background-color: #fff;
margin: 0 2px;
padding: 20px;
&.comment {
background-color: $white;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
border-radius: 10px;
::v-deep .event-title {
background-color: $grey-100;
color: $grey-700;
border-radius: 10px 10px 0 0;
}
::v-deep .event-body {
margin: 0 2px;
padding: 20px;
}
}
}
}

8
src/components/UserListItem.vue
View File

@ -33,11 +33,7 @@ export default {
align-items: center;
padding: 20px;
border-top: solid 1px #ddd;
&:hover {
background-color: #fff;
}
border-top: solid 1px $grey-100;
img {
margin-right: 20px;
@ -51,7 +47,7 @@ export default {
.metadata {
margin: 0;
color: #777;
color: $grey-600;
}
}
</style>

9
src/views/ProjectDetail.vue
View File

@ -69,9 +69,8 @@ export default {
.tabs {
list-style: none;
display: flex;
//margin: 20px 15% 10px 15%;
padding: 0;
border-bottom: solid 1px #ddd;
border-bottom: solid 1px $grey-200;
text-align: center;
.tab {
@ -82,12 +81,12 @@ export default {
transition: 100ms ease-in-out all;
&:hover {
box-shadow: 0 -1px 0 inset #c43422;
box-shadow: 0 -2px 0 inset $red-500;
}
&.active {
color: #c43422;
box-shadow: 0 -2px 0 inset #c43422;
color: $red-500;
box-shadow: 0 -4px 0 inset $red-500;
}
}
}

9
src/views/ProjectGroupDetail.vue
View File

@ -69,9 +69,8 @@ export default {
.tabs {
list-style: none;
display: flex;
//margin: 20px 15% 10px 15%;
padding: 0;
border-bottom: solid 1px #ddd;
border-bottom: solid 1px $grey-200;
text-align: center;
.tab {
@ -82,12 +81,12 @@ export default {
transition: 100ms ease-in-out all;
&:hover {
box-shadow: 0 -1px 0 inset #c43422;
box-shadow: 0 -2px 0 inset $red-500;
}
&.active {
color: #c43422;
box-shadow: 0 -2px 0 inset #c43422;
color: $red-500;
box-shadow: 0 -4px 0 inset $red-500;
}
}
}

2
src/views/ProjectGroupList.vue
View File

@ -54,6 +54,6 @@ export default {
<style lang="scss" scoped>
.svg-inline--fa {
margin-right: 30px;
color: #999;
color: $grey-400;
}
</style>

2
src/views/ProjectList.vue
View File

@ -54,6 +54,6 @@ export default {
<style lang="scss" scoped>
.svg-inline--fa {
margin-right: 30px;
color: #999;
color: $grey-400;
}
</style>

29
src/views/StoryDetail.vue
View File

@ -125,15 +125,10 @@ export default {
h1 {
margin: 0;
padding: 0;
.svg-inline--fa {
color: #999;
margin-right: 20px;
}
}
.metadata {
color: #959492;
color: $grey-600;
p {
margin: 5px 0;
@ -158,7 +153,7 @@ h2 {
}
.svg-inline--fa {
color: #777;
color: $grey-400;
margin-right: 10px;
}
@ -187,29 +182,21 @@ h2 {
margin: 10px;
padding: 30px;
border-radius: 5px;
background-color: #fff;
background-color: $white;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
.tag {
padding: 6px 12px;
margin: 0 5px;
background-color: #f0ad4e;
color: #f7f6f4;
background-color: $yellow-100;
color: $yellow-900;
border-radius: 20px;
}
.task-list {
.task-list-entry {
border-top: solid 1px #ddd;
&:nth-of-type(even) {
background-color: #f7f6f4;
}
&:last-of-type {
border-bottom: solid 1px #ddd;
}
.task-list-entry:nth-of-type(even) {
background-color: $grey-050;
}
}
@ -224,7 +211,7 @@ h2 {
height: calc(100% - 20px);
left: 21px;
top: 20px;
background-color: #ddd;
background-color: $grey-300;
z-index: -1;
}
}

2
src/views/StoryList.vue
View File

@ -57,6 +57,6 @@ export default {
<style lang="scss" scoped>
.svg-inline--fa {
margin-right: 30px;
color: #999;
color: $grey-400;
}
</style>

10
src/views/UserDetail.vue
View File

@ -91,7 +91,7 @@ export default {
.metadata {
margin: 0;
color: #777;
color: $grey-600;
}
.tabs {
@ -99,7 +99,7 @@ export default {
display: flex;
margin: 20px 15% 10px 15%;
padding: 0;
border-bottom: solid 1px #ddd;
border-bottom: solid 1px $grey-200;
.tab {
flex: 1 1 0;
@ -109,12 +109,12 @@ export default {
transition: 100ms ease-in-out all;
&:hover {
box-shadow: 0 -2px 0 inset #c43422;
box-shadow: 0 -2px 0 inset $red-500;
}
&.active {
color: #c43422;
box-shadow: 0 -4px 0 inset #c43422;
color: $red-500;
box-shadow: 0 -4px 0 inset $red-500;
}
}
}