Skip to content

Commit

Permalink
Bugfix/fix wrong size of drop locations (#605)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lovaiible
lovaiible authored and Stephan Krusche committed Jun 26, 2019
1 parent 2d67546 commit 69c9146
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 49 deletions.
30 changes: 16 additions & 14 deletions .../webapp/app/quiz/participate/drag-and-drop-question/drag-and-drop-question.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,19 @@ <h4 class="question-title-display">
></jhi-quiz-scoring-infostudent-modal>
</span>
</div>
<div class="drag-and-drop-area">
<div class="instructions" *ngIf="showResult">
<span jhiTranslate="artemisApp.dragAndDropQuestion.showingSampleSolution" *ngIf="showingSampleSolution"></span>
<span jhiTranslate="artemisApp.dragAndDropQuestion.showingYourAnswer" *ngIf="!showingSampleSolution"></span>
<div class="instructions" *ngIf="showResult">
<span jhiTranslate="artemisApp.dragAndDropQuestion.showingSampleSolution" *ngIf="showingSampleSolution"></span>
<span jhiTranslate="artemisApp.dragAndDropQuestion.showingYourAnswer" *ngIf="!showingSampleSolution"></span>
<div *ngIf="showResult && !forceSampleSolution">
<div class="btn btn-outline-primary" *ngIf="!showingSampleSolution" (click)="showSampleSolution()">
{{ 'artemisApp.quizQuestion.showSampleSolution' | translate }}
</div>
<div class="btn btn-outline-primary" *ngIf="showingSampleSolution" (click)="hideSampleSolution()">
{{ 'artemisApp.quizQuestion.hideSampleSolution' | translate }}
</div>
</div>
</div>
<div class="drag-and-drop-area">
<div class="background-area">
<jhi-secured-image *ngIf="question.backgroundFilePath" [src]="question.backgroundFilePath" (endLoadingProcess)="changeLoading($event)"></jhi-secured-image>
<div class="click-layer">
Expand Down Expand Up @@ -206,11 +214,13 @@ <h4 class="question-title-display">
</div>
</div>
</div>
<div class="drag-and-drop-items" *ngIf="!showResult">
<div class="instructions">
<div class="drag-and-drop-items">
<div class="instructions" *ngIf="!showResult">
<span jhiTranslate="artemisApp.dragAndDropQuestion.studentInstructions"></span>
</div>
<div *ngIf="showResult"></div>
<div
*ngIf="!showResult"
class="drag-items"
[ngClass]="dropAllowed ? 'drop-allowed' : ''"
(onDropSuccess)="onDragDrop(null, $event)"
Expand All @@ -229,14 +239,6 @@ <h4 class="question-title-display">
></jhi-drag-item>
</div>
</div>
<div *ngIf="showResult && !forceSampleSolution">
<div class="btn btn-outline-primary" *ngIf="!showingSampleSolution" (click)="showSampleSolution()">
{{ 'artemisApp.quizQuestion.showSampleSolution' | translate }}
</div>
<div class="btn btn-outline-primary" *ngIf="showingSampleSolution" (click)="hideSampleSolution()">
{{ 'artemisApp.quizQuestion.hideSampleSolution' | translate }}
</div>
</div>
</div>
</div>
</div>
3 changes: 2 additions & 1 deletion ...in/webapp/app/quiz/participate/drag-and-drop-question/drag-and-drop-question.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ export class DragAndDropQuestionComponent implements OnChanges {
onDragDrop(dropLocation: DropLocation | null, dragEvent: any) {
this.drop();
const dragItem = dragEvent.dragData;

if (dropLocation) {
// check if this mapping is new
if (this.dragAndDropQuestionUtil.isMappedTogether(this.mappings, dragItem, dropLocation)) {
Expand Down Expand Up @@ -300,6 +301,6 @@ export class DragAndDropQuestionComponent implements OnChanges {
const clickLayer = document.getElementsByClassName('click-layer').item(0) as HTMLElement;
clickLayer.style.width = image.width + 'px';
clickLayer.style.height = image.height + 'px';
}, 500);
}, 300);
}
}
2 changes: 1 addition & 1 deletion src/main/webapp/app/quiz/participate/drag-and-drop-question/drag-item.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<jhi-secured-image *ngIf="dragItem.pictureFilePath" [src]="dragItem.pictureFilePath" [mobileDragAndDrop]="isMobile"></jhi-secured-image>
</div>
<div class="drag-item-text" *ngIf="dragItem && !dragItem.pictureFilePath">
<div fittext [activateOnResize]="true" [maxFontSize]="17" [minFontSize]="12">
<div fittext [activateOnResize]="true" [maxFontSize]="17" [minFontSize]="5" [delay]="150">
<span dnd-draggable [dragEnabled]="!clickDisabled" [dragData]="dragItem">{{ dragItem.text }}</span>
</div>
</div>
Expand Down
93 changes: 60 additions & 33 deletions src/main/webapp/content/scss/quiz.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,13 @@
right: 20px;
max-width: 30%;

