frontend: iterate on CSS / UI
This commit is contained in:
parent
4ea25cce4a
commit
1ce395a535
11 changed files with 55 additions and 58 deletions
|
|
@ -8,21 +8,23 @@ body .wrapper .group {
|
|||
padding: 10px;
|
||||
background: $secondary-color;
|
||||
color: $primary-color;
|
||||
font-size: small;
|
||||
border-radius: 5px;
|
||||
|
||||
ul.tabs {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
grid-gap: 15px;
|
||||
font-size: medium;
|
||||
|
||||
li.tab {
|
||||
height: 24px;
|
||||
width: 100px;
|
||||
a {
|
||||
display: block;
|
||||
background: $primary-color;
|
||||
color: $accent-color;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
height: 100%;
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -39,9 +41,8 @@ body .wrapper .group {
|
|||
.group-items {
|
||||
min-height: 75px;
|
||||
|
||||
p {
|
||||
p.empty-group {
|
||||
padding-top: 2.5%;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
ul.items {
|
||||
|
|
@ -54,7 +55,6 @@ body .wrapper .group {
|
|||
height: 35px;
|
||||
padding: 10px;
|
||||
background: $primary-color;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -66,7 +66,7 @@ body .wrapper .group {
|
|||
a {
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
.subtitle {
|
||||
span {
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -83,11 +83,9 @@ body .wrapper .group {
|
|||
.title {
|
||||
display: flex;
|
||||
padding-bottom: 5px;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: small;
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -97,7 +95,6 @@ body .wrapper .group {
|
|||
color: $primary-color;
|
||||
border: 1px solid $secondary-color;
|
||||
border-radius: 5px;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -105,3 +102,15 @@ body .wrapper .group {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown {
|
||||
ul ,
|
||||
ul li,
|
||||
ul li.task-list-item input[type='checkbox']
|
||||
{
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
h1, h2, h3, h4, p {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,7 @@ ul {
|
|||
color: $secondary-color;
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
font-size: medium;
|
||||
}
|
||||
h2 { font-size: small; }
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -37,7 +35,6 @@ ul.items.nav {
|
|||
|
||||
h1 {
|
||||
height: unset;
|
||||
font-size: smaller;
|
||||
align-items: center;
|
||||
background: $secondary-color;
|
||||
color: $primary-color;
|
||||
|
|
@ -54,7 +51,6 @@ ul.items.nav {
|
|||
color: $secondary-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: smaller;
|
||||
height: 25px;
|
||||
a {
|
||||
display: inline;
|
||||
|
|
@ -79,15 +75,3 @@ ul.items.tasks {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.action-group {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
width: 5%;
|
||||
place-content: flex-end;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
border-left: none;
|
||||
}
|
||||
li {
|
||||
font-size: small;
|
||||
height: 100%;
|
||||
margin-right: 5px;
|
||||
border: 1px solid $gray3;
|
||||
|
|
@ -68,7 +67,6 @@
|
|||
code {
|
||||
padding: 0px 5px 0px 5px;
|
||||
font-family: "Noto Sans Mono Regular";
|
||||
font-size: smaller;
|
||||
font-weight: bold;
|
||||
color: lighten(#FF0000, 25%);
|
||||
border-radius: 5px;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
|
||||
html, html body, .wrapper {
|
||||
height: 100%;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -33,4 +34,7 @@ body {
|
|||
.react-mount {
|
||||
padding-top: 25px;
|
||||
}
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-size: medium;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class='wrapper align-center max-width'>
|
||||
<div class='wrapper m-0-auto maxw-1024'>
|
||||
<div class="react-mount projects"></div>
|
||||
<script src="/js/main/projects.js"></script>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="wrapper align-center max-width h-100">
|
||||
<div class="wrapper m-0-auto maxw-1024 h-100">
|
||||
<div class="react-mount edit-task h-100"></div>
|
||||
<script src="/js/main/task/edit.js"></script>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="wrapper align-center max-width">
|
||||
<div class="wrapper m-0-auto maxw-1024">
|
||||
<div class="react-mount tasks"></div>
|
||||
<script src="/js/main/tasks.js"></script>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="wrapper align-center max-width h-100">
|
||||
<div class="wrapper m-0-auto maxw-1024 h-100">
|
||||
<div class="react-mount new-task h-100"></div>
|
||||
<script src="/js/main/task/new.js"></script>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export function Group({ groupName, getItems }: Props) {
|
|||
|
||||
return (
|
||||
<div className="group">
|
||||
<h1 className="group-name">{groupName}</h1>
|
||||
<h1 className="group-name w-100">{groupName}</h1>
|
||||
<div className="group-items">
|
||||
{items?.length ? (
|
||||
<ul className="items">
|
||||
|
|
@ -31,39 +31,41 @@ export function Group({ groupName, getItems }: Props) {
|
|||
const editHref = `/tasks/edit#id=${task.id}`;
|
||||
return (
|
||||
<li className={classnames("item", classes)} key={key}>
|
||||
<div className="w-95">
|
||||
<a className="w-100" href={editHref}>
|
||||
<span className="title">{task.title}</span>
|
||||
<span className="subtitle">
|
||||
<span className="datetime">
|
||||
<div className="flex flex-wrap w-75">
|
||||
<div className="w-100">
|
||||
<a href={editHref}>
|
||||
<span>{task.title}</span>
|
||||
<span className="text-smaller text-secondary">
|
||||
{datetime.toFormat("dd LLL, yyyy")} at{" "}
|
||||
{datetime.toFormat("HH:mm")}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<span className="tags">
|
||||
<span
|
||||
style={{ backgroundColor: task.project.color }}
|
||||
className="tag"
|
||||
>
|
||||
{task.project.name}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<span className="break" />
|
||||
<span className="tags">
|
||||
<span
|
||||
style={{ backgroundColor: task.project.color }}
|
||||
className="tag"
|
||||
>
|
||||
{task.project.name}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-content-end w-25">
|
||||
<TaskStatusSelect task={task} />
|
||||
</div>
|
||||
<TaskStatusSelect task={task} />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
) : (
|
||||
<p>
|
||||
<p className="empty-group">
|
||||
There are no {groupName.toLowerCase()} tasks.
|
||||
<br />
|
||||
<a className="w-100" href="/tasks/new">
|
||||
Add a task
|
||||
</a>
|
||||
.
|
||||
</a> .
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,11 +66,11 @@ export function Task({ taskId }: { taskId?: number }) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="two-columns h-100">
|
||||
<div className="column-1">
|
||||
<div className="flex w-100 h-100">
|
||||
<div className="w-25">
|
||||
<NavBar />
|
||||
</div>
|
||||
<div className="column-2 h-100">
|
||||
<div className="w-75 h-100">
|
||||
<h1>{task ? "Edit task" : "New task"}</h1>
|
||||
<form className="group h-100" onSubmit={handleSubmit(onSave)}>
|
||||
<div className="group-name">
|
||||
|
|
@ -132,7 +132,7 @@ export function Task({ taskId }: { taskId?: number }) {
|
|||
</>
|
||||
) : (
|
||||
<div
|
||||
className="task content h-50"
|
||||
className="markdown h-50"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: rendermd(content || task?.content),
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ export function Tasks() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="two-columns">
|
||||
<div className="column-1">
|
||||
<div className="flex">
|
||||
<div className="w-25">
|
||||
<NavBar />
|
||||
</div>
|
||||
<div className="column-2">
|
||||
<div className="w-75">
|
||||
<h1>Tasks</h1>
|
||||
<Group
|
||||
groupName="Working on it"
|
||||
|
|
|
|||
Loading…
Reference in a new issue