askclass-course-theme 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2c4497dc0bdd7bfef0d4ec7fb2c8a4542d66672c03f190b4f3f98e1488014066
4
- data.tar.gz: a2b1205e39c4e2278892e1f952761b9b2193ad8379b9600197256f1786680395
3
+ metadata.gz: 88944da73226846738e890fd869201ead4c90ba175b15b5f84589280692f6249
4
+ data.tar.gz: 903afe597c3581bd5c2f47dd1dc810cd3bf9a31018adb946588e6ad6782adf33
5
5
  SHA512:
6
- metadata.gz: 636f91253c0d636c2c4bab55363129591685549807c78a95c20df4555f2c9b5a2a7b07ef3a507779be3a0168e6432da018f2810620973fd603b36c4ff74d0f83
7
- data.tar.gz: cffa8e8e9c34692536abc8d1e951acb953b32ebd9887eaff449fc65f3fc51f5f82df9be36ab04c9e96ea4c14b6f1d570da6d7fbd10f11dfdc871bfbbbc85cfb5
6
+ metadata.gz: e080960a5865377a9726c3bb6b4af43c63ddd022f601dbdf600daa10fbf859f8f780cac9fa5789a79389fc3069680b6e66bf7f6d92256bc874cd92ac46f31e78
7
+ data.tar.gz: 7d627370226b11b2129663257b326fc60e10e720599a94cec02ee4393d345014a0a172daf53404ac42ab7a16a435fbbcc1c210dded45ccfc25b3bf8a72c86268
data/README.md CHANGED
@@ -1,17 +1,25 @@
1
1
  # AskClass News Theme
2
- [![Build]][Build Link] [![CodeQL]][CodeQL Link]
2
+ [![Deploy Jekyll]][Deploy Jekyll Link] [![Build]][Build Link] [![CodeQL]][CodeQL Link]
3
3
 
4
4
  Simple responsive Jekyll theme for a course syllabus.
5
5
 
6
6
  ## Installation
7
7
 
8
+ Starting fresh:
8
9
  ```sh
9
- # If starting fresh add this
10
10
  $ echo 'source "https://rubygems.org"' > Gemfile
11
+ $ echo 'theme: askclass-course-theme/ > _config.yml
12
+ $ bundle
13
+ $ jekyll serve
14
+ ```
11
15
 
16
+ Copy and edit `_config.yml`.
17
+ Copy `index.html`, `pwabuilder-sw.jq`, `404.html`, `_data`, and `content` to the root dir.
18
+
19
+ Existing project:
20
+ ```sh
12
21
  $ echo 'gem "askclass-course-theme"' >> Gemfile
13
22
  $ sed -i '1 s/^/theme: askclass-course-theme\n/' _config.yml
14
- $ bundle
15
23
  ```
16
24
 
17
25
  ----
@@ -45,7 +53,12 @@ The theme is available as open source under the terms of the [MPL-2.0 License].
45
53
  [MPL-2.0 License]: https://opensource.org/licenses/MPL-2.0
46
54
  [Contributor Covenant]: http://contributor-covenant.org
47
55
  [Card Colors]: https://acn.askclass.com/2022/06/18/card-colors
56
+
57
+ [Deploy Jekyll]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/pages.yml/badge.svg
58
+ [Deploy Jekyll Link]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/pages.yml
59
+
48
60
  [Build]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/gem-push.yml/badge.svg
49
61
  [Build Link]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/gem-push.yml
62
+
50
63
  [CodeQL]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/codeql-analysis.yml/badge.svg
51
64
  [CodeQL Link]: https://github.com/beAuthentic/askclass-course-theme/actions/workflows/codeql-analysis.yml
@@ -1,49 +1,50 @@
1
- {% assign course = site.data.course %}
1
+ {%- assign course = site.data.course -%}
2
2
  <ul class="grid">
3
- {% for segment in course.segments %}
4
- {% assign info = site.data.syllabus[segment] %}
5
- {% if info %}
3
+ {%- for segment in course.segments -%}
4
+ {%- assign info = site.data.syllabus[segment] -%}
5
+ {%- if info -%}
6
6
  <li class="card-tab {{ info.theme }}">
