xle/django-exalted
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed to CSS Grid layout. W3 is no more.#

Browse Source
This commit is contained in:
tcaxle
2020-04-17 20:09:32 +01:00
parent b17fc83ee7
commit a1d91533a2
6 changed files with 869 additions and 1074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1127
templates/characterDetail.html
View File

File diff suppressed because it is too large Load Diff

57
templates/templates/base.html
View File

@@ -1,55 +1,40 @@
<!DOCTYPE html>
{% load static %}
<html class="custom-grey">
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/w3.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/fonts.css' %}">
<link rel="stylesheet" href="{% static 'css/font-awesome.css' %}">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: 'Marcellus SC', serif;}
</style>
<body style="background-image: url({% static 'images/tiling/crackedStone.jpg' %}); background-attachment: fixed; background-position: center;">
<div class="w3-top custom-grey custom-text-orange w3-card">
<div class="w3-bar w3-medium">
<span class="w3-display-topmiddle w3-padding"><i class="fas fa-eclipse w3-xlarge"></i></span>
<a href="#" class="w3-bar-item w3-button custom-hover-orange custom-hover-text-grey"><i class="fas fa-home-alt"></i> <span class="w3-hide-medium">Home</span></a>
<a href="#" class="w3-bar-item w3-button w3-hide-small custom-hover-orange custom-hover-text-grey"><i class="fas fa-users"></i> <span class="w3-hide-medium">Characters</span></a>
<a href="#" class="w3-bar-item w3-button w3-hide-small custom-hover-orange custom-hover-text-grey w3-right"><i class="fas fa-sign-out-alt"></i> <span class="w3-hide-medium">Log Out</span></a>
<a href="#" class="w3-bar-item w3-button w3-hide-small custom-hover-orange custom-hover-text-grey w3-right"><i class="fas fa-user-circle"></i> <span class="w3-hide-medium">My Account</span></a>
<a href="javascript:void(0)" class="w3-bar-item w3-button custom-hover-orange custon-hover-text-grey w3-right w3-hide-large w3-hide-medium" onclick="myFunction()"><i class="far fa-bars"></i></a>
</div>
<div id="mobileBar" class="w3-bar-block custom-grey custom-text-orange w3-hide w3-hide-large w3-hide-medium">
<a href="#" class="w3-bar-item w3-button custom-hover-orange custom-hover-text-grey"><i class="fas fa-users"></i> <span class="w3-hide-medium">Characters</span></a>
<a href="#" class="w3-bar-item w3-button custom-hover-orange custom-hover-text-grey"><i class="fas fa-user-circle"></i> <span class="w3-hide-medium">My Account</span></a>
<a href="#" class="w3-bar-item w3-button custom-hover-orange custom-hover-text-grey"><i class="fas fa-sign-out-alt"></i> <span class="w3-hide-medium">Log Out</span></a>
</div>
<body>
<div class="bar shadow-2">
<a href="#" class="bar-item button hover-orange">
<i class="fas fa-home"></i>
<span class="hide-medium hide-small">Home</span>
</a>
<a href="#" class="bar-item button hover-orange">
<i class="fas fa-users"></i> <span class="hide-medium hide-small">Characters</span>
</a>
<a href="#" class="bar-item button hover-orange" style="float: right;">
<i class="fas fa-sign-out-alt"></i> <span class="hide-medium hide-small">Log Out</span>
</a>
<a href="#" class="bar-item button hover-orange" style="float: right;">
<i class="fas fa-user-circle"></i> <span class="hide-medium hide-small">My Account</span>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("mobileBar");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
<br><br>
<!-- Page Container -->
<div class="w3-content w3-margin-top" style="max-width:1800px;">
<div class="page">
{% block content %}
{% endblock %}
<!-- End Page Container -->
</div>
<footer class="w3-container w3-card custom-grey custom-text-orange w3-center w3-margin-top">
<p>Lorem Ipsum placeholder</p>
<footer class="shadow-2">
<p class="orange center">Lorem Ipsum placeholder</p>
</footer>
</body>
<script type="text/javascript" src="{% static 'js/accordion.js' %}"></script>
<script type="text/javascript" src="{% static 'js/dropDownMenu.js' %}"></script>
</html>

138
templates/templates/baseCharacter.html
View File

@@ -1,109 +1,39 @@
{% extends 'templates/base.html' %}
{% load static %}
{% block content %}
<div class="w3-cell-row w3-row-padding">
<!-- Left Column -->
<div class="w3-cell w3-row w3-mobile">
<div class="custom-text-grey w3-card-4 w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block general %}
{% endblock %}
</div>
</div>
<div class="custom-text-grey w3-card-4 w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block abilities %}
{% endblock %}
</div>
</div>
<div class="grid-wrapper">
<div class="cell01">{% block general %}{% endblock %}</div>
<div class="cell02">{% block abilities %}{% endblock %}</div>
<div class="cell03">{% block attributes %}{% endblock %}</div>
<div class="cell04">{% block specialities %}{% endblock %}</div>
<div class="cell05">{% block willpower %}{% endblock %}</div>
<div class="cell06">{% block essence %}{% endblock %}</div>
<div class="cell07">{% block merits %}{% endblock %}</div>
<div class="cell08">{% block limit %}{% endblock %}</div>
<div class="cell09">{% block experience %}{% endblock %}</div>
<div class="cell10">{% block weapons_armor %}{% endblock %}</div>
<div class="cell11">{% block health_defense %}{% endblock %}</div>
<div class="cell12">{% block intimacies %}{% endblock %}</div>
<div class="cell13">{% block charms %}{% endblock %}</div>
<div class="cell14">{% block items %}{% endblock %}</div>
</div>
<div class="w3-cell w3-cell-middle w3-hide-small">&emsp;</div>
<!-- Right Column -->
<div class="w3-cell w3-row w3-mobile">
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block attributes %}
{% endblock %}
</div>
</div>
<div class="w3-cell-row">
<div class="w3-cell w3-mobile">
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block specialities %}
{% endblock %}
</div>
</div>
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block willpower %}
{% endblock %}
</div>
</div>
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block essence %}
{% endblock %}
</div>
</div>
</div>
<div class="w3-cell w3-cell-middle w3-hide-small">&emsp;</div>
<div class="w3-cell w3-mobile">
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block merits %}
{% endblock %}
</div>
</div>
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block limit %}
{% endblock %}
</div>
</div>
</div>
</div>
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block experience %}
{% endblock %}
</div>
</div>
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block weapons_armor %}
{% endblock %}
</div>
</div>
</div>
</div>
<div class="w3-row-padding">
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block health_defense %}
{% endblock %}
</div>
</div>
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block intimacies %}
{% endblock %}
</div>
</div>
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block charms %}
{% endblock %}
</div>
</div>
<div class="w3-card-4 custom-text-grey w3-margin-bottom" style="background-image: url({% static 'images/tiling/manuscript.jpg' %})">
<div class="w3-container">
{% block items %}
{% endblock %}
</div>
</div>
</div>
<style>
@media (min-width: 601px) {
.grid-wrapper{grid-template-columns: 1fr 1fr 1fr;}
.cell01{grid-column-start:01; grid-column-end:02; grid-row-start:01; grid-row-end:02;}
.cell02{grid-column-start:01; grid-column-end:02; grid-row-start:02; grid-row-end:06;}
.cell03{grid-column-start:02; grid-column-end:04; grid-row-start:01; grid-row-end:02;}
.cell04{grid-column-start:02; grid-column-end:03; grid-row-start:02; grid-row-end:03;}
.cell05{grid-column-start:02; grid-column-end:02; grid-row-start:03; grid-row-end:04;}
.cell06{grid-column-start:02; grid-column-end:03; grid-row-start:04; grid-row-end:05;}
.cell07{grid-column-start:03; grid-column-end:04; grid-row-start:02; grid-row-end:03;}
.cell08{grid-column-start:03; grid-column-end:04; grid-row-start:03; grid-row-end:05;}
.cell09{grid-column-start:02; grid-column-end:04; grid-row-start:05; grid-row-end:06;}
.cell10{grid-column-start:01; grid-column-end:04; grid-row-start:06; grid-row-end:07;}
.cell11{grid-column-start:01; grid-column-end:04; grid-row-start:07; grid-row-end:08;}
.cell12{grid-column-start:01; grid-column-end:04; grid-row-start:08; grid-row-end:09;}
.cell13{grid-column-start:01; grid-column-end:04; grid-row-start:09; grid-row-end:10;}
.cell14{grid-column-start:01; grid-column-end:04; grid-row-start:10; grid-row-end:11;}
}
</style>
{% endblock %}