original commit
This commit is contained in:
commit
f2bd1cb1e0
25
index.html
Normal file
25
index.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Riot App</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<link href="https://cdn.tailwindcss.com" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<onzer></onzer>
|
||||
|
||||
<script src="https://unpkg.com/animore/animore.js"></script>
|
||||
<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
|
||||
|
||||
<script type="riot" src="./onzer.riot"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
riot.compile().then(() => {
|
||||
riot.mount('onzer')
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
38
onzer.riot
Normal file
38
onzer.riot
Normal file
@ -0,0 +1,38 @@
|
||||
<onzer>
|
||||
|
||||
<div class="flex-col justify-center">
|
||||
<div class="flex-row justify-start margin-bottom-6">
|
||||
<input type="button"
|
||||
onclick={ click }
|
||||
value="Albums"
|
||||
class="margin-top-8 margin-right-8 margin-bottom-8 wh light-green-bg border"/>
|
||||
</div>
|
||||
|
||||
<div class="flex-row justify-center">
|
||||
<form onsubmit={ add }>
|
||||
<input class="wh border text-align-left align-stretch light-green-bg font-size-24"
|
||||
placeholder={ this.state.placeholder } onkeyup={ edit } />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onBeforeMount(e){
|
||||
this.state.placeholder = "Rechercher dans les albums";
|
||||
},
|
||||
edit(e) {
|
||||
e.preventDefault()
|
||||
this.state = {items: [{item: "caca", size: 23}, {item: "aze", size: 3}]};
|
||||
this.state.name = "Gros caca";
|
||||
console.log(this.state)
|
||||
this.update();
|
||||
},
|
||||
click(e) {
|
||||
e.preventDefault();
|
||||
console.log("Les gros cacas");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</onzer>
|
||||
41
style.css
Normal file
41
style.css
Normal file
@ -0,0 +1,41 @@
|
||||
.wh {width: 500px; height: 70px;}
|
||||
.flex-row {display: flex;flex-direction: row;}
|
||||
.flex-col {display: flex;flex-direction: column;}
|
||||
.justify-center { display: flex; justify-content: center;} .justify-around { display: flex; justify-content: space-around;}
|
||||
.justify-start { display: flex; justify-content: flex-start;} .justify-end { display: flex; justify-content: flex-end;}
|
||||
.justify-between { display: flex; justify-content: space-between;}.justify-evenly { display: flex; justify-content: space-evenly;}
|
||||
.align-center { display: flex; align-items: center;} .align-start { display: flex; align-items: flex-start;}
|
||||
.align-end { display: flex; align-items: flex-end;} .align-stretch { display: flex; align-items: stretch;}
|
||||
.flex-grow-1 {flex-grow: 1;} .flex-grow-2 {flex-grow: 2;} .flex-grow-4 {flex-grow: 4;} .flex-grow-6 {flex-grow: 6;}
|
||||
.flex-grow-8 {flex-grow: 8;} .flex-grow-12 {flex-grow: 12;} .flex-grow-14 {flex-grow: 14;} .flex-grow-16 {flex-grow: 16;}
|
||||
.margin-2 {margin: 2px;} .margin-4 {margin: 4px;} .margin-6 {margin: 6px;} .margin-8 {margin: 8px;} .margin-12 {margin: 12px;}
|
||||
.margin-14 {margin: 14px;} .margin-16 {margin: 16px;} .margin-20 {margin: 20px;} .margin-24 {margin: 24px;}
|
||||
.margin-top-2 { margin-top: 2px; } .margin-top-4 { margin-top: 4px; } .margin-top-6 { margin-top: 6px; }
|
||||
.margin-top-8 { margin-top: 8px; } .margin-top-12 { margin-top: 12px; } .margin-top-14 { margin-top: 14px; }
|
||||
.margin-top-16 { margin-top: 16px; } .margin-top-20 { margin-top: 20px; } .margin-top-24 { margin-top: 24px; }
|
||||
.margin-right-2 { margin-right: 2px; } .margin-right-4 { margin-right: 4px; } .margin-right-6 { margin-right: 6px; }
|
||||
.margin-right-8 { margin-right: 8px; } .margin-right-12 { margin-right: 12px; } .margin-right-14 { margin-right: 14px; }
|
||||
.margin-right-16 { margin-right: 16px; } .margin-right-20 { margin-right: 20px; } .margin-right-24 { margin-right: 24px; }
|
||||
.margin-bottom-2 { margin-bottom: 2px; } .margin-bottom-4 { margin-bottom: 4px; } .margin-bottom-6 { margin-bottom: 6px; }
|
||||
.margin-bottom-8 { margin-bottom: 8px; } .margin-bottom-12 { margin-bottom: 12px; } .margin-bottom-14 { margin-bottom: 14px; }
|
||||
.margin-bottom-16 { margin-bottom: 16px; } .margin-bottom-20 { margin-bottom: 20px; } .margin-bottom-24 { margin-bottom: 24px; }
|
||||
.margin-left-2 { margin-left: 2px; } .margin-left-4 { margin-left: 4px; } .margin-left-6 { margin-left: 6px; }
|
||||
.margin-left-8 { margin-left: 8px; } .margin-left-12 { margin-left: 12px; } .margin-left-14 { margin-left: 14px; }
|
||||
.margin-left-16 { margin-left: 16px; } .margin-left-20 { margin-left: 20px; } .margin-left-24 { margin-left: 24px; }
|
||||
.padding-8 {padding: 8px;} .padding-12 {padding: 12px;} .padding-14 {padding: 14px;}
|
||||
.padding-16 {padding: 16px;} .padding-20 {padding: 20px;} .padding-24 {padding: 24px;}
|
||||
.padding-top-8 {padding-top: 8px;} .padding-top-12 {padding-top: 12px;} .padding-top-14 {padding-top: 14px;}
|
||||
.padding-top-16 {padding-top: 16px;} .padding-top-20 {padding-top: 20px;} .padding-top-24 {padding-top: 24px;}
|
||||
.padding-right-8 {padding-right: 8px;} .padding-right-12 {padding-right: 12px;} .padding-right-14 {padding-right: 14px;}
|
||||
.padding-right-16 {padding-right: 16px;} .padding-right-20 {padding-right: 20px;} .padding-right-24 {padding-right: 24px;}
|
||||
.padding-bottom-8 {padding-bottom: 8px;} .padding-bottom-12 {padding-bottom: 12px;} .padding-bottom-14 {padding-bottom: 14px;}
|
||||
.padding-bottom-16 {padding-bottom: 16px;} .padding-bottom-20 {padding-bottom: 20px;} .padding-bottom-24 {padding-bottom: 24px;}
|
||||
.padding-left-8 {padding-left: 8px;} .padding-left-12 {padding-left: 12px;} .padding-left-14 {padding-left: 14px;}
|
||||
.padding-left-16 {padding-left: 16px;} .padding-left-20 {padding-left: 20px;} .padding-left-24 {padding-left: 24px;}
|
||||
.light-green-bg {background-color: #D1FAE5;}
|
||||
.font-size-8 {font-size: 4;} .font-size-12 {font-size: 12;} .font-size-16 {font-size: 16;} .font-size-24 {font-size: 24;}
|
||||
.font-size-32 {font-size: 32;} .font-size-36 {font-size: 36;} .font-size-42 {font-size: 42;} .font-size-44 {font-size: 44;}
|
||||
.font-size-48 {font-size: 48;} .font-size-52 {font-size: 52;} .font-size-56 {font-size: 56;}
|
||||
.text-align-center {text-align: center;} .text-align-right {text-align: right;} .text-align-left {text-align: left;}
|
||||
.category {width: 140px;height: 48px;background-color: #D1FAE5;}
|
||||
.border {border: 1px solid #6EE7B7;border-radius: 8px;}
|
||||
Loading…
Reference in New Issue
Block a user