Skip to content
Snippets Groups Projects
Commit 219bc82a authored by Sven Kästle's avatar Sven Kästle
Browse files

feat: New annotation card design

parent 5e2a8c64
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
+ 75
− 26
View file @ 219bc82a
......@@ -29,42 +29,91 @@ ol {
margin: 10px;
/* background-color: white; */
}
.card {
.spacing {
height: 10px;
/* background-color: orange; */
}
.hl {
background-color: yellow;
}
.annotation-card {
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
padding: 5px;
display: inline-block;
background-color: white;
width: 100%;
}
.card:hover {
.annotation-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.cardAvatar {
width: 50px;
height: 50px;
background: orange;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 50px;
.annotation-header {
padding: 5px;
display: flex;
flex-wrap: wrap;
align-items: center;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: white; }
.annotation-header i {
font-size: 11px;
}
.annotation-header span {
font-size: 11px;
margin-left: 5px;
margin-right: 5px;
}
.annotation-header a:link {
color: white;
font-size: 25px;
display: inline-block;
vertical-align: middle;
text-decoration: none;
}
.cardContent {
color: black;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
.annotation-header a:visited {
color: white;
text-decoration: none;
}
.spacing {
height: 10px;
/* background-color: orange; */
.annotation-header a:active {
color: white;
text-decoration: none;
}
.hl {
background-color: yellow;
.annotation-header a:hover {
color: #e6e6e6;
text-decoration: none;
}
.annotation-header-title {
display: flex;
flex-flow: column;
width: calc(100% - 40px);
}
.annotation-header-toggle {
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.annotation-body {
padding: 8px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.annotation-body p {
margin: 0px;
font-size: 13px;
}
.overflow-hidden {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.annotation-footer {
padding: 5px;
padding-top: 0px;
text-align: right;
font-size: 9px;
color: lightgrey;
}
.annotation-footer span {
margin-left: 5px;
}
gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
+ 125
− 14
View file @ 219bc82a
......@@ -146,23 +146,72 @@ function displayAnnotation(annotation) {
)
}
var dateIcon = "fas fa-calendar";
if (timestampIsToday(annotation.timestamp)) {
dateIcon = "fas fa-clock";
}
// insert annotation card
list.prepend(
$('<li>').mouseenter(function () {
addHighlightedText(annotation.startCharacter, annotation.endCharacter);
}).mouseleave(function () {
deleteHighlightedText();
}).data(annotation).attr('class', 'listelement').attr('id', annotation.id).append(
$('<div>').attr('class', 'card').append(
$('<div>').attr('class', 'cardAvatar').css('background-color', color).append(
$('<b>').append(annotation.id.substr(0,1))
)
).append(
$('<div>').attr('class', 'cardContent').append(
$('<span>').append(annotation.body.substring(0, 5) + "...")
)
$('<li>')
.mouseenter(function () {
addHighlightedText(annotation.startCharacter, annotation.endCharacter);
})
.mouseleave(function () {
deleteHighlightedText();
})
.data(annotation)
.attr('class', 'listelement')
.append(
$('<div>').attr('class', 'annotation-card')
.append(
$('<div>').attr('class', 'annotation-header')
.css('background-color', color)
.append(
$('<div>').attr('class', 'annotation-header-title')
.append(
$('<div>').attr('class', 'overflow-hidden')
.append(
$('<i>').attr('class', 'fas fa-user')
)
.append(
$('<span>').append(annotation.userId)
)
)
.append(
$('<div>').attr('class', 'overflow-hidden')
.append(
$('<i>').attr('class', 'fas fa-bookmark')
)
.append(
$('<span>').append('title' + annotation.userId)
)
)
)
.append(
$('<div>').attr('class', 'annotation-header-toggle')
.append(
$('<i>').attr('class', 'fas fa-chevron-down')
)
)
)
.append(
$('<div>').attr('class', 'annotation-body')
.append(
$('<p>').attr('class', 'overflow-hidden').append(annotation.body)
)
)
.append(
$('<div>').attr('class', 'annotation-footer')
.append(
$('<i>').attr('class', dateIcon)
)
.append(
$('<span>').append(timestampToReadableTime(annotation.timestamp))
)
)
)
)
);
}
......@@ -222,3 +271,65 @@ function getRandomColor() {
(Math.floor(Math.random()*56)+170) +
')';
}
/**
* Calculate and build a readable timestamp from an unix timestamp
*
* @param timestamp a unix timestamp
* @returns {string} a readable timestamp
*/
function timestampToReadableTime(timestamp) {
// build Date object from timestamp
var annotationDate = new Date(timestamp);
// declare response
var responseTimestamp;
// if annotation is from today
if (timestampIsToday(timestamp)) {
// get hours from date
var hours = annotationDate.getHours();
// get minutes from date
var minutes = "0" + annotationDate.getMinutes();
// get seconds from date
// var seconds = "0" + annotationDate.getSeconds();
// build readable timestamp
responseTimestamp = hours + ":" + minutes.substr(-2);
}
// else annotation is not from today
else {
// get date
var date = annotationDate.getDate();
// get month
var month = annotationDate.getMonth();
// get year
var year = annotationDate.getFullYear();
// build readable timestamp
responseTimestamp = date + "." + month + "." + year;
}
return responseTimestamp;
}
/**
* Check if given timestamp is from today
*
* @param timestamp the given timestamp in milliseconds
* @returns {boolean} returns true if the timestamp is from today
*/
function timestampIsToday(timestamp) {
// now
var now = new Date();
// build Date object from timestamp
var date = new Date(timestamp);
// return true if timestamp is today
if (now.getDate() == date.getDate() && now.getMonth() == date.getMonth() && now.getFullYear() == date.getFullYear()) {
return true;
}
else {
return false;
}
}
gemeinsamforschen/src/main/webapp/pages/annotation_document.html
+ 1
− 1
View file @ 219bc82a
......@@ -15,7 +15,7 @@
<!-- css - styles -->
<link rel="stylesheet" href="../assets/css/styles.css">
<!-- css - font awesome -->
<link rel="stylesheet" href="../assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- css - sidebar -->
<link rel="stylesheet" href="../assets/css/Sidebar-Menu.css">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment