Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Task/popovers #42

Merged
merged 5 commits into from
Sep 22, 2021
Merged

Task/popovers #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d966245
enables popper on COI comp
bexar Sep 22, 2021
5d54fb1
fixes error on graph
bexar Sep 22, 2021
16f1553
removes sample popper from home
bexar Sep 22, 2021
791b46f
enables popper on GCD info
bexar Sep 22, 2021
3e9d199
enables popovers on concurrent and common courses
bexar Sep 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion pathways_vue/components/course/concurrent-courses.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,20 @@
<table class="table table-borderless">
<thead>
<tr class="bg-light text-dark">
<th scope="col" style="width: 10%">% <a href="#"><i class="bi bi-info-circle-fill"></i></a></th>
<th scope="col" style="width: 10%">
%
<a
tabindex="0"
class="info-course-concurrent"
role="button"
data-bs-toggle="popover"
data-bs-trigger="focus"
title="Percentage"
data-bs-content="Description needed."
>
<i class="bi bi-info-circle-fill"></i>
</a>
</th>
<th scope="col" class="visually-hidden" style="width: 30%">Percentage Graph</th>
<th scope="col" style="width: 30%">Concurrent Course</th>
<th scope="col" style="width: 30%">COI</th>
Expand Down Expand Up @@ -91,11 +104,16 @@
</template>

<script>
import { Popover } from 'bootstrap';

export default {
name: 'ConcurrentCourses',
data() {
return {};
},
mounted() {
var popover = new Popover(document.querySelector('.info-course-concurrent'));
},
methods: {},
};
</script>
Expand Down
18 changes: 12 additions & 6 deletions pathways_vue/components/course/grade-distribution.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,16 @@
<p>
This graph represents the distribution of grades for every student who completed <strong>CHEM 162</strong> over the past 5 years.
<a
href="#"
tabindex="0"
class="info-gcd"
role="button"
data-bs-toggle="popover"
title="What is Course Grade Distribution?"
data-bs-content="Description goes here."
><i class="bi bi-info-circle-fill"></i
></a>
data-bs-trigger="focus"
title="Course Grade Distribution"
data-bs-content="What is CGD?"
>
<i class="bi bi-info-circle-fill"></i>
</a>
</p>
<div id="gcd_graph" />
<p><small>Number of grades in this sample: 6988 (5 years). Data not instructor-specific.</small></p>
Expand All @@ -22,6 +26,7 @@

<script>
import * as d3 from 'd3';
import { Popover } from 'bootstrap';

