From 13eef4d304cabb143682cbf89c0eaf442021cc33 Mon Sep 17 00:00:00 2001 From: Ryon Coleman Date: Wed, 10 Mar 2021 04:47:48 +0000 Subject: [PATCH] feat: improve course section sidebar styling and add tag browser mockup --- html-templates/sections/courseSection.tpl | 188 +++++++++++++----- site-root/sass/slate/_common.scss | 72 ++++++- site-root/sass/slate/_modules.scss | 3 +- .../sass/slate/modules/_key-value-list.scss | 13 +- site-root/sass/slate/modules/_people.scss | 40 ++-- site-root/sass/slate/modules/_tag-list.scss | 30 +++ 6 files changed, 267 insertions(+), 79 deletions(-) create mode 100644 site-root/sass/slate/modules/_tag-list.scss diff --git a/html-templates/sections/courseSection.tpl b/html-templates/sections/courseSection.tpl index e5f684087..5469d3c87 100644 --- a/html-templates/sections/courseSection.tpl +++ b/html-templates/sections/courseSection.tpl @@ -95,38 +95,45 @@
-
-

{$Section->Code|escape}

- - {if $Section->Course->Description} -
{$Section->Course->Description|escape|markdown}
- {/if} - -
-
-
Term
-
{$Section->Term->Title}
-
- - {if $.User} -
-
Schedule
-
{$Section->Schedule->Title}
-
-
-
Location
-
{$Section->Location->Title}
+
+
+

+
+
+ {$Section->Code|escape} +

+ + {if $Section->Course->Description} +
{$Section->Course->Description|escape|markdown}
{/if} - {if $Section->Notes} +
-
Notes
-
{$Section->Notes|escape|markdown}
+
Term
+
{$Section->Term->Title}
- {/if} -
-
+ + {if $.User} +
+
Schedule
+
{$Section->Schedule->Title}
+
+
+
Location
+
{$Section->Location->Title}
+
+ {/if} + + {if $Section->Notes} +
+
Notes
+
{$Section->Notes|escape|markdown}
+
+ {/if} +
+
+
{template linksEntry entry} {if $entry.href}{/if} @@ -135,9 +142,22 @@ {/template} {foreach item=linkGroup from=Slate\UI\SectionProfile::getLinks($Section)} + {* spaces in key names here are parsed wrong *} + {$linksIcons = array( + 'CourseTools' => 'wrench', + 'OtherWebsites' => 'external-link', + )} + {$labelNoSpaces = str_replace(' ', '', $linkGroup.label)} +
-

{linksEntry $linkGroup}

+

+
+ +
+ + {linksEntry $linkGroup} +

{foreach item=link from=$linkGroup.children} @@ -157,27 +177,103 @@
{/foreach} -

Teacher{tif count($Section->ActiveTeachers) != 1 ? s}

-
    - {foreach item=Teacher from=$Section->ActiveTeachers} -
  • {personLink $Teacher photo=true}
    • - {foreachelse} -

    No instructors currently listed.

    - {/foreach} -
+
+
+

+ + + + Tags +

