askclass-course-theme 0.6.0 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aafc1e9d45a313b35dda95263c6056b6a5dbcdce114afe55c5f10bd3fbee28e7
-  data.tar.gz: ddce588ee85b9ff572bc25bf01d1fd97d1b417f6bf9595a5cb91a5128564b191
+  metadata.gz: b23317dc53a5e8d8c6906f5b5efa26de3e1887cba9ad3e6b0d8d195bd467c00a
+  data.tar.gz: 36884856058b4b4aed13d20b004363a714adaa0ab02d175cf99b3bdd32150aad
 SHA512:
-  metadata.gz: c5d8f4e9f1cb99e737051a652647da6145d33d58da498578670ced451cfdd5f89906e8ad3640b1472f880208d0ae253ef0bcecc5509da704fc1a9a43d6d48a30
-  data.tar.gz: cf79699e5bf8348347b83b4e1b89b2c7c5e4c4a7727582799b3ca6ea2215e464681f21117eb038564efe8003dcdec07c523561cf6a07960774a9f1efc4e8950b
+  metadata.gz: d24904a8f0249c4432767689c3cf4ad0a959b64f65c003a4b1fe5a431dd196a67932cbbd5a5c1481f8bbeaf5b10d02d38cba9773771b33c227f6a77910d01583
+  data.tar.gz: 25745693f3f7b4715bf6b8338c4a12391765bf1d87add85a7a28b18b2889a25b944c3f8bce0988410167ae2e25718de0119086835d81cb08403eb0317d0c001c

data/_includes/course.html

@@ -51,7 +51,8 @@
         <div class="control">
           <a class="button" href="/segment/{{ segment }}">
             {{ info.title }}&nbsp;
-            <span class="middle-align material-symbols-outlined">rocket_launch</span>
+            <span data-date="{{ info.end }}"
+              class="middle-align material-symbols-outlined rocket">rocket_launch</span>
           </a>
         </div>
       </li>
@@ -61,10 +62,19 @@
 
 <script defer>
   const due = document.querySelectorAll('.due');
+  const rocket = document.querySelectorAll('.rocket');
   due.forEach( el => {
       const d = new Date(el.dataset.date.split('-')).getTime();
       if (d < Date.now()) {
         el.classList.add('past');
       }
     });
+  rocket.forEach( el => {
+      if (el.dataset.date) {
+        const d = new Date(el.dataset.date.split('-')).getTime();
+        if (d < Date.now()) {
+          el.innerText = 'rocket';
+        }
+      }
+    });
 </script>

data/_includes/footer.html

@@ -3,7 +3,9 @@
   <ul>
     {% for item in site.acc.footer -%}
     <li>
-      <span class="material-symbols-outlined">{{ item.icon }}</span>
+      {%- if item.icon -%}
+        <span class="material-symbols-outlined">{{ item.icon }}</span>
+      {%- endif -%}
       <a href="{{ item.href }}">{{ item.text }}</a>
     </li>
     {%- endfor %}

data/_includes/segment/index.html

@@ -21,7 +21,7 @@
 
       {%- if session.due -%}
         <div class="header">
-          <span class="material-symbols-outlined">alarm_on</span>
+          <span data-date="{{ session.due }}" class="material-symbols-outlined alarm">alarm_on</span>
           {{ session.due | date: '%b %e, %y' }}
         </div>
       {%- elsif session.type -%}
@@ -46,3 +46,13 @@
     </li>
   {%- endfor -%}
 </ul>
+
+<script defer>
+  const due = document.querySelectorAll('.alarm');
+  due.forEach( el => {
+      const d = new Date(el.dataset.date.split('-')).getTime();
+      if (d < Date.now()) {
+        el.parentNode.removeChild(el);
+      }
+    });
+</script>

data/_includes/segment/nav.html

@@ -19,6 +19,7 @@
       {% endif %}
       <a href="/segment/{{ prev }}" class="material-symbols-outlined md-48">navigate_before</a>
     {% else %}
+      &nbsp;
       <span class="material-symbols-outlined md-48 md-disabled">navigate_before</span>
     {% endif %}
 

data/_includes/session/next_prev.html

@@ -0,0 +1,25 @@
+{%- if include.p == 'previous' -%}
+  {%- assign align = 'pull-left' -%}
+  {%- assign arrow = 'before' -%}
+  {%- assign indicator = 'Previous' -%}
+{%- else -%}
+  {%- assign align = 'pull-right' -%}
+  {%- assign arrow = 'next' -%}
+  {%- assign indicator = 'Next' -%}
+{%- endif -%}
+
+{%- assign _p = include.item -%}
+
+<div class="paginator">
+  {%- if _p %}
+  <div class="{{ align }}">
+    <span>{{ indicator }}</span>
+    <span class="material-symbols-outlined">navigate_{{ arrow }}</span>
+  </div>
+  <a href="/session/{{ _p.url }}">
+    {{ _p.title }}
+  </a>
+  {%- else %}
+  <div class="{{ align }}">&nbsp;</div>
+  {% endif -%}
+</div>

data/_includes/session/paginator.html

