Skip to content

M3P2 HTML Generator
M3P2 HTML Generator
Commit 7ae25447 authored by Administrator's avatar Administrator 💬
Browse files
Options

feat: add arrows to the lesson selector 

This may break on some browsers and needs further testing.
parent bf15a194
Pipeline #12286 failed with stage
    Hide whitespace changes
    Inline Side-by-side
    Showing with 188 additions and 77 deletions
    user/plugins/language-selector/css/language-selector.css
    View file @ 7ae25447
    /*
    .language-selector { .language-selector {
    float: right; float: right;
    position: relative; position: relative;
    ...@@ -30,12 +32,10 @@ ...@@ -30,12 +32,10 @@
    user-select: none; user-select: none;
    background-image: none; background-image: none;
    border: 1px solid transparent; border: 1px solid transparent;
    /* size */
    padding: 5px 10px; padding: 5px 10px;
    font-size: 0.8rem; font-size: 0.8rem;
    line-height: 1.5; line-height: 1.5;
    border-radius: 3px; border-radius: 3px;
    /* Aspect */
    color: #333; color: #333;
    background-color: #fff; background-color: #fff;
    border-color: #ccc; border-color: #ccc;
    ...@@ -45,7 +45,6 @@ ...@@ -45,7 +45,6 @@
    position: absolute; position: absolute;
    top: 95%; top: 95%;
    left: 0; left: 0;
    /*right: 0;*/
    z-index: 1000; z-index: 1000;
    display: none; display: none;
    float: left; float: left;
    ...@@ -86,3 +85,5 @@ ...@@ -86,3 +85,5 @@
    color: #333; color: #333;
    white-space: nowrap; white-space: nowrap;
    } }
    */
    user/plugins/language-selector/templates/partials/language-selector.html.twig
    View file @ 7ae25447
    <div class="language-selector"> <div class="language-selector">
    <button class="btn" type="button" data-dropdown="langSelectorList"> <button class="btn" type="button" data-dropdown="language-selector-dropdown">
    {% if language_display.button == 'default' or language_display.button == 'flag' %} {% if language_display.button == 'default' or language_display.button == 'flag' %}
    <img alt="{{ native_name(language_selector.current)|capitalize }}" src="{{ path_flags ~ language_selector.current }}.png" /> <img alt="{{ native_name(language_selector.current)|capitalize }}" src="{{ path_flags ~ language_selector.current }}.png" />
    {% endif %} {% endif %}
    ...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
    <i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
    </button> </button>
    <ul class="dropdown-menu" id="langSelectorList"> <ul class="dropdown-menu" id="language-selector-dropdown">
    {% for language in language_selector.languages %} {% for language in language_selector.languages %}
    {% set show_language = true %} {% set show_language = true %}
    ......
    user/plugins/m3-p2/m3-p2.php
    View file @ 7ae25447
    ...@@ -11,7 +11,6 @@ use Grav\Common\Uri; ...@@ -11,7 +11,6 @@ use Grav\Common\Uri;
    use Symfony\Component\EventDispatcher\Event; use Symfony\Component\EventDispatcher\Event;
    /** /**
    * Features: * Features:
    * - /sync Cheap git-sync (did not knew about it at the time) * - /sync Cheap git-sync (did not knew about it at the time)
    ...@@ -357,6 +356,12 @@ class M3P2Plugin extends Plugin ...@@ -357,6 +356,12 @@ class M3P2Plugin extends Plugin
    $current_lesson_lang = $target_pages[0]->language(); $current_lesson_lang = $target_pages[0]->language();
    $current_lesson_name = ""; $current_lesson_name = "";
    $current_found = false;
    $previous_found = false;
    $next_found = false;
    $previous_lesson_slug = "";
    $previous_lesson_name = "";
    $next_lesson_slug = "";
    $other_lessons = []; // of slug => ['name' => …, 'slug' => …] $other_lessons = []; // of slug => ['name' => …, 'slug' => …]
    foreach ($target_pages as $target_page) { foreach ($target_pages as $target_page) {
    $page_config = $target_page->header(); $page_config = $target_page->header();
    ...@@ -369,10 +374,28 @@ class M3P2Plugin extends Plugin ...@@ -369,10 +374,28 @@ class M3P2Plugin extends Plugin
    } }
    if ($lesson_slug != $page_lesson['slug']) { if ($lesson_slug != $page_lesson['slug']) {
    if ( ! isset($other_lessons[$page_lesson['slug']])) { if ( ! isset($other_lessons[$page_lesson['slug']])) {
    // Found one, let's add it
    $other_lessons[$page_lesson['slug']] = $page_lesson; $other_lessons[$page_lesson['slug']] = $page_lesson;
    // And the prev/next navigation
    if ($current_found) {
    if ( ! $next_found) {
    $next_lesson_slug = $page_lesson['slug'];
    $next_found = true;
    }
    } else {
    if ( ! $previous_found) {
    $previous_lesson_slug = $page_lesson['slug'];
    $previous_found = true;
    }
    }
    } }
    continue; continue;
    } }
    $current_found = true;
    if (isset($page_lesson['name']) && ! empty($page_lesson['name'])) { if (isset($page_lesson['name']) && ! empty($page_lesson['name'])) {
    $current_lesson_name = $page_lesson['name']; $current_lesson_name = $page_lesson['name'];
    } }
    ...@@ -425,11 +448,12 @@ class M3P2Plugin extends Plugin ...@@ -425,11 +448,12 @@ class M3P2Plugin extends Plugin
    $this->grav['twig']->twig()->addGlobal('target_pages', $target_pages); $this->grav['twig']->twig()->addGlobal('target_pages', $target_pages);
    $this->grav['twig']->twig()->addGlobal('related_lessons', $other_lessons); $this->grav['twig']->twig()->addGlobal('related_lessons', $other_lessons);
    $this->grav['twig']->twig()->addGlobal('previous_lesson_slug', $previous_lesson_slug);
    $this->grav['twig']->twig()->addGlobal('next_lesson_slug', $next_lesson_slug);
    $this->grav['twig']->twig()->addGlobal('translated_lessons', $translated_lessons); $this->grav['twig']->twig()->addGlobal('translated_lessons', $translated_lessons);
    $page = new Page(); $page = new Page();
    $page->init(new \SplFileInfo(__DIR__ . '/pages/lesson-columns.md')); $page->init(new \SplFileInfo(__DIR__ . '/pages/lesson-columns.md'));
    $page->title($current_lesson_name); $page->title($current_lesson_name);
    // here: perhaps add other metadata // here: perhaps add other metadata
    ......
    user/themes/textbook/css/custom.css
    View file @ 7ae25447
    ...@@ -41,6 +41,10 @@ details summary { ...@@ -41,6 +41,10 @@ details summary {
    cursor: pointer; cursor: pointer;
    } }
    .hidden {
    display: none;
    }
    /**********************************************************************************************************************/ /**********************************************************************************************************************/
    /** FIX FOR DIAGRAMS **************************************************************************************************/ /** FIX FOR DIAGRAMS **************************************************************************************************/
    ...@@ -56,16 +60,16 @@ details summary { ...@@ -56,16 +60,16 @@ details summary {
    */ */
    section#header { z-index: 2; } section#header { z-index: 2; }
    /* Little patch for the language selector, to center it vertically. */ #header > .container {
    /* Beta feature : may cause bugs. We'll see. */ padding: 0;
    .dropdown-selector, }
    .language-selector {
    -webkit-transform: initial !important; #header .navbar-section:last-child {
    -moz-transform: initial !important; margin-right: 0 !important;
    -o-transform: initial !important; }
    -ms-transform: initial !important;
    transform: initial !important; .navbar-section-layout {
    margin-right: 0rem !important; text-align: center;
    } }
    /* Little fix for the anchors plugin */ /* Little fix for the anchors plugin */
    ...@@ -94,6 +98,7 @@ section#header { z-index: 2; } ...@@ -94,6 +98,7 @@ section#header { z-index: 2; }
    color: #b72b90; color: #b72b90;
    } }
    iframe.geogebra { iframe.geogebra {
    border: 1px dotted #a6a6a6; border: 1px dotted #a6a6a6;
    } }
    ...@@ -115,7 +120,7 @@ iframe.geogebra { ...@@ -115,7 +120,7 @@ iframe.geogebra {
    } }
    .mobile-menu details[open] > summary ~ * { .mobile-menu details[open] > summary ~ * {
    animation: sweep .5s ease-in-out; animation: sweep .4s ease-in-out;
    } }
    @keyframes sweep { @keyframes sweep {
    ...@@ -246,77 +251,68 @@ iframe.geogebra { ...@@ -246,77 +251,68 @@ iframe.geogebra {
    } }
    /**********************************************************************************************************************/ /**********************************************************************************************************************/
    /* Dropdown menus: language selector, lesson selector, etc. */
    /* Showing/hiding is done in pure CSS below */
    #language-selector-button:hover ~ *, #language-selector-dropdown {
    #language-selector-button:focus ~ * { /*margin: 0;*/
    display: block;
    visibility: visible;
    }
    #langSelectorList {
    margin: 0;
    /*visibility: hidden;*/ /*visibility: hidden;*/
    /*display: block !important;*/ /*display: block !important;*/
    /*animation: test_show 1.5s ease-in-out;*/ /*animation: test_show 1.5s ease-in-out;*/
    /*animation-delay: 1s;*/ /*animation-delay: 1s;*/
    } }
    #langSelectorList:focus-within,
    #langSelectorList:hover,
    #langSelectorList:focus {
    display: block;
    visibility: visible;
    }
    /*@keyframes test_show {*/ /*@keyframes test_show {*/
    /* 0% {display: block;}*/ /* 0% {display: block;}*/
    /* 100% {display: none;}*/ /* 100% {display: none;}*/
    /*}*/ /*}*/
    .dropdown-navigation {
    #lesson-selector-button:hover ~ *, display: inline-block;
    #lesson-selector-button:focus ~ *, white-space: nowrap;
    /* class only won't work, we need an id here for some reason */
    .dropdown-menu-button:hover ~ *,
    .dropdown-menu-button:focus ~ * {
    display: block;
    visibility: visible;
    } }
    /* Little patch for the language selector, to center it vertically. */
    #lesson-selector-dropdown:focus-within, /* Beta feature : may cause bugs. We'll see. */
    #lesson-selector-dropdown:hover, .dropdown-selector {
    #lesson-selector-dropdown:focus, -webkit-transform: initial !important;
    /* same */ -moz-transform: initial !important;
    .dropdown-menu:focus-within, -o-transform: initial !important;
    .dropdown-menu:hover, -ms-transform: initial !important;
    .dropdown-menu:focus { transform: initial !important;
    display: block; /*margin-right: 0rem !important;*/
    visibility: visible;
    } }
    .dropdown-navigation {
    margin: 0 1rem;
    }
    .dropdown-selector { .dropdown-selector {
    display: inline-block; display: inline-block;
    float: right; background: #f93;
    position: relative; /*float: right;*/
    top: 50%; /*position: relative;*/
    vertical-align: middle; /*top: 50%;*/
    margin: 0 1rem !important; /*vertical-align: middle;*/
    -webkit-transform: translateY(-50%); /*-webkit-transform: translateY(-50%);*/
    -moz-transform: translateY(-50%); /*-moz-transform: translateY(-50%);*/
    -o-transform: translateY(-50%); /*-o-transform: translateY(-50%);*/
    -ms-transform: translateY(-50%); /*-ms-transform: translateY(-50%);*/
    transform: translateY(-50%); /*transform: translateY(-50%);*/
    }
    .lessons-dropdown-navigation .dropdown-selector {
    margin: 0;
    } }
    .dropdown-selector > .btn:first-child {
    margin-left: 0;
    }
    .dropdown-selector .btn { /*.dropdown-selector .btn {*/
    float: left; /*.dropdown-selector > .btn:first-child {*/
    .dropdown-menu-button {
    /*float: left;*/
    position: relative; position: relative;
    display: inline-block; display: inline-block;
    margin-left: 0;
    margin-bottom: 0; margin-bottom: 0;
    font-weight: 400; font-weight: 400;
    text-align: center; text-align: center;
    ...@@ -337,16 +333,32 @@ iframe.geogebra { ...@@ -337,16 +333,32 @@ iframe.geogebra {
    border: 1px solid #ccc; border: 1px solid #ccc;
    } }
    /*#language-selector-button:hover ~ *,
    #language-selector-button:focus ~ *,
    #lesson-selector-button:hover ~ *,
    #lesson-selector-button:focus ~ *,*/
    /* class only won't work, we need an id here for some reason */
    .dropdown-menu-button:hover ~ *,
    .dropdown-menu-button:focus ~ * {
    display: block !important;
    visibility: visible !important;
    }
    .dropdown-selector .dropdown-menu { .dropdown-selector .dropdown-menu {
    display: none; /* shown by hover or focus on elder sibling btn */
    position: absolute; position: absolute;
    top: 95%;
    right: -2.0rem; /*top: 95%;*/
    /*right: -2.0rem;*/
    /*float: left;*/ /* no float if I can help it -- perhaps needed for browser compat */
    max-width: 90vw; max-width: 90vw;
    z-index: 1000; z-index: 1000;
    display: none; /* shown by hover or focus on elder sibling btn */
    float: left;
    padding: 5px 0; padding: 5px 0;
    margin: 2px 0 0; margin: 0;
    /*margin-top: -2px;*/
    font-size: 1rem; font-size: 1rem;
    text-align: left; text-align: left;
    list-style: none; list-style: none;
    ...@@ -355,6 +367,28 @@ iframe.geogebra { ...@@ -355,6 +367,28 @@ iframe.geogebra {
    border-radius: 4px; border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    } }
    .dropdown-selector .dropdown-menu.lesson-list {
    /* align the lesson list on the right of the screen */
    right: 2%;
    }
    /*#language-selector-dropdown:focus-within,
    #language-selector-dropdown:hover,
    #language-selector-dropdown:focus,
    #lesson-selector-dropdown:focus-within,
    #lesson-selector-dropdown:hover,
    #lesson-selector-dropdown:focus,*/
    /* same, id is required somehow -- try again later, smells like cache shenanigans */
    /* nah, it was just BAD DESIGN © */
    .dropdown-selector:focus-within .dropdown-menu, /* allows keyboard tabbing inside the menu */
    .dropdown-selector .dropdown-menu:focus-within,
    .dropdown-selector .dropdown-menu:hover,
    .dropdown-selector .dropdown-menu:focus {
    display: block !important;
    visibility: visible !important;
    }
    /*@media screen and (max-width: 400px) {*/ /*@media screen and (max-width: 400px) {*/
    /* .dropdown-selector .dropdown-menu {*/ /* .dropdown-selector .dropdown-menu {*/
    ...@@ -396,5 +430,27 @@ iframe.geogebra { ...@@ -396,5 +430,27 @@ iframe.geogebra {
    /*-ms-text-overflow: ellipsis;*/ /*-ms-text-overflow: ellipsis;*/
    } }
    .dropdown-navigation-previous,
    .dropdown-navigation-next {
    display: inline-block;
    width: 1.5em;
    /*height: 3em;*/
    /*background: #f39;*/
    /*font-size: 2em;*/
    /*line-height: 1em;*/
    /*font-size: 1em;*/
    text-align: center;
    vertical-align: center;
    }
    .dropdown-navigation-previous:hover,
    .dropdown-navigation-previous:focus,
    .dropdown-navigation-next:hover,
    .dropdown-navigation-next:focus {
    font-weight: bolder;
    text-decoration: none;
    color: #0B61A4 !important;
    }
    /**********************************************************************************************************************/ /**********************************************************************************************************************/
    user/themes/textbook/templates/lesson-columns.html.twig
    View file @ 7ae25447
    ...@@ -37,12 +37,27 @@ ...@@ -37,12 +37,27 @@
    {% if related_lessons %} {% if related_lessons %}
    <div id="lesson-selector" class="dropdown-selector"> {# We should have a <nav> somewhere, perhaps -- not 100% sure it's okay to use one here #}
    <div {#id="lessons-navigation"#} class="dropdown-navigation lessons-dropdown-navigation">
    {% if previous_lesson_slug %}
    <a
    class="dropdown-navigation-previous"
    href="/{{ language_selector.current }}/lessons/{{ previous_lesson_slug }}"
    title="Previous lesson"
    >
    &#8592;
    </a>
    {% endif %}
    {# We still define ids, yet there's no javascript attached. CSS uses ids ; #pragma -- #wip, we're removing those #}
    <div {#id="lesson-selector"#} class="dropdown-selector">
    <button id="lesson-selector-button" class="btn dropdown-menu-button" type="button"> <button id="lesson-selector-button" class="btn dropdown-menu-button" type="button">
    📚 {{ related_lessons | length }} 📚 {{ related_lessons | length }}
    <i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
    </button> </button>
    <ul id="lesson-selector-dropdown" class="dropdown-menu lesson-list"> <ul {#id="lesson-selector-dropdown"#} class="dropdown-menu lesson-list">
    {% for related_lesson_slug, related_lesson in related_lessons %} {% for related_lesson_slug, related_lesson in related_lessons %}
    <li> <li>
    <a href="/{{ language_selector.current }}/lessons/{{ related_lesson.slug }}"> <a href="/{{ language_selector.current }}/lessons/{{ related_lesson.slug }}">
    ...@@ -52,7 +67,18 @@ ...@@ -52,7 +67,18 @@
    {% endfor %} {% endfor %}
    </ul> </ul>
    </div> </div>
    {% if next_lesson_slug %}
    <a class="dropdown-navigation-next"
    href="/{{ language_selector.current }}/lessons/{{ next_lesson_slug }}"
    title="Next lesson">
    &#8594;
    </a>
    {% endif %} {% endif %}
    </div>
    {% endif %}
    {% endblock %} {% endblock %}
    {# … disabling the whole section instead is semantically correct but it offsets the navigation. TBD #} {# … disabling the whole section instead is semantically correct but it offsets the navigation. TBD #}
    {#{% block header_language_selection_section %}{% endblock %}#} {#{% block header_language_selection_section %}{% endblock %}#}
    user/themes/textbook/templates/partials/base.html.twig
    View file @ 7ae25447
    ...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
    {% block header_language_selection_section %} {% block header_language_selection_section %}
    {% if not disable_language_selector %} {% if not disable_language_selector %}
    <section class="navbar-section"> <section class="navbar-section">
    <div>{# Wrapper div to make centering vertically easy #} <div class="navbar-section-layout">{# Wrapper div to make centering vertically and horizontally easy #}
    {% block header_language_selection %} {% block header_language_selection %}
    {% include 'partials/language-selector.html.twig' %} {% include 'partials/language-selector.html.twig' %}
    {% endblock %} {% endblock %}
    ......
    user/themes/textbook/templates/partials/language-selector.html.twig
    View file @ 7ae25447
    <div class="language-selector"> <div class="dropdown-navigation">
    <button id="language-selector-button" class="btn" type="button" data-dropdown-nooope="langSelectorList">
    <div class="dropdown-selector">
    <button {#id="language-selector-button"#} class="btn dropdown-menu-button" type="button">
    {% if language_display.button == 'default' or language_display.button == 'flag' %} {% if language_display.button == 'default' or language_display.button == 'flag' %}
    <img alt="{{ native_name(language_selector.current)|capitalize }}" src="{{ path_flags ~ language_selector.current }}.png" /> <img alt="{{ native_name(language_selector.current)|capitalize }}" src="{{ path_flags ~ language_selector.current }}.png" />
    {% endif %} {% endif %}
    ...@@ -9,7 +11,7 @@ ...@@ -9,7 +11,7 @@
    <i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
    </button> </button>
    <ul class="dropdown-menu" id="langSelectorList"> <ul class="dropdown-menu" {#id="language-selector-dropdown"#}>
    {% for language in language_selector.languages %} {% for language in language_selector.languages %}
    {% set show_language = true %} {% set show_language = true %}
    ...@@ -74,3 +76,5 @@ ...@@ -74,3 +76,5 @@
    </ul> </ul>
    </div> </div>
    </div>
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment