Skip to content

Commit

Permalink
feat: improve course section sidebar styling and add tag browser mockup
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryon
ryon committed Mar 10, 2021
1 parent f17ea40 commit 13eef4d
Show file tree
Hide file tree
Showing 6 changed files with 267 additions and 79 deletions.
188 changes: 142 additions & 46 deletions html-templates/sections/courseSection.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,38 +95,45 @@
<div class="sidebar-col">
<div class="col-inner">

<section class="well course-section-details">
<h3 class="well-title">{$Section->Code|escape}</h3>

{if $Section->Course->Description}
<div class="muted markdown-ct">{$Section->Course->Description|escape|markdown}</div>
{/if}

<dl class="kv-list align-right">
<div class="dli">
<dt>Term</dt>
<dd>{$Section->Term->Title}</dd>
</div>

{if $.User}
<div class="dli">
<dt>Schedule</dt>
<dd>{$Section->Schedule->Title}</dd>
</div>
<div class="dli">
<dt>Location</dt>
<dd>{$Section->Location->Title}</dd>
<div class="sidebar-item">
<section class="well course-section-details">
<h3 class="well-title">
<div class="pull-right muted">
<i class="fa fa-info-circle"></i>
</div>
{$Section->Code|escape}
</h3>

{if $Section->Course->Description}
<div class="muted markdown-ct">{$Section->Course->Description|escape|markdown}</div>
{/if}

{if $Section->Notes}
<dl class="kv-list align-right">
<div class="dli">
<dt>Notes</dt>
<dd class="markdown-ct">{$Section->Notes|escape|markdown}</dd>
<dt>Term</dt>
<dd>{$Section->Term->Title}</dd>
</div>
{/if}
</dl>
</section>

{if $.User}
<div class="dli">
<dt>Schedule</dt>
<dd>{$Section->Schedule->Title}</dd>
</div>
<div class="dli">
<dt>Location</dt>
<dd>{$Section->Location->Title}</dd>
</div>
{/if}

{if $Section->Notes}
<div class="dli">
<dt>Notes</dt>
<dd class="markdown-ct">{$Section->Notes|escape|markdown}</dd>
</div>
{/if}
</dl>
</section>
</div>

{template linksEntry entry}
{if $entry.href}<a href="{$entry.href|escape}" {$entry.attribs}>{/if}
Expand All @@ -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)}

<div class="sidebar-item">
<div class="well profile-contact-info">
<h3 class="well-title">{linksEntry $linkGroup}</h3>
<h3 class="well-title">
<div class="pull-right muted">
<i class="fa fa-{$linksIcons[$labelNoSpaces]|default:'link'}"></i>
</div>

{linksEntry $linkGroup}
</h3>

<dl class="kv-list">
{foreach item=link from=$linkGroup.children}
Expand All @@ -157,27 +177,103 @@
</div>
{/foreach}

<h3>Teacher{tif count($Section->ActiveTeachers) != 1 ? s}</h3>
<ul class="roster teachers">
{foreach item=Teacher from=$Section->ActiveTeachers}
<li>{personLink $Teacher photo=true}</li>
{foreachelse}
<p class="empty-text">No instructors currently listed.</p>
{/foreach}
</ul>
<div class="sidebar-item">
<div class="well">
<h3 class="well-title">
<span class="pull-right muted">
<i class="fa fa-tag"></i>
</span>
Tags
</h3>

{$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}

<ul class="tag-list">
{foreach item=tag from=$tagsShown}
<li>
<a class="tag" href="#">{$tag} <span class="tag-count">{rand(1, 100)}</span></a>
</li>
{/foreach}
</ul>

{if $tagsHidden}
<details class="sidebar-collapsible">
<summary class="sidebar-collapsible-toggle">
<span class="collapsible-expand-text">See all</span>
<span class="collapsible-collapse-text">See less</span>
</summary>

<ul class="tag-list">
{foreach item=tag from=$tagsHidden}
<li>
<a class="tag" href="#">{$tag} <span class="tag-count">{rand(1, 100)}</span></a>
</li>
{/foreach}
</ul>
</details>
{/if}
</div>
</div>

<div class="sidebar-item">
<div class="well">
<h3 class="well-title">
<span class="pull-right muted">
<i class="fa fa-star"></i>
</span>
Teacher{tif count($Section->ActiveTeachers) != 1 ? s}
</h3>
<ul class="roster teachers">
{foreach item=Teacher from=$Section->ActiveTeachers}
<li>{personLink $Teacher photo=true}</li>
{foreachelse}
<p class="empty-text">No instructors currently listed.</p>
{/foreach}
</ul>
</div>
</div>

{if $.User}
<h3>Students</h3>
<ul class="roster students">
{foreach item=Student from=$Section->ActiveStudents}
<li>{personLink $Student photo=true}</li>
{foreachelse}
<p class="empty-text">No students currently listed.</p>
{/foreach}
</ul>
<div class="sidebar-item">
<div class="well">
<h3 class="well-title">
<span class="pull-right muted">
<i class="fa fa-graduation-cap"></i>
</span>
Students
</h3>
<ul class="roster students">
{foreach item=Student from=$Section->ActiveStudents}
<li>{personLink $Student photo=true}</li>
{foreachelse}
<p class="empty-text">No students currently listed.</p>
{/foreach}
</ul>
</div>
</div>
{/if}

</div>
</div>
</div>
{/block}
{/block}
72 changes: 63 additions & 9 deletions site-root/sass/slate/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,20 +45,74 @@ 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;

.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 {
Expand Down Expand Up @@ -94,7 +148,7 @@ body {
width: 250px;
}

> .inner {
>.inner {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Expand All @@ -111,4 +165,4 @@ body {
margin: 1em 0 0;
}
}
}
}
3 changes: 2 additions & 1 deletion site-root/sass/slate/_modules.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
@import 'modules/wizards';
13 changes: 9 additions & 4 deletions site-root/sass/slate/modules/_key-value-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
.kv-key,
.kv-value {
margin: 0;
padding: 0;
}

.kv-key {
Expand All @@ -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;
}
Expand All @@ -51,4 +56,4 @@
.kv-key {
text-align: right;
}
}
}
Loading

0 comments on commit 13eef4d

Please sign in to comment.