tb-open-source-project's People
tb-open-source-project's Issues
The home page should look a little bit more friendly and welcoming
The home page should display the SVG and position it in the middle of the screen.
Solution hint: display: flex; height: 100vh;
Todo item has to use Clarity Core buttons
Currently the buttons inside each items are using the default html button and needs to be styled.
What we would expect to be is
Solution proposed:
Todo item component html to become
<div>
<span class="label" (click)="showAlert(item?.title)">{{ item?.title }}</span>
<span class="details">{{ item?.details }}</span>
<cds-button
action="outline"
class="button-edit"
(click)="toggleEditable()"
*ngIf="!isEditable"
>
Edit
</cds-button>
<form *ngIf="isEditable">
<input
#labelText
autofocus
[value]="item?.title"
(keydown.enter)="changeLabel(labelText.value)"
/>
<cds-button type="button" (click)="changeLabel(labelText.value)"
>Save</cds-button
>
</form>
</div>
<cds-button action="flat" type="button" (click)="onDelete()">x</cds-button>
Add How to authenticate git with GitHub
Add How to authenticate git with GitHub
Todo item should only take the width of the content
Todo item component takes too much space on the screen
But should be more appropriate to take the width of the content it has. Like
Solution proposal:
Todo item component css to include width: fit-content
Add Contributors Guide file
Add Contributors Guide file that provides an extensive explanation of how to contribute to open source projects
The main content of the page should be wrapped with <main>
For more info https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
Solution proposal:
App component html to become:
<header class="header-6">
<div class="branding">
<a routerLink="" class="nav-link">
<span class="title">Todo application</span>
</a>
</div>
<div class="header-nav">
<a routerLink="" class="active nav-link nav-text">Home page</a>
<a routerLink="tasks" class="nav-link nav-text">Task manager</a>
</div>
</header>
<main>
<router-outlet></router-outlet>
<clr-spinner>Loading data</clr-spinner>
</main>
Advanced: Use the Clarity Core inputs in the form
Form for creating todos has to be vertical and positioned in the middle of the screen
As you can see the form for creating todos has elements that are positioned horizontally and on the left of the screen.
What we would expect the form to have the elements inside the form displayed in a vertical way and in the middle of the screen.
Solution proposal:
In todo-container component css adding
form {
margin: auto;
display: flex;
flex-direction: column;
width: 250px;
}
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.