webskel/dolphins7.skeleton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: iterate on CSS / UI

Browse source
This commit is contained in:
0x1eef 2024-01-12 23:35:59 -03:00
parent 4ea25cce4a
commit 1ce395a535
11 changed files with 55 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
twenty-frontend/src/css/_groups.scss
View file

@ -8,21 +8,23 @@ body .wrapper .group {
padding: 10px; padding: 10px;
background: $secondary-color; background: $secondary-color;
color: $primary-color; color: $primary-color;
font-size: small;
border-radius: 5px; border-radius: 5px;
ul.tabs { ul.tabs {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
grid-gap: 15px; grid-gap: 15px;
font-size: medium;
li.tab { li.tab {
height: 24px;
width: 100px;
a { a {
display: block; display: block;
background: $primary-color; background: $primary-color;
color: $accent-color; color: $accent-color;
padding: 5px;
border-radius: 5px; border-radius: 5px;
height: 100%;
&:focus { &:focus {
text-decoration: none; text-decoration: none;
} }
@ -39,9 +41,8 @@ body .wrapper .group {
.group-items { .group-items {
min-height: 75px; min-height: 75px;
p { p.empty-group {
padding-top: 2.5%; padding-top: 2.5%;
font-size: small;
} }
ul.items { ul.items {
@ -54,7 +55,6 @@ body .wrapper .group {
height: 35px; height: 35px;
padding: 10px; padding: 10px;
background: $primary-color; background: $primary-color;
font-size: smaller;
} }
&:hover { &:hover {
@ -66,7 +66,7 @@ body .wrapper .group {
a { a {
color: $primary-color; color: $primary-color;
text-decoration: none; text-decoration: none;
.subtitle { span {
color: $primary-color; color: $primary-color;
text-decoration: none; text-decoration: none;
} }
@ -83,11 +83,9 @@ body .wrapper .group {
.title { .title {
display: flex; display: flex;
padding-bottom: 5px; padding-bottom: 5px;
font-size: smaller;
} }
.subtitle { .subtitle {
font-size: small;
color: $secondary-color; color: $secondary-color;
} }
} }
@ -97,7 +95,6 @@ body .wrapper .group {
color: $primary-color; color: $primary-color;
border: 1px solid $secondary-color; border: 1px solid $secondary-color;
border-radius: 5px; border-radius: 5px;
font-size: small;
font-weight: bold; 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 {
}
}

16
twenty-frontend/src/css/_lists.scss
View file

@ -14,9 +14,7 @@ ul {
color: $secondary-color; color: $secondary-color;
height: 25px; height: 25px;
width: 100%; width: 100%;
font-size: medium;
} }
h2 { font-size: small; }
} }
@ -37,7 +35,6 @@ ul.items.nav {
h1 { h1 {
height: unset; height: unset;
font-size: smaller;
align-items: center; align-items: center;
background: $secondary-color; background: $secondary-color;
color: $primary-color; color: $primary-color;
@ -54,7 +51,6 @@ ul.items.nav {
color: $secondary-color; color: $secondary-color;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: smaller;
height: 25px; height: 25px;
a { a {
display: inline; 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;
}
}

2
twenty-frontend/src/css/_tables.scss
View file

@ -26,7 +26,6 @@
border-left: none; border-left: none;
} }
li { li {
font-size: small;
height: 100%; height: 100%;
margin-right: 5px; margin-right: 5px;
border: 1px solid $gray3; border: 1px solid $gray3;
@ -68,7 +67,6 @@
code { code {
padding: 0px 5px 0px 5px; padding: 0px 5px 0px 5px;
font-family: "Noto Sans Mono Regular"; font-family: "Noto Sans Mono Regular";
font-size: smaller;
font-weight: bold; font-weight: bold;
color: lighten(#FF0000, 25%); color: lighten(#FF0000, 25%);
border-radius: 5px; border-radius: 5px;

4
twenty-frontend/src/css/main.scss
View file

@ -14,6 +14,7 @@
html, html body, .wrapper { html, html body, .wrapper {
height: 100%; height: 100%;
font-size: medium;
} }
body { body {
@ -33,4 +34,7 @@ body {
.react-mount { .react-mount {
padding-top: 25px; padding-top: 25px;
} }
h1, h2, h3, h4, h5 {
font-size: medium;
}
} }

2
twenty-frontend/src/html/projects/index.html.erb
View file

@ -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> <div class="react-mount projects"></div>
<script src="/js/main/projects.js"></script> <script src="/js/main/projects.js"></script>
</div> </div>

2
twenty-frontend/src/html/tasks/edit/index.html.erb
View file

@ -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> <div class="react-mount edit-task h-100"></div>
<script src="/js/main/task/edit.js"></script> <script src="/js/main/task/edit.js"></script>
</div> </div>

2
twenty-frontend/src/html/tasks/index.html.erb
View file

@ -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> <div class="react-mount tasks"></div>
<script src="/js/main/tasks.js"></script> <script src="/js/main/tasks.js"></script>
</div> </div>

2
twenty-frontend/src/html/tasks/new/index.html.erb
View file

@ -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> <div class="react-mount new-task h-100"></div>
<script src="/js/main/task/new.js"></script> <script src="/js/main/task/new.js"></script>
</div> </div>

42
twenty-frontend/src/js/components/Group.tsx
View file

@ -20,7 +20,7 @@ export function Group({ groupName, getItems }: Props) {
return ( return (
<div className="group"> <div className="group">
<h1 className="group-name">{groupName}</h1> <h1 className="group-name w-100">{groupName}</h1>
<div className="group-items"> <div className="group-items">
{items?.length ? ( {items?.length ? (
<ul className="items"> <ul className="items">
@ -31,39 +31,41 @@ export function Group({ groupName, getItems }: Props) {
const editHref = `/tasks/edit#id=${task.id}`; const editHref = `/tasks/edit#id=${task.id}`;
return ( return (
<li className={classnames("item", classes)} key={key}> <li className={classnames("item", classes)} key={key}>
<div className="w-95"> <div className="flex flex-wrap w-75">
<a className="w-100" href={editHref}> <div className="w-100">
<span className="title">{task.title}</span> <a href={editHref}>
<span className="subtitle"> <span>{task.title}</span>
<span className="datetime"> <span className="text-smaller text-secondary">
{datetime.toFormat("dd LLL, yyyy")} at{" "} {datetime.toFormat("dd LLL, yyyy")} at{" "}
{datetime.toFormat("HH:mm")} {datetime.toFormat("HH:mm")}
</span> </span>
</a>
</div>
<div className="w-100">
<span className="tags">
<span
style={{ backgroundColor: task.project.color }}
className="tag"
>
{task.project.name}
</span>
</span> </span>
</a> </div>
<span className="break" /> </div>
<span className="tags"> <div className="flex justify-content-end w-25">
<span <TaskStatusSelect task={task} />
style={{ backgroundColor: task.project.color }}
className="tag"
>
{task.project.name}
</span>
</span>
</div> </div>
<TaskStatusSelect task={task} />
</li> </li>
); );
})} })}
</ul> </ul>
) : ( ) : (
<p> <p className="empty-group">
There are no {groupName.toLowerCase()} tasks. There are no {groupName.toLowerCase()} tasks.
<br /> <br />
<a className="w-100" href="/tasks/new"> <a className="w-100" href="/tasks/new">
Add a task Add a task
</a> </a> .
.
</p> </p>
)} )}
</div> </div>

8
twenty-frontend/src/js/components/Task.tsx
View file

@ -66,11 +66,11 @@ export function Task({ taskId }: { taskId?: number }) {
} }
return ( return (
<div className="two-columns h-100"> <div className="flex w-100 h-100">
<div className="column-1"> <div className="w-25">
<NavBar /> <NavBar />
</div> </div>
<div className="column-2 h-100"> <div className="w-75 h-100">
<h1>{task ? "Edit task" : "New task"}</h1> <h1>{task ? "Edit task" : "New task"}</h1>
<form className="group h-100" onSubmit={handleSubmit(onSave)}> <form className="group h-100" onSubmit={handleSubmit(onSave)}>
<div className="group-name"> <div className="group-name">
@ -132,7 +132,7 @@ export function Task({ taskId }: { taskId?: number }) {
</> </>
) : ( ) : (
<div <div
className="task content h-50" className="markdown h-50"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: rendermd(content || task?.content), __html: rendermd(content || task?.content),
}} }}

6
twenty-frontend/src/js/components/Tasks.tsx
View file

@ -15,11 +15,11 @@ export function Tasks() {
}; };
return ( return (
<div className="two-columns"> <div className="flex">
<div className="column-1"> <div className="w-25">
<NavBar /> <NavBar />
</div> </div>
<div className="column-2"> <div className="w-75">
<h1>Tasks</h1> <h1>Tasks</h1>
<Group <Group
groupName="Working on it" groupName="Working on it"