7
7
  <div class="top-bar">{{ info.segment[0] }}</div>
8
8
  <div class="tab">{{ info.segment[1] }}</div>
9
9
  <div class="header">
10
10
  <a href="/segment/{{ segment }}">
11
- {% if info.begin and info.end %}
12
- {{ info.begin | date: site.acc.date_format }} - {{ info.end | date: site.acc.date_format }}
13
- {% else %}
14
- {{ info.date }}
15
- {% endif %}
11
+ {%- include date_range.html info=info -%}
16
12
  </a>
17
13
  </div>
18
14
  <div class="body">
19
- {% if info.image %}
15
+ {%- if info.desc -%}
16
+ <h4>{{ info.desc }}</h4>
17
+ {%- endif -%}
18
+ {%- if info.image -%}
20
19
  <img src="/assets/loading.svg" data="{{ info.thumb | default: info.image }}" alt="{{ info.title }}" />
21
- {% endif %}
22
- {% for item in info.items %}
23
- {% assign session = site.data.sessions[item] %}
20
+ {%- endif -%}
21
+ {%- for item in info.items -%}
22
+ {%- assign session = site.data.sessions[item] -%}
24
23
  <div class="item">
25
24
  <div class="middle-align">
26
25
  <span class="material-symbols-outlined">{{ session.icon }}</span>
27
26
  <h3>{{ session.header }}</h3>
28
- {% if session.due %}
29
- <small class="due" title="Due {{ session.due | date: site.acc.date_format }}">
30
- <span class="material-symbols-outlined">alarm_on</span>
31
- {{ session.due | date: site.acc.date_format }}
32
- </small>
33
- {% endif %}
34
27
  </div>
28
+ {%- if session.due -%}
29
+ <small class="due"
30
+ data-date="{{ session.due }}"
31
+ title="Due {{ session.due | date: site.acc.date_format }}">
32
+ <span class="material-symbols-outlined">alarm_on</span>
33
+ {{ session.due | date: '%b %e' }}
34
+ </small>
35
+ {%- endif -%}
35
36
 
36
- {% if session.url %}
37
+ {%- if session.url -%}
37
38
  <a href="/session/{{ session.url }}" title="{{ session.title }}">{{ session.title }}</a>
38
- {% else %}
39
+ {%- else -%}
39
40
  {{ session.title }}
40
- {% endif %}
41
+ {%- endif -%}
41
42
 
42
- {% if session.part %}
43
+ {%- if session.part -%}
43
44
  <small>(Part {{ session.part }})</small>
44
- {% endif %}
45
+ {%- endif -%}
45
46
  </div>
46
- {% endfor %}
47
+ {%- endfor -%}
47
48
  </div>
48
49
  <div class="control">
49
50
  <a class="button" href="/segment/{{ segment }}">
@@ -52,6 +53,16 @@
52
53
  </a>
53
54
  </div>
54
55
  </li>
55
- {% endif %}
56
- {% endfor %}
56
+ {%- endif -%}
57
+ {%- endfor -%}
57
58
  </ul>
59
+
60
+ <script defer>
61
+ const due = document.querySelectorAll('.due');
62
+ due.forEach( el => {
63
+ const d = new Date(el.dataset.date.split('-')).getTime();
64
+ if (d < Date.now()) {
65
+ el.classList.add('past');
66
+ }
67
+ });
68
+ </script>
@@ -0,0 +1,21 @@
1
+ {%- assign _d = include.info -%}
2
+
3
+ {%- if _d.begin and _d.end -%}
4
+ {%- assign y1 = _d.begin | date: '%Y' -%}
5
+ {%- assign y2 = _d.end | date: '%Y' -%}
6
+ {%- if y1 == y2 -%}
7
+ {%- assign m1 = _d.begin | date: '%m' -%}
8
+ {%- assign m2 = _d.end | date: '%m' -%}
9
+ {{ _d.begin | date: '%b %e - ' }}
10
+ {%- if m1 == m2 -%}
11
+ {{ _d.end | date: '%e, %y' }}
12
+ {%- else -%}
13
+ {{ _d.end | date: '%b %e, %y' }}
14
+ {%- endif -%}
15
+ {%- else -%}
16
+ {{ _d.begin | date: '%b %e, %y-' }}{{ _d.end | date: '%b %e, %y' }}
17
+ {%- endif -%}
18
+ {%- elsif _d.date | date: '%b %e, %y' -%}
19
+ {{ _d.date }}
20
+ {%- endif -%}
21
+
@@ -1,10 +1,5 @@
1
1
  {% assign info = include.info %}
