frontend: improve Projects.tsx
This commit is contained in:
parent
1c8aaed8ca
commit
cd4ebe4ac7
6 changed files with 65 additions and 11 deletions
|
@ -15,4 +15,11 @@ class Twenty::Project < Twenty::Model
|
||||||
def to_json(options = {})
|
def to_json(options = {})
|
||||||
{id:, name:, path:}.to_json(options)
|
{id:, name:, path:}.to_json(options)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
##
|
||||||
|
# @return [String]
|
||||||
|
# The path to a project.
|
||||||
|
def path
|
||||||
|
super&.sub(Dir.home, "~")
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
|
@ -2,3 +2,4 @@ $black: lighten(#000, 20%);
|
||||||
$gray1: #f4f0ec;
|
$gray1: #f4f0ec;
|
||||||
$gray2: lighten($gray1, 5%);
|
$gray2: lighten($gray1, 5%);
|
||||||
$gray3: #cfcfc4;
|
$gray3: #cfcfc4;
|
||||||
|
$blue: #008cff;
|
||||||
|
|
|
@ -16,7 +16,7 @@ ul.items {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
$blue: #008cff;
|
$blue: #008cff;
|
||||||
color: $blue;
|
color: $blue;
|
||||||
padding: 10px 10px 0px 10px;
|
padding: 10px 10px 5px 10px;
|
||||||
border: 1px solid #FFF;
|
border: 1px solid #FFF;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $gray1;
|
background: $gray1;
|
||||||
|
@ -30,7 +30,7 @@ ul.items {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
span.date {
|
span.date, span.path {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
|
@ -51,3 +51,11 @@ ul.items {
|
||||||
animation-duration: 0.5s;
|
animation-duration: 0.5s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul.items.projects {
|
||||||
|
li.item {
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -23,12 +23,32 @@ body header {
|
||||||
background: $gray1;
|
background: $gray1;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
border-bottom: 1px solid $gray3;
|
border-bottom: 1px solid $gray3;
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
ul.nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
list-style-type: none;
|
||||||
|
column-gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
li a {
|
||||||
|
&:hover {
|
||||||
|
color: $blue;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-20 { padding-top: 20px; }
|
.pt-20 { padding-top: 20px; }
|
||||||
.pb-20 { padding-bottom: 20px; }
|
.pb-20 { padding-bottom: 20px; }
|
||||||
.mb-20 { margin-bottom: 20px; }
|
.mb-20 { margin-bottom: 20px; }
|
||||||
.mb-50 { margin-bottom: 50px; }
|
.mb-50 { margin-bottom: 50px; }
|
||||||
|
.w-100 { width: 100%; }
|
||||||
|
|
||||||
.max-width {
|
.max-width {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
|
|
|
@ -4,13 +4,24 @@ import { useProjects } from "/hooks/useProjects";
|
||||||
export function Projects() {
|
export function Projects() {
|
||||||
const projects = useProjects();
|
const projects = useProjects();
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="table">
|
||||||
<span>Projects</span>
|
<div className="table div">
|
||||||
<ul className="projects">
|
<span>Projects</span>
|
||||||
{projects.map((project, i) => {
|
</div>
|
||||||
return <li key={i}>{project.name}</li>;
|
<div className="table content">
|
||||||
})}
|
<ul className="items projects">
|
||||||
</ul>
|
{projects.map((project, i) => {
|
||||||
</>
|
return (
|
||||||
|
<li className="item" key={i}>
|
||||||
|
<a href={`/tasks#project_id=${project.id}`}>
|
||||||
|
<span>{project.name}</span>
|
||||||
|
<span className="path">{project.path}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,10 +8,17 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="mb-50">
|
<header class="mb-50">
|
||||||
<div class="align-center max-width">
|
<div class="align-center max-width wrapper">
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img width=48 height=48 src="/favicon.svg"/>
|
<img width=48 height=48 src="/favicon.svg"/>
|
||||||
</a>
|
</a>
|
||||||
|
<ul class="nav">
|
||||||
|
<li>
|
||||||
|
<a href="/projects">Projects</a>
|
||||||
|
<li>
|
||||||
|
<a href="/tasks">Tasks</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
|
|
Loading…
Reference in a new issue