backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-21 19:41:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

a bit more fun with the css

Browse source
This commit is contained in:
headwinds 2018-10-10 15:20:27 -04:00
parent 05bcd106d7
commit 7a261b7e64
3 changed files with 21 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

6
vue-solo/package.json
View file

@ -1,8 +1,8 @@
{
"name": "goodbye-webpack-building-vue-applications-without-webpack",
"name": "fantasy map generator",
"version": "0.1.0",
"author": "Markus Oberlehner",
"homepage": "https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack",
"author": "Azgaar",
"homepage": "https://github.com/Azgaar/Fantasy-Map-Generator",
"license": "MIT",
"private": true,
"scripts": {

2
vue-solo/src/components/App.js
View file

@ -9,7 +9,7 @@ export default {
},
template: `
<div class="container mx-auto p-4">
<div style="display: block; position: absolute; z-index: 2; left: 100px; top: 300px">
<div style="display: block; position: absolute; z-index: 2; left: 25px; top: 280px">
<user-list></user-list>
</div>
<div style="display: block; position: absolute; z-index: 1">

27
vue-solo/src/components/UserList.js
View file

@ -9,25 +9,29 @@ export default {
return {
users: [
{
img: `https://placeimg.com/50/50/people/1`,
img: `https://www.ffcompendium.com/jobimages/3-dragooningus-a.jpg`,
name: `Knight Kentigern`,
department: `Dragoons`,
info: `A champion of Lady Menerva, you fair knight have been selected to pursue
department: `JS Dragoons`,
info: `You, fair knight, have been selected to pursue
the dragon harassing the good people of the Silver Lake district. Along with that mess,
you can aid in the effors to modernize this library and slay the 10K+ line code base.`,
you can also aid in the effors to modernize this library and slay the 10K+ line code base.`,
showInfo: false,
},
],
quest: {
description: `Join our Epic Port to Vue JS!`,
},
showPeople: true,
};
},
template: `
<div v-if="showPeople" style="background: white; padding: 0px; margin: 0px; border-radius: 0px; opacity: 1; border: 1px solid black">
<div style="display: flex; flex-direction: row; justify-content: space-between; width: 300px; height: 38px; background: black; border-bottom: 1px solid black">
<div style="width: 250px; padding-left: 10px"><p style="color:white; font-size: 12px">Heroes Wanted: Join our Epic Port to Vue JS!</p></div>
<div style="width: 250px; padding-left: 10px"><p style="color:white; font-size: 12px; font-size: bold; margin-top: 10px">Heroes Wanted!</p></div>
<div>
<button
style="border: 1px solid #666; padding: 5px; font-size: 12px; margin: 5px"
style="border: 1px solid #eee; color: white; background: black; padding: 5px; font-size: 12px; margin: 5px; font-weight: bold"
@click="showPeople = !showPeople"
>
X
@ -36,10 +40,11 @@ export default {
</div>
<ul style="list-style-type: none">
<li v-for="user in users" :key="user.name">
<img :src="user.img" :alt="user.name">
<img :src="user.img" :alt="user.name" width="100px">
<div>
<h3 style="color: #666">{{ user.name }}</h3>
<p style="color: #999; margin-bottom: 20px">{{ user.department }}</p>
<h3 style="color: #666; margin: 0px; padding: 0px">{{ user.name }}</h3>
<p style="color: #999; margin: 0px; margin-bottom: 20px; padding: 0px">{{ user.department }}</p>
<p style="color: #999; margin: 0px; margin-bottom: 20px; padding: 0px">{{ quest.description }}</p>
<button
style="border: 1px solid #666; padding: 10px; font-size: 12px"
@click="user.showInfo = !user.showInfo"
@ -48,7 +53,9 @@ export default {
</button>
<user-info v-if="user.showInfo" style="max-width: 239px;">
{{ user.info }}
<a href="https://github.com/Azgaar/Fantasy-Map-Generator" target="_blank">github</a>
<p>
<a href="https://github.com/Azgaar/Fantasy-Map-Generator" target="_blank">github guild</a>
</p>
</user-info>
</div>
</li>