2
2
  <section class="center-align">
3
3
  <h1 class="special">{{ info.title }}</h1>
4
-
5
- {% if info.begin and info.end %}
6
- {{ info.begin | date: '%b %e' }} - {{ info.end | date: '%b %e, %Y' }}
7
- {% else %}
8
- {{ info.date }}
9
- {% endif %}
4
+ {%- include date_range.html info=include.info -%}
10
5
  </section>
@@ -1,44 +1,48 @@
1
- {% assign info = include.info %}
1
+ {%- assign info = include.info -%}
2
2
 
3
3
  <ul class="grid">
4
- {% for item in info.items %}
5
- {% assign session = site.data.sessions[item] %}
4
+ {%- for item in info.items -%}
5
+ {%- assign session = site.data.sessions[item] -%}
6
6
  <li class="card-tab {{ info.theme }}">
7
7
 
8
- {% if session.type %}
8
+ {%- if session.type -%}
9
9
  <div class="top-bar">{{ session.type }}</div>
10
- <div class="tab">{{ session.sequence }}</div>
11
- {% elsif session.sequence %}
10
+ {%- elsif session.sequence -%}
12
11
  <div class="top-bar">{{ site.data.course.session_tag }}</div>
13
- <div class="tab">{{ session.sequence }}</div>
14
- {% else %}
12
+ {%- else -%}
15
13
  <div class="top-bar">&nbsp;</div>
16
- {% endif %}
14
+ {%- endif -%}
15
+
16
+ {%- if session.sequence -%}
17
+ <div class="tab">{{ session.sequence }}</div>
18
+ {%- elsif session.icon -%}
19
+ <div class="tab material-symbols-outlined">{{ session.icon }}</div>
20
+ {%- endif -%}
17
21
 
18
- {% if session.due %}
22
+ {%- if session.due -%}
19
23
  <div class="header">
20
24
  <span class="material-symbols-outlined">alarm_on</span>
21
25
  {{ session.due | date: '%b %e, %y' }}
22
26
  </div>
23
- {% elsif session.type %}
27
+ {%- elsif session.type -%}
24
28
  <div class="header">{{ session.header }}</div>
25
- {% else %}
29
+ {%- else -%}
26
30
  <div class="header">&nbsp;</div>
27
- {% endif %}
31
+ {%- endif -%}
28
32
 
29
33
  <div class="body">
30
- {% if session.url %}
34
+ {%- if session.url -%}
31
35
  <h3><a href="/session/{{ session.url }}">{{ session.title }}</a></h3>
32
- {% else %}
36
+ {%- else -%}
33
37
  <h3>{{ session.title }}</h3>
34
- {% endif %}
38
+ {%- endif -%}
35
39
 
36
- {% if session.part %}
40
+ {%- if session.part -%}
37
41
  <div class="item">
38
42
  Part {{ session.part }}
39
43
  </div>
40
- {% endif %}
44
+ {%- endif -%}
41
45
  </div>
42
46
  </li>
43
- {% endfor %}
47
+ {%- endfor -%}
44
48
  </ul>
@@ -1,35 +1,40 @@
1
1
  <section class="center-align special">
2
- {% if session_data.header %}
2
+ {%- if session_data.header -%}
3
3
  <div>{{ session_data.header }}</div>
4
- {% endif %}
4
+ {%- endif -%}
5
5
 