@media (max-width: 900px) {
position: relative;
top: 0;
right: 0;
max-width: 100%;
}

&.result {
font-weight: bold;
color: green;
Expand Down Expand Up @@ -463,8 +470,6 @@

.drop-location {
position: absolute;
z-index: 1;

display: flex;
flex-direction: row;
align-items: flex-start;
Expand All @@ -473,12 +478,13 @@
}

img {
max-width: fit-content;
width: 100%;
}
}

.instructions {
display: flex;
justify-content: space-between;
margin: 10px 0;
font-weight: 500;
}
Expand Down Expand Up @@ -516,21 +522,34 @@
.click-layer {
.drop-location {
.drag-item {
background: transparent;
border: none;
position: relative;
min-width: 160px;
max-width: 360px;

.drag-item-text {
@media (max-width: 812px) {
padding: 0;
}
}

img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto !important;
margin: auto;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}

div {
@media (max-width: 812px) {
padding: 0 !important;
}

span {
@media (max-width: 480px) {
font-size: 12px;
}
}
}
}
}
Expand All @@ -540,8 +559,6 @@
.drag-and-drop-items {
@media (orientation: landscape) and (min-width: 900px) {
margin: -5px 0 0 20px;
max-width: 200px;
width: 20%;
}

.instructions {
Expand All @@ -550,25 +567,45 @@
}
}

.drag-items {
> div {
width: 100%;

@media (orientation: landscape) and (min-width: 900px) {
margin: 0;
width: 200px;
}
}

.drag-item {
height: auto;
.drag-items {
width: 100%;

.drag-item-picture {
height: 160px;
}
@media (orientation: landscape) and (min-width: 900px) {
margin: 0;
width: 200px;
}
}
}
}
}

.edit-dnd-question {
.drag-items {
.drag-item {
height: 160px;
img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto !important;
margin: auto;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
}
}
}

.edit-dnd-question,
.edit-sa-question {
.markupEditorArea {
Expand Down Expand Up @@ -822,12 +859,14 @@

.drag-item {
div {
padding: 6px;
line-height: 1;

span {
border: none;
padding: 0;
vertical-align: middle;
display: inline-block;
white-space: nowrap;
}
}
}
Expand Down Expand Up @@ -913,21 +952,13 @@
background: transparent;
border: none;
position: relative;
height: 160px;
min-width: 160px;
max-width: 360px;
margin: 10px 4px;

img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto !important;
margin: auto;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
max-width: 160px;
max-height: 160px;
}

&.no-click {
Expand All @@ -942,8 +973,6 @@

.drag-item-picture {
cursor: move;
width: 0;
height: 0;
padding: 0;
margin: 0;
}
Expand Down Expand Up @@ -1263,8 +1292,6 @@ table.answer-options-result {

.drop-location {
position: absolute;
z-index: 1;

display: flex;
flex-direction: row;
align-items: flex-start;
Expand Down

0 comments on commit 69c9146

Please sign in to comment.