Skip to content

Show fewer lines for class cards on wider screens #190

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Show fewer lines for class cards on wider screens #190

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
691c958
Show fewer lines for class cards on wider screens
wishdasher Apr 19, 2019
d792723
Merge branch 'master' into card-lines
georgiashay Oct 8, 2019
b1c6e47
Merge branch 'master' into card-lines
georgiashay Dec 29, 2020
0821acb
Add default height for lint
georgiashay Dec 29, 2020
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
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Expand Down
37 changes: 30 additions & 7 deletions src/components/Class.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<v-badge slot-scope="{ hover }" overlap right color="rgba(0,0,0,0)" style="width:100%;">
<v-card
v-if="classInfo == 'placeholder'"
class="placeholder classbox"
class="placeholder"
>
<v-container fill-height>
<v-layout align-center justify-center>
Expand All @@ -23,22 +23,32 @@

<v-card
v-else
:id="'class'+classInfo.id.replace('.','')+semesterIndex"
:id="'class' + classInfo.id.replace('.','') + semesterIndex"
draggable
@dragstart="dragStart"
@click="$store.commit('pushClassStack', classInfo.id)"
>
<!-- This extra div is necessary because we can't set style with background-color on the v-card. -->
<div :class="cardClass(classInfo)">
<v-icon style="margin: 4px" small @click="$store.commit('removeClass', {classInfo: classInfo, classIndex: classIndex}); $event.stopPropagation();">
<div :class="cardClass(classInfo)" :style="cardHeight">
<v-icon
style="margin: 4px"
small
@click="$store.commit('removeClass', {classInfo: classInfo, classIndex: classIndex}); $event.stopPropagation();"
>
cancel
</v-icon>
<v-card-text class="card-text">
<span style="font-weight: bold; font-size: 1.1em;">{{ classInfo.id }}</span> {{ classInfo.title }}
<span style="font-weight: bold; font-size: 1.1em;">{{ classInfo.id }}</span>
{{ classInfo.title }}
</v-card-text>
</div>
</v-card>
<v-btn v-if="warnings.length>0&&(!classInfo.overrideWarnings||hover)" slot="badge" icon @click="warningDialog = true">
<v-btn
v-if="warnings.length > 0 && (!classInfo.overrideWarnings || hover)"
slot="badge"
icon
@click="warningDialog = true"
>
<v-icon medium>
warning
</v-icon>
Expand Down Expand Up @@ -103,6 +113,19 @@ export default {
shouldOverrideWarnings: this.classInfo.overrideWarnings
};
},
computed: {
cardHeight: function () {
switch (this.$vuetify.breakpoint.name) {
/* Chosen for n lines in the card, working with the set padding and margins. */
case 'xs': return 'height: 5.8em;'; // 3 lines
case 'sm': return 'height: 5.8em;'; // 3 lines
case 'md': return 'height: 5.8em;'; // 3 lines
case 'lg': return 'height: 4.2em;'; // 2 lines
case 'xl': return 'height: 4.2em;'; // 2 lines
default: return 'height: 5.8em;'; // 3 lines
}
}
},
methods: {
dragStart: function (event) {
event.dataTransfer.setData('classData', JSON.stringify({ isNew: false, classInfo: this.classInfo, classIndex: this.classIndex }));
Expand Down Expand Up @@ -137,14 +160,14 @@ export default {
.classbox {
display: flex;
align-items: flex-start;
height: 5.8em; /* Chosen for three lines in the card, working with the set padding and margins. */
overflow: hidden;
padding: .2em .4em .4em .2em;
/* Multi-line truncation is not a supported feature of CSS right now.
Optimally, we would have multi-line truncation within the cards, but
currently extra words are clipped.
text-overflow: ellipsis;
white-space: nowrap; */
hyphens: auto;
}

.placeholder {
Expand Down