jlengrand/briques-poster
1
0
Fork 0
mirror of https://github.com/les-briques-du-web/briques-poster.git synced 2026-03-10 08:51:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updating styles and adding generate button

Browse Source
This commit is contained in:
Horacio Gonzalez
2021-05-04 17:05:06 +02:00
parent 4e44f0945a
commit 8c4c9079ec
3 changed files with 354 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
index.html
View File

@@ -35,6 +35,13 @@
h2, h3, h4, h5, h6{ h2, h3, h4, h5, h6{
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height:90%;
font-weight: normal;
}
h {
margin-bottom: 0.5em;
} }
briques-poster { briques-poster {
@@ -60,33 +67,37 @@
} }
.left-side{ .left-side{
flex: 0 0 40%; flex: 0 0 30%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
} }
.right-side{ .right-side{
flex: 0 0 60%; flex: 0 0 70%;
display:flex; display:flex;
flex-direction: column; flex-direction: column;
justify-content: space-around;
} }
.logo{ .logo{
flex: 0 0 50%; flex: 0 0 50%;
display: flex; display: flex;
flex-flow: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 0.6em;
} }
.logo img{ .logo img{
width:80%; display: block;
object-fit:contain; object-fit:contain;
} }
.whichwhen{ .whichwhen{
flex: 0 0 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-block-end: 1.0em;
} }
.which{ .which{
@@ -95,74 +106,131 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.which > h2 {
font-size: 1.25em;
font-weight: normal;
margin-block-end: 0.25em;
}
.when{ .when{
flex: 0 0 70%; flex: 0 0 70%;
} }
.when > h3 {
font-size: 1.00em;
font-weight: normal;
}
.when .space{ .when .space{
margin-top:5%; margin-top:5%;
} }
.title{ .title{
flex: 0 0 40%;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.title > h1 {
font-size: 1.25em;
line-height: 90%;
font-weight: normal;
margin-block-start: 0.1em;
margin-block-end: 0.1em;
}
.title > h2 {
font-size: 1.0em;
line-height: 90%;
font-weight: normal;
}
.speaker{ .speaker{
flex: 0 0 30%;
display:flex; display:flex;
flex-direction:row; flex-direction:row;
justify-content: space-evenly;
} }
.speakerface{ .speakerface{
flex: 0 0 30%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.speakerface img{ .speakerface img{
max-width:80%; max-width:300px;
max-height:80%; max-height:300px;
border-radius: 50%; border-radius: 50%;
border: 10px solid white; border: 10px solid white;
background-color: white; background-color: white;
} }
.speakerinfo{ .speakerinfo{
flex: 0 0 70%;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.speakerinfo > h1 {
font-size: 1.0em;
line-height: 90%;
font-weight: normal;
margin-block-start: 0.1em;
margin-block-end: 0.1em;
}
.speakerinfo > h2 {
font-size: 0.8em;
line-height: 90%;
font-weight: normal;
}
.twitch{ .twitch{
flex: 0 0 30%;
display:flex; display:flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.twitch h2 {
font-size: 1.0em;
line-height: 90%;
font-weight: normal;
}
.generate {
width: 500px;
font-size: 5rem;
color: white;
background-color: #800000;
border-radius: 10px;
margin-bottom: 3rem;
cursor: pointer;
}
.spacer {
width: 100%;
height: 3rem;
}
</style> </style>
<title>briques-posters</title> <title>briques-posters</title>
</head> </head>
<body> <body>
<briques-poster></briques-poster> <button class="generate" onclick="generatePng()">Generate</button>
<briques-poster id="poster"></briques-poster>
<div class="spacer"></div>
<script type="module" src="./out-tsc/src/BriquesPoster.js"></script> <script type="module" src="./out-tsc/src/BriquesPoster.js"></script>
<!-- <script type="module" src="./out-tsc/src/CanvasStuff.js"></script>--> <!-- <script type="module" src="./out-tsc/src/CanvasStuff.js"></script>-->
<script src="assets/dom-to-image.min.js"></script> <script src="assets/dom-to-image.min.js"></script>
<script> <script>
setTimeout(() => { let generatePng = () => {
domtoimage.toPng(document.body) console.log('Generating...');
domtoimage.toPng(document.querySelector("#poster"))
// @ts-ignore 😬 // @ts-ignore 😬
.then((dataUrl) => { .then((dataUrl) => {
const img = new Image(); const img = new Image();
@@ -173,8 +241,7 @@
.catch((error) => { .catch((error) => {
console.error('oops, something went wrong!', error); console.error('oops, something went wrong!', error);
}); });
}
}, 1000);
</script> </script>
</body> </body>

319
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
src/BriquesPoster.ts
View File

@@ -25,22 +25,25 @@ export class BriquesPoster extends LitElement {
alt="logo des briques" alt="logo des briques"
src="assets/logo_color_text_square.png" src="assets/logo_color_text_square.png"
/> />
<div>@LesBriquesDuWeb</div>
</div> </div>
<div class="whichwhen"> <div class="whichwhen">
<div class="which"> <div class="which">
<h2>${this.speaker.episode}</h2> <h2>${this.speaker.episode}</h2>
</div> </div>
<div class="when"> <div class="when">
<h4 class="space">${this.speaker.date}</h4> <h3>${this.speaker.date}</h3>
<h4>${this.speaker.time}</h4> <h3>${this.speaker.time}</h3>
</div> </div>
</div> </div>
</div> </div>
<div class="right-side"> <div class="right-side">
<div class="title"> <div class="title">
<h5>${this.speaker.title}</h5> <h1>${this.speaker.title}</h1>
<h6>${this.speaker.subtitle}</h6> <h2>${this.speaker.subtitle}</h2>
</div> </div>
<div class="speaker"> <div class="speaker">
<div class="speakerface"> <div class="speakerface">
<img <img
@@ -48,13 +51,14 @@ export class BriquesPoster extends LitElement {
src="assets/speakers/${this.speaker.image}" src="assets/speakers/${this.speaker.image}"
/> />
</div> </div>
<div class="speakerinfo"> <div class="speakerinfo">
<h5>${this.speaker.name}</h5> <h1>${this.speaker.name}</h1>
<h5>${this.speaker.twitter}</h5> <h2>${this.speaker.twitter}</h2>
</div> </div>
</div> </div>
<div class="twitch"> <div class="twitch">
<h6>https://www.twitch.tv/rdvspeakers</h6> <h2>https://www.twitch.tv/rdvspeakers</h2>
</div> </div>
</div> </div>
</main> </main>