tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

added list of elements

Browse Source
This commit is contained in:
newick 2019-08-12 21:54:21 +02:00
parent b0ca964c75
commit 8ac8b696aa
2 changed files with 219 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
src/app/pages/kind/kind.component.html
View File

@ -1,4 +1,197 @@
<h1>page de démo</h1>
<p>cette étape est en cours de développement. <br> S'inspirer de la page de FormContainer pour réaliser d'autres pages
</p>
<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>
<h1>Atoms</h1>
<section>
<article>
<h2>Headings</h2>
<h1>Ceci est un h1</h1>
<h2>Ceci est un h2</h2>
<h3>Ceci est un h3</h3>
</article>
<article>
<h2>Links</h2>
<div>
<a [routerLink]="'/home'" class="next">
<span class="text" i18n>
C'est parti !
</span>
</a>
</div>
<div>
<a [routerLink]="'/home'" class="prev">
<span class="text" i18n>
C'est parti !
</span>
</a>
</div>
</article>
<article>
<h2>Buttons</h2>
<p>
<input type="submit" value="Input Submit with border" class="btn_border"><br>
<input type="submit" value="Input Submit with background" class="btn_background"><br>
<input type="submit" value="Input Submit delete with border" class="btn_border btn_delete"><br>
<input type="submit" value="Input Submit delete with background" class="btn_background btn_delete">
</p>
<p>
<button class="btn_border">Button with border</button><br>
<button class="btn_background">Button with background</button><br>
<button class="btn_border btn_delete">Button delete with background</button><br>
<button class="btn_background btn_delete">Button delete with background</button>
</p>
</article>
<article>
<h2>Forms element</h2>
<h3>Labels</h3>
<label for="">Un label pour les labelliser tous</label>
<h3>Input text</h3>
<input type="text" name="" id=""><br>
<input type="text" name="" id="" value="texte">
<h3>Input email</h3>
<input type="email" name="" id=""><br>
<input type="email" name="" id="" value="adresse@email.com">
<h3>Input password</h3>
<input type="password" name="" id=""><br>
<input type="password" name="" id="" value="password">
<h3>Input date</h3>
<input type="date" name="" id=""><br>
<input type="date" name="" id="" value="1985-11-23">
<h3>Select</h3>
<select name="" id="">
<option value="">
1
</option>
<option value="">
2
</option>
<option value="">
3
</option>
</select>
<h3>Textarea</h3>
<textarea name="" id="" cols="30" rows="10"></textarea>
</article>
<article>
<h2>Paragraphs</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores.
Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi
delectus beatae!</p>
</article>
<article>
<h2>Lists</h2>
<h3>Unordered list</h3>
<ul>
<li>
plop
</li>
<li>
plop
</li>
<li>
plop
</li>
</ul>
<h3>Ordered list</h3>
<ol>
<li>
plop
</li>
<li>
plop
</li>
<li>
plop
</li>
</ol>
</article>
<article>
<h2>Images</h2>
<img src="http://placekitten.com/200/300" alt="">
</article>
</section>
<section>
<h1>Molecules</h1>
<article>
<h2>Label + input text</h2>
<label for="test-text">Ceci est un label un peu long mais pas trop</label>
<input type="text" name="test-text" id="test-text">
</article>
<article>
<h2>Label + select</h2>
<label for="test-select">Ceci est un label un peu long mais pas trop</label>
<select name="test-select" id="test-select">
<option value="">
1
</option>
<option value="">
2
</option>
<option value="">
3
</option>
</select>
</article>
<article>
<h2>Input text with info</h2>
<a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a>
</article>
<article>
<h2>Commentaries</h2>
</article>
</section>
<section>
<h1>Components</h1>
<article>
<h2>Images list</h2>
<a href="https://sketch.cloud/s/00A80/a/bQA9wj">that</a>
</article>
<article>
<h2>Calendar</h2>
</article>
<article>
<h2>Modale</h2>
</article>
<article>
<h2>Way to vote</h2>
<a href="https://sketch.cloud/s/00A80/a/Ol0598">that</a>
</article>
<article>
<h2>Voted</h2>
<a href="https://sketch.cloud/s/00A80/a/OlJZo2">that</a>
</article>
<article>
<h2>Graphics</h2>
<a href="https://sketch.cloud/s/00A80/a/megprw">that</a>
</article>
</section>

22
src/app/pages/kind/kind.component.scss
View File

@ -0,0 +1,22 @@
@charset "UTF-8";
section {
&:not(:last-of-type) {
border-bottom: 6px solid #000;
}
& + & {
margin-top: 3rem;
}
}
article {
padding: 2rem 0;
border-top: 3px solid #ffb92c;
h3 {
&:not(:first-of-type) {
margin-top: 2rem;
}
}
}