WP6
/
expub_compendium
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

related works

joel
Joel Galvez 1 year ago
parent
b1a7c96622
commit
5157ee0654
8 changed files with 901 additions and 507 deletions
Split View Show Diff Stats
  1. +162
    -15
      web/app/static/src/main.css
  2. +364
    -107
      web/app/static/styles/main.css
  3. +11
    -8
      web/app/static/tailwind.config.js
  4. +123
    -131
      web/app/templates/base.html
  5. +87
    -88
      web/app/templates/book.html
  6. +17
    -9
      web/app/templates/index.html
  7. +117
    -129
      web/app/templates/resource.html
  8. +20
    -20
      web/app/templates/resources.html

+ 162
- 15
web/app/static/src/main.css View File

@@ -54,6 +54,9 @@ body {
strong {
font-family: 'ag-fett';
}
b,strong {
font-weight: normal !important;
}


.book {
@@ -71,6 +74,19 @@ strong {
@apply p-2;
}

.cell {
@apply min-w-[14rem];
@apply overflow-hidden;
}
.cell.size-1 {
@apply min-w-[30rem];
}


.related {
@apply w-[8rem] lg:w-[12rem] pl-[4rem] p-5 text-right;
}

.cell-margin {
@apply p-4;
}
@@ -82,6 +98,9 @@ strong {
.std-padding {
@apply p-2;
}
.std-padding-x {
@apply px-2;
}

.std-grid {
@apply grid md:grid-cols-2 lg:grid-cols-3;
@@ -147,21 +166,35 @@ strong {
}

a:hover {
@apply opacity-60;
@apply opacity-90;
}


h2,h3 {
hyphens: auto;
}

h2 {
@apply text-4xl;
}

h3 {
@apply text-xl tracking-wide;
font-family: 'ag-fett';
}

.huge-title {
@apply text-4xl lg:text-5xl;
}
.big-title {
@apply text-3xl lg:text-4xl;
}
.medium-title {
@apply text-2xl lg:text-3xl;
}
.small-title {
@apply text-xl lg:text-2xl;
}
.big-text {
@apply text-xl ;
}
.small-text {
@apply text-base;
}

.indent {
@@ -183,21 +216,45 @@ p + p {
}

.loading {
opacity: 0;
background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0));
}

.htmx-request .loading {
transition: opacity 7000ms cubic-bezier(.16, .01, .31, .99);
/* .loading .bg-white {
@apply bg-white/90;
opacity: 0;
transform: opacity 0.2s;
}

.htmx-request .bg-white {
opacity: 1;
display: block;
} */

.loading .bg {
opacity: 0;
background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0));
}

.htmx-request .loading .bg {
transition: opacity 4000ms ease;
/* transition: opacity 4000ms cubic-bezier(.16, .01, .31, .99); */
opacity: 1;

}

.loading .spinner .inner {
opacity:0;
transition: opacity 0.4s ease;
width:min-content;
height:min-content;
/* height:200px; */
}
.htmx-request .loading .spinner .inner {
opacity:1;
}


#modal-content main {
opacity: 1;
}
.htmx-request #modal-content main {
@@ -209,12 +266,22 @@ p + p {
opacity: 1;
}

#modal-content {
transition: box-shadow 0.3s ease;
box-shadow: 0 0 4rem rgba(103, 48, 255, 0.8)
}

.htmx-request #modal-content {
box-shadow: 0 0 4rem rgba(103, 48, 255, 0.0)
}

.active {
@apply bg-[#ffff00];
@apply bg-expurple text-white;
/* background-image: linear-gradient(to top, purple, transparent) ; */
}

.link:hover {
@apply bg-[#ffff00];
@apply bg-expurple text-white;
}

details[open]::details-content {
@@ -231,4 +298,84 @@ details[open]::details-content {
}
#resources .filter-header::before {
content:'+ ';
}
}

.fade-right {
@apply relative;
}

.fade-right::after {
@apply absolute top-0 right-0 w-40 h-full pointer-events-none;

content: '';
background-image: linear-gradient(to left,#fff 0%, #fff 1rem, rgba(255,255,255,0) 100%);

}

.menuitem {
@apply block px-4 py-2 link flex items-center;
}






/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}

input:checked+.slider {
background-color: #000000;
}

input:focus+.slider {
box-shadow: 0 0 1px #000000;
}

input:checked+.slider:before {
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

+ 364
- 107
web/app/static/styles/main.css View File

@@ -510,9 +510,6 @@ video {
.pointer-events-none {
pointer-events: none;
}
.collapse {
visibility: collapse;
}
.static {
position: static;
}
@@ -522,9 +519,6 @@ video {
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
@@ -546,9 +540,15 @@ video {
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-50 {
z-index: 50;
}
.z-\[60\] {
z-index: 60;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
@@ -567,13 +567,8 @@ video {
.m-16 {
margin: 4rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
.m-4 {
margin: 1rem;
}
.my-4 {
margin-top: 1rem;
@@ -601,8 +596,11 @@ video {
.mb-\[1em\] {
margin-bottom: 1em;
}
.ml-4 {
margin-left: 1rem;
.ml-3 {
margin-left: 0.75rem;
}
.ml-\[13rem\] {
margin-left: 13rem;
}
.ml-auto {
margin-left: auto;
@@ -610,21 +608,18 @@ video {
.mr-2 {
margin-right: 0.5rem;
}
.mr-8 {
margin-right: 2rem;
}
.mr-auto {
margin-right: auto;
}
.mt-16 {
margin-top: 4rem;
}
.mt-20 {
margin-top: 5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.block {
display: block;
}
@@ -634,9 +629,6 @@ video {
.flex {
display: flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
@@ -646,15 +638,16 @@ video {
.h-10 {
height: 2.5rem;
}
.h-12 {
height: 3rem;
}
.h-20 {
height: 5rem;
}
.h-40 {
height: 10rem;
}
.h-fit {
height: -moz-fit-content;
height: fit-content;
}
.h-full {
height: 100%;
}
@@ -670,26 +663,27 @@ video {
.w-40 {
width: 10rem;
}
.w-52 {
width: 13rem;
}
.w-\[20rem\] {
width: 20rem;
.w-48 {
width: 12rem;
}
.w-\[25rem\] {
width: 25rem;
}
.w-\[30rem\] {
width: 30rem;
}
.w-\[32rem\] {
width: 32rem;
}
.w-full {
width: 100%;
.w-\[35rem\] {
width: 35rem;
}
.min-w-\[10rem\] {
min-width: 10rem;
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.min-w-\[32rem\] {
min-width: 32rem;
.w-full {
width: 100%;
}
.max-w-\[30rem\] {
max-width: 30rem;
@@ -697,8 +691,9 @@ video {
.max-w-\[65ch\] {
max-width: 65ch;
}
.shrink-0 {
flex-shrink: 0;
.-rotate-12 {
--tw-rotate: -12deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[15deg\] {
--tw-rotate: 15deg;
@@ -710,17 +705,56 @@ video {
.grid-flow-col {
grid-auto-flow: column;
}
.grid-cols-\[2fr\2c 1fr\] {
grid-template-columns: 2fr 1fr;
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[1fr\2c 1fr\] {
grid-template-columns: 1fr 1fr;
}
.grid-cols-\[30rem\2c 30rem\] {
grid-template-columns: 30rem 30rem;
}
.grid-cols-\[50rem\2c 30rem\] {
grid-template-columns: 50rem 30rem;
}
.grid-cols-\[52rem\2c 30rem\] {
grid-template-columns: 52rem 30rem;
}
.justify-between {
justify-content: space-between;
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.content-center {
align-content: center;
}
.content-start {
align-content: flex-start;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-center {
justify-content: center;
}
.gap-4 {
gap: 1rem;
}
.gap-8 {
gap: 2rem;
}
.overflow-x-scroll {
overflow-x: scroll;
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-y-scroll {
overflow-y: scroll;
@@ -733,8 +767,11 @@ video {
text-overflow: ellipsis;
white-space: nowrap;
}
.border-2 {
border-width: 2px;
.rounded-full {
border-radius: 9999px;
}
.border {
border-width: 1px;
}
.border-b-2 {
border-bottom-width: 2px;
@@ -742,12 +779,23 @@ video {
.border-b-\[2px\] {
border-bottom-width: 2px;
}
.border-l-2 {
border-left-width: 2px;
}
.border-r-2 {
border-right-width: 2px;
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.bg-black\/20 {
background-color: rgb(0 0 0 / 0.2);
.border-emerald-600 {
--tw-border-opacity: 1;
border-color: rgb(5 150 105 / var(--tw-border-opacity));
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
@@ -757,52 +805,52 @@ video {
-o-object-fit: contain;
object-fit: contain;
}
.p-1 {
padding: 0.25rem;
}
.p-2 {
padding: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.pb-12 {
padding-bottom: 3rem;
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.pl-16 {
padding-left: 4rem;
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pl-24 {
padding-left: 6rem;
.pl-1 {
padding-left: 0.25rem;
}
.pl-44 {
padding-left: 11rem;
.pr-40 {
padding-right: 10rem;
}
.pt-4 {
padding-top: 1rem;
.pr-8 {
padding-right: 2rem;
}
.text-center {
text-align: center;
}
.align-bottom {
vertical-align: bottom;
.text-right {
text-align: right;
}
.text-base {
font-size: 1.25rem;
font-size: 1.1rem;
line-height: 1.22;
}
.text-sm {
font-size: 1rem;
font-size: 0.85rem;
line-height: 1.35;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
@@ -810,9 +858,16 @@ video {
.capitalize {
text-transform: capitalize;
}
.text-red-600 {
.italic {
font-style: italic;
}
.text-\[\#f52d2d\] {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity));
color: rgb(245 45 45 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.grayscale {
--tw-grayscale: grayscale(100%);
@@ -878,6 +933,9 @@ body {
strong {
font-family: 'ag-fett';
}
b,strong {
font-weight: normal !important;
}


.book {
@@ -895,6 +953,30 @@ strong {
padding: 0.5rem;
}

.cell {
min-width: 14rem;
overflow: hidden;
}
.cell.size-1 {
min-width: 30rem;
}


.related {
width: 8rem;
padding: 1.25rem;
padding-left: 4rem;
text-align: right;
}


@media (min-width: 1024px) {

.related {
width: 12rem;
}
}

.cell-margin {
padding: 1rem;
}
@@ -906,6 +988,10 @@ strong {
.std-padding {
padding: 0.5rem;
}
.std-padding-x {
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.std-grid {
display: grid;
@@ -994,24 +1080,71 @@ strong {
}

a:hover {
opacity: 0.6;
opacity: 0.9;
}


h2,h3 {
-webkit-hyphens: auto;
hyphens: auto;
}

h2 {
font-size: 2.8rem;
h3 {
font-family: 'ag-fett';
}

.huge-title {
font-size: 3rem;
line-height: 1;
}

h3 {
font-size: 1.25rem;
line-height: 1.75rem;
letter-spacing: 0.025em;
font-family: 'ag-fett';
@media (min-width: 1024px) {

.huge-title {
font-size: 4.2rem;
line-height: 0.9;
}
}
.big-title {
font-size: 2rem;
line-height: 1;
}
@media (min-width: 1024px) {

.big-title {
font-size: 3rem;
line-height: 1;
}
}
.medium-title {
font-size: 1.85rem;
line-height: 1;
}
@media (min-width: 1024px) {

.medium-title {
font-size: 2rem;
line-height: 1;
}
}
.small-title {
font-size: 1.5rem;
line-height: 1.1;
}
@media (min-width: 1024px) {

.small-title {
font-size: 1.85rem;
line-height: 1;
}
}
.big-text {
font-size: 1.5rem;
line-height: 1.1;
}
.small-text {
font-size: 1.1rem;
line-height: 1.22;
}

.indent {
@@ -1037,21 +1170,47 @@ p + p {
}

.loading {
opacity: 0;
background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0));
}

.htmx-request .loading {
transition: opacity 7000ms cubic-bezier(.16, .01, .31, .99);
/* .loading .bg-white {
@apply bg-white/90;
opacity: 0;
transform: opacity 0.2s;
}

.htmx-request .bg-white {
opacity: 1;
display: block;
} */

.loading .bg {
opacity: 0;
background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0));
}

.htmx-request .loading .bg {
transition: opacity 4000ms ease;
/* transition: opacity 4000ms cubic-bezier(.16, .01, .31, .99); */
opacity: 1;

}

.loading .spinner .inner {
opacity:0;
transition: opacity 0.4s ease;
width:-moz-min-content;
width:min-content;
height:-moz-min-content;
height:min-content;
/* height:200px; */
}
.htmx-request .loading .spinner .inner {
opacity:1;
}


#modal-content main {
opacity: 1;
}
.htmx-request #modal-content main {
@@ -1063,14 +1222,26 @@ p + p {
opacity: 1;
}

#modal-content {
transition: box-shadow 0.3s ease;
box-shadow: 0 0 4rem rgba(103, 48, 255, 0.8)
}

.htmx-request #modal-content {
box-shadow: 0 0 4rem rgba(103, 48, 255, 0.0)
}

.active {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
background-color: rgba(103, 48, 255,0.8);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
/* background-image: linear-gradient(to top, purple, transparent) ; */
}

.link:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
background-color: rgba(103, 48, 255,0.8);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

details[open]::details-content {
@@ -1088,14 +1259,108 @@ details[open]::details-content {
#resources .filter-header::before {
content:'+ ';
}
.hover\:opacity-60:hover {

.fade-right {
position: relative;
}

.fade-right::after {
pointer-events: none;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 10rem;

content: '';
background-image: linear-gradient(to left,#fff 0%, #fff 1rem, rgba(255,255,255,0) 100%);
}

.menuitem {
display: block;
display: flex;
align-items: center;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.menuitem:hover {
background-color: rgba(103, 48, 255,0.8);
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}






/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}

input:checked+.slider {
background-color: #000000;
}

input:focus+.slider {
box-shadow: 0 0 1px #000000;
}

input:checked+.slider:before {
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

.hover\:opacity-60:hover {
opacity: 0.6;
}
@media (min-width: 1024px) {

.lg\:mt-16 {
margin-top: 4rem;
}
@media (min-width: 1024px) {

.lg\:block {
display: block;
@@ -1105,18 +1370,10 @@ details[open]::details-content {
display: flex;
}

.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lg\:grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}

.lg\:grid-rows-\[auto\2c auto\2c auto\] {
grid-template-rows: auto auto auto;
}

+ 11
- 8
web/app/static/tailwind.config.js View File

@@ -7,20 +7,23 @@ module.exports = {
extend: {
fontSize: {
// xs: ['0.95rem', { lineHeight: '1.35' }],
sm: ['1rem', { lineHeight: '1.35' }],
base: ['1.25rem', { lineHeight: '1.22' }],
// lg: ['1.125rem', { lineHeight: '1.5' }],
// xl: ['1.25rem', { lineHeight: '1.6' }],
// '2xl': ['1.5rem', { lineHeight: '1.88rem' }],
// '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.8rem', { lineHeight: '1' }],
// '5xl': ['3rem', { lineHeight: '1.1' }],
sm: ['0.85rem', { lineHeight: '1.35' }],
base: ['1.1rem', { lineHeight: '1.22' }],
lg: ['1.24rem', { lineHeight: '1.1' }],
xl: ['1.5rem', { lineHeight: '1.1' }],
'2xl': ['1.85rem', { lineHeight: '1' }],
'3xl': ['2rem', { lineHeight: '1' }],
'4xl': ['3rem', { lineHeight: '1' }],
'5xl': ['4.2rem', { lineHeight: '0.9' }],
// '6xl': ['3.75rem', { lineHeight: '1.04' }],
// '7xl': ['4.5rem', { lineHeight: '1.1' }],
// '8xl': ['6rem', { lineHeight: '1' }],
// '9xl': ['8rem', { lineHeight: '1' }],
},
colors: {
'expurple': {
DEFAULT: 'rgba(103, 48, 255,0.8)'
}
// 'ggreen': {
// light: '#67e8f9',
// DEFAULT: 'var(--primary-color)',

+ 123
- 131
web/app/templates/base.html View File

@@ -11,94 +11,105 @@
# Flask-Moment: https://flask-moment.readthedocs.io/en/latest/
# Boostrap select: https://stackoverflow.com/questions/67942546/bootstrap-5-select-dropdown-with-the-multiple-attribute-collapsed
-->
{% macro relationships_links(resource) %}

{% macro relationships_links(relationships) %}
{% if relationships %}
{% for relationship in relationships %}
{{ resource_lead(relationship)}}
{% if resource.tools %}
<div class="">
<div class="px-4">
Tools
</div>
{% for tool in resource.tools %}
<div class="cell">
{{ resource_lead(tool,size=2) }}
</div>
{% endfor %}
</div>
{% endif %}
{% endmacro %}

{% macro book_with_related(resource, loop, relationships, pre_title='', post_title='Related') %}
<div class="w-full overflow-x-scroll my-8 pb-12 border-b-2 border-black">
<div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col" >
<div class=" w-40 pl-16 pt-4 row-start-1 ">
{% if pre_title == '' %}
<p>{{loop.index}} / {{count}}</p>
{% else %}
<p>{{ pre_title }}</p>
{% endif %}
</div>
<div class="w-[32rem] shrink-0 row-start-1 row-span-3">
{{ resource_lead(resource) }}
</div>
<div class=" w-52 pl-24 pt-4 row-start-1 ">
{{ post_title }}
</div>
<div class="h-12">

</div>
{% if resource['name'] != 'practice' %}
<div class="w-52 pl-24 pt-4 ">
Related practices
</div>
{% endif %}
{% for relationship in relationships %}
<div class="shrink-0 min-w-[32rem] row-start-1">
{{ resource_lead(relationship) }}
</div>
{% endfor %}
<!-- <div class=""></div>
<div class="cell practice">
<h2>Collaborative writing</h2>
</div>
<div class="shrink-0 min-w-[32rem] row-start-1">
{{ resource_lead(resource) }}
</div>
<div class="shrink-0 min-w-[32rem] row-start-1">
{{ resource_lead(resource) }}
</div> -->
{% if resource.books %}
<div class="">
<div class="px-4">
Books
</div>
{% for book in resource.books %}
<div class="cell">
{{ resource_lead(book,size=2) }}
</div>
{% endfor %}
</div>
{% endif %}
{% if resource.practices %}
<div class="">
<div class="px-4">
Practices
</div>
{% for practice in resource.practices %}
<div class="cell">
{{ resource_lead(practice,size=2) }}
</div>
{% endfor %}
</div>
{% endif %}

{% endmacro %}

{% macro resource_with_related(resource, loop, pre_title='', post_title='Related') %}
<div class="w-full overflow-x-scroll my-8 pb-12 border-b-2 border-black">
<div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col" >
<div class=" w-40 pl-16 pt-4 row-start-1 ">
{% if pre_title == '' %}
<p>{{loop.index}} / {{count}}</p>
{% else %}
<p>{{ pre_title }}</p>
{% macro resource_with_related(resource, loop, show_number=true) %}
<div class="w-full border-b-2 border-black fade-right">
<div class="content w-full py-8 overflow-x-auto">
<div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col w-fit pr-40 " >
<div class=" related ">
{% if show_number %}
<p>{{loop.index}} / {{count}}</p>
{% else %}
<p class="capitalize">{{ resource['type'] }}</p>
{% endif %}
</div>
<div class="cell w-[32rem] row-start-1 row-span-3">
{{ resource_lead(resource) }}
</div>
{% if resource.tools %}
<div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
<div class="related">
Related<br>Tools
</div>
{% for tool in resource.tools %}
<div class="cell w-[30rem]">
{{ resource_lead(tool,size=2) }}
</div>
{% endfor %}
</div>
{% endif %}
</div>
<div class="w-[32rem] shrink-0 row-start-1 row-span-3">
{{ resource_lead(resource) }}
</div>
<div class=" w-52 pl-24 pt-4 row-start-1 ">
{{ post_title }}
</div>
<div class="h-12">

</div>
{% if resource['name'] != 'practice' %}
<div class="w-52 pl-24 pt-4 ">
Related practices
</div>
{% endif %}
<div class="shrink-0 min-w-[32rem] row-start-1">
{{ resource_lead(resource) }}
</div>
<div class=""></div>
<div class="cell practice">
<h2>Collaborative writing</h2>
</div>
<div class="shrink-0 min-w-[32rem] row-start-1">
{{ resource_lead(resource) }}
</div>
<div class="shrink-0 min-w-[32rem] row-start-1">
{{ resource_lead(resource) }}
{% if resource.books %}
<div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
<div class="related">
Related<br>Books
</div>
{% for book in resource.books %}
<div class="cell w-[35rem]">
{{ resource_lead(book,size=2) }}
</div>
{% endfor %}
</div>
{% endif %}
{% if resource.practices %}
<div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
<div class="related">
Related<br>Practices
</div>
{% for practice in resource.practices %}
<div class="cell w-[25rem]">
{{ resource_lead(practice,size=2) }}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
@@ -110,10 +121,9 @@
</a>
{% endmacro %}

{% macro resource_lead(resource) %}
<div class="relative cell ">
{% macro resource_lead(resource,size=1) %}
<a
class="block h-full hover:opacity-60 transition-opacity cursor-pointer "
class="block h-full hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}"

{% if resource['type'] == 'book' %}
href="{{ url_for('book.show_book', book_id=resource['id']) }}"
@@ -134,18 +144,18 @@
>

{% if (resource['type'] == 'book') %}
<img class="w-20 h-20 object-contain float-right mt-4 ml-4 mb-4 grayscale rotate-[15deg]" src="https://dummyimage.com/4:5x70" alt="cover for {{ resource['name'] }}">
<img class="w-20 h-20 object-contain float-right m-4 grayscale rotate-[15deg]" src="https://dummyimage.com/4:5x70" alt="cover for {{ resource['name'] }}">
{% endif %}
<h2 class="{{ resource['type'] }} mb-2">{{ resource['name'] }}</h2>
<h2 class="{{ resource['type'] }} {% if size==1 %} big-title {% else %} small-title {% endif %} mb-2">{{ resource['name'] }}</h2>
{% if resource['year'] %}
<div class=" text-sm">
<div class="text-sm">
{{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
</div>
{% endif %}

<div class="text-xl mb-[1em]">
<div class="{% if size==1 %} big-text {% else %} small-text {% endif %} mb-[1em]">
{{ resource['description'] | truncate(150) }}
</div>

@@ -167,10 +177,6 @@
{% endif %}
</div>
{% endif %}


</div>

{% endmacro %}


@@ -185,7 +191,7 @@
<script src="https://unpkg.com/htmx.org@1.8.6"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<title>ExPub Compendium</title>
<title>Experimental Publishing Compendium</title>
<link href="{{ url_for('static',filename='styles/main.css') }}" rel="stylesheet">
<script>
// htmx.on('htmx:beforeRequest', e=> {
@@ -243,50 +249,36 @@
hx-swap="outerHTML"
hx-indicator="body"
>
<div id="loading" class="loading pointer-events-none fixed top-0 left-0 w-full h-screen z-50">
<div id="loading" class="loading pointer-events-none ">
<!-- <div class="bg-white fixed top-0 left-0 w-full h-screen z-20"></div> -->
<div class="bg fixed top-0 left-0 w-full h-screen z-30"></div>
<div class="spinner fixed top-0 left-0 w-full h-screen z-[60] flex justify-center items-center">
<div class="inner bg-black rounded-full px-8 py-6 text-white text-center">
Loading...
</div>
</div>
</div>

<div id="all">
<header class="sticky top-0 z-10 bg-white std-padding border-b-[2px] border-black">
<nav class=" lg:flex justify-between">
<a class="link inline-block w-40" href="{{ url_for('main.index') }}">ExPub<br>Compendium</a>
<header class="sticky top-0 z-10 bg-white border-b-[2px] border-black">
<nav class=" lg:flex justify-center items-stretch">
<a class="menuitem w-48 " href="{{ url_for('main.index') }}"><span>Experimental Publishing Compendium <span class="ml-3 inline-block -rotate-12 italic text-[#f52d2d]" style="text-shadow: 0 0 0.4rem white">beta</span></span></a>

<div class="mr-8">
<h2><a href="{{ url_for('tool.get_tools') }}" class="tool link align-bottom">Tools</a></h2>
</div>
<a href="{{ url_for('tool.get_tools') }}" class="menuitem tool medium-title ">Tools</a>

<div class="mr-8">
<h2>
<a href="{{ url_for('practice.get_practices') }}" class="practice link">
Practices
</a>
</h2>
</div>
<a href="{{ url_for('practice.get_practices') }}" class="menuitem practice medium-title">
Practices
</a>

<div class="mr-8">
<h2>
<a href="{{ url_for('book.get_books') }}" class="book link">
Books
</a>
</h2>
</div>
<a class="menuitem medium-title book" href="{{ url_for('book.get_books') }}" > Books </a>

<!-- <div class="mr-8">
<h2 class="">
<a href="{{ url_for('practice.get_practices') }}" class="practice link">
Typologies
</a>
</h2>
</div> -->

<div class="mr-8">
<a href="{{ url_for('main.about') }}"
class="{{ 'active' if request.path == url_for('main.about') }} ml-auto link mr-auto">
About<br>ExPub
</a>
</div>

<a href="{{ url_for('main.about') }}" class="{{ 'active' if request.path == url_for('main.about') }} menuitem mr-auto">
About / <br> Contact
</a>
<div class="ml-auto mr-2">
<!-- <div class="ml-auto mr-2">
{% if current_user.is_authenticated %}
<a href="{{ url_for('create.create_resource') }}" class="block link">
Add resource
@@ -310,9 +302,9 @@
Logout
</a>
{% endif %}
</div>
</div> -->

<input class=" text-base border-2 border-black p-1 " type="text" placeholder="Search">
<input class=" text-center text-base border-l-2 border-black pl-1 " type="text" placeholder="Search">
</nav>
</header>
@@ -331,13 +323,13 @@
</main>
</div>

<div id="modal" x-show="modalOpen" class="modal h-screen w-full fixed top-0 z-20 p-4 bg-black/20 overscroll-none">
<div id="modal" x-show="modalOpen" class="modal h-screen w-full fixed top-0 z-50 p-4 bg overscroll-none">
<div class="cross cursor-pointer absolute top-10 right-10 w-10 h-10" @click="hideOverlay()">
<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L18 18M18 2L2 18" stroke="black" stroke-width="1"></path>
</svg>
</div>
<div id="modal-content" @click.outside="hideOverlay()" x-ref="modal" class="content w-full overflow-y-scroll h-full bg-white " style="box-shadow:0 0 4rem rgba(0,0,0,0.3)">
<div id="modal-content" @click.outside="hideOverlay()" x-ref="modal" class="content w-full overflow-y-auto h-full bg-white " >

</div>
</div>

+ 87
- 88
web/app/templates/book.html View File

@@ -2,19 +2,19 @@

{% block content %}

<div class="cell-margin grid grid-cols-[2fr,1fr]">
<div class="cell-margin grid mt-16 grid-cols-[1fr,1fr]">
<div class="left">
<div class="mb-8">
<div class="mb-2">Book</div>
<div class="mb-2">Book</div>
<div class="border-r-2 border-black pr-8">
{% if resource['thumbnail'] %}
<div class="float-right">
<img class="w-40 h-40 object-contain m-16 rotate-[15deg]" src={{ resource['thumbnail'] }} alt="cover for {{ resource['Title'] }}">
</div>
{% endif %}
<h2 class="book mb-2 max-w-[30rem]">{% block title %} {{ resource['Title'] or resource['name'] }} {% endblock %}</h2>
<h2 class="book huge-title mb-2 max-w-[30rem]">{% block title %} {{ resource['Title'] or resource['name'] }} {% endblock %}</h2>
{% if resource['Year'] %}
{{ resource['Year'] }}
{% endif %}
@@ -33,102 +33,101 @@
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
</div>


<div class="">
{% if current_user.is_authenticated %}
<div class="">
<a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
<span class="badge bg-dark">Edit</span>
</a>
</div>
{% endif %}

<div class="facts">

{% if resource['typology'] %}
{% if current_user.is_authenticated %}
<div class="">
<h3>Typology category</h3>
<a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a>
<a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
<span class="badge bg-dark">Edit</span>
</a>
</div>
{% endif %}
{% if resource['bookUrl'] %}
<div class="">
<h3>URL</h3>
<a target="_blank" href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a>
</div>
{% endif %}
<!-- fields for books from isbntools -->
{% if resource['ISBN-13'] %}
<div class="">
<h3>
ISBN-13
</h3>
<div>
{{ resource['ISBN-13'] }}
<div class="facts ">
{% if resource['typology'] %}
<div class="">
<h3>Typology category</h3>
<a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a>
</div>
</div>
{% endif %}
{% if resource['Publisher'] %}
<div class="">
<h3>
Publisher
</h3>
<div>
{{ resource['Publisher'] }}
{% endif %}
{% if resource['bookUrl'] %}
<div class="">
<h3>URL</h3>
<a target="_blank" href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a>
</div>
</div>
{% endif %}
<!-- fields for books from database -->
{% if resource['name'] %}
<!-- <div class="">
<h3>Title</h3>
<div class="">{{ resource['name'] }}</div>
</div> -->
{% endif %}
{% if resource['author'] %}
<div class="">
<h3>Author</h3>
<div class="">{{ resource['author'] }}</div>
</div>
{% endif %}
{% if resource['year'] %}
<div class="">
<h3>Publication year</h3>
<div>
{{ resource['year'] }}
{% endif %}
<!-- fields for books from isbntools -->
{% if resource['ISBN-13'] %}
<div class="">
<h3>
ISBN-13
</h3>
<div>
{{ resource['ISBN-13'] }}
</div>
</div>
</div>
{% endif %}
{% if resource['desc'] %}
<div class="col-span-2">
<h3>Publisher's description</h3>
<div class="">{{ resource['desc'] }}</div>
</div>
{% endif %}

{% if resource['description'] %}
<div class="col-span-2">
<h3>
Experimental aspects:
</h3>
<div>
{{ resource['description'] }}
{% endif %}
{% if resource['Publisher'] %}
<div class="">
<h3>
Publisher
</h3>
<div>
{{ resource['Publisher'] }}
</div>
</div>
{% endif %}
<!-- fields for books from database -->
{% if resource['name'] %}
<!-- <div class="">
<h3>Title</h3>
<div class="">{{ resource['name'] }}</div>
</div> -->
{% endif %}
{% if resource['author'] %}
<div class="">
<h3>Author</h3>
<div class="">{{ resource['author'] }}</div>
</div>
{% endif %}
{% if resource['year'] %}
<div class="">
<h3>Publication year</h3>
<div>
{{ resource['year'] }}
</div>
</div>
{% endif %}
{% if resource['desc'] %}
<div class="col-span-2">
<h3>Publisher's description</h3>
<div class="">{{ resource['desc'] }}</div>
</div>
{% endif %}
{% if resource['description'] %}
<div class="col-span-2">
<h3>
Experimental aspects:
</h3>
<div>
{{ resource['description'] }}
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>


</div>
</div>
<div class="right lg:mt-16">
<div class=" max-w-[30rem] mx-auto p-4">
{{ relationships_links(relationships) }}
<div class="right ">
<div class="grid grid-cols-2">
{{ relationships_links(resource) }}
</div>
</div>

+ 17
- 9
web/app/templates/index.html View File

@@ -3,36 +3,44 @@
{% block content %}
<div class="">

<div class="border-b-2 border-black">
<div class="pl-44 text my-8 row-span-2 meta max-w-[65ch]">
<div class="border-b-2 border-black grid grid-cols-[52rem,30rem] content-start">

<div class="ml-[13rem] text my-8 meta max-w-[30rem]">
{{ text|safe }}
</div>

<div class="h-full ">
<div class="flex h-full gap-8 justify-start items-center ">
<div class="text-right">Show<br>related</div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<div class="">Simpler<br>List</div>
</div>
</div>
</div>
{{ book_with_related(book, book_relationships, 'Book', 'Related') }}
{% for tool in tools %}

{{ resource_with_related(tool, 'Tool', 'Used by') }}
{{ resource_with_related(tool, loop, false) }}

{% endfor %}

{% for book in books %}

{{ resource_with_related(book, 'Book', 'Made with') }}
{{ resource_with_related(book, loop, false) }}

{% endfor %}

{% for tool in tools2 %}

{{ resource_with_related(tool, 'Tool', 'Used by') }}
{{ resource_with_related(tool, loop, false) }}

{% endfor %}

{% for book in books2 %}

{{ resource_with_related(book, 'Book', 'Made with') }}
{{ resource_with_related(book, loop, false) }}

{% endfor %}


+ 117
- 129
web/app/templates/resource.html View File

@@ -1,146 +1,134 @@
{% extends 'base.html' %}

{% block content %}
<div class="cell-margin grid gap-8 grid-cols-[2fr,1fr]">
<div class="left">
<div class="mb-2 capitalize">{{ resource['type'] }}</div>
<h2 class="block-margin {{ resource['type'] }}">
{% block title %}
{% autoescape false %}
{{ resource['name'] | replace(" ","<br>") }}
{% endautoescape %}
{% endblock %}
</h2>
{% if current_user.is_authenticated %}
{% if resource['type'] == 'tool' %}
<div class="row text-center py-3">
<a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% elif resource['type'] == 'practice' %}
<div class="row text-center py-3">
<a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% endif %}
{% endif %}
<div class="facts">
{% if resource['description'] %}
<div class="">
<h3>Description</h3>
{{ resource['description'] }}
</div>
{% endif %}
<!-- fields for tools -->
{% if resource['developer'] %}
<div class="">
<h3>Developer</h3>
{% if resource['developerUrl'] %}
<a href="{{ resource['developerUrl'] }}">{{ resource['developer'] }}</a>
{% else %}
{{ resource['developer'] }}
{% endif %}
</div>
{% endif %}
{% if resource['license'] %}
<div class="">
<h3>Software license</h3>
{{ resource['license'] }}
</div>
{% endif %}
{% if resource['scriptingLanguage'] %}
<div class="">
<h3>Software language(s)</h3>
{{ resource['scriptingLanguage'] }}
</div>
{% endif %}
{% if resource['projectUrl'] %}
<div class="">
<h3>Project page</h3>
<a href="{{ resource['projectUrl'] }}">{{ resource['projectUrl'] }}</a>
</div>
{% endif %}
{% if resource['repositoryUrl'] %}
<div class="">
<h3>Code repository</h3>
<a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a>



<div class="cell-margin grid mt-16 grid-cols-[1fr,1fr]">
<div class="left ">
<div class="mb-4 capitalize">{{ resource['type'] }}</div>
<div class="border-r-2 border-black pr-8">
<h2 class="block-margin huge-title {{ resource['type'] }}">
{% block title %}
{% autoescape false %}
{{ resource['name'] | replace(" ","<br>") }}
{% endautoescape %}
{% endblock %}
</h2>
{% if current_user.is_authenticated %}
{% if resource['type'] == 'tool' %}
<div class="row text-center py-3">
<a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% endif %}
{% if resource['ingestFormats'] %}
<div class="">
<h3>Import / ingest formats</h3>
{{ resource['ingestFormats'] }}
{% elif resource['type'] == 'practice' %}
<div class="row text-center py-3">
<a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% endif %}
{% endif %}
{% if resource['outputFormats'] %}
<div class="facts">
{% if resource['description'] %}
<div class="">
<h3>Output formats</h3>
{{ resource['outputFormats'] }}
<h3>Description</h3>
{{ resource['description'] }}
</div>
{% endif %}
{% if resource['status'] %}
{% endif %}
<!-- fields for tools -->
{% if resource['developer'] %}
<div class="">
<h3>Developer</h3>
{% if resource['developerUrl'] %}
<a href="{{ resource['developerUrl'] }}">{{ resource['developer'] }}</a>
{% else %}
{{ resource['developer'] }}
{% endif %}
</div>
{% endif %}
{% if resource['license'] %}
<div class="">
<h3>Software license</h3>
{{ resource['license'] }}
</div>
{% endif %}
{% if resource['scriptingLanguage'] %}
<div class="">
<h3>Software language(s)</h3>
{{ resource['scriptingLanguage'] }}
</div>
{% endif %}
{% if resource['projectUrl'] %}
<div class="">
<h3>Project page</h3>
<a href="{{ resource['projectUrl'] }}">{{ resource['projectUrl'] }}</a>
</div>
{% endif %}
{% if resource['repositoryUrl'] %}
<div class="">
<h3>Code repository</h3>
<a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a>
</div>
{% endif %}
{% if resource['ingestFormats'] %}
<div class="">
<h3>Import / ingest formats</h3>
{{ resource['ingestFormats'] }}
</div>
{% endif %}
{% if resource['outputFormats'] %}
<div class="">
<h3>Output formats</h3>
{{ resource['outputFormats'] }}
</div>
{% endif %}
{% if resource['status'] %}
<div class="">
<h3>Platform status</h3>
{{ resource['status'] }}
</div>
{% endif %}
<!-- fields for practices -->
{% if resource['longDescription'] %}
<div class="col-span-2">
<h3>Full description</h3>
{{ resource['longDescription']|safe }}
</div>
{% endif %}
{% if resource['experimental'] %}
<div class="col-span-2">
<h3>Experimental uses</h3>
{{ resource['experimental']|safe }}
</div>
{% endif %}
{% if resource['considerations'] %}
<div class="col-span-2">
<h3>Considerations</h3>
<p>{{ resource['considerations']|safe }}</p>
</div>
{% endif %}
{% if resource['references'] %}
<div class="col-span-2">
<h3> References </h3>
<p>{{ resource['references']|safe }}</p>
</div>
{% endif %}
<div class="">
<h3>Platform status</h3>
{{ resource['status'] }}
<h3>Created</h3>
{{ resource['created'].strftime("%Y-%m-%d %H:%M") }} UTC
</div>
{% endif %}
<!-- fields for practices -->
{% if resource['longDescription'] %}
<div class="col-span-2">
<h3>Full description</h3>
{{ resource['longDescription']|safe }}
</div>
{% endif %}
{% if resource['experimental'] %}
<div class="col-span-2">
<h3>Experimental uses</h3>
{{ resource['experimental']|safe }}
</div>
{% endif %}
{% if resource['considerations'] %}
<div class="col-span-2">
<h3>Considerations</h3>
<p>{{ resource['considerations']|safe }}</p>
</div>
{% endif %}
{% if resource['references'] %}
<div class="col-span-2">
<h3> References </h3>
<p>{{ resource['references']|safe }}</p>
</div>
{% endif %}
<div class="">
<h3>Created</h3>
{{ resource['created'].strftime("%Y-%m-%d %H:%M") }} UTC
</div>

</div>
</div>
<div class="right lg:mt-16 max-w-[30rem] mx-auto p-4">
{{ relationships_links(relationships) }}
{% if resource.tools %}
TOOLS:
{% for tool in resource.tools %}
{{ tool.name }};
{% endfor %}
{% endif %}
{% if resource.practices %}
PRACTICES:
{% for practice in resource.practices %}
{{ practice.name }};
{% endfor %}
{% endif %}
{% if resource.books %}
BOOKS:
{% for book in resource.books %}
{{ book.name }};
{% endfor %}
{% endif %}
<div class="right ">
<div class="grid grid-cols-2 ">
{{ relationships_links(resource) }}
</div>
</div>
</div>

+ 20
- 20
web/app/templates/resources.html View File

@@ -17,6 +17,26 @@
</p>
</div>
</div> -->


<div class="border-b-2 border-black grid grid-cols-[52rem,30rem] content-start">
<div class="ml-[13rem] text my-8 meta max-w-[30rem]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies egestas felis at dignissim. Morbi ut bibendum
nisl. Integer ac sollicitudin risus. Vivamus et est est. Ut vitae lacus nec justo tincidunt interdum. Fusce sapien odio,
commodo nec est et, interdum varius risus. Curabitur vehicula consequat auctor.
</div>
<div class="h-full ">
<div class="flex h-full gap-8 justify-start items-center ">
<div class="text-right">Show<br>related</div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<div class="">Simpler<br>List</div>
</div>
</div>
</div>
<script>
function filter() {
return {
@@ -95,26 +115,6 @@

<div>
{% for resource in resources %}

{% if resource.tools %}
TOOLS:
{% for tool in resource.tools %}
{{ tool.name }};
{% endfor %}
{% endif %}
{% if resource.practices %}
PRACTICES:
{% for practice in resource.practices %}
{{ practice.name }};
{% endfor %}
{% endif %}
{% if resource.books %}
BOOKS:
{% for book in resource.books %}
{{ book.name }};
{% endfor %}
{% endif %}

{{ resource_with_related(resource, loop) }}
{% endfor %}
</div>

Write Preview
Loading…
Cancel
Save