add functionality to disable topics in course index and improve layout
This commit is contained in:
3
Makefile
3
Makefile
@@ -190,7 +190,8 @@ HDM_DEPLOY_PATH = /home/tengo/html/hdm
|
|||||||
|
|
||||||
build-index: build/.exists
|
build-index: build/.exists
|
||||||
@echo "Building root index..."
|
@echo "Building root index..."
|
||||||
@echo '<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HdM Vorlesungen</title><style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;max-width:720px;margin:0 auto;padding:3rem 1.5rem;background:#fafafa;color:#1d1d1f;line-height:1.5}h1{font-size:2rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:.5rem}.subtitle{color:#86868b;font-size:1rem}.courses{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}a.course{display:block;background:#fff;border-radius:12px;padding:1.5rem;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:all .2s ease;cursor:pointer}a.course:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12)}.course-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.course-b .course-label{color:#1e5f8a}.course-c .course-label{color:#d63384}.course-title{font-size:1.15rem;font-weight:500;color:#1d1d1f;margin:.25rem 0}.course-info{font-size:.85rem;color:#86868b}.section-title{font-size:1rem;font-weight:600;color:#86868b;margin-top:2.5rem;margin-bottom:.75rem}.references{display:flex;flex-direction:column;gap:.75rem}footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #e5e5e7;color:#86868b;font-size:.85rem}footer a{color:#1d1d1f;text-decoration:none}footer a:hover{text-decoration:underline}.qr-section{margin-top:2.5rem;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08);text-align:center}.qr-code{width:100%;height:auto}.qr-url{margin-top:.75rem;font-size:.85rem;color:#86868b}</style></head><body><h1>HdM Vorlesungen</h1><p class="subtitle">Wintersemester 2025/26 · Michael Czechowski</p><div class="courses"><a class="course course-b" href="223015b/"><span class="course-label">223015b</span><div class="course-title">Dateiformate, Schnittstellen, Speichermedien & Distributionswege</div><span class="course-info">6 Kapitel · Modul "Technik 1"</span></a><a class="course course-c" href="223015c/"><span class="course-label">223015c</span><div class="course-title">Grundlagen IT- und Internettechnik</div><span class="course-info">3 Kapitel · Modul "Technik 1"</span></a><a class="course" href="klausurfragen.html"><span class="course-label">Klausurfragen</span><div class="course-title">Klausurfragen & Übungsfragen</div><span class="course-info">Sammlung von Prüfungsfragen</span></a></div><h2 class="section-title">Referenzen</h2><div class="references"><a class="course" href="https://codecrispi.es/"><span class="course-label">Plattform</span><div class="course-title">Code Crispies</div><span class="course-info">Selbstlernplattform</span></a></div><div class="qr-section"><img src="qr-root.svg" alt="QR Code" class="qr-code"><p class="qr-url">https://librete.ch/hdm/</p></div><footer><a href="mailto:mail@librete.ch">Kontakt</a></footer></body></html>' > build/index.html
|
@mkdir -p build
|
||||||
|
@./scripts/generate-root-index.sh
|
||||||
|
|
||||||
# Deploy
|
# Deploy
|
||||||
define deploy_course
|
define deploy_course
|
||||||
|
|||||||
@@ -42,6 +42,15 @@ TOPIC_MAP["geschichte-grundlagen-html"]="Geschichte, Grundlagen & HTML"
|
|||||||
TOPIC_MAP["netzwerke-protokolle-css"]="Netzwerke, Protokolle & CSS"
|
TOPIC_MAP["netzwerke-protokolle-css"]="Netzwerke, Protokolle & CSS"
|
||||||
TOPIC_MAP["interaktivitaet-javascript"]="Interaktivität & JavaScript"
|
TOPIC_MAP["interaktivitaet-javascript"]="Interaktivität & JavaScript"
|
||||||
|
|
||||||
|
# Configure which topics should appear disabled per course
|
||||||
|
# Two modes: fully disabled (non-clickable card) and buttons-disabled (link remains clickable, buttons are disabled)
|
||||||
|
declare -A DISABLED_FULL
|
||||||
|
declare -A DISABLED_BUTTONS
|
||||||
|
# For course B: chapters 3,4,5 should be fully disabled
|
||||||
|
DISABLED_FULL["223015b"]="speichermedien-schnittstellen distribution-apis-zukunft vertiefung-offene-fragen"
|
||||||
|
# For course C: chapter 3 should keep link clickable but buttons disabled
|
||||||
|
DISABLED_BUTTONS["223015c"]="interaktivitaet-javascript"
|
||||||
|
|
||||||
cat > "$BUILD_DIR/index.html" << HEADER
|
cat > "$BUILD_DIR/index.html" << HEADER
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
@@ -61,6 +70,15 @@ cat > "$BUILD_DIR/index.html" << HEADER
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
header { margin-bottom: 2rem; }
|
header { margin-bottom: 2rem; }
|
||||||
|
.breadcrumb {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.breadcrumb a {
|
||||||
|
color: #86868b;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.breadcrumb a:hover { text-decoration: underline; }
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -68,6 +86,12 @@ cat > "$BUILD_DIR/index.html" << HEADER
|
|||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
color: $ACCENT_COLOR;
|
color: $ACCENT_COLOR;
|
||||||
}
|
}
|
||||||
|
.course-heading {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1d1d1f;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
.subtitle {
|
.subtitle {
|
||||||
color: #86868b;
|
color: #86868b;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
@@ -77,7 +101,8 @@ cat > "$BUILD_DIR/index.html" << HEADER
|
|||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
.kapitel {
|
/* Use the .termine wrapper and add a gap between cards */
|
||||||
|
.termine {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -93,6 +118,7 @@ cat > "$BUILD_DIR/index.html" << HEADER
|
|||||||
grid-template-columns: 1fr auto auto;
|
grid-template-columns: 1fr auto auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
padding: 0; /* inner padding handled by kapitel-link */
|
||||||
}
|
}
|
||||||
.kapitel-card:hover {
|
.kapitel-card:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
@@ -105,6 +131,8 @@ cat > "$BUILD_DIR/index.html" << HEADER
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
}
|
}
|
||||||
|
/* Disabled look: dim the entire card and prevent pointer events */
|
||||||
|
.kapitel-card.disabled { opacity: 0.6; pointer-events: none; }
|
||||||
.kapitel-label {
|
.kapitel-label {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -135,11 +163,11 @@ cat > "$BUILD_DIR/index.html" << HEADER
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
.btn-slides {
|
.btn-slides {
|
||||||
background: $ACCENT_COLOR;
|
background: $ACCENT_COLOR;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
}
|
||||||
.btn-slides:hover {
|
.btn-slides:hover {
|
||||||
filter: brightness(1.1);
|
filter: brightness(1.1);
|
||||||
@@ -147,9 +175,9 @@ cat > "$BUILD_DIR/index.html" << HEADER
|
|||||||
.btn-pdf {
|
.btn-pdf {
|
||||||
background: #f5f5f7;
|
background: #f5f5f7;
|
||||||
color: #1d1d1f;
|
color: #1d1d1f;
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
}
|
||||||
.btn-pdf:hover { background: #e8e8ed; }
|
.btn-pdf:hover { background: #e8e8ed; }
|
||||||
|
.btn-disabled { opacity: 0.6; pointer-events: none; }
|
||||||
/* Make entire card clickable via overlay */
|
/* Make entire card clickable via overlay */
|
||||||
.kapitel-link::after {
|
.kapitel-link::after {
|
||||||
content: '';
|
content: '';
|
||||||
@@ -198,7 +226,9 @@ cat > "$BUILD_DIR/index.html" << HEADER
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>$TITLE</h1>
|
<p class="breadcrumb"><a href="../">← Kursübersicht</a></p>
|
||||||
|
<h1>HdM Vorlesungen</h1>
|
||||||
|
<h2 class="course-heading">$TITLE</h2>
|
||||||
<p class="subtitle">$SUBTITLE</p>
|
<p class="subtitle">$SUBTITLE</p>
|
||||||
<p class="meta">HdM Stuttgart · Wintersemester 2025/26 · Michael Czechowski</p>
|
<p class="meta">HdM Stuttgart · Wintersemester 2025/26 · Michael Czechowski</p>
|
||||||
</header>
|
</header>
|
||||||
@@ -216,7 +246,7 @@ for html in $(ls "$BUILD_DIR"/[0-9][0-9]-*.html 2>/dev/null | sort); do
|
|||||||
# Look up nice topic name or fallback
|
# Look up nice topic name or fallback
|
||||||
topic="${TOPIC_MAP[$topic_raw]}"
|
topic="${TOPIC_MAP[$topic_raw]}"
|
||||||
if [[ -z "$topic" ]]; then
|
if [[ -z "$topic" ]]; then
|
||||||
topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\u&/')
|
topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\\u&/')
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Handle kapitel number
|
# Handle kapitel number
|
||||||
@@ -228,22 +258,66 @@ for html in $(ls "$BUILD_DIR"/[0-9][0-9]-*.html 2>/dev/null | sort); do
|
|||||||
|
|
||||||
pdf_filename="${filename%.html}.pdf"
|
pdf_filename="${filename%.html}.pdf"
|
||||||
|
|
||||||
# Check if PDF exists
|
# Determine whether this topic is configured as disabled for this course
|
||||||
pdf_link=""
|
disabled_full=false
|
||||||
if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then
|
disabled_buttons=false
|
||||||
pdf_link="<a href=\"$pdf_filename\" class=\"btn btn-pdf\">PDF</a>"
|
for t in ${DISABLED_FULL["$COURSE"]}; do
|
||||||
|
if [[ "$topic_raw" == "$t" ]]; then
|
||||||
|
disabled_full=true
|
||||||
|
break
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
if [[ "$disabled_full" == false ]]; then
|
||||||
|
for t in ${DISABLED_BUTTONS["$COURSE"]}; do
|
||||||
|
if [[ "$topic_raw" == "$t" ]]; then
|
||||||
|
disabled_buttons=true
|
||||||
|
break
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Decide card class
|
||||||
|
card_class="kapitel-card"
|
||||||
|
if [[ "$disabled_full" == true ]] || [[ "$disabled_buttons" == true ]]; then
|
||||||
|
card_class="$card_class disabled"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Build link/button HTML depending on disabled state
|
||||||
|
if [[ "$disabled_full" == true ]]; then
|
||||||
|
# non-interactive card (visually dimmed and not clickable)
|
||||||
|
link_html="<div class=\"kapitel-link\"><div class=\"kapitel-label\">$kapitel_label</div><div class=\"kapitel-title\">$topic</div></div>"
|
||||||
|
slides_html="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
|
||||||
|
pdf_html=""
|
||||||
|
if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then
|
||||||
|
pdf_html="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
|
||||||
|
fi
|
||||||
|
elif [[ "$disabled_buttons" == true ]]; then
|
||||||
|
# link stays clickable, but buttons are disabled; card appears dimmed
|
||||||
|
link_html="<a href=\"$filename\" class=\"kapitel-link\"><div class=\"kapitel-label\">$kapitel_label</div><div class=\"kapitel-title\">$topic</div></a>"
|
||||||
|
slides_html="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
|
||||||
|
pdf_html=""
|
||||||
|
if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then
|
||||||
|
pdf_html="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
# normal interactive card
|
||||||
|
pdf_link=""
|
||||||
|
if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then
|
||||||
|
pdf_link="<a href=\"$pdf_filename\" class=\"btn btn-pdf\">PDF</a>"
|
||||||
|
fi
|
||||||
|
link_html="<a href=\"$filename\" class=\"kapitel-link\"><div class=\"kapitel-label\">$kapitel_label</div><div class=\"kapitel-title\">$topic</div></a>"
|
||||||
|
slides_html="<a href=\"$filename\" class=\"btn btn-slides\">Folien</a>"
|
||||||
|
pdf_html="$pdf_link"
|
||||||
fi
|
fi
|
||||||
|
|
||||||
cat >> "$BUILD_DIR/index.html" << LINK
|
cat >> "$BUILD_DIR/index.html" << LINK
|
||||||
<div class="kapitel-card">
|
<div class="$card_class">
|
||||||
<a href="$filename" class="kapitel-link">
|
$link_html
|
||||||
<div class="kapitel-label">$kapitel_label</div>
|
$slides_html
|
||||||
<div class="kapitel-title">$topic</div>
|
$pdf_html
|
||||||
</a>
|
|
||||||
<a href="$filename" class="btn btn-slides">Folien</a>
|
|
||||||
$pdf_link
|
|
||||||
</div>
|
</div>
|
||||||
LINK
|
LINK
|
||||||
|
|
||||||
done
|
done
|
||||||
|
|
||||||
# Add klausurfolien entry if it exists
|
# Add klausurfolien entry if it exists
|
||||||
@@ -264,6 +338,28 @@ if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
|
|||||||
KLAUSUR
|
KLAUSUR
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
# Add klausurfragen entry if it exists (HTML and/or PDF)
|
||||||
|
if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
|
||||||
|
pdf_link=""
|
||||||
|
if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
|
||||||
|
pdf_link="<a href=\"klausurfragen.pdf\" class=\"btn btn-pdf\">PDF</a>"
|
||||||
|
fi
|
||||||
|
slides_link=""
|
||||||
|
if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
|
||||||
|
slides_link="<a href=\"klausurfragen.html\" class=\"btn btn-slides\">Folien</a>"
|
||||||
|
fi
|
||||||
|
cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN
|
||||||
|
<div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
|
||||||
|
<a href="klausurfragen.html" class="kapitel-link">
|
||||||
|
<div class="kapitel-label">Prüfung</div>
|
||||||
|
<div class="kapitel-title">Klausurfragen</div>
|
||||||
|
</a>
|
||||||
|
$slides_link
|
||||||
|
$pdf_link
|
||||||
|
</div>
|
||||||
|
KLAUSURFRAGEN
|
||||||
|
fi
|
||||||
|
|
||||||
cat >> "$BUILD_DIR/index.html" << FOOTER
|
cat >> "$BUILD_DIR/index.html" << FOOTER
|
||||||
</div>
|
</div>
|
||||||
<div class="qr-section">
|
<div class="qr-section">
|
||||||
@@ -272,7 +368,7 @@ cat >> "$BUILD_DIR/index.html" << FOOTER
|
|||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer>
|
||||||
<a href="mailto:mail@librete.ch">Kontakt</a> ·
|
<a href="mailto:mail@librete.ch">Kontakt</a> ·
|
||||||
<a href="../">Alle Kurse</a>
|
<a href="../">Kursübersicht</a>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ a {
|
|||||||
color: var(--color-highlight);
|
color: var(--color-highlight);
|
||||||
}
|
}
|
||||||
section.disable {
|
section.disable {
|
||||||
opacity: 0.2;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
</style>FA2
|
</style>FA2
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user