6
6
  <h1 class="special">{{ session_data.title }}</h1>
7
7
 
8
- {% if session_data.part %}
8
+ {%- if session_data.part -%}
9
9
  <div>Part {{ session_data.part }}</div>
10
- {% endif %}
10
+ {%- endif -%}
11
11
 
12
- {% include segment/nav.html segment=session_data.segment %}
12
+ {%- include segment/nav.html segment=session_data.segment -%}
13
13
 
14
14
  <div>
15
- {% if segment_data.begin and segment_data.end %}
16
- {{ segment_data.begin | date: '%b %e' }} - {{ segment_data.end | date: '%b %e, %Y' }}
17
- {% else %}
18
- {{ segment_data.date }}
19
- {% endif %}
15
+ {%- include date_range.html info=segment_data -%}
20
16
  </div>
21
17
 
22
18
  <div class="middle-align">
23
- {% for item in segment_data.items %}
24
- {% assign _info = site.data.sessions[item] %}
19
+ {%- for item in segment_data.items -%}
20
+ {%- assign _info = site.data.sessions[item] -%}
21
+ {%- if _info.sequence -%}
22
+ {%- assign _mso = '' -%}
23
+ {%- else -%}
24
+ {%- assign _mso = 'material-symbols-outlined' -%}
25
+ {%- endif -%}
25
26
 
26
- {% if item == session_id %}
27
- <span class="lesson-number current">{{ _info.sequence }}</span>
28
- {% elsif _info.url %}
29
- <a class="lesson-number" href="/session/{{ _info.url }}">{{ _info.sequence }}</a>
30
- {% else %}
27
+ {%- if item == session_id -%}
28
+ <span class="lesson-number current {{_mso}}">
29
+ {{ _info.sequence | default: _info.icon }}
30
+ </span>
31
+ {%- elsif _info.url -%}
32
+ <a class="lesson-number {{_mso}}" href="/session/{{ _info.url }}">
33
+ {{ _info.sequence | default: _info.icon }}
34
+ </a>
35
+ {%- else -%}
31
36
  <span class="lesson-number">{{ _info.sequence }}</span>
32
- {% endif %}
33
- {% endfor %}
37
+ {%- endif -%}
38
+ {%- endfor -%}
34
39
  </div>
35
40
  </section>
@@ -1,11 +1,16 @@
1
- {%- if session_data.type == 'Assignment' -%}
2
- <pre>
3
- {%- if session_data.points -%}
4
- Points: {{ session_data.points }}
5
- {%- endif -%}
6
-
7
- {%- if session_data.due %}
8
- Due: {{ session_data.due | date: '%B %d, %Y' }}
9
- {%- endif -%}
10
- </pre>
1
+ {%- if session_data.points or session_data.due -%}
2
+ <table style="width: max-content">
3
+ {%- if session_data.points -%}
4
+ <tr>
5
+ <td>Points</td>
6
+ <td>{{ session_data.points }}</td>
7
+ </tr>
8
+ {%- endif -%}
9
+ {%- if session_data.due -%}
10
+ <tr>
11
+ <td>Due</td>
12
+ <td>{{ session_data.due | date: '%B %d, %Y' }}</td>
13
+ </tr>
14
+ {%- endif -%}
15
+ </table>
11
16
  {%- endif -%}
@@ -5,7 +5,7 @@
5
5
  <html lang="en">
6
6
  {% include header.html %}
7
7
  <body>
8
- {% include logo.html size=50 title=site.data.course.id %}
8
+ {% include logo.html size=50 %}
9
9
  {% include segment/header.html info=info %}
10
10
 
11
11
  {% include segment/index.html info=info %}
@@ -13,5 +13,6 @@
13
13
  {{ content }}
14
14
 
15
15
  {% include segment/nav.html segment=segment %}
16
+ {% include footer.html %}
16
17
  </body>
17
18
  </html>
@@ -6,7 +6,7 @@
6
6
  <html lang="en">
7
7
  {% include header.html %}
8
8
  <body>
