tonyair
/
silverstripe-framework
mirror of https://github.com/silverstripe/silverstripe-framework
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

new formatting for tasks 

Having the tasks in two columns is hard to read:
a. should I go across or down? what is the logical order?
b. items jump from bottom of col1 to top of col2
c. lists should be able to scrolled down.

So, what I have done is:

1. revert to one column
2. only show the titles, but keep the descriptions available so that you can use CTRL+F
3. set max-width to keep it legible
This commit is contained in:
Nicolaas 2021-02-15 10:59:05 +13:00 committed by GitHub
parent 38a62425f8
commit b8d5abb732
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 95 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
client/styles/task-runner.css
View File

@ -1,58 +1,119 @@
/* This file is manually maintained, it is not generated from SCSS sources */ /* This file is manually maintained, it is not generated from SCSS sources */
/**
* holder of tasks
*/
.task { .task {
padding-top: 20px; padding: 15px;
} max-width: 900px;
margin: 0 auto;
.task__panel {
padding: 0 15px 15px 15px;
}
@media (min-width:992px) {
.task__list {
columns: 2;
column-gap: 100px;
}
} }
/**
* one task item
*/
.task__item { .task__item {
padding-bottom: 30px; padding: 7.5px 0;
} }
@media (min-width:992px) { /**
.task__item { * add transition
display: inline-block; */
width: 100%; .task__item * {
} transition: all 0.3s ease;
} }
.task__title { /**
color: #303b4d; * task title
margin: 0 0 8px; */
.task__item > div:first-child h3 {
margin: 0;
padding: 0;
font-size: 1rem;
} }
.task__description { /**
color: #43536d; * task button
margin-bottom: 12px; */
} .task__item > div:last-child .task__button {
.task__button {
border: 1px solid #ced5e1; border: 1px solid #ced5e1;
border-radius: 5px; border-radius: 5px;
background-color: #f6f7f8; background-color: #f6f7f8;
color: #43536d; color: #43536d;
display: inline-block; display: inline-block;
margin-right: 10px;
padding: 6px 10px; padding: 6px 10px;
text-decoration: none; text-decoration: none;
transition: background-color 0.2s;
} }
.task__button:last-child { /**
margin-right: 0; * task button hover
*/
.task__item > div:last-child .task__button:hover {
background-color: #1a5a93;
color: #fff;
} }
.task__button:focus, /**
.task__button:hover { * desktop view
background-color: #ced5e1; */
@media (min-width:992px) {
/**
* add grid
*/
.task__item {
padding: 0;
border-top: 1px solid #004e7f;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
/**
* show current row
*/
.task__item:hover {
background-color: #eee;
}
/**
* add padding to make it work better with BG colour
*/
.task__item > div {
padding: 15px;
}
/**
* set first col
*/
.task__item > div:first-child {
grid-column: span 5;
}
/**
* hide description
*/
.task__item > div:first-child div.task__description {
color: #999;
font-size: 0.7rem;
}
/**
* show description on hover
*/
.task__item:hover > div:first-child div.task__description {
font-size: 1rem;
color: #000;
}
/**
* outline button to right
*/
.task__item > div:last-child{
text-align: right;
}
} }