+ + {$tags = array( + "lorem ipsum", + "dolor sit amet", + "consectetur", + "adipiscing", + "elit borbi consequat", + "turpis", + "feugiat", + "foo", + "bar", + "baz", + "qux" + );} + + {* if there's 10 or more, show the first five and collapse the rest *} + {if count($tags) >= 10} + {$tagsShown = array_slice($tags, 0, 5)} + {$tagsHidden = array_slice($tags, 5)} + {else} + {* less than 10, just show them all *} + {$tagsShown = $tags} + {/if} + + + + {if $tagsHidden} +
+ + See all + See less + + + +
+ {/if} +
+
+ +
+
+

+ + + + Teacher{tif count($Section->ActiveTeachers) != 1 ? s} +

+
    + {foreach item=Teacher from=$Section->ActiveTeachers} +
  • {personLink $Teacher photo=true}
    • + {foreachelse} +

    No instructors currently listed.

    + {/foreach} +
+
+
{if $.User} -

Students

-
    - {foreach item=Student from=$Section->ActiveStudents} -
  • {personLink $Student photo=true}
    • - {foreachelse} -

    No students currently listed.

    - {/foreach} -
+
+
+

+ + + + Students +

+
    + {foreach item=Student from=$Section->ActiveStudents} +
  • {personLink $Student photo=true}
    • + {foreachelse} +

    No students currently listed.

    + {/foreach} +
+
+
{/if} -
-{/block} \ No newline at end of file +{/block} diff --git a/site-root/sass/slate/_common.scss b/site-root/sass/slate/_common.scss index 2324fc178..a60173a13 100644 --- a/site-root/sass/slate/_common.scss +++ b/site-root/sass/slate/_common.scss @@ -45,13 +45,33 @@ body { } } -.text-left { text-align: left !important; } -.text-right { text-align: right !important; } -.text-center { text-align: center !important; } -.text-justify { text-align: justify !important; } -.text-nowrap { white-space: nowrap !important; } -.text-nolead { margin-top: 0 !important; } -.text-notrail { margin-bottom: 0 !important; } +.text-left { + text-align: left !important; +} + +.text-right { + text-align: right !important; +} + +.text-center { + text-align: center !important; +} + +.text-justify { + text-align: justify !important; +} + +.text-nowrap { + white-space: nowrap !important; +} + +.text-nolead { + margin-top: 0 !important; +} + +.text-notrail { + margin-bottom: 0 !important; +} .sidebar-item { margin: 1em 0 3em; @@ -59,6 +79,40 @@ body { .empty-text { margin: .5em 0; } + + .sidebar-collapsible-toggle { + background-color: rgba($text-color, .05); + border-radius: .25em; + cursor: pointer; + font-size: .75em; + margin-top: 1em; + padding: .25em; + text-align: center; + text-transform: uppercase; + + &:hover, + &:focus { + background-color: rgba($text-color, .1); + } + } + + .collapsible-collapse-text { + display: none; + } + + .sidebar-collapsible[open] { + >.sidebar-collapsible-toggle { + margin-bottom: 1em; + } + + .collapsible-expand-text { + display: none; + } + + .collapsible-collapse-text { + display: unset; + } + } } .sidebar-item-title { @@ -94,7 +148,7 @@ body { width: 250px; } - > .inner { + >.inner { background-position: center; background-repeat: no-repeat; background-size: cover; @@ -111,4 +165,4 @@ body { margin: 1em 0 0; } } -} \ No newline at end of file +} diff --git a/site-root/sass/slate/_modules.scss b/site-root/sass/slate/_modules.scss index e243bb362..f0956ea03 100644 --- a/site-root/sass/slate/_modules.scss +++ b/site-root/sass/slate/_modules.scss @@ -15,5 +15,6 @@ @import 'modules/slate-menu'; @import 'modules/source-grid'; @import 'modules/splitview'; +@import 'modules/tag-list'; @import 'modules/todo'; -@import 'modules/wizards'; \ No newline at end of file +@import 'modules/wizards'; diff --git a/site-root/sass/slate/modules/_key-value-list.scss b/site-root/sass/slate/modules/_key-value-list.scss index 7391c7371..cf6b8d626 100644 --- a/site-root/sass/slate/modules/_key-value-list.scss +++ b/site-root/sass/slate/modules/_key-value-list.scss @@ -13,6 +13,7 @@ .kv-key, .kv-value { margin: 0; + padding: 0; } .kv-key { @@ -34,12 +35,16 @@ .kv-pair { display: table-row; } - + .kv-key, - .kv-value { + .kv-value, + > .kv-key, + > .kv-value { display: table-cell; + padding-bottom: 0; + padding-top: 0; } - + .kv-key { padding-right: 1em; } @@ -51,4 +56,4 @@ .kv-key { text-align: right; } -} \ No newline at end of file +} diff --git a/site-root/sass/slate/modules/_people.scss b/site-root/sass/slate/modules/_people.scss index c6e271f8b..a9937d3a0 100644 --- a/site-root/sass/slate/modules/_people.scss +++ b/site-root/sass/slate/modules/_people.scss @@ -2,40 +2,42 @@ @include background-size(cover); } -$roster-avatar-size: 64px; -$roster-item-width: $roster-avatar-size * 1.3125; -$roster-font-size: $font-size * .6875; -$roster-line-height: $line-height * .8; - .roster { + display: grid; + grid-gap: 1em .5em; + grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; - + li { - display: inline-block; - font-size: $roster-font-size; - height: $roster-avatar-size + (($roster-line-height * $roster-font-size) * 2.5); - line-height: $roster-line-height; + font-size: .75em; + line-height: 1.25; list-style: none; - margin-bottom: .75em; - overflow: hidden; + min-width: 0; text-align: center; - vertical-align: text-bottom; - width: $roster-item-width; } - + a { + display: block; text-decoration: none; - + &:hover, &:focus { text-decoration: underline; } } - + .avatar { + border-radius: 100%; + box-shadow: 0 1px 2px rgba(0,0,0,.1); margin: 0 auto .25em; } + + .name { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } } .about-bio { @@ -43,7 +45,7 @@ $roster-line-height: $line-height * .8; color: inherit; font-size: 1em; } - + .well-title { color: $heading-color; font-size: 1.2em; @@ -58,4 +60,4 @@ $roster-line-height: $line-height * .8; text-overflow: ellipsis; white-space: nowrap; } -} \ No newline at end of file +} diff --git a/site-root/sass/slate/modules/_tag-list.scss b/site-root/sass/slate/modules/_tag-list.scss new file mode 100644 index 000000000..ba0dad9aa --- /dev/null +++ b/site-root/sass/slate/modules/_tag-list.scss @@ -0,0 +1,30 @@ +.tag-list { + list-style: none; + margin: 0; + padding: 0; + + >li { + display: inline-block; + } + + .tag { + background-color: rgba($link-color, .05); + border-radius: .25em; + display: block; + font-size: .875em; + margin-bottom: .25em; + padding: 0 .5em; + text-decoration: none; + + &:hover, + &:focus { + background-color: rgba($link-color, .1); + } + } + + .tag-count { + color: rgba($text-color, .4); + font-size: .75em; + font-weight: bold; + } +}