@@ -0,0 +1,26 @@
+{% for s in segment_data.items %}
+  {% if s == session_id %}
+    {% assign _index = forloop.index0 %}
+    {% break %}
+  {% endif %}
+{% endfor %}
+
+{% assign _nidx = _index | plus: 1 %}
+{% assign _next_segment = segment_data.items[_nidx] %}
+{% assign _next_item = site.data.sessions[_next_segment] %}
+
+{% if _index > 0 %}
+  {% assign _pidx = _index | minus: 1 %}
+  {% assign _prev_segment = segment_data.items[_pidx] %}
+  {% assign _prev_item = site.data.sessions[_prev_segment] %}
+{% endif %}
+
+<section class="spacer center-align">
+
+  {% include segment/nav.html segment=session_data.segment icon=1 %}
+
+  <div class="paginator-container">
+  {% include session/next_prev.html p="previous" item=_prev_item %}
+  {% include session/next_prev.html p="next" item=_next_item %}
+  </div>
+</section>

data/_layouts/session.html

@@ -18,7 +18,7 @@
       </article>
     </section>
 
-    {% include session/footer.html %}
+    {% include session/paginator.html %}
     {% include session/content_revealer.html %}
     {% include footer.html %}
     {% include foot/mathjax.html -%}

data/_sass/_paginator.scss

@@ -0,0 +1,34 @@
+$size-width: 150px;
+
+.paginator-container {
+  max-width: var(--content-width);
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.paginator {
+  width: $size-width;
+  a {
+    text-align: center;
+    display: block;
+    font-size: 14px;
+    line-height: 1.3;
+  }
+  img {
+    object-fit: cover;
+    width: 100%;
+    height: 100px;
+  }
+}
+
+.pull-left, .pull-right {
+  color: var(--darkColor);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.pull-left {
+  flex-direction: row-reverse;
+}

data/_sass/_post.scss

@@ -141,4 +141,5 @@ a.lesson-number{
   "bullets",
   "table",
   "tab-colors",
+  "paginator",
   "video";

data/_sass/_tab-colors.scss

@@ -41,6 +41,9 @@ html {
       color: white;
       background-color: $color;
     }
+    .item:not(:first-child) {
+      border-color: $color;
+    }
   }
   &.current {
     .control {

data/_sass/_tab.scss

@@ -79,7 +79,7 @@
     margin: 5px 0;
   }
   .item:not(:first-child) {
-    border-top: 3px outset;
+    border-top: 1px solid;
   }
   .item {
     margin-bottom: 20px;

data/assets/site.webmanifest

@@ -13,11 +13,6 @@
   "orientation": "portrait-primary",
   "dir": "auto",
   "icons": [
-    {
-      "src": "logo-300.png",
-      "type": "image/png",
-      "sizes": "300x300"
-    },
     {
       "src": "logo-48.png",
       "sizes": "48x48",
@@ -42,6 +37,11 @@
       "type": "image/png",
       "purpose": "maskable"
     },
+    {
+      "src": "logo-300.png",
+      "type": "image/png",
+      "sizes": "300x300"
+    },
     {
       "src": "logo-512.png",
       "sizes": "512x512",
@@ -62,6 +62,9 @@
   ],
   "shortcuts": [
     {
+      icons: [
+        "src": "/assets/logo-96.png"
+      ],
       "name": "{{ site.acc.shortcut.name }}",
       "url": "{{ site.acc.shortcut.url }}",
       "description": "{{ site.acc.shortcut.desc }}"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: askclass-course-theme
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.1
 platform: ruby
 authors:
 - AskClass
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-10-09 00:00:00.000000000 Z
+date: 2022-10-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -48,9 +48,10 @@ files:
 - _includes/segment/index.html
 - _includes/segment/nav.html
 - _includes/session/content_revealer.html
-- _includes/session/footer.html
 - _includes/session/header.html
 - _includes/session/item.html
+- _includes/session/next_prev.html
+- _includes/session/paginator.html
 - _includes/session/points.html
 - _includes/session/videos.html
 - _includes/session/youtube.html
@@ -60,6 +61,7 @@ files:
 - _sass/_base.scss
 - _sass/_bullets.scss
 - _sass/_grid.scss
+- _sass/_paginator.scss
 - _sass/_post.scss
 - _sass/_tab-colors.scss
 - _sass/_tab.scss

data/_includes/session/footer.html

@@ -1,29 +0,0 @@
-{% for s in segment_data.items %}
-  {% if s == session_id %}
-    {% assign _index = forloop.index0 %}
-    {% break %}
-  {% endif %}
-{% endfor %}
-
-<div class="center-align spacer special">
-  {% include segment/nav.html segment=session_data.segment icon=1 %}
-
-  {% assign _next_index = _index | plus: 1 %}
-  {% assign _next_segment = segment_data.items[_next_index] %}
-  <div class="middle-align">
-    <span>{% include session/item.html item=session_data %}</span>
-
-
-    {% assign _next_item = site.data.sessions[_next_segment] %}
-    {% if _next_item %}
-      <span class="material-symbols-outlined md-24">navigate_next</span>
-      {% if _next_item.url %}
-        <a href="/session/{{ _next_item.url }}">
-          {% include session/item.html item=_next_item %}
-        </a>
-      {% else %}
-        {% include session/item.html item=_next_item %}
-      {% endif %}
-    {% endif %}
-  </div>
-</div>