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

[NAT-2] Extra/Explanatory information field #355

Merged
merged 4 commits into from
Feb 6, 2023
Merged

[NAT-2] Extra/Explanatory information field #355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
06c4398
added the ability to add extra information to fields
CommanderStorm Jan 17, 2023
55c4316
Make it a modal on mobile
octycs Feb 1, 2023
15b5d2c
Styling changes for the desktop props popover
octycs Feb 5, 2023
35d34ff
Fix glitch on pageload
octycs Feb 5, 2023
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
13 changes: 13 additions & 0 deletions openapi.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,10 @@ paths:
text: 'Boltzmannstr. 3, EG, 85748 Garching b. München'
- name: Sitzplätze
text: '522'
extra:
header: Genauere Angaben
body: "für Prüfungen: 102 in eng, 71 in weit, 49 in corona"

calendar_url: 'https://campus.tum.de/tumonline/tvKalender.wSicht?cOrg=19691&cRes=12559&cReadonly=J'
ranking_factors:
rank_combined: 900
Expand Down Expand Up @@ -1155,6 +1159,15 @@ components:
text:
type: string
example: 5602.EG.001
extra:
type: object
properties:
header:
type: string
example: Genauere Angaben
body:
type: string
example: "für Prüfungen: 102 in eng, 71 in weit, 49 in corona"
required:
- name
- text
Expand Down
4 changes: 4 additions & 0 deletions webclient/src/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,10 @@ navigatum = (() => {
error: {
msg: null,
},
modal: {
header: null,
body: null,
},
},
methods: {
searchFocus: function () {
Expand Down
20 changes: 20 additions & 0 deletions webclient/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,9 +325,29 @@
</div>
</footer>

<!-- General message modal -->
<div class="modal" :class="{'active': modal.body}">
<div class="modal-overlay" @click="modal.body = null"></div>
<div class="modal-container">
<div class="modal-header">
<button
class="btn btn-clear float-right"
aria-label="Close"
@click="modal.body = null"></button>
<div v-if="modal.header" class="modal-title h5">{{ modal.header }}</div>
</div>
<div class="modal-body">
<div class="content">
<p>{{ modal.body }}</p>
</div>
</div>
</div>
</div>

</div>
<!-- END of Vue.js template code -->


<!-- Feedback modal -->
<div class="modal" id="feedback-modal">
<div id="feedback-overlay" class="modal-overlay"></div>
Expand Down
34 changes: 32 additions & 2 deletions webclient/src/views/view/view-view.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,7 +396,17 @@
<tbody>
<tr v-for="prop in view_data.props.computed">
<td><strong>{{ prop.name }}</strong></td>
<td>{{ prop.text }}</td>
<td>{{ prop.text }}
<div
class="popover"
v-if="prop.extra?.body"
@click="showPropExtra(prop.extra)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
</div>
</td>
</tr>
<tr v-if="view_data.props.links">
<td><strong>${{ _.view_view.info_table.links }}$</strong></td>
Expand Down Expand Up @@ -440,7 +450,27 @@
<tbody>
<tr v-for="prop in view_data.props.computed">
<td><strong>{{ prop.name }}</strong></td>
<td>{{ prop.text }}</td>
<td>{{ prop.text }}
<div class="popover" v-if="prop.extra?.body">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
<div class="popover-container">
<div class="card">
<div class="card-header" v-if="prop.extra.header">
{{ prop.extra.header }}
</div>
<div class="card-body">
{{ prop.extra.body }}
</div>
<div class="card-footer" v-if="prop.extra.footer">
{{ prop.extra.footer }}
</div>
</div>
</div>
</div>
</td>
</tr>
<tr v-if="view_data.props.links">
<td><strong>${{ _.view_view.info_table.links }}$</strong></td>
Expand Down
4 changes: 4 additions & 0 deletions webclient/src/views/view/view-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,10 @@ navigatum.registerView("view", {
hideImageShowcase: function () {
this.image.slideshow_open = false;
},
showPropExtra: function(propExtra) {
navigatum.app.modal.header = propExtra.header;
navigatum.app.modal.body = propExtra.body;
},
// This is called
// - on initial page load
// - when the view is loaded for the first time
Expand Down
16 changes: 16 additions & 0 deletions webclient/src/views/view/view-view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,6 +398,22 @@
&:last-child {
padding-left: 10px;
}

.popover {
.card {
box-shadow: 0px 0px 6px rgba(106, 106, 106, 0.08);
border: .05rem solid #e1e1e1;

.card-header {
font-weight: bold;
}
}

svg {
margin-left: 5px;
margin-bottom: -2px;
}
}
}

tr {
Expand Down