LailaTheElf/scrum-board
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change thema

Browse Source
This commit is contained in:
Mats van Reenen 2020-12-31 22:30:16 +01:00
parent c5288b19a5
commit d09f0b3f0a
7 changed files with 161 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/images/development-expand.svg
View File

@ -1,11 +0,0 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#a8e063">
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1010 B

11
app/assets/images/pending-expand.svg
View File

@ -1,11 +0,0 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#ffcc33">
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1010 B

11
app/assets/images/production-expand.svg
View File

@ -1,11 +0,0 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#3CD3AD">
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1010 B

11
app/assets/images/rejected-expand.svg
View File

@ -1,11 +0,0 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#ef473a">
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1010 B

11
app/assets/images/testing-expand.svg
View File

@ -1,11 +0,0 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#3a7bd5">
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1010 B

16
index.html
View File

@ -103,13 +103,27 @@
<script id="task-card-template" type="text/x-handlebars-template">
{{#each this}}
<div class="card" data-task-id="{{id}}">
<a href="#" class="expand-card"></a>
<a href="#" class="expand-card">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" >
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>
</a>
<h5>{{title}}</h5>
<div class="card-details">
<h6>Description</h6>
<p data-field="description">{{description}}</p>
<h6>URL</h6>
<p data-field="remote_url">
{{#checkIfEmptyRemoteURL remote_url}}{{/checkIfEmptyRemoteURL}}
</p>
<h6>Assigned to</h6>
<p data-field="assigned_to">
{{#checkIfEmptyAssigned assigned_to}}{{/checkIfEmptyAssigned}}
</p>

339
src/stylesheets/app.scss
View File

@ -9,7 +9,7 @@
*/
@import 'https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400';
@import 'https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap';
//Colors
@ -17,9 +17,6 @@ $base-color: rgba(0,0,0,.4);
$primary-color: #fff;
$secondary-color: rgba(255,255,255,.1);
$grad-start: #000428;
$grad-end: #004e92;
* {
margin: 0;
padding: 0;
@ -32,11 +29,16 @@ html, body, .wrapper {
}
body {
font-weight: 300;
font-family: Hind Vadodara;
background-image: linear-gradient(to left, $grad-start, $grad-end);
font-family: 'Roboto', sans-serif;
background: #000;
color: $primary-color;
font-size: 14px;
color: #CCC;
overflow: hidden;
}
h1, h2, h3, h4, h5, h6{
font-family: 'Ubuntu', sans-serif;
}
ul {
@ -61,8 +63,6 @@ a {
}
header {
background-color: $base-color;
li {
padding: 15px;
float: left;
@ -70,6 +70,7 @@ header {
text-align: center;
position: relative;
text-transform: uppercase;
border-right: 1px solid #333;
&:after {
content: "";
@ -81,32 +82,38 @@ header {
}
&:nth-child(1) {
&:after {
background: linear-gradient(to left, #cb2d3e , #ef473a);
border-bottom: 1px solid #ef473a;
& .card{
border-left: 1px solid #ef473a;
}
}
&:nth-child(2) {
&:after {
background: linear-gradient(to left, #ffb347 , #ffcc33);
border-bottom: 1px solid #ffcc33;
& .card{
border-left: 1px solid #ffcc33;
}
}
&:nth-child(3) {
&:after {
background: linear-gradient(to left, #56ab2f , #a8e063);
border-bottom: 1px solid #a8e063;
& .card{
border-left: 1px solid #a8e063;
}
}
&:nth-child(4) {
&:after {
background: linear-gradient(to left, #00d2ff , #3a7bd5);
border-bottom: 1px solid #3a7bd5;
& .card{
border-left: 1px solid #3a7bd5;
}
}
&:nth-child(5) {
&:after {
background: linear-gradient(to left, #4CB8C4 , #3CD3AD);
border: none;
border-bottom: 1px solid #3CD3AD;
& .card{
border-left: 1px solid #3CD3AD;
}
}
}
@ -124,152 +131,105 @@ header {
> div {
float: left;
height: 100%;
border-right: 1px solid $base-color;
border-right: 2px solid #333;
width: 20%;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;
transition: .1s ease-in-out background-color;
}
}
//Cards
.card {
background-color: $base-color;
background-color: rgba(255, 255, 255, .125);
min-height: 50px;
margin: 10px;
position: relative;
overflow: hidden;
height: 40px;
box-shadow: 3px 3px 3px rgba(0,0,0,.1);
height: 50px;
z-index: 2;
&:before {
content: "";
position: absolute;
height: 100%;
width: 1px;
}
p:before,
h5:after {
.rejected & {
color: #ef473a;
}
.pending & {
color: #ffcc33;
}
.development & {
color: #a8e063;
}
.testing & {
color: #3a7bd5;
}
.production & {
color: #3CD3AD;
}
}
h5 {
font-size: 13px;
line-height: 50px;
padding-left: 10px;
font-weight: 300;
font-size: 14px;
padding: 16px 0 16px 10px;
cursor: move;
color: #CCC;
}
&.edit-mode {
h5 {
position: relative;
&:after {
top: 50%;
margin-left: 5px;
margin-top: 1px;
transform: translateY(-50%);
position: absolute;
font-size: 9px;
content: "(Edit Mode Enabled)";
content: "*";
}
}
}
.rejected & {
&:before {
background: linear-gradient(to left, #cb2d3e , #ef473a);
}
}
.pending & {
&:before {
background: linear-gradient(to left, #ffb347 , #ffcc33);
}
}
.development & {
&:before {
background: linear-gradient(to left, #56ab2f , #a8e063);
}
}
.testing & {
&:before {
background: linear-gradient(to left, #00d2ff , #3a7bd5);
}
}
.production & {
&:before {
background: linear-gradient(to left, #4CB8C4 , #3CD3AD);
}
}
&.expanded {
overflow: auto !important;
height: auto !important;
}
.expand-card {
height: 25px;
width: 25px;
position: absolute;
top: 25px;
cursor: pointer;
transform: translateY(-50%);
right: 15px;
}
h5:after {
.rejected & { color: #ef473a; }
.pending & { color: #ffcc33; }
.development & { color: #a8e063; }
.testing & { color: #3a7bd5; }
.production & { color: #3CD3AD; }
}
svg {
.rejected & { fill: #ef473a; }
.pending & { fill: #ffcc33; }
.development & { fill: #a8e063; }
.testing & { fill: #3a7bd5; }
.production & { fill: #3CD3AD; }
}
.rejected & {
color: #ef473a;
border-left: 2px solid #ef473a;
}
.pending & {
color: #ffcc33;
border-left: 2px solid #ffcc33;
}
.development & {
color: #a8e063;
border-left: 2px solid #a8e063;
}
.testing & {
color: #3a7bd5;
border-left: 2px solid #3a7bd5;
}
.production & {
color: #3CD3AD;
border-left: 2px solid #3CD3AD;
}
}
.card-details {
padding: 10px;
font-size: 12px;
word-wrap: break-word;
padding-top: 0;
p {
margin-bottom: 10px;
position: relative;
color: #CCC;
padding: 10px;
font-size: 12px;
word-wrap: break-word;
padding-top: 0;
}
&:before {
position: absolute;
left: 0;
}
&:nth-child(1) {
padding-left: 67px;
&:before {
content: "Description : ";
}
}
&:nth-child(2) {
padding-left: 72px;
&:before {
content: "Remote URL : ";
}
}
&:nth-child(3) {
padding-left: 70px;
&:before {
content: "Assigned To : ";
}
}
h6{
padding: 5px;
padding-left: 10px;
font-size: 13px;
}
a {
@ -282,23 +242,16 @@ header {
}
.dragged-over {
background-color: rgba(0,0,0,.1);
background-color: rgba(128,128,128,.125);
}
@keyframes rotate180 {
to {
transform: rotate(180deg);
}
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to left, $grad-start, $grad-end);
background: #000;
z-index: 2;
}
@ -312,7 +265,7 @@ header {
transform: translateX(-50%) translateY(-50%);
.close-modal {
border: 1px solid rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.4);
border-radius: 50%;
width: 50px;
height: 50px;
@ -356,7 +309,7 @@ header {
line-height: 24px;
padding: 15px 10px;
appearance: none;
border: 1px solid rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.25);
background-color: transparent;
transition: border-color .25s linear;
@ -380,65 +333,28 @@ header {
}
}
.expand-card {
height: 19px;
width: 19px;
background-size: auto 100%;
display: inline-block;
position: absolute;
top: 25px;
cursor: pointer;
transform: translateY(-50%);
right: 15px;
padding: 3px;
.rejected & {
background-image: url('../images/rejected-expand.svg');
}
.pending & {
background-image: url('../images/pending-expand.svg');
}
.development & {
background-image: url('../images/development-expand.svg');
}
.testing & {
background-image: url('../images/testing-expand.svg');
}
.production & {
background-image: url('../images/production-expand.svg');
}
svg {
fill: #fff;
}
}
.removed-task-notification {
position: absolute;
top: 10%;
top: 90%;
left: 50%;
transform: translateX(-50%);
padding: 5px 20px;
color: #515151;
color: #FFF;
border-radius: 3px;
background-color: rgba(255,255,255,.8);
box-sizing: 0 0 3px rgba(0,0,0,.6);
background-color: rgba(50,50,50,.8);
}
footer {
height: 50px;
position: relative;
border-top: 1px solid $base-color;
border-top: 1px solid #333;
background-color: #151515;
}
.remove {
display: block;
background-color: #ef473a;
border-radius: 50%;
border-radius: 15px;
height: 30px;
width: 30px;
text-align: center;
@ -468,11 +384,17 @@ footer {
&:hover {
img {
animation: rotate180 .2s linear;
animation: rotate90 .14s linear;
}
}
}
@keyframes rotate90 {
to {
transform: rotate(90deg);
}
}
[data-tooltip] {
position: relative;
@ -511,7 +433,8 @@ footer {
.create-task-branding {
text-transform: uppercase;
font-size: 18px;
padding: 10px;
padding: 14px;
color: #fff;
sup {
position: absolute;
@ -521,7 +444,7 @@ footer {
}
span {
color: rgba(255,255,255,.6);
color: rgb(153,153,153);
}
}
@ -542,26 +465,26 @@ footer {
}
}
.onboard {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .7);
z-index: 2;
}
// .onboard {
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// background-color: rgba(0, 0, 0, .7);
// z-index: 2;
// }
.onboard-modal {
height: 300px;
width: 450px;
background-color: #fff;
border-radius: 3px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// .onboard-modal {
// height: 300px;
// width: 450px;
// background-color: #fff;
// border-radius: 3px;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
.tips {
position: absolute;