Fixing Diplay for Credits

Adding Profile Pic for empty ones
This commit is contained in:
Silversthorn 2022-03-05 13:59:19 +01:00
parent 506129729e
commit 29f8fb391e
2 changed files with 327 additions and 291 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z" style="fill: #b9c0d3;"/></svg>

After

Width:  |  Height:  |  Size: 594 B

View File

@ -9,7 +9,7 @@
<div class="content-wrapper">
<!-- Page Title Header Starts-->
<!-- Page Title Header Starts-->
<div class="row page-title-header">
<div class="col-12">
<div class="page-header">
@ -22,309 +22,344 @@
</div>
<!-- Page Title Header Ends-->
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card">
<div class="card-body">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="far fa-code"></i> &nbsp;{{ translate('credits', 'developmentTeam', data['lang']) }}</h4>
</div>
<div class="row">
{% for person in data['staff']['development'] %}
<div class="col-md-6 mb-5">
<div class="card rounded shadow-none">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="user-avatar mb-auto">
{% if person['pic'] %}
<img src="{{ person['pic'] }}"
alt="profile image" class="profile-img img-lg rounded-circle">
{% end %}
</div>
<div class="wrapper">
<div class="wrapper d-flex align-items-center">
<h4 class="mb-0 font-weight-medium">{{ person['name'] }}</h4>
</div>
<div class="wrapper d-flex align-items-center font-weight-medium text-muted">
{% if person['loc'] %}
<i class="mdi mdi-map-marker-outline mr-2"></i>
<p class="mb-0 text-muted">{{ person['loc'] }}</p>
{% end %}
</div>
</div>
</div>
<div class="col-md-8">
<div class="wrapper d-flex align-items-start">
{% if person['tags'][0] %}
<span class="btn btn-sm btn-info mr-2">{{ person['tags'][0] }}</span>
{% end %}
{% if person['tags'][1] %}
{% if type(person['tags'][1]) is list %}
<a href="{{ person['tags'][1][1] }}" class="btn btn-sm btn-primary mr-2">{{ person['tags'][1][0] }}</a>
{% else %}
<span class="btn btn-sm btn-primary mr-2">{{ person['tags'][1] }}</span>
{% end %}
{% end %}
{% if person['tags'][2] %}
{% if type(person['tags'][2]) is list %}
<a href="{{ person['tags'][2][1] }}" class="btn btn-sm btn-inverse-success mr-2">{{ person['tags'][2][0] }}</a>
{% else %}
<span class="btn btn-sm btn-inverse-success mr-2">{{ person['tags'][2] }}</span>
{% end %}
{% end %}
</div>
<div class="wrapper align-items-start pt-3">
{% if person['title'] %}
<h5><strong>Crafty's {{ person['title'] }}</strong></h5>
{% end %}
<p>{{ person['blurb'] }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
{% end %}
</div> <!-- end of user row -->
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="fa fa-book"></i> &nbsp;{{ translate('credits', 'supportTeam', data['lang']) }}</h4>
</div>
<div class="row">
{% for person in data['staff']['support'] %}
<div class="col-md-6 mb-5">
<div class="card rounded shadow-none">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="user-avatar mb-auto">
{% if person['pic'] %}
<img src="{{ person['pic'] }}"
alt="profile image" class="profile-img img-lg rounded-circle">
{% end %}
</div>
<div class="wrapper">
<div class="wrapper d-flex align-items-center">
<h4 class="mb-0 font-weight-medium">{{ person['name'] }}</h4>
</div>
<div class="wrapper d-flex align-items-center font-weight-medium text-muted">
{% if person['loc'] %}
<i class="mdi mdi-map-marker-outline mr-2"></i>
<p class="mb-0 text-muted">{{ person['loc'] }}</p>
{% end %}
</div>
</div>
</div>
<div class="col-md-8">
<div class="wrapper d-flex align-items-start">
{% if person['tags'][0] %}
<span class="btn btn-sm btn-info mr-2">{{ person['tags'][0] }}</span>
{% end %}
{% if person['tags'][1] %}
{% if type(person['tags'][1]) is list %}
<a href="{{ person['tags'][1][1] }}" class="btn btn-sm btn-primary mr-2">{{ person['tags'][1][0] }}</a>
{% else %}
<span class="btn btn-sm btn-primary mr-2">{{ person['tags'][1] }}</span>
{% end %}
{% end %}
{% if person['tags'][2] %}
{% if type(person['tags'][2]) is list %}
<a href="{{ person['tags'][2][1] }}" class="btn btn-sm btn-inverse-success mr-2">{{ person['tags'][2][0] }}</a>
{% else %}
<span class="btn btn-sm btn-inverse-success mr-2">{{ person['tags'][2] }}</span>
{% end %}
{% end %}
</div>
<div class="wrapper align-items-start pt-3">
{% if person['title'] %}
<h5><strong>{{ person['title'] }}</strong></h5>
{% end %}
<p>{{ person['blurb'] }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
{% end %}
</div> <!-- end user row-->
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="far fa-server"></i> &nbsp;{{ translate('credits', 'retiredStaff', data['lang']) }}</h4>
</div>
<div class="row">
{% for person in data['staff']['retired'] %}
<div class="col-md-6 mb-5">
<div class="card rounded shadow-none">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="user-avatar mb-auto">
{% if person['pic'] %}
<img src="{{ person['pic'] }}"
alt="profile image" class="profile-img img-lg rounded-circle">
{% end %}
</div>
<div class="wrapper">
<div class="wrapper d-flex align-items-center">
<h4 class="mb-0 font-weight-medium">{{ person['name'] }}</h4>
</div>
<div class="wrapper d-flex align-items-center font-weight-medium text-muted">
{% if person['loc'] %}
<i class="mdi mdi-map-marker-outline mr-2"></i>
<p class="mb-0 text-muted">{{ person['loc'] }}</p>
{% end %}
</div>
</div>
</div>
<div class="col-md-8">
<div class="wrapper d-flex align-items-start">
{% if person['tags'][0] %}
<span class="btn btn-sm btn-info mr-2">{{ person['tags'][0] }}</span>
{% end %}
{% if person['tags'][1] %}
{% if type(person['tags'][1]) is list %}
<a href="{{ person['tags'][1][1] }}" class="btn btn-sm btn-primary mr-2">{{ person['tags'][1][0] }}</a>
{% else %}
<span class="btn btn-sm btn-primary mr-2">{{ person['tags'][1] }}</span>
{% end %}
{% end %}
{% if person['tags'][2] %}
{% if type(person['tags'][2]) is list %}
<a href="{{ person['tags'][2][1] }}" class="btn btn-sm btn-inverse-success mr-2">{{ person['tags'][2][0] }}</a>
{% else %}
<span class="btn btn-sm btn-inverse-success mr-2">{{ person['tags'][2] }}</span>
{% end %}
{% end %}
</div>
<div class="wrapper align-items-start pt-3">
{% if person['title'] %}
<h5><strong>{{ person['title'] }}</strong></h5>
{% end %}
<p>{{ person['blurb'] }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
{% end %}
</div> <!-- end user row-->
</div>
</div>
<div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="far fa-code"></i> &nbsp;{{ translate('credits', 'developmentTeam',
data['lang']) }}</h4>
</div>
</div>
<div class="card-body">
<div class="row">
{% for person in data['staff']['development'] %}
<div class="col-lg-6 mb-5">
<div class="card rounded shadow-none">
<div class="row">
<div class="row">
<div class="col-md-4" style="max-width: fit-content;">
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">{{ translate('credits', 'patreonSupporter', data['lang']) }}</h4>
<p class="card-description"> {{ translate('credits', 'hugeDesc', data['lang']) }} <code>{{ translate('credits', 'thankYou', data['lang']) }}</code>&nbsp; {{ translate('credits', 'patreonDesc', data['lang']) }} | <span style="color: #9365B8">{{ translate('credits', 'patreonUpdate', data['lang']) }} {{ data["lastUpdate"] }}</span></p>
<table class="table table-hover">
<thead>
<tr>
<th>{{ translate('credits', 'patreonName', data['lang']) }}</th>
<th>{{ translate('credits', 'patreonLevel', data['lang']) }}</th>
</tr>
</thead>
<tbody>
{% for pat in data["patrons"] %}
<tr>
<td>{{ pat["name"] }}</td>
<td>
{% if pat["level"] == "Crafty Sustainer" %}
<span class="btn btn-sm btn-info mr-2">{{ translate('credits', 'patreonSustainer', data['lang']) }}</span>
{% elif pat["level"] == "Crafty Advocate" %}
<span class="btn btn-sm btn-primary mr-2">{{ translate('credits', 'patreonAdvocate', data['lang']) }}</span>
{% elif pat["level"] == "Crafty Supporter" %}
<span class="btn btn-sm btn-inverse-success mr-2">{{ translate('credits', 'patreonSubs', data['lang']) }}</span>
<div class="user-avatar mb-auto">
{% if person['pic'] %}
<img src="{{ person['pic'] }}" alt="profile image" class="profile-img img-lg rounded-circle">
{% else %}
<span class="btn btn-sm btn-secondary mr-2">{{ translate('credits', 'patreonOther', data['lang']) }}</span>
<div alt="profil image" class="profile-img img-lg rounded-circle">
<img src="/static/assets/images/credits/user-circle-solid.svg" alt="profile image" class="profile-img img-lg rounded-circle">
</div>
{% end %}
</td>
</tr>
{% end %}
</div>
</tbody>
</table>
</div>
</div>
</div>
<div class="wrapper">
<div class="wrapper d-flex align-items-center">
<h4 class="mb-0 font-weight-medium">{{ person['name'] }}</h4>
</div>
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">{{ translate('credits', 'translationTitle', data['lang']) }}</h4>
<p class="card-description"> {{ translate('credits', 'hugeDesc', data['lang']) }} <code>{{ translate('credits', 'thankYou', data['lang']) }}</code>&nbsp; {{ translate('credits', 'translationDesc', data['lang']) }} </p>
<table class="table table-hover">
<thead>
<tr>
<th>{{ translate('credits', 'translationName', data['lang']) }}</th>
<th>{{ translate('credits', 'translator', data['lang']) }}</th>
</tr>
</thead>
<tbody>
{% for person in data['translations'] %}
<tr>
<td>{{ person }}</td>
<td>
{% for language in data['translations'][person] %}
<span class="btn btn-sm btn-inverse-success mr-2">{{ language }}</span>
<div class="wrapper d-flex align-items-center font-weight-medium text-muted">
{% if person['loc'] %}
<i class="mdi mdi-map-marker-outline mr-2"></i>
<p class="mb-0 text-muted">{{ person['loc'] }}</p>
{% end %}
</div>
</div>
</div>
<div class="col-md-8">
<div class="wrapper d-flex align-items-start">
{% if person['tags'][0] %}
<span class="btn btn-sm btn-info mr-2">{{ person['tags'][0] }}</span>
{% end %}
</td>
</tr>
{% end %}
</tbody>
</table>
{% if person['tags'][1] %}
{% if type(person['tags'][1]) is list %}
<a href="{{ person['tags'][1][1] }}" class="btn btn-sm btn-primary mr-2">{{ person['tags'][1][0]
}}</a>
{% else %}
<span class="btn btn-sm btn-primary mr-2">{{ person['tags'][1] }}</span>
{% end %}
{% end %}
{% if person['tags'][2] %}
{% if type(person['tags'][2]) is list %}
<a href="{{ person['tags'][2][1] }}" class="btn btn-sm btn-inverse-success mr-2">{{
person['tags'][2][0] }}</a>
{% else %}
<span class="btn btn-sm btn-inverse-success mr-2">{{ person['tags'][2] }}</span>
{% end %}
{% end %}
</div>
<div class="wrapper align-items-start pt-3">
{% if person['title'] %}
<h5><strong>Crafty's {{ person['title'] }}</strong></h5>
{% end %}
<p>{{ person['blurb'] }}</p>
</div>
</div>
</div>
</div>
</div>
{% end %}
</div>
</div>
</div> <!-- end of user row -->
</div>
</div>
<!-- content-wrapper ends -->
{% end %}
<br />
{% block js %}
<script>
<div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="fa fa-book"></i> &nbsp;{{ translate('credits', 'supportTeam', data['lang'])
}}</h4>
</div>
<div class="card-body">
<div class="row">
{% for person in data['staff']['support'] %}
<div class="col-lg-6 mb-5">
<div class="card rounded shadow-none">
$( document ).ready(function() {
console.log('ready for JS!')
<div class="row">
<div class="col-md-4" style="max-width: fit-content;">
});
</script>
<div class="user-avatar mb-auto">
{% if person['pic'] %}
<img src="{{ person['pic'] }}" alt="profile image" class="profile-img img-lg rounded-circle">
{% else %}
<div alt="profil image" class="profile-img img-lg rounded-circle">
<img src="/static/assets/images/credits/user-circle-solid.svg" alt="profile image" class="profile-img img-lg rounded-circle">
</div>
{% end %}
</div>
{% end %}
<div class="wrapper">
<div class="wrapper d-flex align-items-center">
<h4 class="mb-0 font-weight-medium">{{ person['name'] }}</h4>
</div>
<div class="wrapper d-flex align-items-center font-weight-medium text-muted">
{% if person['loc'] %}
<i class="mdi mdi-map-marker-outline mr-2"></i>
<p class="mb-0 text-muted">{{ person['loc'] }}</p>
{% end %}
</div>
</div>
</div>
<div class="col-md-8">
<div class="wrapper d-flex align-items-start">
{% if person['tags'][0] %}
<span class="btn btn-sm btn-info mr-2">{{ person['tags'][0] }}</span>
{% end %}
{% if person['tags'][1] %}
{% if type(person['tags'][1]) is list %}
<a href="{{ person['tags'][1][1] }}" class="btn btn-sm btn-primary mr-2">{{ person['tags'][1][0]
}}</a>
{% else %}
<span class="btn btn-sm btn-primary mr-2">{{ person['tags'][1] }}</span>
{% end %}
{% end %}
{% if person['tags'][2] %}
{% if type(person['tags'][2]) is list %}
<a href="{{ person['tags'][2][1] }}" class="btn btn-sm btn-inverse-success mr-2">{{
person['tags'][2][0] }}</a>
{% else %}
<span class="btn btn-sm btn-inverse-success mr-2">{{ person['tags'][2] }}</span>
{% end %}
{% end %}
</div>
<div class="wrapper align-items-start pt-3">
{% if person['title'] %}
<h5><strong>{{ person['title'] }}</strong></h5>
{% end %}
<p>{{ person['blurb'] }}</p>
</div>
</div>
</div>
</div>
</div>
{% end %}
</div>
</div> <!-- end user row-->
</div>
<br />
<div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="far fa-server"></i> &nbsp;{{ translate('credits', 'retiredStaff',
data['lang']) }}</h4>
</div>
<div class="card-body">
<div class="row">
{% for person in data['staff']['retired'] %}
<div class="col-lg-6 mb-5">
<div class="card rounded shadow-none">
<div class="row">
<div class="col-md-4" style="max-width: fit-content;">
<div class="card-img-top user-avatar mb-auto">
{% if person['pic'] %}
<img src="{{ person['pic'] }}" alt="profile image" class="profile-img img-lg rounded-circle">
{% else %}
<div alt="profil image" class="profile-img img-lg rounded-circle">
<img src="/static/assets/images/credits/user-circle-solid.svg" alt="profile image">
</div>
{% end %}
</div>
<div class="wrapper">
<div class="wrapper d-flex align-items-center">
<h4 class="mb-0 font-weight-medium">{{ person['name'] }}</h4>
</div>
<div class="wrapper d-flex align-items-center font-weight-medium text-muted">
{% if person['loc'] %}
<i class="mdi mdi-map-marker-outline mr-2"></i>
<p class="mb-0 text-muted">{{ person['loc'] }}</p>
{% end %}
</div>
</div>
</div>
<div class="col-md-8">
<div class="wrapper d-flex align-items-start">
{% if person['tags'][0] %}
<span class="btn btn-sm btn-info mr-2">{{ person['tags'][0] }}</span>
{% end %}
{% if person['tags'][1] %}
{% if type(person['tags'][1]) is list %}
<a href="{{ person['tags'][1][1] }}" class="btn btn-sm btn-primary mr-2">{{ person['tags'][1][0]
}}</a>
{% else %}
<span class="btn btn-sm btn-primary mr-2">{{ person['tags'][1] }}</span>
{% end %}
{% end %}
{% if person['tags'][2] %}
{% if type(person['tags'][2]) is list %}
<a href="{{ person['tags'][2][1] }}" class="btn btn-sm btn-inverse-success mr-2">{{
person['tags'][2][0] }}</a>
{% else %}
<span class="btn btn-sm btn-inverse-success mr-2">{{ person['tags'][2] }}</span>
{% end %}
{% end %}
</div>
<div class="wrapper align-items-start pt-3">
{% if person['title'] %}
<h5><strong>{{ person['title'] }}</strong></h5>
{% end %}
<p>{{ person['blurb'] }}</p>
</div>
</div>
</div>
</div>
</div>
{% end %}
</div> <!-- end user row-->
</div>
</div>
<br />
<div class="row">
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="fab fa-patreon"></i> {{ translate('credits', 'patreonSupporter',
data['lang'])
}}</h4>
</div>
<div class="card-body">
<p class="card-description"> {{ translate('credits', 'hugeDesc', data['lang']) }}
<code>{{ translate('credits', 'thankYou', data['lang']) }}</code>&nbsp; {{ translate('credits',
'patreonDesc',
data['lang']) }} | <span style="color: #9365B8">{{ translate('credits', 'patreonUpdate', data['lang']) }}
{{
data["lastUpdate"] }}</span>
</p>
<table class="table table-hover">
<thead>
<tr>
<th>{{ translate('credits', 'patreonName', data['lang']) }}</th>
<th>{{ translate('credits', 'patreonLevel', data['lang']) }}</th>
</tr>
</thead>
<tbody>
{% for pat in data["patrons"] %}
<tr>
<td>{{ pat["name"] }}</td>
<td>
{% if pat["level"] == "Crafty Sustainer" %}
<span class="btn btn-sm btn-info mr-2">{{ translate('credits', 'patreonSustainer', data['lang'])
}}</span>
{% elif pat["level"] == "Crafty Advocate" %}
<span class="btn btn-sm btn-primary mr-2">{{ translate('credits', 'patreonAdvocate', data['lang'])
}}</span>
{% elif pat["level"] == "Crafty Supporter" %}
<span class="btn btn-sm btn-inverse-success mr-2">{{ translate('credits', 'patreonSubs',
data['lang'])
}}</span>
{% else %}
<span class="btn btn-sm btn-secondary mr-2">{{ translate('credits', 'patreonOther', data['lang'])
}}</span>
{% end %}
</td>
</tr>
{% end %}
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="far fa-language"></i> {{ translate('credits', 'translationTitle',
data['lang'])
}}</h4>
</div>
<div class="card-body">
<p class="card-text"> {{ translate('credits', 'hugeDesc', data['lang']) }}
<code>{{ translate('credits', 'thankYou', data['lang']) }}</code>&nbsp; {{ translate('credits',
'translationDesc', data['lang']) }}
</p>
<table class="table table-hover">
<thead>
<tr>
<th>{{ translate('credits', 'translationName', data['lang']) }}</th>
<th>{{ translate('credits', 'translator', data['lang']) }}</th>
</tr>
</thead>
<tbody>
{% for person in data['translations'] %}
<tr>
<td>{{ person }}</td>
<td>
{% for language in data['translations'][person] %}
<span class="btn btn-sm btn-inverse-success mr-2">{{ language }}</span>
{% end %}
</td>
</tr>
{% end %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
{% end %}
{% block js %}
<script>
$(document).ready(function () {
console.log('ready for JS!')
});
</script>
{% end %}