g/familyARK
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

more style

Browse Source
This commit is contained in:
Gustavo Adolfo Mesa Roldán
2020-03-30 03:44:12 +02:00
parent cb5008f0ab
commit 223572f952
12 changed files with 87 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
familyark/app/public/css/main.css
+18 -21
View File
@@ -4,7 +4,6 @@
} }
body{ body{
background-image: url(/images/bg.jpg);
height: 100%; height: 100%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -12,12 +11,11 @@ body{
background-attachment: fixed; background-attachment: fixed;
overflow-y:scroll; overflow-y:scroll;
color: white; color: white;
text-shadow: 0px 0px 3px rgb(0, 153, 153);
font-family: ark; font-family: ark;
} }
#menu{ #menu{
background: rgba(0, 153, 153, 0.5); background: rgba(0, 153, 153, 0.6);
width: 150px; width: 150px;
float: left; float: left;
padding-top: 50px; padding-top: 50px;
@@ -31,26 +29,29 @@ body{
#menu h4 a, h1{ #menu h4 a, h1{
font-family: ark; font-family: ark;
font-weight: bold; font-weight: bold;
text-shadow: 0px 0px 2px rgb(0, 0, 0); }
#menu h4 a span, h1 span{
color: black;
} }
h2{ h2{
font-family: ark; font-family: ark;
} }
#menu h4 a:hover{
#menu li a:hover, #menu h4 a:hover{
cursor: pointer; cursor: pointer;
color: rgb(0, 153, 153); color: black;
}
#menu li a:hover span, #menu h4 a:hover span{
color: white;
} }
#menu li a{ #menu li a{
cursor: pointer; cursor: pointer;
} }
#menu li a:hover{
color: rgb(0, 153, 153);
text-shadow: 0px 0px 3px rgb(0, 0, 0);
}
#menu li h4{ #menu li h4{
text-align: center; text-align: center;
} }
@@ -64,8 +65,8 @@ h2{
padding-right: 25px; padding-right: 25px;
padding-top: 50px; padding-top: 50px;
padding-bottom: 50px; padding-bottom: 50px;
border: 2px solid rgb(0, 153, 153); border: 2px solid rgb(0, 153, 153);
position: absolute; position: absolute;
right: 0; right: 0;
} }
@@ -79,7 +80,7 @@ table.dataTable tbody tr{
} }
table.dataTable tbody tr:nth-child(2n){ table.dataTable tbody tr:nth-child(2n){
background-color: rgba(0, 153, 153, 0.5) !important; background-color: rgba(0, 153, 153, 0.5) !important;
} }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
@@ -97,16 +98,12 @@ label, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_pag
width: 176px; width: 176px;
} }
td.options-table{ td.options-table-species, td.options-table{
text-align: center; text-align: center;
} }
.options-table-species{ .options-table-species{
width: 60px; width: 60px;
}
td.options-table-species{
text-align: center;
} }
table.info{ table.info{
familyark/app/public/images/bg0.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 551 KiB

familyark/app/public/images/bg1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 354 KiB

familyark/app/public/images/bg2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 510 KiB

familyark/app/public/images/bg3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 388 KiB

familyark/app/public/images/bg4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 612 KiB

familyark/app/public/index.html
+3 -2
View File
@@ -9,13 +9,14 @@
<script src="/js/jquery.dataTables.min.js"></script> <script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/raphael.js"></script> <script src="/js/raphael.js"></script>
<script src="/js/Treant.js"></script> <script src="/js/Treant.js"></script>
<script src="https://rewish.github.io/jquery-bgswitcher/jquery.bgswitcher.js"></script>
<script src="/js/main.js"></script>
<script src="/js/buttons.js"></script> <script src="/js/buttons.js"></script>
<script src="/js/functions.js"></script> <script src="/js/functions.js"></script>
<script src="/js/main.js"></script>
</head> </head>
<body> <body>
<nav id="menu" class="text-center"> <nav id="menu" class="text-center">
<h4><a id="home">FamilyARK</a></h4> <h4><a id="home">Family<span>ARK</span></a></h4>
<ul class="list-unstyled text-center"> <ul class="list-unstyled text-center">
<li>&nbsp;</li> <li>&nbsp;</li>
<li><a id="animals">Dinos</a></li> <li><a id="animals">Dinos</a></li>
familyark/app/public/js/buttons.js
+38 -47
View File
@@ -17,61 +17,52 @@ $('document').ready(function(){
$("#animals").click(function(){ $("#animals").click(function(){
$("#load").fadeIn(0); $("#load").fadeIn(0);
$.get( "/animal", function( data ) { $.get( "/animal", function( data ) {
$.get( "/species", function( species_r ) { $( "#body" ).html("<h1>Yours <span>Dinos</span> <button id='animal-add' class='btn btn-success btn-sm float-right'>+ New Dino</button></h1><table id='animals-table'></table>");
var species = {}; $( "#animal-add").click(function(){
species_r.data.map(function(item) { $( "#body" ).load( "/templates/animal-form.html", function (){
species[item._id] = item.name set_animal_include("");
}); });
})
$( "#body" ).html("<h1>Yours Dinos <button id='animal-add' class='btn btn-success btn-sm float-right'>+ New Dino</button></h1><table id='animals-table'></table>"); dataSet = data.data.map(function(item) {
$( "#animal-add").click(function(){ return [item._id, item.name, item.initial_level + " - " + item.level, species[item.specie].name];
$( "#body" ).load( "/templates/animal-form.html", function (){
set_animal_include("");
});
})
dataSet = data.data.map(function(item) {
return [item._id, item.name, item.initial_level + " - " + item.level, species[item.specie]];
});
// dataSet = data.data.reduce(function(acc, item, i) {
// if(i == 1) acc = []
// acc.push([item._id, item.name, item.initial_level + " - " + item.level, species[item.specie]]);
// return acc
// });
$('#animals-table').DataTable({
data: dataSet,
responsive: true,
columns: [
{ title: "id", visible: false},
{ title: "Name" },
{ title: "Level" },
{ title: "Specie" },
{ title: "Options", className: "options-table", orderable: false,data: null, targets: -1, "mRender": function(data, type, full) {
return '<button class="btn btn-primary btn-sm" onclick="showAnimal(\''+ full[0] +'\')">Show</button>&nbsp;&nbsp;<button class="btn btn-info btn-sm" onclick="editAnimal(\''+ full[0] +'\')">Edit</button>&nbsp;&nbsp;<button class="btn btn-danger btn-sm" onclick="removeAnimal(\''+full[0]+'\')">Remove</button>';
}}
]});
$("#load").fadeOut("fast");
}); });
$('#animals-table').DataTable({
data: dataSet,
responsive: true,
columns: [
{ title: "id", visible: false},
{ title: "Name" },
{ title: "Level" },
{ title: "Specie" },
{ title: "Options", className: "options-table", orderable: false,data: null, targets: -1, "mRender": function(data, type, full) {
return '<button class="btn btn-primary btn-sm" onclick="showAnimal(\''+ full[0] +'\')">Show</button>&nbsp;&nbsp;<button class="btn btn-info btn-sm" onclick="editAnimal(\''+ full[0] +'\')">Edit</button>&nbsp;&nbsp;<button class="btn btn-danger btn-sm" onclick="removeAnimal(\''+full[0]+'\')">Remove</button>';
}}
]});
$("#load").fadeOut("fast");
}); });
}); });
$("#species").click(function(){ $("#species").click(function(){
$("#load").fadeIn(0); $("#load").fadeIn(0);
$.get( "/species", function( data ) {
$( "#body" ).html("<h1>All Species</h1><table id='species-table'></table>"); $( "#body" ).html("<h1>All <span>Species</span></h1><table id='species-table'></table>")
dataSet = data.data.map(function(item) {
return [item.name, item.description]; dataSet = [];
});
$('#species-table').DataTable({ for(var i in species){
data: dataSet, dataSet.push([species[i].name, species[i].description]);
responsive: true, }
columns: [
{ title: "Name" }, $('#species-table').DataTable({
{ title: "Description" } data: dataSet,
] responsive: true,
}); columns: [
$("#load").fadeOut("fast"); { title: "Name" },
{ title: "Description" }
]
}); });
$("#load").fadeOut("fast");
}); });
$("#about").click(function(){ $("#about").click(function(){
familyark/app/public/js/functions.js
+4 -2
View File
@@ -57,13 +57,15 @@ function editAnimal(id){
function showAnimal(id){ function showAnimal(id){
$("#load").fadeIn(0); $("#load").fadeIn(0);
$( "#body" ).load( "/templates/animal-show.html", function(){ $( "#body" ).load( "/templates/animal-show.html", function(){
var text = "<table>"; var text = "<table class=\"dataTable\">";
$.get( "/animal/"+ id, function( data ) { $.get( "/animal/"+ id, function( data ) {
var animal = data.data, var animal = data.data,
j = 1; j = 1;
$.each(animal, function(i, val) { $.each(animal, function(i, val) {
if(i != "_id" && i != "__v" && i != "father" && i != "mother" && i != "name" && i.indexOf("initial") < 0) if(i == "specie")
text += "<tr><td>"+i+"</td><td>" + species[val].name + "</td></tr>";
else if(i != "_id" && i != "__v" && i != "father" && i != "mother" && i != "name" && i.indexOf("initial") < 0)
text += "<tr><td>"+i+"</td><td>"+(val ? val.$numberDecimal ? val.$numberDecimal : val : "")+"</td></tr>"; text += "<tr><td>"+i+"</td><td>"+(val ? val.$numberDecimal ? val.$numberDecimal : val : "")+"</td></tr>";
// if(j % 3 == 0) text += "</tr><tr>" // if(j % 3 == 0) text += "</tr><tr>"
j++; j++;
familyark/app/public/js/main.js
+21 -9
View File
@@ -1,13 +1,25 @@
var species = {};
$('document').ready(function(){ $('document').ready(function(){
$( "#body" ).load( "/templates/home.html", function(){$("#load").fadeOut("slow"); $.get( "/species", function( species_r ) {
$.get("/info", function( data ) { species_r.data.map(function(item) {
var text = "<table class=\"info\">" species[item._id] = item
$.each(data, function(i, obj) { });
text += "<tr><td>"+i+"</td><td> "+obj+"</td></tr>";
$( "#body" ).load( "/templates/home.html", function(){$("#load").fadeOut("slow");
$.get("/info", function( data ) {
var text = "<table class=\"info\">"
$.each(data, function(i, obj) {
text += "<tr><td>"+i+"</td><td> "+obj+"</td></tr>";
});
text += "</table>"
$( "#info" ).html( text );
$("#load").fadeOut("slow");
}); });
text += "</table>" });
$( "#info" ).html( text ); $("body").bgswitcher({
$("#load").fadeOut("slow"); images: ["/images/bg0.jpg", "/images/bg1.jpg", "/images/bg2.jpg", "/images/bg3.jpg", "/images/bg4.jpg"],
loop: true,
duration: 1500
}); });
}); });
}) });
familyark/app/public/templates/home.html
+1 -1
View File
@@ -1,4 +1,4 @@
<h1>Welcome to FamilyARK</h1> <h1>Welcome to Family<span>ARK</span></h1>
<div class="text-center"> <div class="text-center">
<h4>Your app for your dinos.</h4> <h4>Your app for your dinos.</h4>
<h4>Inventory, breeding and family.</h4> <h4>Inventory, breeding and family.</h4>
familyark/app/server.js
+1
View File
@@ -28,6 +28,7 @@ router.get('/species', (req, res, next) => {
}) })
}) })
router.get('/animal', (req, res, next) => { router.get('/animal', (req, res, next) => {
animal.find({}, (err, result) => { animal.find({}, (err, result) => {
if (err) next(err) if (err) next(err)