Skip to content

Commit

Permalink
Merge pull request #207 from Seshat-Global-History-Databank/scvars-co…
Browse files Browse the repository at this point in the history 
…lor-palette

Update scvars.html and all the other xxvars.html color palette
  • Loading branch information
@MajidBenam
MajidBenam authored Dec 10, 2024
2 parents 28b59d7 + 5fdc7df commit c6b7133
Show file tree
Hide file tree
Showing 4 changed files with 435 additions and 288 deletions.
181 changes: 112 additions & 69 deletions seshat/apps/general/templates/general/generalvars.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,37 @@

{% block content %}
<style>
.bg-range {
background: #a6d3ff
}

.bg-present {
background: #82c1c1
}

.bg-partial {
background: #9dd894
}

.bg-transitional {
background: #ffc68c
}

.bg-absent {
background: #ff9c9c
}

.bg-suspected-unknown {
background: #c8b5da
}

.bg-unknown {
background: slategray;
}

.bg-uncoded {
background: silver;
}

.card {
background-color: #fffdf2;
Expand Down Expand Up @@ -143,43 +174,48 @@
}


.progress {
height: 1.25rem !important;
font-size: 0.65rem !important;
background: #fffdf2;
padding: 0px;
margin: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

.progress {
height: 1.25rem !important;
font-size: 0.65rem !important;
background: #fffdf2;
padding: 0px;
margin: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

}

.progress-bar {
display: flex;
flex-direction: row;
height: 1.25rem !important;
font-size: 0.85rem !important;
padding: 0px;
margin: 0px;
}

.federicka-big {
font-family: 'Fredericka the Great', serif;
font-size: 32px;
}

.progress-bar {
display: flex;
flex-direction: row;
padding: 0px;
margin: 0px;
.federicka-huge {
font-family: 'Fredericka the Great', serif;
font-size: 90px;
}


</style>
<div class="container">
<div class="row">
<div class="mb-2 mt-4">
<span class="col-md-6 px-0">
<span class="h2 py-3 ps-0"><span class="text-dark">General Variables</span>
</span>
</span>
<span ><a href="{% url 'download_csv_all_general' %}" class="btn btn-outline-success mx-1 float-end" style="padding: 3px 8px; font-size: 1.0rem;"> <i class="fa-solid fa-file-csv"></i> &nbsp; Download <b>All</b> (.CSV) </a> </span>



</div>

<h5>
<span class="h6 text-secondary">* We have coded a total of
<div class="col-md-10 px-0 pt-3 pe-3">
<span class="h2 py-3 ps-0">
<span class="text-dark">General Variables</span>
<span ><a href="{% url 'download_csv_all_general' %}" class="btn btn-outline-success mx-1 float-end" style="padding: 3px 8px; font-size: 1.0rem;"> <i class="fa-solid fa-file-csv"></i> &nbsp; Download <b>All</b> (.CSV) </a> </span>
</span>
<h5 class="pt-2">
<span class="h6 text-secondary"><i class="fa-solid fa-database"></i> We have coded a total of
<b class="h5 text-dark">
{{number_of_all_rows|intcomma}}</b>
different values for
Expand All @@ -190,53 +226,61 @@ <h5>
{{all_polities}}</b>
polities.</span>
</h5>
<h6 class="fw-normal">
This section of the Seshat database focuses on the essential aspects of polity organization and dynamics. It includes data on <strong>alternative name</strong>, <strong>original name</strong>, and <strong>capital</strong>, which provide information on how polities were identified. Variables such as <strong>degree of centralization</strong>, <strong>peak years</strong>, and <strong>duration</strong> reveal the administrative, temporal, and structural characteristics of past societies. Additionally, this section captures the relationships and interactions between polities, including <strong>preceding entity</strong>, <strong>succeeding entity</strong>, and <strong>relationship to preceding entity</strong>. Religious and cultural contexts are represented through variables like <strong>religion</strong>, <strong>religious tradition</strong>, and <strong>scale of supracultural interaction</strong>. Furthermore, linguistic and territorial attributes are documented, including <strong>language</strong>, <strong>language genus</strong>, <strong>linguistic family</strong>, and <strong>UTM zone</strong>.


<h6>
Here is a legend to guide you in understanding the metadata more clearly:
</h6>
<span class="progress align-items-center py-0 m-0">
<span class="progress-bar bg-success-light" role="progressbar" style="width: 10%; height: 1.0rem !important; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">Present</b>
</span>

<span class="progress-bar bg-trans-light" role="progressbar" style="width: 10%; height: 1.0rem !important; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-white">Partially coded</b>

</div>
<div class="col-md-2 mb-1 mt-3 float-end">

<span class="progress2 align-items-center py-0 m-0">
<span class="progress-bar bg-range" role="progressbar" style="width: 100%; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">Range</b>
</span>
<span class="progress-bar bg-present" role="progressbar" style="width: 100%; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">Present / Coded</b>
</span>
<span class="progress-bar bg-partial" role="progressbar" style="width: 100%; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">Partially coded</b>
</span>
<span class="progress-bar bg-transitional text-dark" role="progressbar" style="width: 100%; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">Transitional</b>
</span>

<span class="progress-bar bg-absent" role="progressbar" style="width: 100%; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">Absent</b>
</span>

<span class="progress-bar bg-suspected-unknown" role="progressbar" style="width: 100%; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-white">Suspected Unknown</b>
</span>

<span class="progress-bar bg-info-light" role="progressbar" style="width: 10%; height: 1.0rem !important; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">Range</b>
</span>

<span class="progress-bar bg-danger-light" role="progressbar" style="width: 10%; height: 1.0rem !important; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">Absent</b>
<span class="progress-bar bg-unknown" role="progressbar" style="width: 100%; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-white">Unknown</b>
</span>

<span class="progress-bar bg-warning-light" role="progressbar" style="width: 10%; height: 1.0rem !important; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">Suspected Unknown</b>
</span>

<span class="progress-bar bg-unknown-light" role="progressbar" style="width: 10%; height: 1.0rem !important; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-white">Unknown</b>
</span>
<span class="progress-bar bg-uncoded" role="progressbar" style="width: 100%; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-white">Uncoded</b>
</span>

<span class="progress-bar bg-uncoded-light" role="progressbar" style="width: 10%; height: 1.0rem !important; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">Uncoded</b>
<span class="progress-bar bg-secondary-light" role="progressbar" style="width: 100%; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">To Be Coded</b>
</span>
</span>

</div>

<span class="progress-bar bg-secondary-light" role="progressbar" style="width: 10%; height: 1.0rem !important; border-radius:5px;" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true">
<b class="text-dark">To Be Coded</b>
</span>
</span>
{% for sect, subsect in all_vars_grouped.items %}
<div class="row">
<div class="col-md-12">
<div class="row d-flex align-items-center mb-2 mt-4">
<div class="col-md-6 px-0 ">
<h3 class="py-1 ps-0"><span class="badge rounded-pill text-dark" style="background: rgb(0, 157, 255, 0.4)">
<h2 class="py-1 ps-0"><span class="badge rounded-pill text-dark fw-normal" style="background: rgb(0, 157, 255, 0.2); font-family: 'Roboto Mono'">
{{sect}}
</span>
</h3>
</h2>
</div>
<div class="col-md-6 px-0">

Expand Down Expand Up @@ -302,27 +346,26 @@ <h5 class="pt-1 pb-1 ps-0 mt-1"><span class="badge rounded-pill bg-warning text-
</div>

<div class="progress align-items-center py-0 m-0">
<span class="progress-bar {% if v.17 == 'Present' or v.17 == 'Properly Coded' %}bg-success-light{% else %}bg-info-light{% endif %} py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.9|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.9|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="{{v.17}}: # {{v.9}}">

<span class="progress-bar {% if v.17 == 'Present' or v.17 == 'Properly Coded' %} bg-present {% else %} bg-range{% endif %} py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.9|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.9|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="{{v.17}}: # {{v.9}}">
</span>
<span class="progress-bar bg-partial py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.16|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.16|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="Partially coded: # {{v.16}}">
</span>
<span class="progress-bar bg-danger-light py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.10|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.10|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="Absent: # {{v.10}}">
<span class="progress-bar bg-absent py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.10|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.10|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="Absent: # {{v.10}}">

</span>
<span class="progress-bar bg-warning-light py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.11|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.11|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="Suspected Unknown: # {{v.11}}">
<span class="progress-bar bg-suspected-unknown py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.11|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.11|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="Suspected Unknown: # {{v.11}}">

</span>
<span class="progress-bar bg-unknown-light py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.12|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.12|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="Unknown: # {{v.12}}">
<span class="progress-bar bg-unknown py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.12|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.12|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="Unknown: # {{v.12}}">


</span>


<span class="progress-bar bg-uncoded-light py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.13|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.13|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="Uncoded: # {{v.13}}">
<span class="progress-bar bg-uncoded py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.13|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.13|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="Uncoded: # {{v.13}}">
</span>

<span class="progress-bar bg-trans-light py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.16|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.16|div:v.6|mul:v.7|div:v.14|mul:100 }}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="Partially coded: # {{v.16}}">
</span>



<span class="progress-bar bg-secondary-light py-1" role="progressbar" style="width: {% if v.14 != 0 and v.6 != 0 %}{{ v.15|div:v.14|mul:100 }}{% else %}100{% endif %}%; height: 1.25rem !important;" aria-valuenow="{% if v.14 != 0 and v.6 != 0 %}{{ v.15|div:v.14|mul:100 }}{% else %}100{% endif %}" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-html="true" title="To Be Coded: # {{v.15}} Polities">
Expand Down
Loading

0 comments on commit c6b7133

Please sign in to comment.