export default {
name: "GradeDistribution",
Expand Down Expand Up @@ -57,6 +62,7 @@ export default {
},
mounted() {
this.generateGCD();
var popover = new Popover(document.querySelector('.info-gcd'));
},
methods: {
generateGCD() {
Expand Down Expand Up @@ -134,7 +140,7 @@ export default {
return 'translate(' + x(d.x0) + ',' + y(d.length) + ')';
})
.attr('width', function (d) {
return x(d.x1) - x(d.x0) - 1;
return x(d.x1) - x(d.x0);
})
.attr('height', function (d) {
return height - y(d.length);
Expand Down
23 changes: 16 additions & 7 deletions pathways_vue/components/course/outcome-index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,35 @@
Using prior course data, this index compares estimated fail/withdrawal rates against actual
fail/withdrawal rates.
<a
href="#"
tabindex="0"
class="info-popper"
role="button"
data-bs-toggle="popover"
title="What is COI?"
data-bs-trigger="focus"
title="Course Outcome Indicator"
data-bs-content="A lower number (0-2) indicates that fewer people completed the course than predicted. A middle number (2-3) indicates the course is on target with predictions. A higher (3-5) number indicates that more people completed the course than anticipated."
><i class="bi bi-info-circle-fill"></i
></a>
>
<i class="bi bi-info-circle-fill"></i>
</a>
</p>
<div id="coiGraph" />
<div class="coi-key">
<p class="fw-bold">Key</p>

<dl class="row">
<dt class="col-sm-6">
<i style="color: #ff8c00" class="bi bi-triangle-fill"></i> <span class="key-desc">CHEM 162</span>
<i style="color: #ff8c00" class="bi bi-triangle-fill"></i>
<span class="key-desc">CHEM 162</span>
</dt>
<dd class="col-sm-6 key-coi">COI: 2.7</dd>
<dt class="col-sm-6">
<i class="bi bi-circle-fill"></i> <span class="key-desc">Average course in CHEM curriculum</span>
<i class="bi bi-circle-fill"></i>
<span class="key-desc">Average course in CHEM curriculum</span>
</dt>
<dd class="col-sm-6 key-coi">COI: 2.0</dd>
<dt class="col-sm-6">
<i class="bi bi-square-fill"></i> <span class="key-desc">Average 100 Level Course at UW</span>
<i class="bi bi-square-fill"></i>
<span class="key-desc">Average 100 Level Course at UW</span>
</dt>
<dd class="col-sm-6 key-coi">COI: 1.8</dd>
</dl>
Expand All @@ -41,6 +48,7 @@

<script>
import * as d3 from 'd3';
import { Popover } from 'bootstrap';

export default {
name: 'OutcomeScore',
Expand All @@ -55,6 +63,7 @@ export default {
},
mounted() {
this.generateRect();
var popover = new Popover(document.querySelector('.info-popper'));
},
methods: {
generateRect() {
Expand Down
36 changes: 30 additions & 6 deletions pathways_vue/components/major/common-courses.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,20 @@
<table class="table table-borderless">
<thead>
<tr class="bg-light text-dark">
<th scope="col" style="width: 10%">% info</th>
<th scope="col" style="width: 10%">
%
<a
tabindex="0"
class="info-major-common"
role="button"
data-bs-toggle="popover"
data-bs-trigger="focus"
title="Percentage"
data-bs-content="Description of common courses for majors."
>
<i class="bi bi-info-circle-fill"></i>
</a>
</th>
<th scope="col" class="visually-hidden" style="width: 30%">Percentage Graph</th>
<th scope="col" style="width: 30%">Common Course</th>
<th scope="col" style="width: 30%">CDI</th>
Expand All @@ -34,7 +47,9 @@
</div>
</td>
<td>
<a href="/course/?code=CSS+415" class="router-link-active"><span class="badge bg-link-color text-light">CSS 415</span></a>
<a href="/course/?code=CSS+415" class="router-link-active"
><span class="badge bg-link-color text-light">CSS 415</span></a
>
Preparation for General Chemistry
</td>
<td>5.55</td>
Expand All @@ -54,8 +69,10 @@
</div>
</td>
<td>
<a href="/course/?code=MATH+124" class="router-link-active"><span class="badge bg-link-color text-light">MATH 124</span></a> Calculus
with Analytic Geometry I
<a href="/course/?code=MATH+124" class="router-link-active"
><span class="badge bg-link-color text-light">MATH 124</span></a
>
Calculus with Analytic Geometry I
</td>
<td>3.51</td>
</tr>
Expand All @@ -74,8 +91,10 @@
</div>
</td>
<td>
<a href="/course/?code=CHEM+317" class="router-link-active"><span class="badge bg-link-color text-light">CHEM 317</span></a> Inorganic
Chemistry Laboratory
<a href="/course/?code=CHEM+317" class="router-link-active"
><span class="badge bg-link-color text-light">CHEM 317</span></a
>
Inorganic Chemistry Laboratory
</td>
<td>7.2</td>
</tr>
Expand All @@ -86,11 +105,16 @@
</template>

<script>
import { Popover } from 'bootstrap';

export default {
name: 'CommonCourses',
data() {
return {};
},
mounted() {
var popover = new Popover(document.querySelector('.info-major-common'));
},
methods: {},
};
</script>
Expand Down
14 changes: 1 addition & 13 deletions pathways_vue/pages/home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,6 @@
>
About this app <i class="bi bi-info-circle"></i>
</button>

<div class="mt-3">
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>

</div>
</div>
</template>
Expand All @@ -93,7 +88,7 @@ import { proccessSeaMajors } from '../helpers/major';
import Layout from '../layout.vue';
import SearchChooser from '../components/search/chooser.vue';

import { Modal, Popover } from 'bootstrap';
import { Modal } from 'bootstrap';

export default {
components: {
Expand All @@ -111,13 +106,6 @@ export default {
mounted() {
// show the welcome modal when the component is mounted
this.showWelcomeModal();

// enable popovers everywhere (from bs5 documentation)
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new Popover(popoverTriggerEl)
})

},
methods: {
showWelcomeModal(event){
Expand Down