9
- {% include logo.html size=50 title=site.data.course.id %}
9
+ {% include logo.html size=50 title=site.acc.short_name %}
10
10
  {% include session/header.html %}
11
11
 
12
12
  <section class="center-align spacer content">
data/_sass/_lesson.scss CHANGED
@@ -27,6 +27,11 @@ samp {
27
27
  &.current {
28
28
  background-color: var(--secondaryColor);
29
29
  }
30
+ &.material-symbols-outlined {
31
+ font-size: 25px;
32
+ padding: 5px;
33
+ font-family: 'Material Symbols Outlined';
34
+ }
30
35
  }
31
36
 
32
37
  a.lesson-number{
data/_sass/_tab.scss CHANGED
@@ -51,8 +51,10 @@ html {
51
51
  display: block;
52
52
  font-size: 12px;
53
53
  }
54
- .material-symbols-outlined {
55
- font-size: 24px;
54
+ &.material-symbols-outlined {
55
+ font-family: 'Material Symbols Outlined';
56
+ line-height: 0.7;
57
+ font-size: 37px;
56
58
  }
57
59
  }
58
60
 
@@ -74,7 +76,7 @@ html {
74
76
 
75
77
  .body {
76
78
  flex-grow: 2;
77
- padding: 0 10px;
79
+ padding: 10px;
78
80
  overflow: hidden;
79
81
  text-align: left;
80
82
  h2 {
@@ -82,11 +84,17 @@ html {
82
84
  margin-top: 10px;
83
85
  line-height: 2.4rem;
84
86
  }
87
+ h4 {
88
+ color: inherit;
89
+ margin: 5px 0;
90
+ }
91
+ .item:not(:first-child) {
92
+ border-top: 3px outset;
93
+ }
85
94
  .item {
86
95
  margin-bottom: 20px;
87
96
  text-align: left;
88
97
  font-size: $size-font;
89
- border-top: 3px outset;
90
98
  line-height: normal;
91
99
  h3 {
92
100
  margin: 3px 5px 0 5px;
@@ -98,10 +106,14 @@ html {
98
106
  border-radius: 5px;
99
107
  margin: 0 3px;
100
108
  padding: 2px 5px;
109
+ width: fit-content;
101
110
  .material-symbols-outlined {
102
111
  font-size: 1.3em;
103
112
  font-variation-settings: 'FILL' 1;
104
113
  }
114
+ &.past {
115
+ background-color: var(--darkColor);
116
+ }
105
117
  }
106
118
  }
107
119
  pre, code {
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: askclass-course-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - AskClass
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-10-01 00:00:00.000000000 Z
11
+ date: 2022-10-03 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -35,6 +35,7 @@ files:
35
35
  - README.md
36
36
  - _config.yml
37
37
  - _includes/course.html
38
+ - _includes/date_range.html
38
39
  - _includes/foot/mathjax.html
39
40
  - _includes/foot/pwaupdate.html
40
41
  - _includes/footer.html
@@ -42,7 +43,6 @@ files:
42
43
  - _includes/head/meta.html
43
44
  - _includes/header.html
44
45
  - _includes/logo.html
45
- - _includes/segment/common.html
46
46
  - _includes/segment/header.html
47
47
  - _includes/segment/index.html
48
48
  - _includes/segment/nav.html
@@ -64,7 +64,6 @@ files:
64
64
  - _sass/_post.scss
65
65
  - _sass/_tab-colors.scss
66
66
  - _sass/_tab.scss
67
- - _sass/_tab.scsse
68
67
  - _sass/_table.scss
69
68
  - _sass/_video.scss
70
69
  - assets/css/grid.scss
@@ -1,25 +0,0 @@
1
- {% assign classes = site.data.common.index.classes %}
2
-
3
- <div class="center-align">
4
- <a href="/"><img src="/assets/logo.svg" width="100" title="{{ site.title }}"/></a>
5
-
6
- <h1 class="special">{{ page.title }}</h1>
7
- </div>
8
-
9
- <ul>
10
- {% for class in classes %}
11
- {% assign item = site.data.common.index[class] %}
12
- {% assign count = site.data.common[class] | size %}
13
- <li class="card-tab c{{ forloop.index }}">
14
- <div class="top-bar">{{ item.title }}</div>
15
- <div class="tab">{{ count }}</div>
16
- <div class="header">&nbsp;</div>
17
-
18
- {% if count > 0 %}
19
- <div class="body">
20
- <h2><a href="/{{ page.collection }}/{{ class }}">{{ item.title }}</a></h2>
21
- </div>
22
- {% endif %}
23
- </li>
24
- {% endfor %}
25
- </ul>
data/_sass/_tab.scsse DELETED
@@ -1,125 +0,0 @@
1
- $color-bg: whitesmoke;
2
- $color-fg: #444;
3
- $size-font: 16px;
4
-
5
- @mixin special() {
6
- color: $color-bg;
7
- font-family: var(--specialFont);
8
- }
9
-
10
- html {
11
- --bg: #{$color-bg};
12
- --fg: #{$color-fg};
13
- --fontSize: #{$size-font};
14
- }
15
-
16
- .card-tab {
17
- display: flex;
18
- flex-direction: column;
19
- position: relative;
20
- background-image: linear-gradient(225deg, $color-fg 50%, transparent 50%);
21
- background-size: 120px 27px;
22
- background-repeat: no-repeat;
23
- background-position: right top;
24
- border-radius: 2px;
25
- box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
26
- border-top-width: 22px;
27
- border-top-style: solid;
28
- border-top-color: $color-fg;
29
- background-color: $color-bg;
30
- color: $color-fg;
31
- text-transform: none;
32
- height: calc(100% - 22px);
33
- }
34
-
35
- .top-bar {
36
- @include special();
37
- margin: -21px 0 0 5px;
38
- font-size: 15px;
39
- text-align: left;
40
- }
41
-
42
- .tab {
43
- @include special();
44
- position: absolute;
45
- top: -10px;
46
- right: 3px;
47
- font-size: 45px;
48
- line-height: 30px;
49
- text-align: right;
50
- small {
51
- display: block;
52
- font-size: 12px;
53
- }
54
- .material-symbols-outlined {
55
- font-size: 24px;
56
- }
57
- }
58
-
59
- .header {
60
- margin: 4px 50px 0 5px;
61
- text-align: left;
62
- line-height: 1;
63
- height: 30px;
64
- font-size: 20px;
65
- overflow: hidden;
66
- text-overflow: ellipsis;
67
- display: -webkit-box;
68
- -webkit-line-clamp: 2;
69
- -webkit-box-orient: vertical;
70
- font-family: var(--secondaryFont);
71
- a {
72
- color: var(--bgColor);
73
- }
74
- }
75
-
76
- .body {
77
- flex-grow: 2;
78
- padding: 0 10px;
79
- overflow: hidden;
80
- text-align: left;
81
- h2 {
82
- word-break: break-word;
83
- margin-top: 10px;
84
- line-height: 2.4rem;
85
- }
86
- .item {
87
- margin-bottom: 20px;
88
- text-align: left;
89
- font-size: $size-font;
90
- border-top: 3px outset;
91
- line-height: normal;
92
- h3 {
93
- margin: 0 0 0 5px;
94
- color: $color-fg;
95
- }
96
- }
97
- pre, code {
98
- color: inherit;
99
- }
100
- }
101
-
102
- .control {
103
- margin-top: 10px;
104
- padding: 10px;
105
- display: flex;
106
- justify-content: space-between;
107
- a {
108
- text-decoration: none;
109
- font-size: $size-font;
110
- display: contents;
111
- &.button {
112
- display: flex;
113
- border-radius: 5px;
114
- padding: 5px 10px;
115
- color: white!important;
116
- background-color: $color-fg;
117
- }
118
- }
119
- .tags {
120
- font-family: var(--secondaryFont);
121
- white-space: nowrap;
122
- text-overflow: ellipsis;
123
- overflow: hidden;
124
- }
125
- }